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

path	matched	layout
`/`	`app/routes/_index.tsx`	`app/root.tsx`
`/about`	`app/routes/about.tsx`	`app/root.tsx`
`/file/*`	`app/routes/file.$.tsx`	`app/root.tsx`
`/posts/`	`app/routes/posts._index.tsx`	`app/routes/posts.tsx`
`/posts/:post`	`app/routes/posts.$post.tsx`	`app/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

path	matched	layout
`/`	`app/pages/main.tsx`	`app/root.tsx`
`/about`	`app/pages/about/route.tsx`	`app/root.tsx`
`/file/*`	`app/pages/file/route.splat.tsx`	`app/root.tsx`
`/posts/`	`app/pages/posts/main.tsx`	`app/pages/posts.tsx`
`/posts/:post`	`app/pages/posts/:post/route.tsx`	`app/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

path	matched	layout
`/`	`app/pages/main.tsx`	`app/root.tsx`
`/about`	`app/pages/about.tsx`	`app/root.tsx`
`/file/*`	`app/pages/file.splat.tsx`	`app/root.tsx`
`/posts/`	`app/pages/posts/main.tsx`	`app/pages/posts.tsx`
`/posts/:post`	`app/pages/posts/:post.tsx`	`app/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',
          },
        })
      },
    }),
  ],
})