0.0.1 • Published 11 months ago
remix-tree-routes v0.0.1
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',
},
})
},
}),
],
})
0.0.1
11 months ago