0.0.1 • Published 11 months ago

remix-tree-routes v0.0.1

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
11 months ago

remix-tree-routes

Define remix routes using file system tree.

introduction

With remix's flat route, to define these routes

path
/
/about
/file/*
/posts/
/posts/:post

I'll go with something like this

app/
├── routes/
│   ├── about.tsx
│   ├── file.$.tsx
│   ├── _index.tsx
│   ├── posts.$post.tsx
│   ├── posts._index.tsx
│   └── posts.tsx
└── root.tsx

which will give me this

pathmatchedlayout
/app/routes/_index.tsxapp/root.tsx
/aboutapp/routes/about.tsxapp/root.tsx
/file/*app/routes/file.$.tsxapp/root.tsx
/posts/app/routes/posts._index.tsxapp/routes/posts.tsx
/posts/:postapp/routes/posts.$post.tsxapp/routes/posts.tsx

With this package, to define the same routes, I'll go with something like this

app
├── pages
│   ├── about
│   │   └── route.tsx
│   ├── file
│   │   └── route.splat.tsx
│   ├── main.tsx
│   └── posts
│       ├── main.tsx
│       ├── :post
│       │   └── route.tsx
│       └── route.tsx
└── root.tsx

which will give me this

pathmatchedlayout
/app/pages/main.tsxapp/root.tsx
/aboutapp/pages/about/route.tsxapp/root.tsx
/file/*app/pages/file/route.splat.tsxapp/root.tsx
/posts/app/pages/posts/main.tsxapp/pages/posts.tsx
/posts/:postapp/pages/posts/:post/route.tsxapp/pages/posts.tsx

Or, with file mode, I'll go with something like this

app/
├── pages
│   ├── about.tsx
│   ├── file.splat.tsx
│   ├── main.tsx
│   ├── posts
│   │   ├── main.tsx
│   │   └── :post.tsx
│   └── posts.tsx
└── root.tsx

which will give me this

pathmatchedlayout
/app/pages/main.tsxapp/root.tsx
/aboutapp/pages/about.tsxapp/root.tsx
/file/*app/pages/file.splat.tsxapp/root.tsx
/posts/app/pages/posts/main.tsxapp/pages/posts.tsx
/posts/:postapp/pages/posts/:post.tsxapp/pages/posts.tsx

usage

the simplest way

import { defineConfig } from 'vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { routes } from 'remix-tree-routes'

export default defineConfig({
  plugins: [remix({ routes })],
})

or with some customization

import { defineConfig } from 'vite'
import { vitePlugin as remix } from '@remix-run/dev'
import { defineRoutes } from 'remix-tree-routes'

export default defineConfig({
  plugins: [
    remix({
      routes() {
        // all of these parameters are the default values and optional.
        return defineRoutes({
          mode: 'dir',
          appDirectory: 'app',
          routesDirectory: 'pages',
          extensions: ['js', 'jsx', 'ts', 'tsx'],
          exclude: /^_|\.test/,
          filenames: {
            route: 'route',
            index: 'main',
            splat: 'splat',
          },
        })
      },
    }),
  ],
})
0.0.1

11 months ago