@typeroute/router 0.9.0 → 0.11.0

package/README.md

@@ -107,7 +107,7 @@ If you believe there's a mistake in the comparison table, please [open an issue]
 
 - [Comparison](#comparison)
 - [Installation](#installation)
-- [Showcase](#showcase)
+- [Motivation](#motivation)
 - [Defining routes](#defining-routes)
 - [Nested routes and layouts](#nested-routes-and-layouts)
 - [Setting up the router](#setting-up-the-router)
@@ -124,6 +124,7 @@ If you believe there's a mistake in the comparison table, please [open an issue]
   - [Route preloading](#route-preloading)
   - [Programmatic navigation](#programmatic-navigation)
   - [Declarative navigation](#declarative-navigation)
+- [Index routes](#index-routes)
 - [Lazy loading](#lazy-loading)
 - [Data preloading](#data-preloading)
 - [Error boundaries](#error-boundaries)
@@ -136,6 +137,7 @@ If you believe there's a mistake in the comparison table, please [open an issue]
 - [Cookbook](#cookbook)
   - [Quick start example](#quick-start-example)
   - [Server-side rendering (SSR)](#server-side-rendering-ssr)
+  - [Not-found pages](#not-found-pages)
   - [Scroll to top on navigation](#scroll-to-top-on-navigation)
   - [Matching a route anywhere](#matching-a-route-anywhere)
   - [Global link configuration](#global-link-configuration)
@@ -144,7 +146,7 @@ If you believe there's a mistake in the comparison table, please [open an issue]
   - [Dynamic page titles](#dynamic-page-titles)
 - [API reference](#api-reference)
   - [Router class](#router-class)
-  - [Route class](#route-class)
+  - [Route builder](#route-builder)
   - [Middleware](#middleware)
   - [Hooks](#hooks)
   - [Components](#components)
@@ -165,48 +167,13 @@ TypeRoute requires React 18 or higher.
 
 ---
 
-# Showcase
+# Motivation
 
-Here's what routing looks like with TypeRoute:
+Most React routers today either lack type safety entirely, or achieve it through build plugins and code generation. TypeRoute takes a different path: it uses TypeScript's own inference to give you full autocompletion and type checking - for routes, params, search params, navigation - without any tooling beyond the TypeScript compiler you're already running.
 
-```tsx
-import { route, RouterRoot, Outlet, Link, useParams } from "@typeroute/router";
-
-// Routes
-const layout = route("/").component(() => (
-  <div>
-    <nav>
-      <Link to="/">Home</Link>
-      <Link to={user} params={{ id: "42" }}>
-        User
-      </Link>
-    </nav>
-    <Outlet />
-  </div>
-));
-
-const home = layout.route("/").component(() => <h1>Home</h1>);
-
-const user = layout.route("/users/:id").component(() => {
-  const { id } = useParams(user); // Fully typed
-  return <h1>User {id}</h1>;
-});
-
-// Setup
-const routes = [home, user];
-
-function App() {
-  return <RouterRoot routes={routes} />;
-}
-
-declare module "@typeroute/router" {
-  interface Register {
-    routes: typeof routes;
-  }
-}
-```
+The API is deliberately small. You define routes with a builder, register them once through module augmentation, and that's it. Routes nest, middlewares compose, and types inherit down the tree. There's no config file, no CLI, no codegen step. The whole thing ships at ~4kB gzipped before tree-shaking.
 
-Everything autocompletes and type-checks automatically. No heavy setup, no magic, just a simple API that gets out of your way.
+TypeRoute doesn't try to be a framework. It doesn't own your data fetching, your file structure, or force you into SSR. It handles routing - matching URLs to components and managing navigation - and stays out of the way for everything else.
 
 👉 [Try it live in the StackBlitz playground](https://stackblitz.com/edit/typeroute-demo?file=src%2Fapp.tsx)
 
@@ -402,15 +369,20 @@ function About() {
 }
 ```
 
-Then in your root app component file, import all the routes, register them with module augmentation, and render `RouterRoot`:
+Then add a file that re-exports all your routes:
+
+```ts
+// pages/routes.ts
+export * from "./home";
+export * from "./about";
+```
+
+Now in your root app component file, import all the routes as a namespace, register them with module augmentation, and render `RouterRoot`:
 
 ```tsx
 // app.tsx
 import { RouterRoot } from "@typeroute/router";
-import { home } from "./pages/home";
-import { about } from "./pages/about";
-
-const routes = [home, about];
+import * as routes from "./pages/routes";
 
 export function App() {
   return <RouterRoot routes={routes} />;
@@ -423,6 +395,8 @@ declare module "@typeroute/router" {
 }
 ```
 
+Because `routes` is a namespace object whose values are your route definitions, TypeRoute picks them up automatically - no need to manually maintain a routes collection. When you add a new page, just create the file and re-export it from `routes.ts`.
+
 But again, this is just one approach. You could keep all routes in a single file, split them by feature, organize them by route depth, whatever fits your project. TypeRoute doesn't care where the routes come from or how you structure your files.
 
 ---
@@ -816,6 +790,42 @@ Note that `Navigate` uses `useLayoutEffect` internally to ensure the navigation
 
 ---
 
+# Index routes
+
+Layout routes often need a child route at `"/"` just to show default content at the parent's path:
+
+```tsx
+const dashboard = route("/dashboard").component(DashboardLayout);
+
+const overview = dashboard.route("/").component(Overview);
+const settings = dashboard.route("/settings").component(Settings);
+```
+
+This is perfectly fine, but `.index()` offers a shorthand. It defines what renders when no child route matches, directly on the parent:
+
+```tsx
+const dashboard = route("/dashboard")
+  .component(DashboardLayout)
+  .index(Overview);
+
+const settings = dashboard.route("/settings").component(Settings);
+```
+
+Here's what renders at each path:
+
+```
+/dashboard          → DashboardLayout > Overview
+/dashboard/settings → DashboardLayout > Settings
+```
+
+Under the hood, `.index(Comp)` is equivalent to `.component(() => useOutlet() ?? <Comp />)`. Note that when using `.index()`, the layout route itself becomes navigable. Include it in your routes collection instead of the former child route:
+
+```tsx
+const routes = [dashboard, settings];
+```
+
+---
+
 # Lazy loading
 
 Load route components on demand with `.lazy()`. The function you pass should return a dynamic import:
@@ -857,12 +867,12 @@ See [Route preloading](#route-preloading) for ways to load these components befo
 
 # Data preloading
 
-Use `.preload()` to run logic before navigation occurs, typically to prefetch data. Preload functions receive the target route's typed params and search values:
+Use `.preload()` to run logic before navigation occurs, typically to prefetch data. Preload functions receive the target route's typed params, search values, and router context:
 
 ```tsx
 const userProfile = route("/users/:id")
   .search(z.object({ tab: z.enum(["posts", "comments"]).catch("posts") }))
-  .preload(async ({ params, search }) => {
+  .preload(async ({ params, search, context }) => {
     await queryClient.prefetchQuery({
       queryKey: ["user", params.id, search.tab],
       queryFn: () => fetchUser(params.id, search.tab)
@@ -894,6 +904,19 @@ const settings = dashboard.route("/settings").component(Settings);
 // Preloading /dashboard/settings runs prefetchDashboardData
 ```
 
+The `context` parameter provides access to any arbitrary data you passed to the router. This is useful for sharing instances like query clients across your preload functions. To use it, pass the context when creating your router and register its type:
+
+```tsx
+<RouterRoot routes={routes} context={{ queryClient }} />;
+
+declare module "@typeroute/router" {
+  interface Register {
+    routes: typeof routes;
+    context: { queryClient: QueryClient };
+  }
+}
+```
+
 ---
 
 # Error boundaries
@@ -1297,7 +1320,55 @@ import { routes } from "./routes";
 hydrateRoot(rootElement, <RouterRoot routes={routes} />);
 ```
 
-You can also manually set `ssrContext.statusCode` in your components during SSR to control the response status (like 404 for not found pages).
+You can also manually set `ssrContext.statusCode` in your components during SSR to control the response status (like 404 for not-found pages).
+
+## Not-found pages
+
+Since TypeRoute uses a [ranking algorithm](#route-matching-and-ranking) where wildcards have the lowest weight, a catch-all `/*` route naturally acts as a fallback. It only matches when no other route does, regardless of definition order:
+
+```tsx
+const home = route("/").component(HomePage);
+const notFound = route("/*").component(NotFoundPage);
+const about = route("/about").component(AboutPage);
+
+const routes = [home, notFound, about];
+```
+
+```tsx
+function NotFoundPage() {
+  return (
+    <div>
+      <h1>404</h1>
+      <p>This page doesn't exist.</p>
+      <Link to="/">Go home</Link>
+    </div>
+  );
+}
+```
+
+This also works for scoped not-found pages. If you want a fallback specific to a section of your app, attach the catch-all to that section's parent route:
+
+```tsx
+const dashboard = route("/dashboard").component(DashboardLayout);
+
+const overview = dashboard.route("/").component(Overview);
+const settings = dashboard.route("/settings").component(Settings);
+const dashboardNotFound = dashboard.route("/*").component(DashboardNotFound);
+```
+
+Here, `/dashboard/anything-else` renders `DashboardNotFound` inside the dashboard layout.
+
+If you're doing SSR, you can set a 404 status code from the not-found component using `ssrContext`:
+
+```tsx
+function NotFoundPage() {
+  const router = useRouter();
+  if (router.ssrContext) {
+    router.ssrContext.statusCode = 404;
+  }
+  // ...
+}
+```
 
 ## Scroll to top on navigation
 
@@ -1529,6 +1600,7 @@ The `Router` class is the core of TypeRoute. You can create an instance directly
 - `router.basePath` - The configured base path
 - `router.routes` - The array of navigable routes
 - `router.history` - The history instance
+- `router.context` - The router context
 - `router.ssrContext` - The SSR context (if provided)
 - `router.defaultLinkOptions` - Default link options
 
@@ -1541,6 +1613,7 @@ The `Router` class is the core of TypeRoute. You can create an instance directly
 const router = new Router({ routes });
 const router = new Router({ routes, basePath: "/app" });
 const router = new Router({ routes, history: new HashHistory() });
+const router = new Router({ routes, context: { queryClient } });
 ```
 
 **`router.navigate(options)`** navigates to a new location.
@@ -1610,7 +1683,7 @@ await router.preload({ to: "/user/:id", params: { id: "42" } });
 await router.preload({ to: searchPage, search: { q: "test" } });
 ```
 
-## Route class
+## Route builder
 
 Routes are created with the `route()` function and configured by chaining methods.
 
@@ -1654,6 +1727,17 @@ const dashboard = route("/dashboard").use(auth).component(Dashboard);
 const users = route("/users").component(UsersPage);
 ```
 
+**`.index(component)`** renders a component when no child route matches. See [Index routes](#index-routes).
+
+- `component` - `ComponentType` - A React component
+- Returns: `Route` - A new route object
+
+```tsx
+const dashboard = route("/dashboard")
+  .component(DashboardLayout)
+  .index(Overview);
+```
+
 **`.lazy(loader)`** adds a lazy-loaded component to render when this route matches.
 
 - `loader` - `ComponentLoader` - A function returning a dynamic import promise
@@ -1709,13 +1793,13 @@ const risky = route("/risky").error(ErrorPage).component(RiskyPage);
 
 **`.preload(preload)`** registers a preload function for the route.
 
-- `preload` - `(context: PreloadContext) => Promise<any>` - An async function receiving typed `params` and `search`
+- `preload` - `(options: PreloadOptions) => Promise<any>` - An async function receiving typed `params`, `search`, and `context`
 - Returns: `Route` - A new route object
 
 ```tsx
 const user = route("/users/:id")
   .search(z.object({ tab: z.string().catch("profile") }))
-  .preload(async ({ params, search }) => {
+  .preload(async ({ params, search, context }) => {
     // params.id: string, search.tab: string - fully typed
     await prefetchUser(params.id, search.tab);
   });
@@ -1922,13 +2006,14 @@ const unsubscribe = history.subscribe(() => {
 **`RouterOptions`** are options for creating a `Router` instance or passing to `RouterRoot`.
 
 ```tsx
-interface RouterOptions {
+type RouterOptions = {
   routes: Route[] | Record<string, Route>; // Collection of navigable routes
   basePath?: string; // Base path prefix (default: "/")
   history?: HistoryLike; // History implementation (default: BrowserHistory)
+  context?: Context; // Arbitrary router context
   ssrContext?: SSRContext; // Context for server-side rendering
   defaultLinkOptions?: LinkOptions; // Default options for all Link components
-}
+};
 ```
 
 **`NavigateOptions`** are options for type-safe navigation.
@@ -2005,12 +2090,13 @@ type SSRContext = {
 };
 ```
 
-**`PreloadContext`** is the context passed to preload functions.
+**`PreloadOptions`** is the options object passed to preload functions.
 
 ```tsx
-interface PreloadContext {
+interface PreloadOptions {
   params: Params; // Path params for the route
   search: Search; // Validated search params
+  context: Context; // Router context
 }
 ```
 
@@ -2018,9 +2104,8 @@ interface PreloadContext {
 
 # Roadmap
 
-- Possibility to pass an arbitrary context to the Router instance for later use in preloads?
 - Relative path navigation? Not sure it's worth the extra bundle size given that users can export/import route objects and pass them as navigation option.
-- Refactor: APIs like useParams, useSearch and useMatch should accept any route object and not just rely on the global routes array.
+- Refactor: APIs like useParams, useSearch and useMatch should accept any route object and not just rely on the global routes collection.
 - Refactor: allow `route()` and `.route()` to be called without passing an argument (defaulting to "/")?
 - Document usage in test environments
 - Navigation blockers (`useBlocker`, etc.)

package/dist/index.d.ts

@@ -9,7 +9,8 @@ type ParsePattern<P extends string> = Simplify<RouteParams<P>>;
 type NormalizePath<P extends string> = RemoveTrailingSlash<DedupSlashes<`/${P}`>>;
 type DedupSlashes<P extends string> = P extends `${infer Prefix}//${infer Rest}` ? `${Prefix}${DedupSlashes<`/${Rest}`>}` : P;
 type RemoveTrailingSlash<P extends string> = P extends `${infer Prefix}/` ? Prefix extends "" ? "/" : Prefix : P;
-type MaybeKey<K extends string, T> = T extends EmptyObject ? { [P in K]?: EmptyObject } : {} extends T ? { [P in K]?: T } : { [P in K]: T };
+type MaybeUndefinedKey<K extends string, T> = undefined extends T ? { [P in K]?: T } : { [P in K]: T };
+type MaybeObjectKey<K extends string, T> = T extends EmptyObject ? { [P in K]?: EmptyObject } : {} extends T ? { [P in K]?: T } : { [P in K]: T };
 type OptionalOnUndefined<T extends object> = Simplify<{ [K in keyof T as undefined extends T[K] ? never : K]: T[K] } & { [K in keyof T as undefined extends T[K] ? K : never]?: T[K] }>;
 //#endregion
 //#region src/types.d.ts
@@ -19,13 +20,17 @@ type NavigableRoute = Register extends {
 } ? Routes extends ReadonlyArray<Route> ? Routes[number] : Routes extends Record<string, Route> ? Routes[keyof Routes] : Route : Route;
 type Handle = Register extends {
   handle: infer Handle;
-} ? Handle : any;
+} ? Handle : undefined;
+type Context = Register extends {
+  context: infer Context;
+} ? Context : undefined;
 interface Middleware<S extends {} = any> {
   use: <S2 extends {}>(middleware: Middleware<S2>) => Middleware<Merge<S, OptionalOnUndefined<S2>>>;
   search: <S2 extends {}>(validate: Validator<S, S2>) => Middleware<Merge<S, OptionalOnUndefined<S2>>>;
   handle: (handle: Handle) => Middleware<S>;
-  preload: (preload: (context: PreloadContext<{}, S>) => Promise<any>) => Middleware<S>;
+  preload: (preload: (options: PreloadOptions<{}, S>) => Promise<any>) => Middleware<S>;
   component: (component: ComponentType) => Middleware<S>;
+  index: (component: ComponentType) => Middleware<S>;
   lazy: (loader: ComponentLoader) => Middleware<S>;
   suspense: (fallback: ComponentType) => Middleware<S>;
   error: (fallback: ComponentType<{
@@ -33,17 +38,18 @@ interface Middleware<S extends {} = any> {
   }>) => Middleware<S>;
 }
 type Validator<S extends {}, S2 extends {}> = ((search: S & Record<string, unknown>) => S2) | StandardSchemaV1<Record<string, unknown>, S2>;
-interface PreloadContext<Ps extends {} = any, S extends {} = any> {
+interface PreloadOptions<Ps extends {} = any, S extends {} = any> {
   params: Ps;
   search: S;
+  context: Context;
 }
-interface RouterOptions {
+type RouterOptions = {
   routes: ReadonlyArray<NavigableRoute> | Record<string, NavigableRoute>;
   basePath?: string;
   history?: HistoryLike;
   ssrContext?: SSRContext;
   defaultLinkOptions?: LinkOptions;
-}
+} & MaybeUndefinedKey<"context", Context>;
 type Pattern = NavigableRoute["_"]["pattern"];
 type GetRoute<P extends Pattern> = Extract<NavigableRoute, {
   _: {
@@ -65,7 +71,7 @@ type NavigateOptions<P extends Pattern> = {
   to: P | GetRoute<P>;
   replace?: boolean;
   state?: any;
-} & MaybeKey<"params", Params<P>> & MaybeKey<"search", Search<P>>;
+} & MaybeObjectKey<"params", Params<P>> & MaybeObjectKey<"search", Search<P>>;
 interface LinkOptions {
   strict?: boolean;
   preload?: "intent" | "render" | "viewport" | false;
@@ -113,7 +119,7 @@ declare class Route<P extends string = string, Ps extends {} = any, S extends {}
     validate: (search: Record<string, unknown>) => S;
     handles: Handle[];
     components: ComponentType[];
-    preloads: ((context: PreloadContext) => Promise<any>)[];
+    preloads: ((options: PreloadOptions) => Promise<any>)[];
     p?: Route;
   };
   readonly _types: {
@@ -125,8 +131,9 @@ declare class Route<P extends string = string, Ps extends {} = any, S extends {}
   use: <S2 extends {}>(middleware: Middleware<S2>) => Route<P, Ps, Merge<S, OptionalOnUndefined<S2>>>;
   search: <S2 extends {}>(validate: Validator<S, S2>) => Route<P, Ps, Merge<S, OptionalOnUndefined<S2>>>;
   handle: (handle: Handle) => Route<P, Ps, S>;
-  preload: (preload: (context: PreloadContext<Ps, S>) => Promise<any>) => Route<P, Ps, S>;
+  preload: (preload: (options: PreloadOptions<Ps, S>) => Promise<any>) => Route<P, Ps, S>;
   component: (component: ComponentType) => Route<P, Ps, S>;
+  index: (component: ComponentType) => Route<P, Ps, S>;
   lazy: (loader: ComponentLoader) => Route<P, Ps, S>;
   suspense: (fallback: ComponentType) => Route<P, Ps, S>;
   error: (fallback: ComponentType<{
@@ -140,6 +147,7 @@ declare class Router {
   readonly routes: ReadonlyArray<NavigableRoute>;
   readonly basePath: string;
   readonly history: HistoryLike;
+  readonly context: Context;
   readonly ssrContext?: SSRContext;
   readonly defaultLinkOptions?: LinkOptions;
   private readonly _;
@@ -210,4 +218,4 @@ declare const LocationContext: react.Context<HistoryLocation | null>;
 declare const MatchContext: react.Context<Match | null>;
 declare const OutletContext: react.Context<ReactNode>;
 //#endregion
-export { BrowserHistory, ComponentLoader, GetRoute, Handle, HashHistory, HistoryLike, HistoryLocation, HistoryPushOptions, Link, LinkOptions, LinkProps, LocationContext, Match, MatchContext, MatchOptions, MemoryHistory, Middleware, NavigableRoute, Navigate, NavigateOptions, NavigateProps, Outlet, OutletContext, Params, Pattern, PreloadContext, Register, Route, Router, RouterContext, RouterOptions, RouterRoot, RouterRootProps, SSRContext, Search, Updater, Validator, middleware, route, useHandles, useLocation, useMatch, useNavigate, useOutlet, useParams, useRouter, useSearch };
+export { BrowserHistory, ComponentLoader, Context, GetRoute, Handle, HashHistory, HistoryLike, HistoryLocation, HistoryPushOptions, Link, LinkOptions, LinkProps, LocationContext, Match, MatchContext, MatchOptions, MemoryHistory, Middleware, NavigableRoute, Navigate, NavigateOptions, NavigateProps, Outlet, OutletContext, Params, Pattern, PreloadOptions, Register, Route, Router, RouterContext, RouterOptions, RouterRoot, RouterRootProps, SSRContext, Search, Updater, Validator, middleware, route, useHandles, useLocation, useMatch, useNavigate, useOutlet, useParams, useRouter, useSearch };

package/dist/index.js

@@ -1 +1 @@
-import{Component as e,Suspense as t,cloneElement as n,createContext as r,isValidElement as i,lazy as a,memo as o,useCallback as s,useContext as c,useEffect as l,useInsertionEffect as u,useLayoutEffect as d,useMemo as f,useRef as p,useState as m,useSyncExternalStore as h}from"react";import{inject as g,parse as _}from"regexparam";import{jsx as v}from"react/jsx-runtime";function y(e){return`/${e}`.replaceAll(/\/+/g,`/`).replace(/(.+)\/$/,`$1`)}function b(e){let{keys:t,pattern:n}=_(e);return{pattern:e,keys:t,regex:n,loose:_(e,!0).pattern,weights:e.split(`/`).slice(1).map(e=>e.includes(`*`)?0:e.includes(`:`)?1:2)}}function x(e){return typeof e==`function`?e:t=>{let n=e[`~standard`].validate(t);if(n instanceof Promise)throw Error(`[TypeRoute] Validation can't be async`);if(n.issues)throw Error(`[TypeRoute] Validation failed`,{cause:n.issues});return n.value}}function S(e){return Object.entries(e).filter(([e,t])=>t!==void 0).map(([e,t])=>`${e}=${encodeURIComponent(w(t))}`).join(`&`)}function C(e){let t=new URLSearchParams(e);return Object.fromEntries([...t.entries()].map(([e,t])=>(t=decodeURIComponent(t),[e,T(t)?JSON.parse(t):t])))}function w(e){return typeof e==`string`&&!T(e)?e:JSON.stringify(e)}function T(e){try{return JSON.parse(e),!0}catch{return!1}}function E(e,t){return y(`${t}/${e}`)}function D(e,t){return(e===t||e.startsWith(`${t}/`))&&(e=e.slice(t.length)||`/`),e}function O(e,t){return[e,S(t)].filter(Boolean).join(`?`)}function k(e){let{pathname:t,search:n}=new URL(e,`http://w`);return{path:t,search:C(n)}}function A({keys:e,regex:t,loose:n},r,i,a){let o=(r?t:n).exec(D(i,a));if(!o)return null;let s={};return e.forEach((e,t)=>{let n=o[t+1];n&&(s[e]=n)}),s}function j(e){return[...e].sort((e,t)=>{let n=e.route._.weights,r=t.route._.weights,i=Math.max(n.length,r.length);for(let e=0;e<i;e++){let t=n[e]??-1,i=r[e]??-1;if(t!==i)return i-t}return 0})}const M=r(null),N=r(null),P=r(null),F=r(null);function I(){let e=c(M);if(e)return e;throw Error(`[TypeRoute] useRouter must be within a router context`)}function L(){let e=c(N);if(e)return e;throw Error(`[TypeRoute] useLocation must be within a router context`)}function R(e){let t=I(),{path:n}=L();return f(()=>t.match(n,e),[t,n,e.from,e.strict,e.params])}function z(){return c(F)}function B(){return I().navigate}function V(){let e=c(P);return f(()=>e?.route._.handles??[],[e])}function H(e){let t=R({from:e});if(t)return t.params;throw Error(`[TypeRoute] Can't read params for non-matching route ${e}`)}function U(e){let t=I(),{search:n,path:r}=L(),i=t.getRoute(e),a=f(()=>i._.validate(n),[i,n]);return[a,Z((e,n)=>{e=typeof e==`function`?e(a):e;let i=O(r,{...a,...e});t.navigate({url:i,replace:n})})]}var W=class{_;_loc=(e,t)=>{let{state:n}=history,[r,i]=this._??[];return i?.path===e&&r===t&&i.state===n?i:(this._=[t,{path:e,search:C(t),state:n}])[1]};constructor(){if(!window[G]){for(let e of[K,q]){let t=history[e];history[e]=function(...n){t.apply(this,n),dispatchEvent(new Event(e))}}window[G]=1}}location=()=>this._loc(location.pathname,location.search);go=e=>history.go(e);push=e=>{let{url:t,replace:n,state:r}=e;history[n?q:K](r,``,t)};subscribe=e=>(J.forEach(t=>window.addEventListener(t,e)),()=>{J.forEach(t=>window.removeEventListener(t,e))})};const G=Symbol.for(`wmp01`),K=`pushState`,q=`replaceState`,J=[`popstate`,K,q,`hashchange`];var Y=class{routes;basePath;history;ssrContext;defaultLinkOptions;_;constructor(e){let{routes:t,basePath:n=`/`,history:r,ssrContext:i,defaultLinkOptions:a}=e;this.routes=Object.values(t),this.basePath=y(n),this.history=r??new W,this.ssrContext=i,this.defaultLinkOptions=a,this._={routeMap:new Map(this.routes.map(e=>[e._.pattern,e]))}}getRoute=e=>{if(typeof e!=`string`)return e;let t=this._.routeMap.get(e);if(!t)throw Error(`[TypeRoute] Route not found for ${e}`);return t};match=(e,t)=>{let{from:n,strict:r,params:i}=t,a=this.getRoute(n),o=A(a._,r,e,this.basePath);return o&&(!i||Object.keys(i).every(e=>i[e]===o[e]))?{route:a,params:o}:null};matchAll=e=>j(this.routes.map(t=>this.match(e,{from:t,strict:!0})).filter(e=>!!e))[0]??null;createUrl=e=>{let{to:t,params:n={},search:r={}}=e,{pattern:i}=this.getRoute(t)._;return O(E(g(i,n),this.basePath),r)};preload=async e=>{let{to:t,params:n={},search:r={}}=e,{preloads:i}=this.getRoute(t)._;await Promise.all(i.map(e=>e({params:n,search:r})))};navigate=e=>{if(typeof e==`number`)this.history.go(e);else if(`url`in e)this.history.push(e);else{let{replace:t,state:n}=e;this.history.push({url:this.createUrl(e),replace:t,state:n})}}},X=class{stack=[];index=0;listeners=new Set;constructor(e=`/`){this.stack.push({...k(e),state:void 0})}location=()=>this.stack[this.index];go=e=>{let t=this.index+e;this.stack[t]&&(this.index=t,this.listeners.forEach(e=>e()))};push=e=>{let{url:t,replace:n,state:r}=e,i={...k(t),state:r};this.stack=this.stack.slice(0,this.index+1),n?this.stack[this.index]=i:this.index=this.stack.push(i)-1,this.listeners.forEach(e=>e())};subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)})},ee=class extends W{location=()=>{let{pathname:e,search:t}=new URL(location.hash.slice(1),`http://w`);return this._loc(e,t)};push=e=>{let{url:t,replace:n,state:r}=e;history[n?`replaceState`:`pushState`](r,``,`#${t}`)}};function te(e){let[t]=m(()=>`router`in e?e.router:new Y(e)),{subscribe:n,location:r}=t.history,i=h(n,r,r),a=f(()=>t.matchAll(i.path),[t,i.path]);return a||console.error(`[TypeRoute] No matching route for path`,i.path),f(()=>v(M.Provider,{value:t,children:v(N.Provider,{value:i,children:v(P.Provider,{value:a,children:a?.route._.components.reduceRight((e,t)=>v(F.Provider,{value:e,children:v(t,{})}),null)})})}),[t,i,a])}function ne(){return z()}function re(e){let t=I();return d(()=>t.navigate(e),[]),t.ssrContext&&(t.ssrContext.redirect=t.createUrl(e)),null}function ie(e){let t=I(),{to:r,replace:a,state:o,params:c,search:u,strict:d,preload:m,preloadDelay:h=50,style:g,className:_,activeStyle:y,activeClassName:b,asChild:x,children:S,...C}={...t.defaultLinkOptions,...e},w=p(null),T=p(null),E=t.createUrl(e),D=!!R({from:r,strict:d,params:c}),O=Z(()=>t.preload(e)),k=s(()=>{clearTimeout(T.current)},[]),A=s(()=>{k(),T.current=setTimeout(O,h)},[h,k]),j=f(()=>({"data-active":D,style:{...g,...D&&y},className:[_,D&&b].filter(Boolean).join(` `)||void 0}),[D,g,_,y,b]);l(()=>{if(m===`render`)A();else if(m===`viewport`&&w.current){let e=new IntersectionObserver(e=>e.forEach(e=>{e.isIntersecting?A():k()}));return e.observe(w.current),()=>{e.disconnect(),k()}}return k},[m,A,k]);let M=e=>{C.onClick?.(e),!(e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||e.button!==0||e.defaultPrevented)&&(e.preventDefault(),t.navigate({url:E,replace:a,state:o}))},N=(e,t)=>n=>{t?.(n),m===`intent`&&!n.defaultPrevented&&e()},P={...C,...j,ref:ae(w,C.ref),href:E,onClick:M,onFocus:N(A,C.onFocus),onBlur:N(k,C.onBlur),onPointerEnter:N(A,C.onPointerEnter),onPointerLeave:N(k,C.onPointerLeave)};return x&&i(S)?n(S,P):v(`a`,{...P,children:S})}function ae(e,t){return t?n=>{e.current=n;let r=typeof t==`function`?t(n):void(t.current=n);return r&&(()=>{e.current=null,r()})}:e}function Z(e){let t=p(e);return u(()=>{t.current=e},[e]),p(((...e)=>t.current(...e))).current}function oe(e){return()=>v(t,{fallback:v(e,{}),children:z()})}function se(t){class n extends e{constructor(e){super(e),this.state={...e}}static getDerivedStateFromError(e){return{error:[e]}}static getDerivedStateFromProps(e,t){return e.children===t.children?t:{...e,error:void 0}}render(){return this.state.error?v(t,{error:this.state.error[0]}):this.props.children}}return()=>v(n,{children:z()})}function Q(e){return new $({...b(y(e)),validate:e=>e,handles:[],components:[],preloads:[]})}function ce(){return Q(``)}var $=class e{_;_types;constructor(e){this._=e}route=t=>new e({...this._,...b(y(`${this._.pattern}/${t}`)),p:this});use=t=>{let{_:n}=t;return new e({...this._,handles:[...this._.handles,...n.handles],components:[...this._.components,...n.components],preloads:[...this._.preloads,...n.preloads]}).search(n.validate)};search=t=>(t=x(t),new e({...this._,validate:e=>{let n=this._.validate(e);return{...n,...t({...e,...n})}}}));handle=t=>new e({...this._,handles:[...this._.handles,t]});preload=t=>new e({...this._,preloads:[...this._.preloads,e=>t({params:e.params,search:this._.validate(e.search)})]});component=t=>new e({...this._,components:[...this._.components,o(t)]});lazy=e=>{let t=a(async()=>{let t=await e();return`default`in t?t:{default:t}});return this.preload(e).component(t)};suspense=e=>this.component(oe(e));error=e=>this.component(se(e));toString=()=>this._.pattern};export{W as BrowserHistory,ee as HashHistory,ie as Link,N as LocationContext,P as MatchContext,X as MemoryHistory,re as Navigate,ne as Outlet,F as OutletContext,$ as Route,Y as Router,M as RouterContext,te as RouterRoot,ce as middleware,Q as route,V as useHandles,L as useLocation,R as useMatch,B as useNavigate,z as useOutlet,H as useParams,I as useRouter,U as useSearch};
+import{Component as e,Suspense as t,cloneElement as n,createContext as r,isValidElement as i,lazy as a,memo as o,useCallback as s,useContext as c,useEffect as ee,useInsertionEffect as te,useLayoutEffect as l,useMemo as u,useRef as d,useState as f,useSyncExternalStore as p}from"react";import{inject as m,parse as h}from"regexparam";import{jsx as g}from"react/jsx-runtime";function _(e){return`/${e}`.replaceAll(/\/+/g,`/`).replace(/(.+)\/$/,`$1`)}function v(e){let{keys:t,pattern:n}=h(e);return{pattern:e,keys:t,regex:n,loose:h(e,!0).pattern,weights:e.split(`/`).slice(1).map(e=>e.includes(`*`)?0:e.includes(`:`)?1:2)}}function y(e){return typeof e==`function`?e:t=>{let n=e[`~standard`].validate(t);if(n instanceof Promise)throw Error(`[TypeRoute] Validation can't be async`);if(n.issues)throw Error(`[TypeRoute] Validation failed`,{cause:n.issues});return n.value}}function b(e){return Object.entries(e).filter(([e,t])=>t!==void 0).map(([e,t])=>`${e}=${encodeURIComponent(S(t))}`).join(`&`)}function x(e){let t=new URLSearchParams(e);return Object.fromEntries([...t.entries()].map(([e,t])=>(t=decodeURIComponent(t),[e,C(t)?JSON.parse(t):t])))}function S(e){return typeof e==`string`&&!C(e)?e:JSON.stringify(e)}function C(e){try{return JSON.parse(e),!0}catch{return!1}}function w(e,t){return _(`${t}/${e}`)}function T(e,t){return(e===t||e.startsWith(`${t}/`))&&(e=e.slice(t.length)||`/`),e}function E(e,t){return[e,b(t)].filter(Boolean).join(`?`)}function D(e){let{pathname:t,search:n}=new URL(e,`http://w`);return{path:t,search:x(n)}}function O({keys:e,regex:t,loose:n},r,i,a){let o=(r?t:n).exec(T(i,a));if(!o)return null;let s={};return e.forEach((e,t)=>{let n=o[t+1];n&&(s[e]=n)}),s}function k(e){return[...e].sort((e,t)=>{let n=e.route._.weights,r=t.route._.weights,i=Math.max(n.length,r.length);for(let e=0;e<i;e++){let t=n[e]??-1,i=r[e]??-1;if(t!==i)return i-t}return 0})}const A=r(null),j=r(null),M=r(null),N=r(null);function P(){let e=c(A);if(e)return e;throw Error(`[TypeRoute] useRouter must be within a router context`)}function F(){let e=c(j);if(e)return e;throw Error(`[TypeRoute] useLocation must be within a router context`)}function I(e){let t=P(),{path:n}=F();return u(()=>t.match(n,e),[t,n,e.from,e.strict,e.params])}function L(){return c(N)}function ne(){return P().navigate}function re(){let e=c(M);return u(()=>e?.route._.handles??[],[e])}function R(e){let t=I({from:e});if(t)return t.params;throw Error(`[TypeRoute] Can't read params for non-matching route ${e}`)}function z(e){let t=P(),{search:n,path:r}=F(),i=t.getRoute(e),a=u(()=>i._.validate(n),[i,n]);return[a,X((e,n)=>{e=typeof e==`function`?e(a):e;let i=E(r,{...a,...e});t.navigate({url:i,replace:n})})]}var B=class{_;_loc=(e,t)=>{let{state:n}=history,[r,i]=this._??[];return i?.path===e&&r===t&&i.state===n?i:(this._=[t,{path:e,search:x(t),state:n}])[1]};constructor(){if(!window[V]){for(let e of[H,U]){let t=history[e];history[e]=function(...n){t.apply(this,n),dispatchEvent(new Event(e))}}window[V]=1}}location=()=>this._loc(location.pathname,location.search);go=e=>history.go(e);push=e=>{let{url:t,replace:n,state:r}=e;history[n?U:H](r,``,t)};subscribe=e=>(W.forEach(t=>window.addEventListener(t,e)),()=>{W.forEach(t=>window.removeEventListener(t,e))})};const V=Symbol.for(`wmp01`),H=`pushState`,U=`replaceState`,W=[`popstate`,H,U,`hashchange`];var G=class{routes;basePath;history;context;ssrContext;defaultLinkOptions;_;constructor(e){let{routes:t,basePath:n=`/`,history:r,context:i,ssrContext:a,defaultLinkOptions:o}=e;this.routes=Object.values(t),this.basePath=_(n),this.history=r??new B,this.context=i,this.ssrContext=a,this.defaultLinkOptions=o,this._={routeMap:new Map(this.routes.map(e=>[e._.pattern,e]))}}getRoute=e=>{if(typeof e!=`string`)return e;let t=this._.routeMap.get(e);if(!t)throw Error(`[TypeRoute] Route not found for ${e}`);return t};match=(e,t)=>{let{from:n,strict:r,params:i}=t,a=this.getRoute(n),o=O(a._,r,e,this.basePath);return o&&(!i||Object.keys(i).every(e=>i[e]===o[e]))?{route:a,params:o}:null};matchAll=e=>k(this.routes.map(t=>this.match(e,{from:t,strict:!0})).filter(e=>!!e))[0]??null;createUrl=e=>{let{to:t,params:n={},search:r={}}=e,{pattern:i}=this.getRoute(t)._;return E(w(m(i,n),this.basePath),r)};preload=async e=>{let{to:t,params:n={},search:r={}}=e,{preloads:i}=this.getRoute(t)._;await Promise.all(i.map(e=>e({params:n,search:r,context:this.context})))};navigate=e=>{if(typeof e==`number`)this.history.go(e);else if(`url`in e)this.history.push(e);else{let{replace:t,state:n}=e;this.history.push({url:this.createUrl(e),replace:t,state:n})}}},K=class{stack=[];index=0;listeners=new Set;constructor(e=`/`){this.stack.push({...D(e),state:void 0})}location=()=>this.stack[this.index];go=e=>{let t=this.index+e;this.stack[t]&&(this.index=t,this.listeners.forEach(e=>e()))};push=e=>{let{url:t,replace:n,state:r}=e,i={...D(t),state:r};this.stack=this.stack.slice(0,this.index+1),n?this.stack[this.index]=i:this.index=this.stack.push(i)-1,this.listeners.forEach(e=>e())};subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)})},q=class extends B{location=()=>{let{pathname:e,search:t}=new URL(location.hash.slice(1),`http://w`);return this._loc(e,t)};push=e=>{let{url:t,replace:n,state:r}=e;history[n?`replaceState`:`pushState`](r,``,`#${t}`)}};function J(e){let[t]=f(()=>`router`in e?e.router:new G(e)),{subscribe:n,location:r}=t.history,i=p(n,r,r),a=u(()=>t.matchAll(i.path),[t,i.path]);return a||console.error(`[TypeRoute] No matching route for path`,i.path),u(()=>g(A.Provider,{value:t,children:g(j.Provider,{value:i,children:g(M.Provider,{value:a,children:a?.route._.components.reduceRight((e,t)=>g(N.Provider,{value:e,children:g(t,{})}),null)})})}),[t,i,a])}function Y(){return L()}function ie(e){let t=P();return l(()=>t.navigate(e),[]),t.ssrContext&&(t.ssrContext.redirect=t.createUrl(e)),null}function ae(e){let t=P(),{to:r,replace:a,state:o,params:c,search:te,strict:l,preload:f,preloadDelay:p=50,style:m,className:h,activeStyle:_,activeClassName:v,asChild:y,children:b,...x}={...t.defaultLinkOptions,...e},S=d(null),C=d(null),w=t.createUrl(e),T=!!I({from:r,strict:l,params:c}),E=X(()=>t.preload(e)),D=s(()=>{clearTimeout(C.current)},[]),O=s(()=>{D(),C.current=setTimeout(E,p)},[p,D]),k=u(()=>({"data-active":T,style:{...m,...T&&_},className:[h,T&&v].filter(Boolean).join(` `)||void 0}),[T,m,h,_,v]);ee(()=>{if(f===`render`)O();else if(f===`viewport`&&S.current){let e=new IntersectionObserver(e=>e.forEach(e=>{e.isIntersecting?O():D()}));return e.observe(S.current),()=>{e.disconnect(),D()}}return D},[f,O,D]);let A=e=>{x.onClick?.(e),!(e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||e.button!==0||e.defaultPrevented)&&(e.preventDefault(),t.navigate({url:w,replace:a,state:o}))},j=(e,t)=>n=>{t?.(n),f===`intent`&&!n.defaultPrevented&&e()},M={...x,...k,ref:oe(S,x.ref),href:w,onClick:A,onFocus:j(O,x.onFocus),onBlur:j(D,x.onBlur),onPointerEnter:j(O,x.onPointerEnter),onPointerLeave:j(D,x.onPointerLeave)};return y&&i(b)?n(b,M):g(`a`,{...M,children:b})}function oe(e,t){return t?n=>{e.current=n;let r=typeof t==`function`?t(n):void(t.current=n);return r&&(()=>{e.current=null,r()})}:e}function X(e){let t=d(e);return te(()=>{t.current=e},[e]),d(((...e)=>t.current(...e))).current}function Z(e){return()=>L()??g(e,{})}function se(e){return()=>g(t,{fallback:g(e,{}),children:L()})}function ce(t){class n extends e{constructor(e){super(e),this.state={...e}}static getDerivedStateFromError(e){return{error:[e]}}static getDerivedStateFromProps(e,t){return e.children===t.children?t:{...e,error:void 0}}render(){return this.state.error?g(t,{error:this.state.error[0]}):this.props.children}}return()=>g(n,{children:L()})}function Q(e){return new $({...v(_(e)),validate:e=>e,handles:[],components:[],preloads:[]})}function le(){return Q(``)}var $=class e{_;_types;constructor(e){this._=e}route=t=>new e({...this._,...v(_(`${this._.pattern}/${t}`)),p:this});use=t=>{let{_:n}=t;return new e({...this._,handles:[...this._.handles,...n.handles],components:[...this._.components,...n.components],preloads:[...this._.preloads,...n.preloads]}).search(n.validate)};search=t=>(t=y(t),new e({...this._,validate:e=>{let n=this._.validate(e);return{...n,...t({...e,...n})}}}));handle=t=>new e({...this._,handles:[...this._.handles,t]});preload=t=>new e({...this._,preloads:[...this._.preloads,e=>t({...e,search:this._.validate(e.search)})]});component=t=>new e({...this._,components:[...this._.components,o(t)]});index=e=>this.component(Z(e));lazy=e=>{let t=a(async()=>{let t=await e();return`default`in t?t:{default:t}});return this.preload(e).component(t)};suspense=e=>this.component(se(e));error=e=>this.component(ce(e));toString=()=>this._.pattern};export{B as BrowserHistory,q as HashHistory,ae as Link,j as LocationContext,M as MatchContext,K as MemoryHistory,ie as Navigate,Y as Outlet,N as OutletContext,$ as Route,G as Router,A as RouterContext,J as RouterRoot,le as middleware,Q as route,re as useHandles,F as useLocation,I as useMatch,ne as useNavigate,L as useOutlet,R as useParams,P as useRouter,z as useSearch};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typeroute/router",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "license": "MIT",
   "author": "strblr",
   "description": "Type-safe React router that just works - simple setup, full autocomplete, 4kB gzipped",