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

@mpen/rerouter 0.3.0 → 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 (66) hide show

package/README.md +4 -0
package/{src → cli}/bin.test.ts +24 -2
package/{src → cli}/bin.ts +27 -18
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 +1 -1
package/dist/bin.js +28 -23
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 +19 -6
package/dist/index.js +135 -27
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/typescript-DtIxStjy.js +22936 -0
package/dist/yaml-CWOPBY0q.js +5281 -0
package/examples/App.tsx +18 -49
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/routes.gen.ts +66 -86
package/examples/routes.ts +2 -2
package/examples/server/serve-dist.ts +33 -0
package/examples/server/tsconfig.json +9 -0
package/package.json +11 -6
package/src/components/Link.tsx +8 -6
package/src/components/Router.test.tsx +183 -0
package/src/components/Router.tsx +161 -29
package/src/lib/routes.ts +2 -0
package/tsconfig.json +3 -2
package/tsdown.config.ts +3 -4
package/dist/hooks-Dlwcb0sV.js +0 -20
package/dist/hooks.d.ts +0 -2
package/dist/hooks.js +0 -2
package/dist/index-BYXpNitc.d.ts +0 -5
/package/{src → cli}/fixtures/bin/kitchen-sink.tsx +0 -0
/package/{src → cli}/fixtures/bin/optional.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/Home.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/KitchenSink.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/Login.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/Match.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/NotFound.tsx +0 -0
/package/{src → cli}/fixtures/bin/pages/Optional.tsx +0 -0
/package/{src → cli}/fixtures/bin/regexp-groups.tsx +0 -0
/package/{src → cli}/fixtures/bin/simple.tsx +0 -0
/package/{src → cli}/fixtures/bin/unnamed.tsx +0 -0
/package/dist/{routes-Hpf6cwcZ.js → routes-PW-bNm8e.js} +0 -0

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/routes.gen.ts CHANGED Viewed

@@ -1,125 +1,105 @@
 // Do not modify this file. It was auto-generated with the following command:
-// $ rerouter ./examples/routes.ts -w
+// $ rerouter ./examples/routes.ts -w -p
-type AllOrNone<T> =
-    | Required<T>
-    | { [K in keyof T]?: never }
+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 = ""
+  let sb = ''
-    sb += "/"
+  sb += '/'
-    return sb
+  return sb
 }
 export function kitchenSink(
-    params: {
-    "foo": ParamType
-    "baz": ParamType
-    "splat": WildcardType
-} & AllOrNone<{
-    "optional": ParamType
-    "two": ParamType
-}>
+  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
+  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 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 = ""
+  let sb = ''
-    sb += "/slow-loading"
+  sb += '/slow-loading'
-    return sb
+  return sb
 }
 export function fetchLoading(): string {
-    let sb = ""
+  let sb = ''
-    sb += "/fetch-loading"
+  sb += '/fetch-loading'
-    return sb
+  return sb
 }
-export function fetchLoadingItem(
-    params: {
-    "id": ParamType
-}
-): string {
-    let 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"]))
+  if (params['id'] == null) throw new Error('Missing param: id')
+  sb += '/fetch-loading/'
+  sb += encodeURIComponent(String(params['id']))
-    return sb
+  return sb
 }
 export function login(): string {
-    let sb = ""
+  let sb = ''
-    sb += "/login"
+  sb += '/login'
-    return sb
+  return sb
 }
-export function match(
-    params: {
-    "id": ParamType
-}
-): string {
-    let 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"]))
+  if (params['id'] == null) throw new Error('Missing param: id')
+  sb += '/matches/'
+  sb += encodeURIComponent(String(params['id']))
-    return sb
+  return sb
 }

package/examples/routes.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import type { RouteObject } from '../src'
+import type { Routes } from '@mpen/rerouter'
 const loadFetchLoading = () => import('./pages/FetchLoading')
-const ROUTES: readonly RouteObject[] = [
+const ROUTES: Routes = [
     { name: 'home', pattern: '/', component: () => import('./pages/Home') },
     {
         name: 'kitchenSink',

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,10 +1,10 @@
 {
   "name": "@mpen/rerouter",
-  "version": "0.3.0",
+  "description": "Lightweight type-safe router for React with URL helper generation.",
+  "version": "0.3.1",
   "exports": {
     ".": "./dist/index.js",
     "./bin": "./dist/bin.js",
-    "./hooks": "./dist/hooks.js",
     "./package.json": "./package.json"
   },
   "bin": {
@@ -13,7 +13,7 @@
   "type": "module",
   "dependencies": {
     "@mpen/classcat": "0.1.3",
-    "@mpen/ts-types": "0.1.1",
+    "@mpen/ts-types": "0.1.2",
     "path-to-regexp": "^8.3.0"
   },
   "peerDependencies": {
@@ -31,14 +31,19 @@
   },
   "scripts": {
     "build": "tsdown",
-    "gen": "bun src/bin.ts ./examples/routes.ts -w",
+    "gen": "bun cli/bin.ts ./examples/routes.ts -w -p",
     "serve": "bun --hot examples/index.html",
-    "dev": "bun run --sequential gen serve"
+    "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"
+  "module": "./dist/index.js",
+  "inlinedDependencies": {
+    "prettier": "3.8.3",
+    "process": "0.11.10"
+  }
 }

package/src/components/Link.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { cc, type ClassValue } from '@mpen/classcat'
 import type { OverrideProps } from '@mpen/ts-types/react'
-import type { MouseEvent } from 'react'
+import { startTransition, type MouseEvent } from 'react'
 import { pushUrl, replaceUrl } from '../lib/url'
 import { mergeSearch } from '../lib/mergeSearch'
@@ -72,11 +72,13 @@ export function Link({ to, search, children, className, replace, ...rest }: Link
         if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return
         if (ev.button !== 0) return
         ev.preventDefault()
-        if (replace) {
-            replaceUrl(href)
-        } else {
-            pushUrl(href)
-        }
+        startTransition(() => {
+            if (replace) {
+                replaceUrl(href)
+            } else {
+                pushUrl(href)
+            }
+        })
     }
     return (

package/src/components/Router.test.tsx ADDED Viewed

@@ -0,0 +1,183 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { Window } from 'happy-dom'
+import type { RouteObject } from '../lib/routes'
+const testWindow = new Window({ url: 'http://localhost/start' })
+testWindow.SyntaxError = SyntaxError
+Object.assign(globalThis, {
+    window: testWindow,
+    document: testWindow.document,
+    navigator: testWindow.navigator,
+    location: testWindow.location,
+    history: testWindow.history,
+    Event: testWindow.Event,
+    HTMLElement: testWindow.HTMLElement,
+    MouseEvent: testWindow.MouseEvent,
+    Node: testWindow.Node,
+    PopStateEvent: testWindow.PopStateEvent,
+    SyntaxError,
+    getComputedStyle: testWindow.getComputedStyle.bind(testWindow),
+})
+const { act, cleanup, render, waitFor } = await import('@testing-library/react')
+const { Router } = await import('./Router')
+const { pushUrl } = await import('../lib/url')
+function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms)
+    })
+}
+describe(Router.name, () => {
+    beforeEach(() => {
+        window.history.replaceState(null, '', '/start')
+    })
+    afterEach(() => {
+        cleanup()
+        window.history.replaceState(null, '', '/start')
+    })
+    test('delays the loading fallback while a route component is loading', async () => {
+        window.history.replaceState(null, '', '/slow')
+        const routes: readonly RouteObject[] = [
+            {
+                pattern: '/slow',
+                component: () =>
+                    new Promise(() => {
+                        // Keep the route pending so the fallback delay is observable.
+                    }),
+            },
+        ]
+        const view = render(
+            <Router loading={<div>Loading route...</div>} loadingDelayMs={25} routes={routes} />,
+        )
+        expect(view.queryByText('Loading route...')).toBeNull()
+        await act(async () => {
+            await wait(30)
+        })
+        expect(view.getByText('Loading route...')).toBeTruthy()
+    })
+    test('does not show the loading fallback when the route loads before the delay', async () => {
+        window.history.replaceState(null, '', '/quick')
+        const routes: readonly RouteObject[] = [
+            {
+                pattern: '/quick',
+                component: () =>
+                    wait(5).then(() => ({
+                        default: function QuickRoute() {
+                            return <div>Quick route</div>
+                        },
+                    })),
+            },
+        ]
+        const view = render(
+            <Router loading={<div>Loading route...</div>} loadingDelayMs={50} routes={routes} />,
+        )
+        expect(view.queryByText('Loading route...')).toBeNull()
+        await waitFor(() => {
+            expect(view.getByText('Quick route')).toBeTruthy()
+        })
+        expect(view.queryByText('Loading route...')).toBeNull()
+    })
+    test('keeps the current route visible until a slow next route reaches the delay', async () => {
+        const routes: readonly RouteObject[] = [
+            {
+                pattern: '/start',
+                component: async () => ({
+                    default: function StartRoute() {
+                        return <div>Start route</div>
+                    },
+                }),
+            },
+            {
+                pattern: '/slow',
+                component: () =>
+                    new Promise(() => {
+                        // Keep the next route pending so the delayed loading state is observable.
+                    }),
+            },
+        ]
+        const view = render(
+            <Router loading={<div>Loading route...</div>} loadingDelayMs={25} routes={routes} />,
+        )
+        await waitFor(() => {
+            expect(view.getByText('Start route')).toBeTruthy()
+        })
+        act(() => {
+            pushUrl('/slow')
+        })
+        expect(view.getByText('Start route')).toBeTruthy()
+        expect(view.queryByText('Loading route...')).toBeNull()
+        await act(async () => {
+            await wait(30)
+        })
+        expect(view.queryByText('Start route')).toBeNull()
+        expect(view.getByText('Loading route...')).toBeTruthy()
+    })
+    test('keeps the current route visible until a quick next route is ready', async () => {
+        const routes: readonly RouteObject[] = [
+            {
+                pattern: '/start',
+                component: async () => ({
+                    default: function StartRoute() {
+                        return <div>Start route</div>
+                    },
+                }),
+            },
+            {
+                pattern: '/quick',
+                component: () =>
+                    wait(5).then(() => ({
+                        default: function QuickRoute() {
+                            return <div>Quick route</div>
+                        },
+                    })),
+            },
+        ]
+        const view = render(
+            <Router loading={<div>Loading route...</div>} loadingDelayMs={50} routes={routes} />,
+        )
+        await waitFor(() => {
+            expect(view.getByText('Start route')).toBeTruthy()
+        })
+        act(() => {
+            pushUrl('/quick')
+        })
+        expect(view.getByText('Start route')).toBeTruthy()
+        expect(view.queryByText('Loading route...')).toBeNull()
+        await waitFor(() => {
+            expect(view.getByText('Quick route')).toBeTruthy()
+        })
+        expect(view.queryByText('Start route')).toBeNull()
+        expect(view.queryByText('Loading route...')).toBeNull()
+    })
+})