@mpen/rerouter 0.1.9 → 0.3.1

package/README.md

@@ -1,31 +1,93 @@
 # @mpen/rerouter
 
-An implementation of [RFC 6570: URI Template](https://tools.ietf.org/html/rfc6570).
-    
+A lightweight, type-safe router for React with a CLI for generating URL helpers.
+
+## Features
+
+- **Small footprint**: Focuses only on the essentials of routing.
+- **Type-safe URL generation**: CLI tool imports your route file and generates helper functions, ensuring you never have broken links.
+- **Support for `path-to-regexp`**: Familiar syntax for route patterns.
+- **Native `URLPattern` support**: Can use the browser's native `URLPattern` API.
+- **Hooks-based**: Easy access to current path and search parameters.
+
 ## Installation
 
-```sh
+```bash
 bun add @mpen/rerouter
 ```
 
-## API
+## CLI: `rerouter`
+
+The package includes a CLI tool to generate type-safe route helpers from your route definitions.
+
+### Usage
+
+1. Define your routes in a dedicated `.ts` file:
 
 ```ts
-const templ = new UriTemplate('/query{?firstName,lastName}')
-console.log(templ.match('/query?firstName=Bj%c3%b6rk&lastName=Gu%c3%b0mundsd%c3%b3ttir'))
-// {
-//   score: 7,
-//   params: {
-//     firstName: "Björk",
-//     lastName: "Guðmundsdóttir"
-//   }
-// }
-console.log(templ.expand({firstName: 'Mark', lastName: 'Penner'}))
-// /query?firstName=Mark&lastName=Penner
+// routes.ts
+export default [
+    { name: 'home', pattern: '/', component: () => import('./pages/Home') },
+    { name: 'userProfile', pattern: '/user/:id', component: () => import('./pages/UserProfile') },
+    { pattern: '/user/:id/settings', component: () => import('./pages/UserProfile') },
+]
+```
+
+Keep this file side-effect-free. The CLI imports and evaluates the route file to extract route names and patterns, so avoid top-level browser access, data fetching, app bootstrapping, or eager page component imports. Put route components behind `() => import('./pages/...')` loaders so generation does not pull page modules into the CLI process.
+
+The `name` field is optional. Named string-pattern routes are included in generated URL helpers; unnamed routes still match at runtime but are skipped by the generator.
+
+2. Run the generator:
+
+```bash
+bunx @mpen/rerouter routes.ts -o src/routes.gen.ts
+```
+
+3. Use the generated helpers:
+
+```tsx
+import { userProfile } from './routes.gen'
+
+// Returns "/user/123"
+const url = userProfile({ id: 123 })
+```
+
+## Library Usage
+
+### Router
+
+```tsx
+import { Router } from '@mpen/rerouter'
+import ROUTES from './routes'
+
+function App() {
+    return <Router routes={ROUTES} loading={<div>Loading...</div>} />
+}
 ```
 
-That's it. That's the whole API. 2 methods.
+`loading` is delayed by 400ms by default to avoid flashing fallback UI during quick route
+loads. Pass `loadingDelayMs={0}` to show it immediately, or another millisecond value to tune
+the delay.
 
-It's been tested against https://github.com/uri-templates/uritemplate-test and all 157 tests pass.
+### Link
 
-The `score` is still experimental. The idea is that you can run a URL against multiple templates and if multiple match, you should use the one with the highest score. Higher score means more matching parts, i.e. more specific match.
+```tsx
+import { Link } from '@mpen/rerouter'
+import { userProfile } from './routes.gen'
+
+function Navigation() {
+    return <Link href={userProfile({ id: 'me' })}>My Profile</Link>
+}
+```
+
+### Hooks
+
+```tsx
+import { useUrlPath, useUrlSearchParams } from '@mpen/rerouter'
+
+function MyComponent() {
+    const path = useUrlPath()
+    const searchParams = useUrlSearchParams()
+    // ...
+}
+```

package/cli/bin.test.ts

@@ -0,0 +1,221 @@
+#!/usr/bin/env bun test
+import { expect, test, describe, it, afterAll, beforeAll } from 'bun:test'
+import { $ } from 'bun'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+import { pathToFileURL } from 'node:url'
+import { runRerouterBin } from './bin'
+
+const TEMP_DIR = path.resolve(import.meta.dirname, 'temp_bin_test')
+const FIXTURES_DIR = path.resolve(import.meta.dirname, 'fixtures/bin')
+const BIN_PATH = path.resolve(import.meta.dirname, 'bin.ts')
+const BUN_PATH = process.execPath
+
+async function ensureDir(dir: string) {
+    await fs.mkdir(dir, { recursive: true })
+}
+
+describe('rerouter bin', () => {
+    beforeAll(async () => {
+        await ensureDir(TEMP_DIR)
+    })
+
+    test('writes to stdout by default', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'simple.tsx')
+
+        const result = await runRerouterBin([routesFile])
+        expect(result.stdout).toContain('export function home()')
+        expect(result.stderr).toBe('')
+    })
+
+    test('writes to file with -o', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'simple.tsx')
+        const outputFile = path.join(TEMP_DIR, 'explicit-output.ts')
+
+        const result = await runRerouterBin([routesFile, '-o', outputFile])
+
+        const outputContent = await fs.readFile(outputFile, 'utf8')
+        expect(outputContent).toContain('export function home()')
+        expect(result.stderr).toBe(`Wrote ${path.relative(process.cwd(), outputFile)}\n`)
+    })
+
+    test('formats output files with --pretty', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'simple.tsx')
+        const outputFile = path.join(TEMP_DIR, 'pretty-output.ts')
+
+        await runRerouterBin([routesFile, '-o', outputFile, '--pretty'])
+
+        const outputContent = await fs.readFile(outputFile, 'utf8')
+        expect(outputContent).toContain("export function home(): string {\n  let sb = ''")
+        expect(outputContent).toContain("  sb += '/'")
+    })
+
+    test('ignores --pretty when writing to stdout', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'simple.tsx')
+
+        const { stdout } = await runRerouterBin([routesFile, '-p'])
+
+        expect(stdout).toContain('export function home(): string {\n    let sb = ""')
+        expect(stdout).toContain('    sb += "/"')
+    })
+
+    test('writes to adjacent file with -w', async () => {
+        const routesFile = path.join(TEMP_DIR, 'write-adjacent.tsx')
+        const expectedOutputFile = path.join(TEMP_DIR, 'write-adjacent.gen.ts')
+        await fs.copyFile(path.join(FIXTURES_DIR, 'simple.tsx'), routesFile)
+
+        await runRerouterBin([routesFile, '-w'])
+
+        const outputContent = await fs.readFile(expectedOutputFile, 'utf8')
+        expect(outputContent).toContain('export function home()')
+    })
+
+    test('handles optional groups', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'optional.tsx')
+
+        const { stdout: outputContent } = await runRerouterBin([routesFile])
+
+        expect(outputContent).toContain(
+            'export function optional(params: {} & AllOrNone<{ "bar": ParamType }>): string {',
+        )
+        expect(outputContent).toContain('AllOrNone<')
+        expect(outputContent).toContain('"bar": ParamType')
+    })
+
+    test('skips unnamed routes', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'unnamed.tsx')
+
+        const { stdout: outputContent } = await runRerouterBin([routesFile])
+
+        expect(outputContent).toContain('export function home()')
+        expect(outputContent).not.toContain('layout')
+    })
+
+    test('handles regexp params with optional groups', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'regexp-groups.tsx')
+        const outputFile = path.join(TEMP_DIR, 'regexp-groups.gen.ts')
+
+        await runRerouterBin([routesFile, '-o', outputFile])
+
+        const outputContent = await fs.readFile(outputFile, 'utf8')
+        expect(outputContent).toContain('export function blogPost(')
+        expect(outputContent).toContain('"id": ParamType')
+        expect(outputContent).toContain('"title": ParamType')
+
+        const { blogPost } = await import(pathToFileURL(outputFile).href)
+        expect(blogPost({ id: 123 })).toBe('/blog/123')
+        expect(blogPost({ id: 123, title: 'hello world' })).toBe('/blog/123-hello%20world')
+    })
+
+    test('generates importable path helpers', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'kitchen-sink.tsx')
+        const outputFile = path.join(TEMP_DIR, 'importable.gen.ts')
+
+        await runRerouterBin([
+            routesFile,
+            '-o',
+            outputFile,
+            '--wildcard-delimiter',
+            ',',
+            '--encode-function',
+            'encodeURI',
+        ])
+
+        const { home, kitchenSink, login, match } = await import(pathToFileURL(outputFile).href)
+
+        expect(home()).toBe('/')
+        expect(login()).toBe('/login')
+        expect(match({ id: 'a/b' })).toBe('/matches/a/b')
+        expect(kitchenSink({ foo: 'a/b', baz: 'c', splat: ['x', 'y'] })).toBe(
+            '/hello/a/b/bar/c/x,y/xxx',
+        )
+        expect(
+            kitchenSink({
+                foo: 'a/b',
+                baz: 'c',
+                splat: ['x', 'y'],
+                optional: 'opt',
+                two: 'two',
+            }),
+        ).toBe('/hello/a/b/bar/c/x,y/xxx/opt/lol/two')
+    })
+
+    describe('generated path helpers with default options', () => {
+        let home: () => string
+        let login: () => string
+        let match: (params: { id: string }) => string
+        let kitchenSink: (params: {
+            foo: string
+            baz: string
+            splat: string[]
+            optional?: string
+            two?: string
+        }) => string
+
+        beforeAll(async () => {
+            const routesFile = path.join(FIXTURES_DIR, 'kitchen-sink.tsx')
+            const outputFile = path.join(TEMP_DIR, 'importable-defaults.gen.ts')
+
+            const result = await runRerouterBin([routesFile])
+            await fs.writeFile(outputFile, result.stdout, 'utf8')
+
+            const generated = await import(pathToFileURL(outputFile).href)
+            home = generated.home
+            login = generated.login
+            match = generated.match
+            kitchenSink = generated.kitchenSink
+        })
+
+        it('home()', () => {
+            expect(home()).toBe('/')
+        })
+
+        it('login()', () => {
+            expect(login()).toBe('/login')
+        })
+
+        it('match()', () => {
+            expect(match({ id: '123' })).toBe('/matches/123')
+        })
+
+        it('match() uses encodeURIComponent', () => {
+            expect(match({ id: 'a/b' })).toBe('/matches/a%2Fb')
+        })
+
+        it('kitchenSink() without optional group', () => {
+            expect(kitchenSink({ foo: 'a', baz: 'b', splat: ['x', 'y'] })).toBe(
+                '/hello/a/bar/b/x/y/xxx',
+            )
+        })
+
+        it('kitchenSink() with optional group', () => {
+            expect(
+                kitchenSink({
+                    foo: 'a',
+                    baz: 'b',
+                    splat: ['x', 'y'],
+                    optional: 'opt',
+                    two: 'two',
+                }),
+            ).toBe('/hello/a/bar/b/x/y/xxx/opt/lol/two')
+        })
+
+        it('kitchenSink() requires all-or-none optional group', () => {
+            expect(() =>
+                kitchenSink({ foo: 'a', baz: 'b', splat: ['x', 'y'], optional: 'opt' } as any),
+            ).toThrow('Group requires all-or-none: "optional", "two"')
+        })
+    })
+
+    test('can be invoked as a CLI script', async () => {
+        const routesFile = path.join(FIXTURES_DIR, 'simple.tsx')
+
+        const result = await $`${BUN_PATH} ${BIN_PATH} ${routesFile}`.text()
+        expect(result).toContain('export function home()')
+    })
+
+    afterAll(async () => {
+        await fs.rm(TEMP_DIR, { recursive: true, force: true })
+    })
+})

package/cli/bin.ts

@@ -0,0 +1,342 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { parseArgs, type ParseArgsConfig } from 'node:util'
+import { parse } from 'path-to-regexp'
+import { normalizeLegacyPathToRegexpSyntax, normalizeRoutes, type Route } from '../src/lib/routes'
+
+const PARSE_CONFIG = {
+    options: {
+        output: { type: 'string', short: 'o' },
+        write: { type: 'boolean', short: 'w' },
+        pretty: { type: 'boolean', short: 'p' },
+        'wildcard-delimiter': { type: 'string' },
+        'encode-function': { type: 'string' },
+    },
+    allowPositionals: true,
+    strict: true,
+} satisfies ParseArgsConfig
+
+type CompileOptions = {
+    delimiter?: string
+    encode?: string
+    functionName?: string
+}
+
+type RunOptions = {
+    cwd?: string
+    commandName?: string
+    commandArgs?: readonly string[]
+}
+
+type RunResult = {
+    exitCode?: number
+    stdout: string
+    stderr: string
+}
+
+function escapeString(value: string): string {
+    return JSON.stringify(value)
+}
+
+function shellEscape(arg: string): string {
+    if (/^[a-z0-9/_.-]+$/i.test(arg)) return arg
+    return `'${arg.replace(/'/g, "'\\''")}'`
+}
+
+function compilePathGenerator(
+    pattern: string,
+    {
+        delimiter = '/',
+        encode = 'encodeURIComponent',
+        functionName = 'generate',
+    }: CompileOptions = {},
+): string {
+    const { tokens } = parse(normalizeLegacyPathToRegexpSyntax(pattern))
+
+    type Prop = { name: string; type: string }
+
+    const baseProps: Prop[] = []
+    const groupTypes: string[] = []
+
+    const typeOfParam = (t: any) => (t.type === 'wildcard' ? 'WildcardType' : 'ParamType')
+    const makeProp = (name: string, t: any): Prop => ({ name, type: typeOfParam(t) })
+    const renderPropsType = (props: readonly Prop[]): string =>
+        props.length
+            ? `{ ${props.map((p) => `${escapeString(p.name)}: ${p.type}`).join('; ')} }`
+            : '{}'
+
+    function collectGroupProps(ts2: any[]): Prop[] {
+        const props: Prop[] = []
+        for (const t of ts2) {
+            if (t.type === 'param' || t.type === 'wildcard') props.push(makeProp(t.name, t))
+            else if (t.type === 'group') props.push(...collectGroupProps(t.tokens))
+        }
+        return props
+    }
+
+    function collectTypes(ts2: any[], intoBase = true) {
+        for (const t of ts2) {
+            if ((t.type === 'param' || t.type === 'wildcard') && intoBase) {
+                baseProps.push(makeProp(t.name, t))
+            } else if (t.type === 'group') {
+                const groupProps = collectGroupProps(t.tokens)
+                if (groupProps.length) {
+                    groupTypes.push(`AllOrNone<${renderPropsType(groupProps)}>`)
+                }
+                collectTypes(t.tokens, false)
+            }
+        }
+    }
+
+    collectTypes(tokens)
+
+    const baseParamsType = renderPropsType(baseProps)
+    const paramsType = groupTypes.length
+        ? `${baseParamsType} & ${groupTypes.join(' & ')}`
+        : baseParamsType
+
+    const lines: string[] = []
+    const indentUnit = '    '
+    const line = (indentLevel: number, text = ''): void => {
+        if (text === '') lines.push('')
+        else lines.push(indentUnit.repeat(indentLevel) + text)
+    }
+    const hasAnyParams = baseProps.length > 0 || groupTypes.length > 0
+
+    if (hasAnyParams) {
+        lines.push(`export function ${functionName}(params: ${paramsType}): string {`)
+    } else {
+        lines.push(`export function ${functionName}(): string {`)
+    }
+    line(1, `let sb = ""`)
+    line(0)
+
+    const delim = escapeString(delimiter)
+
+    function collectNames(ts2: any[]): string[] {
+        const names: string[] = []
+        for (const t of ts2) {
+            if (t.type === 'param' || t.type === 'wildcard') names.push(t.name)
+            else if (t.type === 'group') names.push(...collectNames(t.tokens))
+        }
+        return names
+    }
+
+    function emitTokens(ts2: any[], indentLevel: number, optional = false): void {
+        if (!optional && hasAnyParams) {
+            for (const t of ts2) {
+                if (t.type === 'param' || t.type === 'wildcard') {
+                    line(
+                        indentLevel,
+                        `if (params[${escapeString(t.name)}] == null) throw new Error(${escapeString(`Missing param: ${t.name}`)})`,
+                    )
+                }
+            }
+        }
+
+        for (const t of ts2) {
+            if (t.type === 'text') {
+                line(indentLevel, `sb += ${escapeString(t.value)}`)
+            } else if (t.type === 'param') {
+                line(indentLevel, `sb += (${encode})(String(params[${escapeString(t.name)}]))`)
+            } else if (t.type === 'wildcard') {
+                line(
+                    indentLevel,
+                    `sb += Array.from(params[${escapeString(t.name)}], v => (${encode})(String(v))).join(${delim})`,
+                )
+            } else if (t.type === 'group') {
+                const names = collectNames(t.tokens).map((name) => escapeString(name))
+                if (!names.length) continue
+                const all = names.map((n) => `params[${n}] != null`).join(' && ')
+                const none = names.map((n) => `params[${n}] == null`).join(' && ')
+                const list = names.join(', ')
+
+                line(indentLevel, `if (${all}) {`)
+                emitTokens(t.tokens, indentLevel + 1, true)
+                line(indentLevel, `} else if (!(${none})) {`)
+                line(
+                    indentLevel + 1,
+                    `throw new Error(${escapeString(`Group requires all-or-none: ${list}`)})`,
+                )
+                line(indentLevel, `}`)
+            }
+        }
+    }
+
+    emitTokens(tokens, 1)
+    line(0)
+    line(1, `return sb`)
+    lines.push(`}`)
+    return lines.join('\n')
+}
+
+function toRouteFunctionName(routeName: string): string {
+    const ident = routeName
+        .trim()
+        .replace(/[^a-zA-Z0-9_]/g, '_')
+        .replace(/^[^a-zA-Z_]+/, '')
+    return ident || 'route'
+}
+
+type ExtractedRoute = { name: string; pattern: string }
+
+async function importRoutes(routesPath: string): Promise<readonly Route[]> {
+    const mod = (await import(pathToFileURL(routesPath).href)) as { default?: unknown }
+    if (!Array.isArray(mod.default)) {
+        throw new Error('Routes file must default export an array of routes.')
+    }
+    return mod.default as readonly Route[]
+}
+
+async function formatWithPrettier(source: string, outputPath: string): Promise<string> {
+    let prettier: typeof import('prettier')
+    try {
+        prettier = await import('prettier')
+    } catch (cause) {
+        throw new Error('The --pretty option requires prettier to be installed.', { cause })
+    }
+
+    const options = (await prettier.resolveConfig(outputPath)) ?? {}
+    return prettier.format(source, { ...options, filepath: outputPath })
+}
+
+function extractRoutes(routes: readonly Route[]): ExtractedRoute[] {
+    return normalizeRoutes(routes).flatMap((route) => {
+        if (!route.name || typeof route.pattern !== 'string') return []
+        return [{ name: route.name, pattern: route.pattern }]
+    })
+}
+
+async function main(
+    options: Options,
+    positionals: Positionals,
+    {
+        cwd = process.cwd(),
+        commandName = 'rerouter',
+        commandArgs = process.argv.slice(2),
+    }: RunOptions = {},
+): Promise<RunResult> {
+    const [routesPathArg] = positionals
+    if (!routesPathArg) {
+        return {
+            exitCode: 1,
+            stdout: '',
+            stderr: 'Usage: rerouter <routes-file> [-o <output-file>] [-w] [-p|--pretty] [--wildcard-delimiter <string>] [--encode-function <identifier>]\n',
+        }
+    }
+
+    const routesPath = path.resolve(cwd, routesPathArg)
+    let outputPath: string | undefined
+    if (options.output) {
+        outputPath = path.resolve(cwd, options.output as string)
+    } else if (options.write) {
+        outputPath = path.join(
+            path.dirname(routesPath),
+            path.basename(routesPath, path.extname(routesPath)) + '.gen.ts',
+        )
+    }
+
+    const routes = extractRoutes(await importRoutes(routesPath))
+        .map((r) => ({ ...r, pattern: r.pattern.trim() }))
+        .filter((r) => r.pattern.startsWith('/') && r.pattern !== '*')
+
+    const wildcardDelimiter = (options['wildcard-delimiter'] as string | undefined) ?? '/'
+    const encodeFunction =
+        (options['encode-function'] as string | undefined) ?? 'encodeURIComponent'
+
+    const commandText = [commandName, ...commandArgs.map(shellEscape)].join(' ')
+
+    const out: string[] = []
+    out.push(`// Do not modify this file. It was auto-generated with the following command:`)
+    out.push(`// $ ${commandText}`)
+    out.push(``)
+    out.push(`type AllOrNone<T> =`)
+    out.push(`    | Required<T>`)
+    out.push(`    | { [K in keyof T]?: never }`)
+    out.push(``)
+    out.push(`type ParamType = string | number | boolean`)
+    out.push(`type WildcardType = Iterable<ParamType>`)
+    out.push(``)
+
+    if (!routes.length) {
+        out.push(`// No string route patterns found in the default export.`)
+        out.push(``)
+    } else {
+        const usedNames = new Set<string>()
+        for (const route of routes) {
+            const base = toRouteFunctionName(route.name)
+            let name = base
+            let i = 2
+            while (usedNames.has(name)) {
+                name = `${base}_${i++}`
+            }
+            usedNames.add(name)
+
+            out.push(
+                compilePathGenerator(route.pattern, {
+                    functionName: name,
+                    delimiter: wildcardDelimiter,
+                    encode: encodeFunction,
+                }),
+            )
+            out.push(``)
+        }
+    }
+
+    let finalOutput = out.join('\n')
+    if (outputPath) {
+        if (options.pretty) {
+            finalOutput = await formatWithPrettier(finalOutput, outputPath)
+        }
+        await fs.writeFile(outputPath, finalOutput, 'utf8')
+        return { stdout: '', stderr: `Wrote ${path.relative(cwd, outputPath) || '.'}\n` }
+    } else {
+        return { stdout: finalOutput, stderr: '' }
+    }
+}
+
+/**
+ * Runs the rerouter CLI implementation without spawning a separate process.
+ *
+ * @param args - Command line arguments, excluding the binary name.
+ * @param options - Runtime options used to resolve paths and render the command comment.
+ * @returns Captured stdout, stderr, and an optional process exit code.
+ *
+ * @example
+ * ```ts
+ * const result = await runRerouterBin(['./routes.ts'])
+ * process.stdout.write(result.stdout)
+ * ```
+ *
+ * @internal
+ */
+export async function runRerouterBin(
+    args: readonly string[],
+    options: RunOptions = {},
+): Promise<RunResult> {
+    const { values, positionals } = parseArgs({ ...PARSE_CONFIG, args: [...args] })
+    return main(values, positionals, { ...options, commandArgs: args })
+}
+
+//#region Invoke main
+type ParsedConfig = ReturnType<typeof parseArgs<typeof PARSE_CONFIG>>
+type Options = ParsedConfig['values']
+type Positionals = ParsedConfig['positionals']
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+    runRerouterBin(process.argv.slice(2)).then(
+        (result) => {
+            if (result.stdout) process.stdout.write(result.stdout)
+            if (result.stderr) process.stderr.write(result.stderr)
+            if (typeof result.exitCode === 'number') process.exitCode = result.exitCode
+        },
+        (err) => {
+            console.error(err ?? 'An unknown error occurred')
+            process.exitCode = 1
+        },
+    )
+}
+//#endregion

package/cli/fixtures/bin/kitchen-sink.tsx

@@ -0,0 +1,15 @@
+import type { RouteObject } from '@mpen/rerouter'
+
+const ROUTES: readonly RouteObject[] = [
+    { name: 'home', pattern: '/', component: () => import('./pages/Home') },
+    {
+        name: 'kitchenSink',
+        pattern: '/hello/:foo/bar/:baz/*splat/xxx{/:optional/lol/:two}',
+        component: () => import('./pages/KitchenSink'),
+    },
+    { name: 'login', pattern: '/login', component: () => import('./pages/Login') },
+    { name: 'match', pattern: '/matches/:id', component: () => import('./pages/Match') },
+    { name: 'notFound', pattern: '*', component: () => import('./pages/NotFound') },
+]
+
+export default ROUTES

package/cli/fixtures/bin/optional.tsx

@@ -0,0 +1,3 @@
+export default [
+    { name: 'optional', pattern: '/foo{/:bar}', component: () => import('./pages/Optional') },
+]