@mpen/rerouter 0.1.7 → 0.3.0

package/dist/index.js

@@ -0,0 +1,139 @@
+import { n as useUrlSearchParams, t as useUrlPath } from "./hooks-Dlwcb0sV.js";
+import { n as normalizeRoutes, t as normalizeLegacyPathToRegexpSyntax } from "./routes-Hpf6cwcZ.js";
+import { cc } from "@mpen/classcat";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy, useMemo } from "react";
+//#region src/lib/url.ts
+function pushUrl(next, state) {
+	window.history.pushState(state, "", next);
+	window.dispatchEvent(new PopStateEvent("popstate"));
+}
+function replaceUrl(next, state) {
+	window.history.replaceState(state, "", next);
+	window.dispatchEvent(new PopStateEvent("popstate"));
+}
+//#endregion
+//#region src/lib/mergeSearch.ts
+function mergeSearch(to, search) {
+	const hashIndex = to.indexOf("#");
+	const hash = hashIndex !== -1 ? to.slice(hashIndex) : "";
+	const pathAndQuery = hashIndex !== -1 ? to.slice(0, hashIndex) : to;
+	const queryIndex = pathAndQuery.indexOf("?");
+	const path = queryIndex !== -1 ? pathAndQuery.slice(0, queryIndex) : pathAndQuery;
+	const existingQuery = queryIndex !== -1 ? pathAndQuery.slice(queryIndex + 1) : "";
+	const params = new URLSearchParams(existingQuery);
+	const newParams = new URLSearchParams(search);
+	for (const [key, value] of newParams) params.set(key, value);
+	const queryString = params.toString();
+	return `${path}${queryString ? "?" + queryString : ""}${hash}`;
+}
+//#endregion
+//#region src/components/Link.tsx
+/**
+* Renders an anchor that navigates with rerouter history updates on ordinary clicks.
+*
+* @example
+* ```tsx
+* <Link to="/matches/42" search={{ tab: 'details' }}>
+*     View match
+* </Link>
+* ```
+*
+* @param props - Anchor props plus rerouter navigation options.
+* @returns An anchor element that pushes or replaces the browser URL.
+*/
+function Link({ to, search, children, className, replace, ...rest }) {
+	const href = search ? mergeSearch(to, search) : to;
+	const linkClassName = cc(className);
+	const onClick = (ev) => {
+		if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
+		if (ev.button !== 0) return;
+		ev.preventDefault();
+		if (replace) replaceUrl(href);
+		else pushUrl(href);
+	};
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		className: linkClassName || void 0,
+		href,
+		onClick,
+		children
+	});
+}
+//#endregion
+//#region src/components/NavLink.tsx
+function isActivePath(pathname, targetPathname, match) {
+	if (pathname === targetPathname) return true;
+	if (match === "exact") return false;
+	if (targetPathname === "/") return false;
+	return pathname.startsWith(`${targetPathname}/`);
+}
+/**
+* Renders a [`Link`]{@link Link} with classes selected from the current route.
+*
+* @example
+* ```tsx
+* <NavLink
+*     activeClass={['pill', 'active']}
+*     inactiveClass={['pill', { muted: true }]}
+*     to="/settings"
+* >
+*     Settings
+* </NavLink>
+* ```
+*
+* @param props - Link props plus active and inactive class values.
+* @returns An anchor element that navigates through rerouter.
+*/
+function NavLink({ activeClass, className, inactiveClass, match = "exact", to, ...props }) {
+	const linkClassName = cc(className, isActivePath(useUrlPath(), new URL(to, window.location.href).pathname, match) ? activeClass : inactiveClass);
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		className: linkClassName || void 0,
+		to
+	});
+}
+//#endregion
+//#region src/components/Router.tsx
+const lazyRouteComponents = /* @__PURE__ */ new WeakMap();
+function getLazyRouteComponent(component) {
+	let LazyComponent = lazyRouteComponents.get(component);
+	if (!LazyComponent) {
+		LazyComponent = lazy(component);
+		lazyRouteComponents.set(component, LazyComponent);
+	}
+	return LazyComponent;
+}
+/**
+* Renders the first route that matches the current URL pathname.
+*
+* @param props - The router props.
+* @returns The matched lazy route component, the loading fallback, or `null`.
+*
+* @example
+* ```tsx
+* import routes from './routes'
+*
+* function App() {
+*     return <Router routes={routes} loading={<div>Loading...</div>} />
+* }
+* ```
+*/
+function Router({ routes, loading = null }) {
+	const pathname = useUrlPath();
+	const normalizedRoutes = useMemo(() => normalizeRoutes(routes).map((route) => ({
+		...route,
+		Component: getLazyRouteComponent(route.component)
+	})), [routes]);
+	for (const { matches, Component } of normalizedRoutes) {
+		const params = matches(pathname);
+		if (!params) continue;
+		return /* @__PURE__ */ jsx(Suspense, {
+			fallback: loading,
+			children: /* @__PURE__ */ jsx(Component, { ...params })
+		});
+	}
+	return null;
+}
+//#endregion
+export { Link, NavLink, Router, normalizeLegacyPathToRegexpSyntax, normalizeRoutes, pushUrl, replaceUrl, useUrlPath, useUrlSearchParams };

package/dist/routes-Hpf6cwcZ.js

@@ -0,0 +1,135 @@
+import { match } from "path-to-regexp";
+//#region src/lib/routes.ts
+function toUrlPattern(pattern) {
+	if (typeof pattern !== "string") return pattern;
+	return new URLPattern({ pathname: pattern });
+}
+function decodeRouteParams(groups) {
+	const params = {};
+	for (const [key, value] of Object.entries(groups)) if (value == null) params[key] = void 0;
+	else params[key] = decodeURIComponent(String(value));
+	return params;
+}
+function stripLegacyParamPattern(pattern, startIndex) {
+	let depth = 1;
+	let endIndex = startIndex + 1;
+	while (endIndex < pattern.length && depth > 0) {
+		const char = pattern[endIndex];
+		if (char === "\\") {
+			endIndex += 2;
+			continue;
+		}
+		if (char === "(") depth++;
+		else if (char === ")") depth--;
+		endIndex++;
+	}
+	return endIndex;
+}
+/**
+* Converts legacy `path-to-regexp` syntax that is ignored by URL generation into syntax accepted
+* by the current parser.
+*
+* @param pattern - The route pattern to normalize.
+* @returns The pattern with custom regexp constraints stripped and optional group suffixes removed.
+*
+* @example
+* ```ts
+* normalizeLegacyPathToRegexpSyntax('/blog/:id(\\d+){-:title}?')
+* // '/blog/:id{-:title}'
+* ```
+*
+* @internal
+*/
+function normalizeLegacyPathToRegexpSyntax(pattern) {
+	let normalized = "";
+	for (let i = 0; i < pattern.length; i++) {
+		const char = pattern[i];
+		if (char === "\\") {
+			normalized += char;
+			if (i + 1 < pattern.length) normalized += pattern[++i];
+			continue;
+		}
+		if (char === ":" || char === "*") {
+			normalized += char;
+			while (i + 1 < pattern.length && /[$_\p{ID_Continue}]/u.test(pattern[i + 1])) normalized += pattern[++i];
+			if (pattern[i + 1] === "(") i = stripLegacyParamPattern(pattern, i + 1) - 1;
+			continue;
+		}
+		if (char === "}" && pattern[i + 1] === "?") {
+			normalized += char;
+			i++;
+			continue;
+		}
+		normalized += char;
+	}
+	return normalized;
+}
+/**
+* Normalizes routes into objects with a shared matcher implementation.
+*
+* @param routes - The route definitions to normalize.
+* @returns Routes with stable `name`, `pattern`, `component`, and `matches` fields.
+*
+* @example
+* ```tsx
+* const normalized = normalizeRoutes(routes)
+* const match = normalized[0]?.matches('/users/123')
+* ```
+*/
+function normalizeRoutes(routes) {
+	return routes.map((route) => {
+		const { name, pattern, component } = route;
+		if (typeof pattern !== "string") {
+			const urlPattern = toUrlPattern(pattern);
+			return {
+				name,
+				pattern,
+				component,
+				matches(pathname) {
+					const match = urlPattern.exec({ pathname });
+					if (!match) return null;
+					return match.pathname?.groups ?? {};
+				}
+			};
+		}
+		if (pattern === "*" || pattern === "/*") return {
+			name,
+			pattern,
+			component,
+			matches: (_pathname) => ({})
+		};
+		let matcher;
+		let urlPattern;
+		try {
+			matcher = match(pattern, { decode: decodeURIComponent });
+		} catch {
+			try {
+				urlPattern = toUrlPattern(pattern);
+			} catch {
+				matcher = match(normalizeLegacyPathToRegexpSyntax(pattern), { decode: decodeURIComponent });
+			}
+		}
+		return {
+			name,
+			pattern,
+			component,
+			matches(pathname) {
+				if (urlPattern) {
+					const match = urlPattern.exec({ pathname });
+					if (!match) return null;
+					return decodeRouteParams(match.pathname?.groups ?? {});
+				}
+				if (!matcher) return null;
+				const match = matcher(pathname);
+				if (!match) return null;
+				const params = {};
+				for (const [key, value] of Object.entries(match.params)) if (value == null) params[key] = void 0;
+				else if (Array.isArray(value)) params[key] = value.join("/");
+				else params[key] = String(value);
+				return params;
+			}
+		};
+	});
+}
+//#endregion
+export { normalizeRoutes as n, normalizeLegacyPathToRegexpSyntax as t };

package/examples/App.tsx

@@ -0,0 +1,111 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { NavLink, Router, useUrlPath } from '../src'
+import routes from './routes'
+import * as routesGen from './routes.gen'
+
+function CurrentPath() {
+    const path = useUrlPath()
+    return (
+        <div className="card">
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                    flexWrap: 'wrap',
+                }}
+            >
+                <div>
+                    <div style={{ fontSize: 12, opacity: 0.8 }}>Current pathname</div>
+                    <div>
+                        <code>{path}</code>
+                    </div>
+                </div>
+                <div className="nav">
+                    <NavLink activeClass="active" className="pill" to={routesGen.home()}>
+                        Home
+                    </NavLink>
+                    <NavLink activeClass="active" className="pill" to={routesGen.login()}>
+                        Login
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        to={routesGen.match({ id: '123' })}
+                    >
+                        Match 123
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        to={routesGen.match({ id: 'a/b' })}
+                    >
+                        Match a/b (encoded)
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        to={routesGen.blogPost({ id: 123 })}
+                    >
+                        Blog 123
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        to={routesGen.blogPost({ id: 123, title: 'hello world' })}
+                    >
+                        Blog 123 Title
+                    </NavLink>
+                    <NavLink activeClass="active" className="pill" to={routesGen.slowLoading()}>
+                        Slow Loading
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        match="prefix"
+                        to={routesGen.fetchLoading()}
+                    >
+                        Fetch Loading
+                    </NavLink>
+                    <NavLink
+                        activeClass="active"
+                        className="pill"
+                        to={routesGen.kitchenSink({
+                            foo: 'a/b',
+                            baz: 'c',
+                            splat: ['x', 'y'],
+                        })}
+                    >
+                        KitchenSink
+                    </NavLink>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function Layout() {
+    return (
+        <div className="app">
+            <div className="card">
+                <h1 style={{ margin: 0 }}>rerouter examples</h1>
+                <div style={{ opacity: 0.8, marginTop: 8 }}>
+                    Client-only dev server using <code>bun --hot examples/index.html</code>.
+                </div>
+            </div>
+
+            <CurrentPath />
+
+            <div className="card">
+                <Router routes={routes} loading={<div>Loading route...</div>} />
+            </div>
+        </div>
+    )
+}
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <Layout />
+    </StrictMode>,
+)

package/examples/index.html

@@ -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

@@ -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

@@ -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

@@ -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

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

package/examples/pages/KitchenSink.tsx

@@ -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

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

package/examples/pages/Match.tsx

@@ -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

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

package/examples/pages/SlowLoading.tsx

@@ -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>
+    )
+}