@mpen/rerouter 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { n as useUrlSearchParams, t as useUrlPath } from "./index-BYXpNitc.js";
 import { ClassValue } from "@mpen/classcat";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
 import { ComponentType, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { OverrideProps } from "@mpen/ts-types/react";
 import { Override } from "@mpen/ts-types";
 
@@ -168,6 +168,7 @@ type RouteObject = {
   pattern: string | URLPattern;
   component: RouteComponentLoader<any>;
 };
+type Routes = RouteObject[];
 /**
  * Route definition consumed by [`Router`]{@link Router}.
  *
@@ -237,6 +238,13 @@ 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;
 }
 /**
  * Renders the first route that matches the current URL pathname.
@@ -249,17 +257,22 @@ 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} />
  * }
  * ```
  */
 declare function Router({
   routes,
-  loading
-}: RouterProps): _$react_jsx_runtime0.JSX.Element | null;
+  loading,
+  loadingDelayMs
+}: RouterProps): string | number | bigint | boolean | _$react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 //#endregion
 //#region src/lib/url.d.ts
 declare function pushUrl(next: string, state?: unknown): void;
 declare function replaceUrl(next: string, state?: unknown): void;
 //#endregion
-export { Link, LinkProps, NavLink, NavLinkMatch, NavLinkProps, NormalizedRoute, Route, RouteComponent, RouteComponentLoader, RouteComponentModule, RouteObject, RouteParams, Router, RouterProps, SearchParamsInit, normalizeLegacyPathToRegexpSyntax, normalizeRoutes, pushUrl, replaceUrl, useUrlPath, useUrlSearchParams };
+//#region src/hooks/useUrl.d.ts
+declare function useUrlPath(): string;
+declare function useUrlSearchParams(): URLSearchParams;
+//#endregion
+export { Link, LinkProps, NavLink, NavLinkMatch, NavLinkProps, NormalizedRoute, Route, RouteComponent, RouteComponentLoader, RouteComponentModule, RouteObject, RouteParams, Router, RouterProps, Routes, SearchParamsInit, normalizeLegacyPathToRegexpSyntax, normalizeRoutes, pushUrl, replaceUrl, useUrlPath, useUrlSearchParams };

package/dist/index.js

@@ -1,8 +1,7 @@
-import { n as useUrlSearchParams, t as useUrlPath } from "./hooks-Dlwcb0sV.js";
-import { n as normalizeRoutes, t as normalizeLegacyPathToRegexpSyntax } from "./routes-Hpf6cwcZ.js";
+import { n as normalizeRoutes, t as normalizeLegacyPathToRegexpSyntax } from "./routes-PW-bNm8e.js";
 import { cc } from "@mpen/classcat";
+import { Suspense, startTransition, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 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);
@@ -49,8 +48,10 @@ function Link({ to, search, children, className, replace, ...rest }) {
 		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 /* @__PURE__ */ jsx("a", {
 		...rest,
@@ -61,6 +62,24 @@ function Link({ to, search, children, className, replace, ...rest }) {
 	});
 }
 //#endregion
+//#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
 //#region src/components/NavLink.tsx
 function isActivePath(pathname, targetPathname, match) {
 	if (pathname === targetPathname) return true;
@@ -95,14 +114,107 @@ function NavLink({ activeClass, className, inactiveClass, match = "exact", 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);
+const DEFAULT_LOADING_DELAY_MS = 400;
+const loadedRouteComponents = /* @__PURE__ */ new WeakMap();
+const loadingRouteComponents = /* @__PURE__ */ new WeakMap();
+function loadRouteComponent(component) {
+	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 findRouteMatch(routes, pathname) {
+	for (const route of routes) {
+		const params = route.matches(pathname);
+		if (!params) continue;
+		return {
+			route,
+			params,
+			pathname
+		};
 	}
-	return LazyComponent;
+	return null;
+}
+function getLoadedRoute(match) {
+	if (!match) return null;
+	const Component = loadedRouteComponents.get(match.route.component);
+	if (!Component) return null;
+	return {
+		...match,
+		Component
+	};
+}
+function scheduleTransition(cb) {
+	queueMicrotask(() => {
+		startTransition(cb);
+	});
+}
+function useRenderedRoute(match, loadingDelayMs) {
+	const [renderedRoute, setRenderedRoute] = useState(() => getLoadedRoute(match));
+	const [showLoading, setShowLoading] = useState(false);
+	const [loadError, setLoadError] = useState(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;
+		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) => {
+			if (!active) return;
+			setLoadError(error);
+		});
+		return () => {
+			active = false;
+			if (timeout) clearTimeout(timeout);
+		};
+	}, [loadingDelayMs, match]);
+	if (loadError) throw loadError;
+	return {
+		renderedRoute,
+		showLoading
+	};
 }
 /**
 * Renders the first route that matches the current URL pathname.
@@ -115,25 +227,21 @@ function getLazyRouteComponent(component) {
 * import routes from './routes'
 *
 * function App() {
-*     return <Router routes={routes} loading={<div>Loading...</div>} />
+*     return <Router routes={routes} loading={<div>Loading...</div>} loadingDelayMs={400} />
 * }
 * ```
 */
-function Router({ routes, loading = null }) {
+function Router({ routes, loading = null, loadingDelayMs = DEFAULT_LOADING_DELAY_MS }) {
 	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;
+	const normalizedRoutes = useMemo(() => normalizeRoutes(routes), [routes]);
+	const { renderedRoute, showLoading } = useRenderedRoute(useMemo(() => findRouteMatch(normalizedRoutes, pathname), [normalizedRoutes, pathname]), loadingDelayMs);
+	if (showLoading) return loading;
+	if (!renderedRoute) return null;
+	const { Component, params } = renderedRoute;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: loading,
+		children: /* @__PURE__ */ jsx(Component, { ...params })
+	});
 }
 //#endregion
 export { Link, NavLink, Router, normalizeLegacyPathToRegexpSyntax, normalizeRoutes, pushUrl, replaceUrl, useUrlPath, useUrlSearchParams };