@mpen/rerouter 0.3.0 → 0.3.1

package/src/components/Router.tsx

@@ -1,18 +1,141 @@
-import { lazy, Suspense, useMemo, type ReactNode } from 'react'
+import { startTransition, Suspense, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useUrlPath } from '../hooks'
-import { normalizeRoutes, type Route } from '../lib/routes'
+import {
+    normalizeRoutes,
+    type NormalizedRoute,
+    type Route,
+    type RouteComponent,
+} from '../lib/routes'
 
-type LazyRouteComponent = ReturnType<typeof lazy>
+const DEFAULT_LOADING_DELAY_MS = 400
+const loadedRouteComponents = new WeakMap<Route['component'], RouteComponent<any>>()
+const loadingRouteComponents = new WeakMap<Route['component'], Promise<RouteComponent<any>>>()
 
-const lazyRouteComponents = new WeakMap<Route['component'], LazyRouteComponent>()
+type RouteMatch = {
+    route: NormalizedRoute
+    params: Record<string, string | undefined>
+    pathname: string
+}
+
+type RenderedRoute = RouteMatch & {
+    Component: RouteComponent<any>
+}
+
+function loadRouteComponent(component: Route['component']): Promise<RouteComponent<any>> {
+    const loaded = loadedRouteComponents.get(component)
+    if (loaded) return Promise.resolve(loaded)
+
+    let loading = loadingRouteComponents.get(component)
+    if (!loading) {
+        loading = component().then((module) => {
+            loadedRouteComponents.set(component, module.default)
+            loadingRouteComponents.delete(component)
+            return module.default
+        })
+        loadingRouteComponents.set(component, loading)
+    }
+
+    return loading
+}
 
-function getLazyRouteComponent(component: Route['component']): LazyRouteComponent {
-    let LazyComponent = lazyRouteComponents.get(component)
-    if (!LazyComponent) {
-        LazyComponent = lazy(component)
-        lazyRouteComponents.set(component, LazyComponent)
+function findRouteMatch(routes: readonly NormalizedRoute[], pathname: string): RouteMatch | null {
+    for (const route of routes) {
+        const params = route.matches(pathname)
+        if (!params) continue
+        return { route, params, pathname }
     }
-    return LazyComponent
+
+    return null
+}
+
+function getLoadedRoute(match: RouteMatch | null): RenderedRoute | null {
+    if (!match) return null
+
+    const Component = loadedRouteComponents.get(match.route.component)
+    if (!Component) return null
+
+    return {
+        ...match,
+        Component,
+    }
+}
+
+function scheduleTransition(cb: () => void): void {
+    queueMicrotask(() => {
+        startTransition(cb)
+    })
+}
+
+function useRenderedRoute(
+    match: RouteMatch | null,
+    loadingDelayMs: number,
+): { renderedRoute: RenderedRoute | null; showLoading: boolean } {
+    const [renderedRoute, setRenderedRoute] = useState(() => getLoadedRoute(match))
+    const [showLoading, setShowLoading] = useState(false)
+    const [loadError, setLoadError] = useState<unknown>(null)
+
+    useEffect(() => {
+        if (!match) {
+            scheduleTransition(() => {
+                setRenderedRoute(null)
+                setShowLoading(false)
+                setLoadError(null)
+            })
+            return
+        }
+
+        const loaded = getLoadedRoute(match)
+        if (loaded) {
+            scheduleTransition(() => {
+                setRenderedRoute(loaded)
+                setShowLoading(false)
+                setLoadError(null)
+            })
+            return
+        }
+
+        let active = true
+        let timeout: ReturnType<typeof setTimeout> | undefined
+
+        scheduleTransition(() => {
+            setShowLoading(false)
+        })
+
+        if (loadingDelayMs <= 0) {
+            timeout = setTimeout(() => {
+                if (active) setShowLoading(true)
+            }, 0)
+        } else {
+            timeout = setTimeout(() => {
+                if (active) setShowLoading(true)
+            }, loadingDelayMs)
+        }
+
+        loadRouteComponent(match.route.component)
+            .then((Component) => {
+                if (!active) return
+                if (timeout) clearTimeout(timeout)
+
+                startTransition(() => {
+                    setRenderedRoute({ ...match, Component })
+                    setShowLoading(false)
+                    setLoadError(null)
+                })
+            })
+            .catch((error: unknown) => {
+                if (!active) return
+                setLoadError(error)
+            })
+
+        return () => {
+            active = false
+            if (timeout) clearTimeout(timeout)
+        }
+    }, [loadingDelayMs, match])
+
+    if (loadError) throw loadError
+
+    return { renderedRoute, showLoading }
 }
 
 /**
@@ -32,6 +155,14 @@ export interface RouterProps {
      * Optional fallback rendered while a matched route component module is loading.
      */
     loading?: ReactNode
+
+    /**
+     * Delay before rendering [`RouterProps.loading`]{@link RouterProps#loading} for a suspended
+     * route, in milliseconds.
+     *
+     * @defaultValue `400`
+     */
+    loadingDelayMs?: number
 }
 
 /**
@@ -45,31 +176,32 @@ export interface RouterProps {
  * import routes from './routes'
  *
  * function App() {
- *     return <Router routes={routes} loading={<div>Loading...</div>} />
+ *     return <Router routes={routes} loading={<div>Loading...</div>} loadingDelayMs={400} />
  * }
  * ```
  */
-export function Router({ routes, loading = null }: RouterProps) {
+export function Router({
+    routes,
+    loading = null,
+    loadingDelayMs = DEFAULT_LOADING_DELAY_MS,
+}: RouterProps) {
     const pathname = useUrlPath()
 
-    const normalizedRoutes = useMemo(
-        () =>
-            normalizeRoutes(routes).map((route) => ({
-                ...route,
-                Component: getLazyRouteComponent(route.component),
-            })),
-        [routes],
+    const normalizedRoutes = useMemo(() => normalizeRoutes(routes), [routes])
+    const match = useMemo(
+        () => findRouteMatch(normalizedRoutes, pathname),
+        [normalizedRoutes, pathname],
     )
+    const { renderedRoute, showLoading } = useRenderedRoute(match, loadingDelayMs)
 
-    for (const { matches, Component } of normalizedRoutes) {
-        const params = matches(pathname)
-        if (!params) continue
-        return (
-            <Suspense fallback={loading}>
-                <Component {...(params as any)} />
-            </Suspense>
-        )
-    }
+    if (showLoading) return loading
+    if (!renderedRoute) return null
 
-    return null
+    const { Component, params } = renderedRoute
+
+    return (
+        <Suspense fallback={loading}>
+            <Component {...(params as any)} />
+        </Suspense>
+    )
 }

package/src/lib/routes.ts

@@ -66,6 +66,8 @@ export type RouteObject = {
     component: RouteComponentLoader<any>
 }
 
+export type Routes = RouteObject[]
+
 /**
  * Route definition consumed by [`Router`]{@link Router}.
  *

package/tsconfig.json

@@ -3,7 +3,8 @@
     "compilerOptions": {
         "jsx": "react-jsx",
         "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "types": ["bun", "node", "react", "react-dom"]
+        "types": ["react", "react-dom"]
     },
-    "include": ["src/**/*", "examples/**/*"]
+    "include": ["src/**/*", "examples/**/*.ts", "examples/**/*.tsx"],
+    "exclude": ["**/*.test.*", "cli/**/*", "examples/dist/**/*", "examples/server/**/*"]
 }

package/tsdown.config.ts

@@ -4,18 +4,17 @@ import { defineConfig } from 'tsdown'
 export default defineConfig({
     entry: {
         index: 'src/index.ts',
-        hooks: 'src/hooks/index.ts',
-        bin: 'src/bin.ts',
+        bin: 'cli/bin.ts',
     },
     format: 'esm',
-    platform: 'browser',
+    platform: 'neutral',
     deps: {
         neverBundle: [/^(node|bun):/, 'react'],
     },
     exports: {
         legacy: true,
         bin: {
-            rerouter: './src/bin.ts',
+            rerouter: './cli/bin.ts',
         },
     },
     dts: true, // The client must use "moduleResolution": "bundler", "node16" or "nodenext". "node" will not resolve the types properly.

package/dist/hooks-Dlwcb0sV.js

@@ -1,20 +0,0 @@
-import { useMemo, useSyncExternalStore } from "react";
-//#region src/hooks/useUrl.ts
-const getPathname = () => window.location.pathname;
-const getSearch = () => window.location.search;
-function subscribe(cb) {
-	const handler = () => cb();
-	window.addEventListener("popstate", handler);
-	return () => {
-		window.removeEventListener("popstate", handler);
-	};
-}
-function useUrlPath() {
-	return useSyncExternalStore(subscribe, getPathname, getPathname);
-}
-function useUrlSearchParams() {
-	const search = useSyncExternalStore(subscribe, getSearch, getSearch);
-	return useMemo(() => new URLSearchParams(search), [search]);
-}
-//#endregion
-export { useUrlSearchParams as n, useUrlPath as t };

package/dist/hooks.d.ts

@@ -1,2 +0,0 @@
-import { n as useUrlSearchParams, t as useUrlPath } from "./index-BYXpNitc.js";
-export { useUrlPath, useUrlSearchParams };

package/dist/hooks.js

@@ -1,2 +0,0 @@
-import { n as useUrlSearchParams, t as useUrlPath } from "./hooks-Dlwcb0sV.js";
-export { useUrlPath, useUrlSearchParams };

package/dist/index-BYXpNitc.d.ts

@@ -1,5 +0,0 @@
-//#region src/hooks/useUrl.d.ts
-declare function useUrlPath(): string;
-declare function useUrlSearchParams(): URLSearchParams;
-//#endregion
-export { useUrlSearchParams as n, useUrlPath as t };