>() => {
8 | return {
9 | // @ts-expect-error
10 | Link: forwardRef(>({ to, params, ...props }: LinkProps, ref: LinkRef) => {
11 | const path = generatePath(typeof to === 'string' ? to : to.pathname, params || ({} as any))
12 | return (
13 | >({ to, params, ...props }: LinkProps) => {
21 | const path = generatePath(typeof to === 'string' ? to : to.pathname, params || ({} as any))
22 | return (
23 | , ModalPath extends string>() => {
6 | return {
7 | useParams: (path: P) => useParams() as Params[P],
8 | useNavigate: () => {
9 | const navigate = useNavigate()
10 |
11 | return useCallback(
12 | | number>(to: P, ...[options]: NavigateOptions) => {
13 | if (typeof to === 'number') return navigate(to)
14 | const path = generatePath(typeof to === 'string' ? to : to.pathname, options?.params || ({} as any))
15 | return navigate(typeof to === 'string' ? path : { pathname: path, search: to.search, hash: to.hash }, options)
16 | },
17 | [navigate],
18 | )
19 | },
20 | useModals: () => {
21 | const location = useLocation()
22 | const navigate = useNavigate()
23 |
24 | type Options = NavOptions &
25 | (P extends keyof Params ? { at?: P; params: Params[P] } : { at?: P; params?: never })
26 |
27 | return useMemo(() => {
28 | return {
29 | current: location.state?.modal || '',
30 | open:
(path: ModalPath, options?: Options
) => {
31 | const { at, state, ...opts } = options || {}
32 | const pathname = options?.params ? generatePath(at || '', options.params || {}) : at
33 | navigate(pathname || location.pathname, { ...opts, state: { ...location.state, ...state, modal: path } })
34 | },
35 | close:
(options?: Options
) => {
36 | const { at, state, ...opts } = options || {}
37 | const pathname = options?.params ? generatePath(at || '', options.params || {}) : at
38 | navigate(pathname || location.pathname, { ...opts, state: { ...location.state, ...state, modal: '' } })
39 | },
40 | }
41 | }, [location, navigate])
42 | },
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/react-router/src/client/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './hooks'
3 | export * from './types'
4 | export * from './utils'
5 |
--------------------------------------------------------------------------------
/packages/react-router/src/client/types.ts:
--------------------------------------------------------------------------------
1 | import { LinkProps as _LinkProps, NavigateOptions as NavOptions, NavigateProps as NavProps } from 'react-router'
2 |
3 | export type To = { pathname: Pathname; search?: string; hash?: string }
4 |
5 | type ComponentProps> = Path extends keyof Params
6 | ? { to: Path; params: Params[Path] }
7 | : Path extends { pathname: infer Pathname }
8 | ? Pathname extends keyof Params
9 | ? { to: To; params: Params[Pathname] }
10 | : { to: To; params?: never }
11 | : { to: Path; params?: never }
12 |
13 | export type LinkProps> = Omit<_LinkProps, 'to'> &
14 | ComponentProps
15 |
16 | export type NavigateProps> = Omit &
17 | ComponentProps
18 |
19 | export type NavigateOptions> = Path extends number
20 | ? []
21 | : Path extends keyof Params
22 | ? [NavOptions & { params: Params[Path] }]
23 | : Path extends { pathname: infer Pathname }
24 | ? Pathname extends keyof Params
25 | ? [NavOptions & { params: Params[Pathname] }]
26 | : [NavOptions & { params?: never }] | []
27 | : [NavOptions & { params?: never }] | []
28 |
--------------------------------------------------------------------------------
/packages/react-router/src/client/utils.ts:
--------------------------------------------------------------------------------
1 | import { generatePath, redirect } from 'react-router'
2 |
3 | export const utils = >() => {
4 | type Init = number | ResponseInit
5 | type RedirectOptions = P extends keyof Params ? [Init & { params: Params[P] }] : [Init & { params?: never }] | []
6 |
7 | return {
8 | redirect:
(url: P, ...[options]: RedirectOptions
) => {
9 | return redirect(options?.params ? generatePath(url, options.params) : url, options)
10 | },
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/react-router/src/core.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/core'
2 |
--------------------------------------------------------------------------------
/packages/react-router/src/index-lazy.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/react-router-lazy'
2 |
--------------------------------------------------------------------------------
/packages/react-router/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/react-router'
2 |
--------------------------------------------------------------------------------
/packages/react-router/src/plugin/generate.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process'
2 | import fs from 'fs'
3 | import path from 'path'
4 |
5 | import { createLogger } from 'vite'
6 | import { patterns } from '@generouted/core'
7 | import fg from 'fast-glob'
8 |
9 | import { Options } from './options'
10 | import { template } from './template'
11 |
12 | const generateRouteTypes = async (options: Options) => {
13 | const files = await fg(options.source.routes || './src/pages/**/[\\w[-]*.{jsx,tsx,mdx}', { onlyFiles: true })
14 | const modal = await fg(options.source.modals || './src/pages/**/[+]*.{jsx,tsx,mdx}', { onlyFiles: true })
15 |
16 | const filtered = files.filter((key) => !key.includes('/_') && !key.includes('/404'))
17 | const params: string[] = []
18 |
19 | const paths = filtered.map((key) => {
20 | const path = key
21 | .replace(...patterns.route)
22 | .replace(...patterns.splat)
23 | .replace(...patterns.param)
24 | .replace(/\([\w-]+\)\/|\/?_layout/g, '')
25 | .replace(/\/?index|\./g, '/')
26 | .replace(/(\w)\/$/g, '$1')
27 | .split('/')
28 | .map((segment) => segment.replace(...patterns.optional))
29 | .join('/')
30 |
31 | if (path) {
32 | const param = path.split('/').filter((segment) => segment.startsWith(':'))
33 |
34 | if (param.length || path.includes('*')) {
35 | const dynamic = param.length ? param.map((p) => p.replace(/:(.+)(\?)?/, '$1$2:') + ' string') : []
36 | const splat = path.includes('*') ? ["'*': string"] : []
37 | params.push(`'/${path}': { ${[...dynamic, ...splat].join('; ')} }`)
38 | }
39 |
40 | return path.length > 1 ? `/${path}` : path
41 | }
42 | })
43 |
44 | const modals = modal.map(
45 | (path) =>
46 | `/${path
47 | .replace(...patterns.route)
48 | .replace(/\+|\([\w-]+\)\//g, '')
49 | .replace(/(\/)?index/g, '')
50 | .replace(/\./g, '/')}`,
51 | )
52 |
53 | const types =
54 | `export type Path =\n | "${[...new Set(paths.filter(Boolean))].sort().join('"\n | "')}"`.replace(/"/g, '`') +
55 | '\n\n' +
56 | `export type Params = {\n ${params.sort().join('\n ')}\n}` +
57 | '\n\n' +
58 | `export type ModalPath = "${modals.sort().join('" | "') || 'never'}"`.replace(/"/g, modals.length ? '`' : '')
59 |
60 | const content = template.replace('// types', types)
61 | const count = paths.length + modals.length
62 |
63 | return { content, count }
64 | }
65 |
66 | const logger = createLogger('info', { prefix: '[generouted]' })
67 | let latestContent = ''
68 |
69 | export const generate = async (options: Options) => {
70 | const start = Date.now()
71 | const { content, count } = await generateRouteTypes(options)
72 | logger.info(`scanned ${count} routes in ${Date.now() - start} ms`, { timestamp: true })
73 |
74 | if (latestContent === content) return
75 | latestContent = content
76 |
77 | await fs.promises.writeFile(options.output, content)
78 |
79 | if (!options.format) return
80 | const prettier = path.resolve('./node_modules/.bin/prettier')
81 | if (fs.existsSync(prettier)) execSync(`${prettier} --write --cache ${options.output}`)
82 | }
83 |
--------------------------------------------------------------------------------
/packages/react-router/src/plugin/index.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { Plugin } from 'vite'
3 |
4 | import { generate } from './generate'
5 | import { defaultOptions, Options } from './options'
6 |
7 | export default function Generouted(options?: Partial): Plugin {
8 | const resolvedOptions = { ...defaultOptions, ...options }
9 |
10 | return {
11 | name: 'generouted/react-router',
12 | enforce: 'pre',
13 | configureServer(server) {
14 | const listener = (file = '') => (file.includes(path.normalize('/src/pages/')) ? generate(resolvedOptions) : null)
15 | server.watcher.on('add', listener)
16 | server.watcher.on('change', listener)
17 | server.watcher.on('unlink', listener)
18 | },
19 | buildStart(): Promise {
20 | return generate(resolvedOptions)
21 | },
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/react-router/src/plugin/options.ts:
--------------------------------------------------------------------------------
1 | export type Options = {
2 | source: { routes: string | string[]; modals: string | string[] }
3 | output: string
4 | format: boolean
5 | }
6 |
7 | export const defaultOptions: Options = {
8 | source: { routes: './src/pages/**/[\\w[-]*.{jsx,tsx,mdx}', modals: './src/pages/**/[+]*.{jsx,tsx,mdx}' },
9 | output: './src/router.ts',
10 | format: true,
11 | }
12 |
--------------------------------------------------------------------------------
/packages/react-router/src/plugin/template.ts:
--------------------------------------------------------------------------------
1 | export const template = `// Generouted, changes to this file will be overridden
2 | /* eslint-disable */
3 |
4 | import { components, hooks, utils } from '@generouted/react-router/client'
5 |
6 | // types
7 |
8 | export const { Link, Navigate } = components()
9 | export const { useModals, useNavigate, useParams } = hooks()
10 | export const { redirect } = utils()
11 | `
12 |
--------------------------------------------------------------------------------
/packages/react-router/src/react.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | export { React }
3 |
--------------------------------------------------------------------------------
/packages/react-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "esnext",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "declaration": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "react-jsx",
18 | "types": ["vite/client"]
19 | },
20 | "include": ["./src"]
21 | }
22 |
--------------------------------------------------------------------------------
/packages/react-router/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig([
4 | {
5 | entry: ['src/core.ts', 'src/index*', 'src/client'],
6 | format: ['esm'],
7 | dts: {
8 | entry: {
9 | core: './node_modules/generouted/dist/core.d.ts',
10 | index: './node_modules/generouted/dist/react-router.d.ts',
11 | 'index-lazy': './node_modules/generouted/dist/react-router-lazy.d.ts',
12 | 'client/index': 'src/client/index.ts',
13 | },
14 | },
15 | external: ['react', 'react-router'],
16 | noExternal: ['generouted'],
17 | inject: ['./src/react.js'],
18 | },
19 | {
20 | entry: ['src/plugin'],
21 | outDir: 'dist/plugin',
22 | format: ['cjs', 'esm'],
23 | dts: { entry: 'src/plugin/index.ts' },
24 | },
25 | ])
26 |
--------------------------------------------------------------------------------
/packages/solid-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@generouted/solid-router",
3 | "version": "1.20.0",
4 | "description": "Generated file-based routes for Solid Router and Vite",
5 | "author": "Omar Elhawary (https://omarelhawary.me)",
6 | "license": "MIT",
7 | "repository": "https://github.com/oedotme/generouted",
8 | "bugs": "https://github.com/oedotme/generouted/issues",
9 | "homepage": "https://github.com/oedotme/generouted#readme",
10 | "keywords": [
11 | "actions",
12 | "code-splitting",
13 | "data-loaders",
14 | "file-based-routing",
15 | "generate",
16 | "nested-layouts",
17 | "nextjs",
18 | "pages",
19 | "pre-loading ",
20 | "react",
21 | "react-location",
22 | "react-router",
23 | "react-router-dom",
24 | "remix",
25 | "router",
26 | "routes",
27 | "solid",
28 | "solid-router",
29 | "typescript",
30 | "vite"
31 | ],
32 | "type": "module",
33 | "exports": {
34 | ".": {
35 | "types": "./dist/index.d.ts",
36 | "import": "./dist/index.js"
37 | },
38 | "./core": {
39 | "types": "./dist/core.d.ts",
40 | "import": "./dist/core.js"
41 | },
42 | "./lazy": {
43 | "types": "./dist/index-lazy.d.ts",
44 | "import": "./dist/index-lazy.js"
45 | },
46 | "./client": {
47 | "types": "./dist/client/index.d.ts",
48 | "import": "./dist/client/index.js"
49 | },
50 | "./plugin": {
51 | "types": "./dist/plugin/index.d.ts",
52 | "require": "./dist/plugin/index.cjs",
53 | "import": "./dist/plugin/index.js"
54 | }
55 | },
56 | "typesVersions": {
57 | "*": {
58 | "*": [
59 | "./dist/index.d.ts"
60 | ],
61 | "core": [
62 | "./dist/core.d.ts"
63 | ],
64 | "lazy": [
65 | "./dist/index-lazy.d.ts"
66 | ],
67 | "client": [
68 | "./dist/client/index.d.ts"
69 | ],
70 | "plugin": [
71 | "./dist/plugin/index.d.ts"
72 | ]
73 | }
74 | },
75 | "files": [
76 | "dist"
77 | ],
78 | "scripts": {
79 | "dev": "tsup --watch",
80 | "build": "tsup --clean",
81 | "type-check": "tsc --noEmit"
82 | },
83 | "dependencies": {
84 | "fast-glob": "^3.3.3",
85 | "generouted": "^1.20.0"
86 | },
87 | "devDependencies": {
88 | "@generouted/core": "workspace:*",
89 | "@solidjs/router": "^0.15.3",
90 | "esbuild-plugin-solid": "^0.6.0",
91 | "solid-js": "^1.9.4",
92 | "tsup": "^8.3.6",
93 | "typescript": "^5.7.3",
94 | "vite": "^6.1.0"
95 | },
96 | "peerDependencies": {
97 | "@solidjs/router": ">=0.14",
98 | "solid-js": ">=1",
99 | "vite": ">=5"
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/packages/solid-router/src/client/components.tsx:
--------------------------------------------------------------------------------
1 | import { A, Navigate } from '@solidjs/router'
2 |
3 | import { AnchorProps, NavigateProps } from './types'
4 | import { generatePath } from './utils'
5 |
6 | export const components = >() => {
7 | return {
8 | A: (props: AnchorProps) => {
9 | return (props: NavigateProps) => {
12 | return , ModalPath extends string>() => {
9 | return {
10 | useParams: (path: P) => useParams() as Params[P],
11 | useNavigate: () => {
12 | const navigate = useNavigate()
13 | return (href: P, ...[options]: NavigateOptions) => {
14 | navigate(options?.params ? generatePath(href, options.params) : href, options)
15 | }
16 | },
17 | useMatch: (path: () => P, matchFilters?: MatchFilters
) => {
18 | return useMatch(path, matchFilters) as Accessor<{ path: P; params: Params[P] } | undefined>
19 | },
20 | useModals: () => {
21 | const location = useLocation()
22 | const navigate = useNavigate()
23 |
24 | type Options = Partial> &
25 | (P extends keyof Params ? { at?: P; params: Params[P] } : { at?: P; params?: never })
26 |
27 | return {
28 | current: location.state?.modal || '',
29 | open: (path: ModalPath, options?: Options
) => {
30 | const { at, state, ...opts } = options || {}
31 | const pathname = options?.params ? generatePath(at || '', options.params || {}) : at
32 | navigate(pathname || location.pathname, { ...opts, state: { ...location.state, ...state, modal: path } })
33 | },
34 | close:
(options?: Options
) => {
35 | const { at, state, ...opts } = options || {}
36 | const pathname = options?.params ? generatePath(at || '', options.params || {}) : at
37 | navigate(pathname || location.pathname, { ...opts, state: { ...location.state, ...state, modal: '' } })
38 | },
39 | }
40 | },
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/solid-router/src/client/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './hooks'
3 | export * from './types'
4 | export * from './utils'
5 |
--------------------------------------------------------------------------------
/packages/solid-router/src/client/types.ts:
--------------------------------------------------------------------------------
1 | import { AnchorProps as AProps, NavigateOptions as NavOptions, NavigateProps as NavProps } from '@solidjs/router'
2 |
3 | type ComponentProps> = Path extends keyof Params
4 | ? { href: Path; params: Params[Path] }
5 | : { href: Path; params?: never }
6 |
7 | export type AnchorProps> = Omit &
8 | ComponentProps
9 |
10 | export type NavigateProps> = Omit &
11 | ComponentProps
12 |
13 | export type NavigateOptions> = Path extends keyof Params
14 | ? [Partial & { params: Params[Path] }]
15 | : [Partial & { params?: never }] | []
16 |
--------------------------------------------------------------------------------
/packages/solid-router/src/client/utils.ts:
--------------------------------------------------------------------------------
1 | export const generatePath = (path: string, params: Record) => {
2 | return path.replace(/\/:(\w+)(\??)/g, (_, segment) => (params[segment] ? `/${params[segment]}` : ''))
3 | }
4 |
--------------------------------------------------------------------------------
/packages/solid-router/src/core.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/core'
2 |
--------------------------------------------------------------------------------
/packages/solid-router/src/index-lazy.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/solid-router-lazy'
2 |
--------------------------------------------------------------------------------
/packages/solid-router/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from 'generouted/solid-router'
2 |
--------------------------------------------------------------------------------
/packages/solid-router/src/plugin/generate.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process'
2 | import fs from 'fs'
3 | import path from 'path'
4 |
5 | import { createLogger } from 'vite'
6 | import { patterns } from '@generouted/core'
7 | import fg from 'fast-glob'
8 |
9 | import { Options } from './options'
10 | import { template } from './template'
11 |
12 | const generateRouteTypes = async (options: Options) => {
13 | const files = await fg(options.source.routes || './src/pages/**/[\\w[-]*.{jsx,tsx,mdx}', { onlyFiles: true })
14 | const modal = await fg(options.source.modals || './src/pages/**/[+]*.{jsx,tsx,mdx}', { onlyFiles: true })
15 |
16 | const filtered = files.filter((key) => !key.includes('/_') && !key.includes('/404'))
17 | const params: string[] = []
18 |
19 | const paths = filtered.map((key) => {
20 | const path = key
21 | .replace(...patterns.route)
22 | .replace(...patterns.splat)
23 | .replace(...patterns.param)
24 | .replace(/\([\w-]+\)\/|\/?_layout/g, '')
25 | .replace(/\/?index|\./g, '/')
26 | .replace(/(\w)\/$/g, '$1')
27 | .split('/')
28 | .map((segment) => segment.replace(...patterns.optional))
29 | .join('/')
30 |
31 | if (path) {
32 | const param = path.split('/').filter((segment) => segment.startsWith(':'))
33 |
34 | if (param.length || path.includes('*')) {
35 | const dynamic = param.length ? param.map((p) => p.replace(/:(.+)(\?)?/, '$1$2:') + ' string') : []
36 | const splat = path.includes('*') ? ["'*': string"] : []
37 | params.push(`'/${path}': { ${[...dynamic, ...splat].join('; ')} }`)
38 | }
39 |
40 | return path.length > 1 ? `/${path}` : path
41 | }
42 | })
43 |
44 | const modals = modal.map(
45 | (path) =>
46 | `/${path
47 | .replace(...patterns.route)
48 | .replace(/\+|\([\w-]+\)\//g, '')
49 | .replace(/(\/)?index/g, '')
50 | .replace(/\./g, '/')}`,
51 | )
52 |
53 | const types =
54 | `export type Path =\n | "${[...new Set(paths.filter(Boolean))].sort().join('"\n | "')}"`.replace(/"/g, '`') +
55 | '\n\n' +
56 | `export type Params = {\n ${params.sort().join('\n ')}\n}` +
57 | '\n\n' +
58 | `export type ModalPath = "${modals.sort().join('" | "') || 'never'}"`.replace(/"/g, modals.length ? '`' : '')
59 |
60 | const content = template.replace('// types', types)
61 | const count = paths.length + modals.length
62 |
63 | return { content, count }
64 | }
65 |
66 | const logger = createLogger('info', { prefix: '[generouted]' })
67 | let latestContent = ''
68 |
69 | export const generate = async (options: Options) => {
70 | const start = Date.now()
71 | const { content, count } = await generateRouteTypes(options)
72 | logger.info(`scanned ${count} routes in ${Date.now() - start} ms`, { timestamp: true })
73 |
74 | if (latestContent === content) return
75 | latestContent = content
76 |
77 | await fs.promises.writeFile(options.output, content)
78 |
79 | if (!options.format) return
80 | const prettier = path.resolve('./node_modules/.bin/prettier')
81 | if (fs.existsSync(prettier)) execSync(`${prettier} --write --cache ${options.output}`)
82 | }
83 |
--------------------------------------------------------------------------------
/packages/solid-router/src/plugin/index.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { Plugin } from 'vite'
3 |
4 | import { generate } from './generate'
5 | import { defaultOptions, Options } from './options'
6 |
7 | export default function Generouted(options?: Partial): Plugin {
8 | const resolvedOptions = { ...defaultOptions, ...options }
9 |
10 | return {
11 | name: 'generouted/solid-router',
12 | enforce: 'pre',
13 | configureServer(server) {
14 | const listener = (file = '') => (file.includes(path.normalize('/src/pages/')) ? generate(resolvedOptions) : null)
15 | server.watcher.on('add', listener)
16 | server.watcher.on('change', listener)
17 | server.watcher.on('unlink', listener)
18 | },
19 | buildStart(): Promise {
20 | return generate(resolvedOptions)
21 | },
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/solid-router/src/plugin/options.ts:
--------------------------------------------------------------------------------
1 | export type Options = {
2 | source: { routes: string | string[]; modals: string | string[] }
3 | output: string
4 | format: boolean
5 | }
6 |
7 | export const defaultOptions: Options = {
8 | source: { routes: './src/pages/**/[\\w[-]*.{jsx,tsx,mdx}', modals: './src/pages/**/[+]*.{jsx,tsx,mdx}' },
9 | output: './src/router.ts',
10 | format: true,
11 | }
12 |
--------------------------------------------------------------------------------
/packages/solid-router/src/plugin/template.ts:
--------------------------------------------------------------------------------
1 | export const template = `// Generouted, changes to this file will be overridden
2 | /* eslint-disable */
3 |
4 | import { components, hooks } from '@generouted/solid-router/client'
5 |
6 | // types
7 |
8 | export const { A, Navigate } = components()
9 | export const { useMatch, useModals, useNavigate, useParams } = hooks()
10 | `
11 |
--------------------------------------------------------------------------------
/packages/solid-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "esnext",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "declaration": true,
12 | "esModuleInterop": true,
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "jsx": "preserve",
18 | "jsxImportSource": "solid-js",
19 | "types": ["vite/client"]
20 | },
21 | "include": ["./src"]
22 | }
23 |
--------------------------------------------------------------------------------
/packages/solid-router/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 | import { solidPlugin as solid } from 'esbuild-plugin-solid'
3 |
4 | export default defineConfig([
5 | {
6 | entry: ['src/core.ts', 'src/index*', 'src/client'],
7 | format: ['esm'],
8 | dts: {
9 | entry: {
10 | core: './node_modules/generouted/dist/core.d.ts',
11 | index: './node_modules/generouted/dist/solid-router.d.ts',
12 | 'index-lazy': './node_modules/generouted/dist/solid-router-lazy.d.ts',
13 | 'client/index': 'src/client/index.ts',
14 | },
15 | },
16 | external: ['solid-js', 'solid-js/web', '@solidjs/router'],
17 | noExternal: ['generouted'],
18 | esbuildPlugins: [solid()],
19 | },
20 | {
21 | entry: ['src/plugin'],
22 | outDir: 'dist/plugin',
23 | format: ['cjs', 'esm'],
24 | dts: { entry: 'src/plugin/index.ts' },
25 | },
26 | ])
27 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@generouted/tanstack-react-router",
3 | "version": "1.20.0",
4 | "description": "Generated file-based routes for TanStack React Router and Vite",
5 | "author": "Omar Elhawary (https://omarelhawary.me)",
6 | "license": "MIT",
7 | "repository": "https://github.com/oedotme/generouted",
8 | "bugs": "https://github.com/oedotme/generouted/issues",
9 | "homepage": "https://github.com/oedotme/generouted#readme",
10 | "keywords": [
11 | "actions",
12 | "code-splitting",
13 | "data-loaders",
14 | "file-based-routing",
15 | "generate",
16 | "nested-layouts",
17 | "nextjs",
18 | "pages",
19 | "pre-loading ",
20 | "react",
21 | "react-location",
22 | "react-router",
23 | "react-router-dom",
24 | "remix",
25 | "router",
26 | "routes",
27 | "solid",
28 | "solid-router",
29 | "typescript",
30 | "vite"
31 | ],
32 | "type": "module",
33 | "exports": {
34 | ".": {
35 | "types": "./dist/index.d.ts",
36 | "require": "./dist/index.cjs",
37 | "import": "./dist/index.js"
38 | }
39 | },
40 | "typesVersions": {
41 | "*": {
42 | "*": [
43 | "./dist/index.d.ts"
44 | ]
45 | }
46 | },
47 | "files": [
48 | "dist"
49 | ],
50 | "scripts": {
51 | "dev": "tsup src/index.ts --dts --format cjs,esm --watch",
52 | "build": "tsup src/index.ts --dts --format cjs,esm --minify --clean",
53 | "type-check": "tsc --noEmit"
54 | },
55 | "dependencies": {
56 | "fast-glob": "^3.3.3"
57 | },
58 | "devDependencies": {
59 | "@generouted/core": "workspace:*",
60 | "tsup": "^8.3.6",
61 | "typescript": "^5.7.3",
62 | "vite": "^6.1.0"
63 | },
64 | "peerDependencies": {
65 | "vite": ">=5"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/readme.md:
--------------------------------------------------------------------------------
1 | # Generouted + TanStack React Router
2 |
3 | ## How
4 |
5 | This integration is based on a Vite plugin to generate routes config for TanStack React Router with `generouted` conventions. The output is saved at `src/routes.gen.tsx` and gets updated by the add/change/delete at `src/pages/*`.
6 |
7 | ## Getting started
8 |
9 | In case you don't have a Vite project with React and TypeScript, check [Vite documentation to start a new project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
10 |
11 | ### Installation
12 |
13 | ```shell
14 | pnpm add @generouted/tanstack-react-router @tanstack/router@beta
15 | ```
16 |
17 | Optional additional packages for actions and/or loaders:
18 |
19 | ```shell
20 | pnpm add @tanstack/react-actions@beta @tanstack/react-loaders@beta
21 | ```
22 |
23 | Optionally install `prettier` as a dev dependency so `generouted` formats the generated `src/routes.gen.tsx` file automatically:
24 |
25 | ```shell
26 | pnpm add --save-dev prettier
27 | ```
28 |
29 | ### Setup
30 |
31 | ```ts
32 | // vite.config.ts
33 |
34 | import { defineConfig } from 'vite'
35 | import react from '@vitejs/plugin-react'
36 | import generouted from '@generouted/tanstack-react-router'
37 |
38 | export default defineConfig({ plugins: [react(), generouted()] })
39 | ```
40 |
41 | ### Usage
42 |
43 | ```tsx
44 | // src/main.tsx
45 |
46 | import { createRoot } from 'react-dom/client'
47 | import { Routes } from './routes.gen'
48 |
49 | createRoot(document.getElementById('root')!).render(Home
61 | }
62 | ```
63 |
64 | ### Optional root layout at `pages/_app.tsx`
65 |
66 | ```tsx
67 | // src/pages/_app.tsx
68 |
69 | import { Outlet } from '@tanstack/router'
70 |
71 | export default function App() {
72 | return (
73 |
74 |
77 |
78 |
79 |
81 |
82 | )
83 | }
84 | ```
85 |
86 | ## Examples
87 |
88 | ### TanStack React Router
89 |
90 | - [Basic](../../examples/tanstack-react-router/)
91 |
92 | ## License
93 |
94 | MIT
95 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/src/format.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'child_process'
2 | import { existsSync } from 'fs'
3 | import path from 'path'
4 |
5 | const prettier = path.resolve('./node_modules/.bin/prettier')
6 |
7 | export const format = (file: string) => {
8 | if (!existsSync(prettier) || !existsSync(file)) return
9 | execSync(`${prettier} --write --cache ${file}`)
10 | }
11 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/src/generate.ts:
--------------------------------------------------------------------------------
1 | import { writeFileSync } from 'fs'
2 | import fg from 'fast-glob'
3 |
4 | import { patterns as corePatterns, getRoutes } from '@generouted/core'
5 |
6 | import { format } from './format'
7 | import { Options } from './options'
8 | import { template } from './template'
9 |
10 | const patterns = Object.assign(corePatterns, {
11 | param: [/\[([^\]]+)\]/g, '$$$1'],
12 | optional: [/^-(\$?[\w-]+)/, '$1?'],
13 | }) as Record
14 |
15 | const generateRoutes = async () => {
16 | const source = ['./src/pages/**/[\\w[-]*.{jsx,tsx}']
17 | const files = await fg(source, { onlyFiles: true })
18 |
19 | const imports: string[] = []
20 | const modules: string[] = []
21 |
22 | const { routes, preserved, exports, count } = getRoutes(
23 | files,
24 | (key, exports, _id = '') => {
25 | const { loader, action, pending, catch_ } = exports
26 | const file = key.replace(...patterns.route)
27 | const module = `import('./pages/${file}')`
28 | const path = file
29 | .replace(...patterns.splat)
30 | .replace(...patterns.param)
31 | .replace(/\(|\)|\/?_layout/g, '')
32 | .replace(/\/?index|\./g, '/')
33 | .replace(/(\w)\/$/g, '$1')
34 | .split('/')
35 | .map((segment) => segment.replace(...patterns.optional))
36 | .join('/')
37 |
38 | const ignore = '\n// @ts-ignore\n'
39 | return {
40 | _path: path.length > 1 ? `/${path}` : path,
41 | _module: module,
42 | _loader: loader ? `${ignore} loader: (...args) => ${module}.then((m) => m.Loader(...args))` : '',
43 | _action: action ? '' : '',
44 | _component: 'component: m.default',
45 | _pendingComponent: pending ? 'pendingComponent: m.Pending' : '',
46 | _errorComponent: catch_ ? 'errorComponent: m.Catch' : '',
47 | }
48 | },
49 | patterns,
50 | )
51 |
52 | if (preserved._app && exports['_app'].default) {
53 | imports.push(`import App from './pages/_app'`)
54 | modules.push(`const root = createRootRoute({ component: App || Outlet })`)
55 | } else {
56 | modules.push(`const root = createRootRoute({ component: Outlet })`)
57 | }
58 |
59 | if (preserved._404 && exports['404'].default) {
60 | imports.push(`import NoMatch from './pages/404'`)
61 | modules.push(`const _404 = createRoute({ getParentRoute: () => root, path: '*', component: NoMatch || Fragment })`)
62 | } else {
63 | modules.push(`const _404 = createRoute({ getParentRoute: () => root, path: '*', component: Fragment })`)
64 | }
65 |
66 | const config = JSON.stringify(routes, function (key, value) {
67 | if (key === 'id') {
68 | const { id, pid, path, ...props } = this
69 | const meta = props as (typeof routes)[number]
70 |
71 | const components = [meta._component, meta._pendingComponent, meta._errorComponent].filter(Boolean)
72 | const options = [path ? `path: '${path}'` : `id: '${id}'`, meta._loader, meta._action].filter(Boolean)
73 | const module = `const ${id} = createRoute({ getParentRoute: () => ${pid}, ${options.join(', ')} })`
74 |
75 | modules.push(
76 | meta._module
77 | ? `${module}.lazy(() =>\n ${meta._module}.then((m) => createLazyRoute('${meta._path}')({ ${components.join(', ')} }))\n)`
78 | : module,
79 | )
80 | }
81 |
82 | if (['pid', 'path'].includes(key) || key.startsWith('_')) return undefined
83 | return value
84 | })
85 | .replace(/"id":"([\w-]+)"/g, '$1')
86 | .replace(/^\[|\]$|{|}/g, '')
87 | .replace(/\[/g, '([')
88 | .replace(/\]/g, '])')
89 | .replace(/,"children":/g, '.addChildren')
90 | .replace(/\),/g, '),\n ')
91 |
92 | const content = template
93 | .replace('// imports', imports.join('\n'))
94 | .replace('// modules', modules.join('\n'))
95 | .replace('// config', config)
96 |
97 | return { content, count }
98 | }
99 |
100 | let latestContent = ''
101 |
102 | export const generate = async (options: Options) => {
103 | const start = Date.now()
104 | const { content, count } = await generateRoutes()
105 | console.log(`${new Date().toLocaleTimeString()} [generouted] ${count} routes in ${Date.now() - start} ms`)
106 |
107 | if (latestContent === content) return
108 | latestContent = content
109 |
110 | writeFileSync(`./src/${options.output}`, content)
111 | if (options.format) format(`./src/${options.output}`)
112 | }
113 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/src/index.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { Plugin } from 'vite'
3 |
4 | import { generate } from './generate'
5 | import { defaultOptions, Options } from './options'
6 |
7 | export default function Generouted(options?: Partial): Plugin {
8 | const resolvedOptions = { ...defaultOptions, ...options }
9 |
10 | return {
11 | name: 'generouted/tanstack-react-router',
12 | enforce: 'pre',
13 | configureServer(server) {
14 | const listener = (file = '') => (file.includes(path.normalize('/src/pages/')) ? generate(resolvedOptions) : null)
15 | server.watcher.on('add', listener)
16 | server.watcher.on('change', listener)
17 | server.watcher.on('unlink', listener)
18 | },
19 | buildStart(): Promise {
20 | return generate(resolvedOptions)
21 | },
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/src/options.ts:
--------------------------------------------------------------------------------
1 | export const defaultOptions = {
2 | output: 'routes.gen.tsx',
3 | format: true,
4 | }
5 |
6 | export type Options = typeof defaultOptions
7 |
--------------------------------------------------------------------------------
/packages/tanstack-react-router/src/template.ts:
--------------------------------------------------------------------------------
1 | export const template = `// Generouted, changes to this file will be overridden
2 | import { Fragment } from 'react'
3 | import { Outlet, RouterProvider, createLazyRoute, createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
4 |
5 | // imports
6 |
7 | // modules
8 |
9 | const config = root.addChildren([
10 | // config,
11 | _404,
12 | ])
13 |
14 | const router = createRouter({ routeTree: config })
15 | export const routes = config
16 | export const Routes = () => (https://omarelhawary.me)",
6 | "license": "MIT",
7 | "repository": "https://github.com/oedotme/generouted",
8 | "bugs": "https://github.com/oedotme/generouted/issues",
9 | "homepage": "https://github.com/oedotme/generouted#readme",
10 | "keywords": [],
11 | "type": "module",
12 | "types": "./src/index.ts",
13 | "exports": "./src/index.ts",
14 | "files": [
15 | "src"
16 | ],
17 | "devDependencies": {
18 | "@types/node": "^22.13.1"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/shared/core/src/index.ts:
--------------------------------------------------------------------------------
1 | import { readFileSync } from 'fs'
2 |
3 | export const patterns = {
4 | route: [/^.*\/src\/pages\/|^\/pages\/|\.(jsx|tsx|mdx)$/g, ''],
5 | splat: [/\[\.{3}\w+\]/g, '*'],
6 | param: [/\[([^\]]+)\]/g, ':$1'],
7 | slash: [/^index$|\./g, '/'],
8 | optional: [/^-(:?[\w-]+|\*)/, '$1?'],
9 | } as Record
10 |
11 | const getRouteId = (path: string) => path.replace(...patterns.route).replace(/\W/g, '')
12 |
13 | const getRouteExports = (content: string) => ({
14 | default: /^export\s+default\s/gm.test(content),
15 | loader: /^export\s+(const|function|async function|let)\s+Loader\W/gm.test(content),
16 | action: /^export\s+(const|function|async function|let)\s+Action\W/gm.test(content),
17 | pending: /^export\s+(const|function|async function|let)\s+Pending\W/gm.test(content),
18 | catch_: /^export\s+(const|function|let)\s+Catch\W/gm.test(content),
19 | })
20 |
21 | type BaseRoute = { id?: string; path?: string; children?: BaseRoute[] } & Record
22 | type Exports = Record>
23 | type Patterns = typeof patterns
24 |
25 | export const getRoutes = (
26 | files: string[],
27 | buildRoute: (key: string, exports: Exports[string], id?: string) => T,
28 | patterns: Patterns,
29 | ) => {
30 | const filteredRoutes = files
31 | .filter((key) => !key.includes('/_') || /(_app|_layout)\.(jsx|tsx)$/.test(key))
32 | .sort((a, b) => a.localeCompare(b))
33 |
34 | const ids = filteredRoutes.map((route) => getRouteId(route))
35 | const exports: Record> = {}
36 |
37 | const routes = filteredRoutes.reduce((routes, key) => {
38 | const content = readFileSync(key, { encoding: 'utf-8' })
39 | const id = getRouteId(key)
40 |
41 | exports[id] = getRouteExports(content)
42 |
43 | if (!exports[id].default) return routes
44 | if (['_app', '404'].includes(id) || ids.includes(id + '_layout')) return routes
45 |
46 | const route = buildRoute(key, exports[id], id)
47 | const segments = key
48 | .replace(...patterns.route)
49 | .replace(...patterns.splat)
50 | .replace(...patterns.param)
51 | .split('/')
52 | .filter(Boolean)
53 |
54 | segments.reduce((parent, segment, index) => {
55 | const path = segment.replace(...patterns.slash).replace(...patterns.optional)
56 | const root = index === 0
57 | const leaf = index === segments.length - 1 && segments.length > 1
58 | const node = !root && !leaf
59 | const layout = segment === '_layout'
60 | const group = /\([\w-]+\)/.test(path)
61 | const insert = /^\w|\//.test(path) ? 'unshift' : 'push'
62 |
63 | if (root) {
64 | const last = segments.length === 1
65 | if (last) {
66 | routes.push({ id, pid: 'root', path, ...route })
67 | return parent
68 | }
69 | }
70 |
71 | if (root || node) {
72 | const current = root ? routes : parent.children
73 | const _id = getRouteId(segments.slice(0, index + 1).join(''))
74 | const found = current?.find((route) => route.path === path || route.id === _id)
75 | const pid = parent?.id || 'root'
76 | const props = group ? {} : { path }
77 |
78 | if (found) found.children ??= []
79 | else current?.[insert]({ ...props, id: _id, pid, children: [] })
80 | return found || (current?.[insert === 'unshift' ? 0 : current.length - 1] as BaseRoute)
81 | }
82 |
83 | if (layout) {
84 | const pid = segments.slice(0, index - 1).join('') || 'root'
85 | return Object.assign(parent, { id: parent.id || parent.path, pid, ...route })
86 | }
87 |
88 | if (leaf) {
89 | parent?.children?.[insert]({ id, pid: parent?.id || 'root', path, ...route })
90 | }
91 |
92 | return parent
93 | }, {} as BaseRoute)
94 |
95 | return routes
96 | }, [])
97 |
98 | const preserved = { _app: ids.includes('_app'), _404: ids.includes('404') }
99 | const count = ids.length - Object.values(preserved).filter(Boolean).length
100 |
101 | return { routes, preserved, exports, count }
102 | }
103 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "ui": "stream",
3 | "tasks": {
4 | "dev": {
5 | "cache": false
6 | },
7 | "build": {
8 | "dependsOn": ["^build", "^test", "^type-check"],
9 | "outputs": ["dist/**"]
10 | },
11 | "test": {},
12 | "type-check": {}
13 | }
14 | }
15 |
--------------------------------------------------------------------------------