npm - @mpen/rerouter - Versions diffs - 0.1.9 → 0.3.1 - Mend

@mpen/rerouter 0.1.9 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/README.md +80 -18
package/cli/bin.test.ts +221 -0
package/cli/bin.ts +342 -0
package/cli/fixtures/bin/kitchen-sink.tsx +15 -0
package/cli/fixtures/bin/optional.tsx +3 -0
package/cli/fixtures/bin/pages/Home.tsx +3 -0
package/cli/fixtures/bin/pages/KitchenSink.tsx +3 -0
package/cli/fixtures/bin/pages/Login.tsx +3 -0
package/cli/fixtures/bin/pages/Match.tsx +3 -0
package/cli/fixtures/bin/pages/NotFound.tsx +3 -0
package/cli/fixtures/bin/pages/Optional.tsx +3 -0
package/cli/fixtures/bin/regexp-groups.tsx +11 -0
package/cli/fixtures/bin/simple.tsx +1 -0
package/cli/fixtures/bin/unnamed.tsx +4 -0
package/cli/tsconfig.json +9 -0
package/dist/acorn-k7ED_tOl.js +4968 -0
package/dist/angular--Iqdw9UJ.js +4057 -0
package/dist/babel-hfWAujRY.js +9878 -0
package/dist/bin.d.ts +29 -0
package/dist/bin.js +233 -0
package/dist/estree-C1Zjnvlw.js +7266 -0
package/dist/flow-BaD9LyIP.js +52912 -0
package/dist/glimmer-CvCjW_1V.js +7541 -0
package/dist/graphql-BdtzBuWh.js +1945 -0
package/dist/html-DkZtUVbo.js +7137 -0
package/dist/index.d.ts +278 -0
package/dist/index.js +247 -0
package/dist/markdown-Z8Vrc69e.js +6876 -0
package/dist/meriyah-DeO4stuH.js +7590 -0
package/dist/postcss-BmgGJ0E5.js +6777 -0
package/dist/prettier-BT_F8kIx.js +15629 -0
package/dist/routes-PW-bNm8e.js +135 -0
package/dist/typescript-DtIxStjy.js +22936 -0
package/dist/yaml-CWOPBY0q.js +5281 -0
package/examples/App.tsx +80 -0
package/examples/dist/BlogPost-c10d9w2p.js +1 -0
package/examples/dist/FetchLoading-534mdrgz.js +1 -0
package/examples/dist/FetchLoading-sbxbdkre.js +1 -0
package/examples/dist/Home-a1258p25.js +1 -0
package/examples/dist/KitchenSink-821mjg0h.js +1 -0
package/examples/dist/Login-wywx6bp7.js +1 -0
package/examples/dist/Match-1e72jm5w.js +1 -0
package/examples/dist/NotFound-smxj24jw.js +1 -0
package/examples/dist/SlowLoading-59xxmbfk.js +1 -0
package/examples/dist/index-0d4kj0rv.js +2 -0
package/examples/dist/index-3x197sbt.js +9 -0
package/examples/dist/index-a2hkfx1n.js +9 -0
package/examples/dist/index-d21me1mc.js +9 -0
package/examples/dist/index-ktqdknsn.js +2 -0
package/examples/dist/index-p53qxxzd.js +2 -0
package/examples/dist/index.html +67 -0
package/examples/index.html +67 -0
package/examples/pages/BlogPost.tsx +17 -0
package/examples/pages/FetchLoading.tsx +53 -0
package/examples/pages/FetchLoadingItem.tsx +45 -0
package/examples/pages/Home.tsx +3 -0
package/examples/pages/KitchenSink.tsx +23 -0
package/examples/pages/Login.tsx +3 -0
package/examples/pages/Match.tsx +5 -0
package/examples/pages/NotFound.tsx +3 -0
package/examples/pages/SlowLoading.tsx +8 -0
package/examples/routes.gen.ts +105 -0
package/examples/routes.ts +40 -0
package/examples/server/serve-dist.ts +33 -0
package/examples/server/tsconfig.json +9 -0
package/package.json +41 -31
package/src/components/Link.test.tsx +139 -0
package/src/components/Link.tsx +89 -0
package/src/components/NavLink.test.tsx +119 -0
package/src/components/NavLink.tsx +71 -0
package/src/components/Router.test.tsx +183 -0
package/src/components/Router.tsx +207 -0
package/src/hooks/index.ts +1 -0
package/src/hooks/useUrl.ts +22 -0
package/src/index.ts +6 -0
package/src/lib/mergeSearch.test.ts +37 -0
package/src/lib/mergeSearch.ts +21 -0
package/src/lib/routes.test.ts +67 -0
package/src/lib/routes.ts +247 -0
package/src/lib/url.ts +9 -0
package/tsconfig.json +10 -0
package/tsdown.config.ts +21 -0
package/LICENSE +0 -21
package/dist/bundle.cjs +0 -422
package/dist/bundle.d.ts +0 -2
package/dist/bundle.mjs +0 -420
package/dist/dev.d.ts +0 -1
package/dist/log.d.ts +0 -1
package/dist/uri-template.d.ts +0 -56

package/examples/dist/index.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>@mpen/rerouter examples</title>
+        <style>
+            body {
+                margin: 0;
+                font-family:
+                    ui-sans-serif,
+                    system-ui,
+                    -apple-system,
+                    Segoe UI,
+                    Roboto,
+                    Helvetica,
+                    Arial,
+                    'Apple Color Emoji',
+                    'Segoe UI Emoji';
+                background: #0b1020;
+                color: #e8eefc;
+            }
+            a {
+                color: inherit;
+            }
+            .app {
+                max-width: 900px;
+                margin: 0 auto;
+                padding: 24px;
+            }
+            .card {
+                background: rgba(255, 255, 255, 0.06);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                border-radius: 12px;
+                padding: 16px;
+                margin-bottom: 16px;
+            }
+            .nav {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                margin-top: 8px;
+            }
+            .pill {
+                padding: 6px 10px;
+                border-radius: 999px;
+                border: 1px solid rgba(255, 255, 255, 0.16);
+                background: rgba(255, 255, 255, 0.06);
+                text-decoration: none;
+            }
+            .pill.active {
+                border-color: rgba(90, 200, 250, 0.7);
+                background: rgba(90, 200, 250, 0.18);
+            }
+            code {
+                font-family:
+                    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+                    'Courier New', monospace;
+                font-size: 0.95em;
+            }
+        </style>
+    <script type="module" crossorigin src="./index-d21me1mc.js"></script></head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

package/examples/index.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>@mpen/rerouter examples</title>
+        <style>
+            body {
+                margin: 0;
+                font-family:
+                    ui-sans-serif,
+                    system-ui,
+                    -apple-system,
+                    Segoe UI,
+                    Roboto,
+                    Helvetica,
+                    Arial,
+                    'Apple Color Emoji',
+                    'Segoe UI Emoji';
+                background: #0b1020;
+                color: #e8eefc;
+            }
+            a {
+                color: inherit;
+            }
+            .app {
+                max-width: 900px;
+                margin: 0 auto;
+                padding: 24px;
+            }
+            .card {
+                background: rgba(255, 255, 255, 0.06);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                border-radius: 12px;
+                padding: 16px;
+                margin-bottom: 16px;
+            }
+            .nav {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                margin-top: 8px;
+            }
+            .pill {
+                padding: 6px 10px;
+                border-radius: 999px;
+                border: 1px solid rgba(255, 255, 255, 0.16);
+                background: rgba(255, 255, 255, 0.06);
+                text-decoration: none;
+            }
+            .pill.active {
+                border-color: rgba(90, 200, 250, 0.7);
+                background: rgba(90, 200, 250, 0.18);
+            }
+            code {
+                font-family:
+                    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+                    'Courier New', monospace;
+                font-size: 0.95em;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./App.tsx"></script>
+    </body>
+</html>

package/examples/pages/BlogPost.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { RouteComponent } from '../../src'
+type BlogPostParams = {
+    id: string
+    title?: string
+}
+const BlogPost: RouteComponent<BlogPostParams> = ({ id, title }) => {
+    return (
+        <div>
+            <div>Blog post: {id}</div>
+            <div>Title: {title}</div>
+        </div>
+    )
+}
+export default BlogPost

package/examples/pages/FetchLoading.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import { use } from 'react'
+import { NavLink, Router, type RouteObject } from '../../src'
+import FetchLoadingItem from './FetchLoadingItem'
+import * as routesGen from '../routes.gen'
+const itemRoutes: readonly RouteObject[] = [
+    {
+        pattern: '/fetch-loading/:id',
+        component: async () => ({ default: FetchLoadingItem }),
+    },
+]
+type FetchResult = {
+    message: string
+    loadedAt: string
+}
+const fetchResult = new Promise<FetchResult>((resolve) => {
+    setTimeout(() => {
+        resolve({
+            message: 'The route component loaded immediately, then Suspense waited for data.',
+            loadedAt: new Date().toLocaleTimeString(),
+        })
+    }, 2000)
+})
+export default function FetchLoading() {
+    const result = use(fetchResult)
+    const itemIds = ['abc-123', 'invoice-456', 'with/slash']
+    return (
+        <div>
+            <h2 style={{ marginTop: 0 }}>Fetch loading page</h2>
+            <div>{result.message}</div>
+            <div style={{ marginTop: 8, opacity: 0.8 }}>Loaded at {result.loadedAt}</div>
+            <div className="nav" style={{ marginTop: 16 }}>
+                {itemIds.map((id) => (
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        key={id}
+                        to={routesGen.fetchLoadingItem({ id })}
+                    >
+                        Fetch {id}
+                    </NavLink>
+                ))}
+            </div>
+            <div style={{ marginTop: 16 }}>
+                <Router routes={itemRoutes} loading={<div>Loading item...</div>} />
+            </div>
+        </div>
+    )
+}

package/examples/pages/FetchLoadingItem.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { use } from 'react'
+type FetchLoadingItemProps = {
+    id: string
+}
+type FetchResult = {
+    id: string
+    message: string
+    loadedAt: string
+}
+const fetchResults = new Map<string, Promise<FetchResult>>()
+function fetchItem(id: string): Promise<FetchResult> {
+    let result = fetchResults.get(id)
+    if (!result) {
+        result = new Promise<FetchResult>((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    id,
+                    message: `Fetched fake data for item ${id}.`,
+                    loadedAt: new Date().toLocaleTimeString(),
+                })
+            }, 2000)
+        })
+        fetchResults.set(id, result)
+    }
+    return result
+}
+export default function FetchLoadingItem({ id }: FetchLoadingItemProps) {
+    const result = use(fetchItem(id))
+    return (
+        <div>
+            <h2 style={{ marginTop: 0 }}>Fetch loading item</h2>
+            <div>
+                URL param: <code>{result.id}</code>
+            </div>
+            <div style={{ marginTop: 8 }}>{result.message}</div>
+            <div style={{ marginTop: 8, opacity: 0.8 }}>Loaded at {result.loadedAt}</div>
+        </div>
+    )
+}

package/examples/pages/Home.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function Home() {
+    return <div>Home</div>
+}

package/examples/pages/KitchenSink.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type { RouteComponent } from '../../src'
+type KitchenSinkParams = {
+    foo: string
+    baz: string
+    splat: string
+    optional?: string
+    two?: string
+}
+const KitchenSink: RouteComponent<KitchenSinkParams> = ({ foo, baz, splat, optional, two }) => {
+    return (
+        <div>
+            <div>foo: {foo}</div>
+            <div>baz: {baz}</div>
+            <div>splat: {splat}</div>
+            <div>optional: {optional}</div>
+            <div>two: {two}</div>
+        </div>
+    )
+}
+export default KitchenSink

package/examples/pages/Login.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function Login() {
+    return <div>Login</div>
+}

package/examples/pages/Match.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import type { RouteParams } from '../../src'
+export default function Match({ id }: RouteParams) {
+    return <div>Match: {id}</div>
+}

package/examples/pages/NotFound.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function NotFound() {
+    return <div>Not found</div>
+}

package/examples/pages/SlowLoading.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+export default function SlowLoading() {
+    return (
+        <div>
+            <h2 style={{ marginTop: 0 }}>Slow loading page</h2>
+            <div>This page waits 2 seconds before its route component finishes loading.</div>
+        </div>
+    )
+}

package/examples/routes.gen.ts ADDED Viewed

@@ -0,0 +1,105 @@
+// Do not modify this file. It was auto-generated with the following command:
+// $ rerouter ./examples/routes.ts -w -p
+type AllOrNone<T> = Required<T> | { [K in keyof T]?: never }
+type ParamType = string | number | boolean
+type WildcardType = Iterable<ParamType>
+export function home(): string {
+  let sb = ''
+  sb += '/'
+  return sb
+}
+export function kitchenSink(
+  params: { foo: ParamType; baz: ParamType; splat: WildcardType } & AllOrNone<{
+    optional: ParamType
+    two: ParamType
+  }>,
+): string {
+  let sb = ''
+  if (params['foo'] == null) throw new Error('Missing param: foo')
+  if (params['baz'] == null) throw new Error('Missing param: baz')
+  if (params['splat'] == null) throw new Error('Missing param: splat')
+  sb += '/hello/'
+  sb += encodeURIComponent(String(params['foo']))
+  sb += '/bar/'
+  sb += encodeURIComponent(String(params['baz']))
+  sb += '/'
+  sb += Array.from(params['splat'], (v) => encodeURIComponent(String(v))).join('/')
+  sb += '/xxx'
+  if (params['optional'] != null && params['two'] != null) {
+    sb += '/'
+    sb += encodeURIComponent(String(params['optional']))
+    sb += '/lol/'
+    sb += encodeURIComponent(String(params['two']))
+  } else if (!(params['optional'] == null && params['two'] == null)) {
+    throw new Error('Group requires all-or-none: "optional", "two"')
+  }
+  return sb
+}
+export function blogPost(params: { id: ParamType } & AllOrNone<{ title: ParamType }>): string {
+  let sb = ''
+  if (params['id'] == null) throw new Error('Missing param: id')
+  sb += '/blog/'
+  sb += encodeURIComponent(String(params['id']))
+  if (params['title'] != null) {
+    sb += '-'
+    sb += encodeURIComponent(String(params['title']))
+  } else if (!(params['title'] == null)) {
+    throw new Error('Group requires all-or-none: "title"')
+  }
+  return sb
+}
+export function slowLoading(): string {
+  let sb = ''
+  sb += '/slow-loading'
+  return sb
+}
+export function fetchLoading(): string {
+  let sb = ''
+  sb += '/fetch-loading'
+  return sb
+}
+export function fetchLoadingItem(params: { id: ParamType }): string {
+  let sb = ''
+  if (params['id'] == null) throw new Error('Missing param: id')
+  sb += '/fetch-loading/'
+  sb += encodeURIComponent(String(params['id']))
+  return sb
+}
+export function login(): string {
+  let sb = ''
+  sb += '/login'
+  return sb
+}
+export function match(params: { id: ParamType }): string {
+  let sb = ''
+  if (params['id'] == null) throw new Error('Missing param: id')
+  sb += '/matches/'
+  sb += encodeURIComponent(String(params['id']))
+  return sb
+}

package/examples/routes.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import type { Routes } from '@mpen/rerouter'
+const loadFetchLoading = () => import('./pages/FetchLoading')
+const ROUTES: Routes = [
+    { name: 'home', pattern: '/', component: () => import('./pages/Home') },
+    {
+        name: 'kitchenSink',
+        pattern: '/hello/:foo/bar/:baz/*splat/xxx{/:optional/lol/:two}',
+        component: () => import('./pages/KitchenSink'),
+    },
+    {
+        name: 'blogPost',
+        pattern: '/blog/:id(\\d+){-:title}?',
+        component: () => import('./pages/BlogPost'),
+    },
+    {
+        name: 'slowLoading',
+        pattern: '/slow-loading',
+        component: () =>
+            new Promise((resolve) => {
+                setTimeout(resolve, 2000)
+            }).then(() => import('./pages/SlowLoading')),
+    },
+    {
+        name: 'fetchLoading',
+        pattern: '/fetch-loading',
+        component: loadFetchLoading,
+    },
+    {
+        name: 'fetchLoadingItem',
+        pattern: '/fetch-loading/:id',
+        component: loadFetchLoading,
+    },
+    { 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/examples/server/serve-dist.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+const distPath = fileURLToPath(new URL('../dist/', import.meta.url))
+const index = Bun.file(join(distPath, 'index.html'))
+async function fileForPath(pathname: string) {
+    const requestedPath = pathname === '/' ? 'index.html' : pathname.slice(1)
+    const file = Bun.file(join(distPath, requestedPath))
+    if (await file.exists()) return file
+    if (pathname.startsWith('/_bun/') || requestedPath.split('/').at(-1)?.includes('.'))
+        return undefined
+    return index
+}
+const server = Bun.serve({
+    async fetch(request) {
+        const url = new URL(request.url)
+        const file = await fileForPath(url.pathname)
+        if (!file) return new Response('Not found', { status: 404 })
+        return new Response(file, {
+            headers: {
+                'Cache-Control': 'no-store',
+            },
+        })
+    },
+})
+console.log(`Serving production build at ${server.url}`)

package/examples/server/tsconfig.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ESNext"],
+        "types": ["bun"]
+    },
+    "include": ["serve-dist.ts"],
+    "exclude": ["**/*.test.*"]
+}

package/package.json CHANGED Viewed

@@ -1,39 +1,49 @@
 {
   "name": "@mpen/rerouter",
-  "version": "0.1.9",
-  "packageManager": "bun",
-  "exports": "./dist/bundle.cjs",
-  "module": "./dist/bundle.mjs",
-  "types": "./dist/bundle.d.ts",
-  "files": [
-    "./dist"
-  ],
+  "description": "Lightweight type-safe router for React with URL helper generation.",
+  "version": "0.3.1",
+  "exports": {
+    ".": "./dist/index.js",
+    "./bin": "./dist/bin.js",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "rerouter": "./dist/bin.js"
+  },
   "type": "module",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "bun-types": "^1.0.2",
-    "chalk": "^5.3.0",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.29.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+  "dependencies": {
+    "@mpen/classcat": "0.1.3",
+    "@mpen/ts-types": "0.1.2",
+    "path-to-regexp": "^8.3.0"
   },
-  "engines": {
-    "node": ">=10"
+  "peerDependencies": {
+    "react": "^19",
+    "typescript": "^5"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.9.0",
+    "react-dom": "^19.2.3",
+    "tsdown": "^0.21"
   },
-  "license": "MIT",
   "scripts": {
-    "test": "bun test --watch src",
-    "dev": "bun run --hot src/dev.ts",
-    "bundle:clean": "rimraf -g \"dist/*\"",
-    "bundle:build": "rollup -c",
-    "bundle": "run-s bundle:clean bundle:build",
-    "patch": "npm version patch && VER=$(jq -r '.version' package.json) && hg ci -m \"Publish v$VER\" && hg tag \"v$VER\"",
-    "release": "run-s bundle patch && npm publish && hg push"
+    "build": "tsdown",
+    "gen": "bun cli/bin.ts ./examples/routes.ts -w -p",
+    "serve": "bun --hot examples/index.html",
+    "dev": "bun run --sequential gen serve",
+    "prod": "bun run gen && bun build --production --splitting examples/index.html --outdir examples/dist && bun examples/server/serve-dist.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "inlinedDependencies": {
+    "prettier": "3.8.3",
+    "process": "0.11.10"
   }
 }