@funstack/router 0.0.5 → 0.0.7-alpha.0

package/dist/docs/LearnTypeSafetyPage.tsx

@@ -0,0 +1,522 @@
+import { CodeBlock } from "../components/CodeBlock.js";
+
+export function LearnTypeSafetyPage() {
+  return (
+    <div className="learn-content">
+      <h2>Type Safety</h2>
+
+      <p className="page-intro">
+        FUNSTACK Router provides first-class TypeScript support, allowing you to
+        access route params, navigation state, and loader data with full type
+        safety. This guide covers two approaches: receiving typed data through
+        component props (recommended) and accessing it through hooks.
+      </p>
+
+      <section>
+        <h3>Why Type Safety Matters</h3>
+        <p>
+          Routing is one of the most common sources of runtime errors in web
+          applications. Typos in parameter names, incorrect assumptions about
+          data shapes, or forgetting to handle navigation state can lead to
+          subtle bugs that are hard to track down.
+        </p>
+        <p>
+          With FUNSTACK Router's type-safe approach, the TypeScript compiler
+          catches these errors at build time. You get autocomplete for parameter
+          names, type checking for loader data, and confidence that your route
+          components receive exactly the data they expect.
+        </p>
+        <p>There are two ways to access typed route data:</p>
+        <ul>
+          <li>
+            <strong>Props (Recommended)</strong> &mdash; Route components
+            receive typed data directly as props. This is the simplest and most
+            type-safe approach.
+          </li>
+          <li>
+            <strong>Hooks</strong> &mdash; Use hooks like{" "}
+            <code>useRouteParams</code> and <code>useRouteData</code> to access
+            data anywhere in the component tree. This requires routes to have an{" "}
+            <code>id</code> property.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Approach 1: Route Component Props (Recommended)</h3>
+
+        <h4>Accessing Typed Params via Props</h4>
+        <p>
+          When you define a route with URL parameters, FUNSTACK Router
+          automatically infers the parameter types from the path pattern. Your
+          component receives these params as a typed <code>params</code> prop.
+        </p>
+        <CodeBlock language="tsx">{`import { route } from "@funstack/router";
+
+// Route definition with :userId parameter
+const userRoute = route({
+  path: "/users/:userId",
+  component: UserPage,
+});
+
+// Component receives typed params automatically
+function UserPage({ params }: { params: { userId: string } }) {
+  return <h1>User: {params.userId}</h1>;
+}`}</CodeBlock>
+        <p>
+          For explicit type annotations, use the{" "}
+          <code>RouteComponentProps</code> type helper with your params type:
+        </p>
+        <CodeBlock language="tsx">{`import { route, RouteComponentProps } from "@funstack/router";
+
+// Define component with explicit props type
+function UserPage({ params }: RouteComponentProps<{ userId: string }>) {
+  // params.userId is typed as string
+  // params.nonExistent would be a TypeScript error
+  return <h1>User: {params.userId}</h1>;
+}
+
+// Route definition - TypeScript validates the component props match the path
+const userRoute = route({
+  path: "/users/:userId",
+  component: UserPage,
+});`}</CodeBlock>
+        <p>
+          The <code>route()</code> function validates that your component's
+          props match the path pattern. If you annotate <code>params</code> with{" "}
+          <code>{`{ userId: string }`}</code> but the path is{" "}
+          <code>/users/:id</code>, TypeScript will report an error.
+        </p>
+
+        <h4>Routes with Loaders</h4>
+        <p>
+          When your route has a loader function, the component receives the
+          loader's return value as a <code>data</code> prop. The data can be
+          wrapped in a Promise, in which case you unwrap it using React's{" "}
+          <code>use()</code> hook. Use <code>RouteComponentPropsWithData</code>{" "}
+          for routes with loaders.
+        </p>
+        <CodeBlock language="tsx">{`import { use, Suspense } from "react";
+import { route, RouteComponentPropsWithData } from "@funstack/router";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+// Props type: RouteComponentPropsWithData<Params, Data, State?>
+type UserPageProps = RouteComponentPropsWithData<
+  { userId: string },
+  Promise<User>
+>;
+
+// Inner component that uses the data
+function UserPageContent({ params, data }: UserPageProps) {
+  const user = use(data);  // Unwrap the Promise
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <p>Email: {user.email}</p>
+    </div>
+  );
+}
+
+// Outer component wraps with Suspense
+function UserPage(props: UserPageProps) {
+  return (
+    <Suspense fallback={<div>Loading user...</div>}>
+      <UserPageContent {...props} />
+    </Suspense>
+  );
+}
+
+// Route definition
+const userRoute = route({
+  path: "/users/:userId",
+  component: UserPage,
+  loader: async ({ params }): Promise<User> => {
+    const response = await fetch(\`/api/users/\${params.userId}\`);
+    return response.json();
+  },
+});`}</CodeBlock>
+        <p>
+          The <code>data</code> prop is typed as{" "}
+          <code>Promise&lt;User&gt;</code> based on the loader's return type.
+          TypeScript ensures you handle the data shape correctly.
+        </p>
+
+        <h4>Routes with Navigation State</h4>
+        <p>
+          Navigation state lets you store data in a navigation entry that
+          doesn't appear in the URL. Navigation state data is persisted across
+          page reloads and history traversals (meaning it is available after
+          user goes to another page and then uses the back button to returns to
+          the current page). Use the <code>routeState</code> helper to define
+          typed state for your routes.
+        </p>
+        <CodeBlock language="tsx">{`import { route, routeState, RouteComponentProps } from "@funstack/router";
+
+// Define the state shape
+interface ProductListState {
+  page: number;
+  sortBy: "name" | "price" | "date";
+  filters: string[];
+}
+
+// Props type: RouteComponentProps<Params, State>
+type ProductListProps = RouteComponentProps<
+  Record<string, never>,  // No params for this route
+  ProductListState
+>;
+
+function ProductListPage({
+  state,
+  setState,
+  setStateSync,
+  resetState,
+}: ProductListProps) {
+  // state is typed as ProductListState | undefined
+  const page = state?.page ?? 1;
+  const sortBy = state?.sortBy ?? "name";
+
+  const handlePageChange = (newPage: number) => {
+    // setState performs a navigation with the new state
+    setState({ ...state, page: newPage });
+  };
+
+  const handleSortChange = (newSort: "name" | "price" | "date") => {
+    // setStateSync updates state synchronously (replaces current entry)
+    setStateSync({ ...state, sortBy: newSort });
+  };
+
+  const handleReset = () => {
+    // resetState clears the navigation state
+    resetState();
+  };
+
+  return (
+    <div>
+      <button onClick={() => handlePageChange(page + 1)}>
+        Next Page
+      </button>
+      <button onClick={() => handleSortChange("price")}>
+        Sort by Price
+      </button>
+      <button onClick={handleReset}>Reset Filters</button>
+    </div>
+  );
+}
+
+// Use routeState to create a typed route
+const productListRoute = routeState<ProductListState>()(
+  route({
+    path: "/products",
+    component: ProductListPage,
+  })
+);`}</CodeBlock>
+        <p>
+          The <code>routeState</code> helper adds four props to your component:
+        </p>
+        <ul>
+          <li>
+            <code>state</code> &mdash; The current navigation state (or{" "}
+            <code>undefined</code> if not set)
+          </li>
+          <li>
+            <code>setState</code> &mdash; Navigate to the same URL with new
+            state (creates a new history entry)
+          </li>
+          <li>
+            <code>setStateSync</code> &mdash; Update state synchronously without
+            creating a new history entry
+          </li>
+          <li>
+            <code>resetState</code> &mdash; Clear the navigation state
+          </li>
+        </ul>
+
+        <h4>Combining Loader and State</h4>
+        <p>
+          You can use both loaders and navigation state together. The{" "}
+          <code>routeState</code> helper works with routes that have loaders.
+        </p>
+        <CodeBlock language="tsx">{`import { use, Suspense } from "react";
+import { route, routeState, RouteComponentPropsWithData } from "@funstack/router";
+
+interface ProductListState {
+  sortBy: "name" | "price";
+}
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+}
+
+// Props type: RouteComponentPropsWithData<Params, Data, State>
+type Props = RouteComponentPropsWithData<
+  Record<string, never>,
+  Promise<Product[]>,
+  ProductListState
+>;
+
+function ProductListContent({ data, state, setStateSync }: Props) {
+  const products = use(data);
+  const sortBy = state?.sortBy ?? "name";
+
+  const sorted = [...products].sort((a, b) =>
+    sortBy === "name"
+      ? a.name.localeCompare(b.name)
+      : a.price - b.price
+  );
+
+  return (
+    <div>
+      <select
+        value={sortBy}
+        onChange={(e) =>
+          setStateSync({ sortBy: e.target.value as "name" | "price" })
+        }
+      >
+        <option value="name">Sort by Name</option>
+        <option value="price">Sort by Price</option>
+      </select>
+      <ul>
+        {sorted.map((product) => (
+          <li key={product.id}>
+            {product.name} - \${product.price}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function ProductListPage(props: Props) {
+  return (
+    <Suspense fallback={<div>Loading products...</div>}>
+      <ProductListContent {...props} />
+    </Suspense>
+  );
+}
+
+// Route definition with both loader and state
+const productListRoute = routeState<ProductListState>()(
+  route({
+    path: "/products",
+    component: ProductListPage,
+    loader: async (): Promise<Product[]> => {
+      const response = await fetch("/api/products");
+      return response.json();
+    },
+  })
+);`}</CodeBlock>
+      </section>
+
+      <section>
+        <h3>Approach 2: Hooks</h3>
+
+        <h4>When to Use Hooks</h4>
+        <p>
+          While props are the recommended approach for most cases, hooks are
+          useful when:
+        </p>
+        <ul>
+          <li>
+            <strong>Avoiding prop drilling</strong> &mdash; Deeply nested
+            components need route data without passing props through every level
+          </li>
+          <li>
+            <strong>Accessing parent route data</strong> &mdash; Child routes
+            need to read data loaded by ancestor routes
+          </li>
+          <li>
+            <strong>Using React Server Components</strong> &mdash; Route
+            components cannot receive props directly
+          </li>
+        </ul>
+        <p>
+          <strong>Important:</strong> To use hooks with full type safety, routes
+          must have an <code>id</code> property.
+        </p>
+
+        <h4>Setting Up Routes with IDs</h4>
+        <p>
+          Add an <code>id</code> property to routes you want to access via
+          hooks. The ID can be any string, but using a descriptive name helps
+          with debugging.
+        </p>
+        <CodeBlock language="tsx">{`import { route } from "@funstack/router";
+
+const userRoute = route({
+  id: "user",
+  path: "/users/:userId",
+  component: UserLayout,
+  loader: async ({ params }) => {
+    const response = await fetch(\`/api/users/\${params.userId}\`);
+    return response.json();
+  },
+});
+
+const userPostsRoute = route({
+  id: "userPosts",
+  path: "/posts",
+  component: UserPostsPage,
+});
+
+// Use these routes in your route tree
+const routes = [
+  route({
+    path: "/",
+    component: Layout,
+    children: [
+      {
+        ...userRoute,
+        children: [userPostsRoute],
+      },
+    ],
+  }),
+];`}</CodeBlock>
+
+        <h4>useRouteParams</h4>
+        <p>
+          The <code>useRouteParams</code> hook returns typed params for a
+          specific route. It works with the current route or any ancestor route.
+        </p>
+        <CodeBlock language="tsx">{`import { useRouteParams } from "@funstack/router";
+
+// In a deeply nested component
+function UserAvatar() {
+  // Pass the route definition to get typed params
+  const params = useRouteParams(userRoute);
+  // params.userId is typed as string
+
+  return <img src={\`/avatars/\${params.userId}.png\`} alt="User avatar" />;
+}`}</CodeBlock>
+
+        <h4>useRouteState</h4>
+        <p>
+          The <code>useRouteState</code> hook returns the typed navigation state
+          for a route. Returns <code>undefined</code> when no state is set.
+        </p>
+        <CodeBlock language="tsx">{`import { useRouteState } from "@funstack/router";
+
+function FilterIndicator() {
+  // Get typed state from the product list route
+  const state = useRouteState(productListRoute);
+  // state is typed as ProductListState | undefined
+
+  if (!state?.filters?.length) {
+    return null;
+  }
+
+  return (
+    <div className="filter-badge">
+      {state.filters.length} filters active
+    </div>
+  );
+}`}</CodeBlock>
+
+        <h4>useRouteData</h4>
+        <p>
+          The <code>useRouteData</code> hook returns the typed loader data for a
+          route. This is particularly useful for accessing parent route data
+          from child routes.
+        </p>
+        <CodeBlock language="tsx">{`import { use } from "react";
+import { useRouteData } from "@funstack/router";
+
+// Child route component accessing parent's data
+function UserPostsPage() {
+  // Access the parent route's loaded user data
+  const userData = useRouteData(userRoute);
+  const user = use(userData);
+
+  return (
+    <div>
+      <h2>Posts by {user.name}</h2>
+      {/* Render posts... */}
+    </div>
+  );
+}`}</CodeBlock>
+        <p>
+          This pattern is especially powerful in nested routes where child
+          components need access to data loaded by parent routes without prop
+          drilling.
+        </p>
+      </section>
+
+      <section>
+        <h3>Route Definition Best Practices</h3>
+        <p>
+          To maximize developer experience and maintainability while also
+          ensuring type safety, follow the below best practices when defining
+          your routes:
+        </p>
+        <CodeBlock language="tsx">{`interface User {
+  name: string;
+}
+
+// Define params and data
+type Params = { userId: string };
+type Data = Promise<User>;
+
+// Use RouteComponentProps (or RouteComponentPropsWithData) to type your route component
+type UserPageProps = RouteComponentPropsWithData<Params, Data>;
+
+// Define the route
+const userRoute = route({
+  path: "/users/:userId",
+  loader: async ({ params }): Data => {
+    const response = await fetch(\`/api/users/\${params.userId}\`);
+    return response.json();
+  },
+  component: UserPage,
+});
+
+// Now use it in your component
+function UserPage({ params, data }: UserPageProps) {
+  const user = use(data);
+  return <h1>User: {user.name} (ID: {params.userId})</h1>;
+}`}</CodeBlock>
+        <p>Key techniques demonstrated here include:</p>
+        <ul>
+          <li>
+            Defining explicit <code>Params</code> and <code>Data</code> types
+            &mdash; requires minimal type checking effort while improving
+            clarity
+          </li>
+          <li>
+            Using <code>RouteComponentPropsWithData</code> to define component
+            props
+          </li>
+        </ul>
+        <p>
+          TypeScript will validate that the route definition and component props
+          remain in sync as you make changes over time.
+        </p>
+      </section>
+
+      <section>
+        <h3>Key Takeaways</h3>
+        <ul>
+          <li>
+            Use <code>RouteComponentProps&lt;Params, State&gt;</code> or{" "}
+            <code>RouteComponentPropsWithData&lt;Params, Data, State&gt;</code>{" "}
+            for constructing route component prop types
+          </li>
+          <li>
+            The <code>routeState</code> helper adds typed route state management
+            to any route
+          </li>
+          <li>
+            Hooks require routes to have an <code>id</code> property for type
+            safety
+          </li>
+          <li>Use hooks to avoid prop drilling or access parent route data</li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/dist/docs/index.md

@@ -0,0 +1,21 @@
+# FUNSTACK Router Documentation
+
+## Available Documentation
+
+- [Getting Started](./GettingStartedPage.tsx)
+
+### API Reference
+
+- [Components](./ApiComponentsPage.tsx) - Core components for building routing in your React application.
+- [Hooks](./ApiHooksPage.tsx) - React hooks for accessing router state and navigation.
+- [Types](./ApiTypesPage.tsx) - TypeScript types and interfaces exported by the router.
+- [Utilities](./ApiUtilitiesPage.tsx) - Helper functions for defining routes and managing state.
+
+### Learn
+
+- [Navigation API](./LearnNavigationApiPage.tsx) - FUNSTACK Router is built on the Navigation API , a modern browser API that provides a unified way to handle navigation. This guide explains the key differences from the older History API and the benefits this brings to your application.
+- [Nested Routes](./LearnNestedRoutesPage.tsx) - Nested routes let you build complex page layouts where parts of the UI persist across navigation while other parts change. Think of a dashboard with a sidebar that stays in place while the main content area updates—that's nested routing in action.
+- [React Server Components](./LearnRscPage.tsx) - FUNSTACK Router is designed to work with React Server Components (RSC). The package provides a dedicated server entry point so that route definitions can live in server modules, keeping client bundle sizes small.
+- [Server-Side Rendering](./LearnSsrPage.tsx) - FUNSTACK Router supports server-side rendering with a two-stage model. During SSR, pathless (layout) routes without loaders render to produce an app shell, while path-based routes and loaders activate only after client hydration.
+- [Controlling Transitions](./LearnTransitionsPage.tsx) - FUNSTACK Router wraps every navigation in React's startTransition, which means the old UI may stay visible while the new route loads. This page explains how this works and how to control it.
+- [Type Safety](./LearnTypeSafetyPage.tsx) - FUNSTACK Router provides first-class TypeScript support, allowing you to access route params, navigation state, and loader data with full type safety. This guide covers two approaches: receiving typed data through component props (recommended) and accessing it through hooks.

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as LoaderArgs, c as RouteComponentProps, d as RouteDefinition, f as TypefulOpaqueRouteDefinition, i as ExtractRouteState, l as RouteComponentPropsOf, m as routeState, n as ExtractRouteId, o as OpaqueRouteDefinition, p as route, r as ExtractRouteParams, s as PathParams, t as ExtractRouteData, u as RouteComponentPropsWithData } from "./route-Bc8BUlhv.mjs";
+import { a as LoaderArgs, c as RouteComponentProps, d as RouteDefinition, f as TypefulOpaqueRouteDefinition, i as ExtractRouteState, l as RouteComponentPropsOf, m as routeState, n as ExtractRouteId, o as OpaqueRouteDefinition, p as route, r as ExtractRouteParams, s as PathParams, t as ExtractRouteData, u as RouteComponentPropsWithData } from "./route-ClVnhrQD.mjs";
 import { ComponentType, ReactNode } from "react";
 
 //#region src/types.d.ts
@@ -136,12 +136,6 @@ declare function useNavigate(): (to: string, options?: NavigateOptions) => void;
  */
 declare function useLocation(): Location;
 //#endregion
-//#region src/hooks/useLocationSSR.d.ts
-/**
- * Returns the current location object, or `null` when the URL is not available (e.g. during SSR).
- */
-declare function useLocationSSR(): Location | null;
-//#endregion
 //#region src/hooks/useSearchParams.d.ts
 type SetSearchParams = (params: URLSearchParams | Record<string, string> | ((prev: URLSearchParams) => URLSearchParams | Record<string, string>)) => void;
 /**
@@ -278,5 +272,5 @@ type LocationEntry = {
   info: unknown;
 };
 //#endregion
-export { type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type LocationEntry, type MatchedRoute, type MatchedRouteWithData, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, route, routeState, useBlocker, useIsPending, useLocation, useLocationSSR, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
+export { type ExtractRouteData, type ExtractRouteId, type ExtractRouteParams, type ExtractRouteState, type FallbackMode, type LoaderArgs, type Location, type LocationEntry, type MatchedRoute, type MatchedRouteWithData, type NavigateOptions, type OnNavigateCallback, type OnNavigateInfo, type OpaqueRouteDefinition, Outlet, type PathParams, type RouteComponentProps, type RouteComponentPropsOf, type RouteComponentPropsWithData, type RouteDefinition, Router, type RouterProps, type TypefulOpaqueRouteDefinition, type UseBlockerOptions, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useLocationSSR.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts","../src/core/RouterAdapter.ts"],"mappings":";;;;cAGM,6BAAA;;AAFwD;;;;;;;KAgBlD,uBAAA;EAAA,CACT,6BAAA,UA4Bc;EA1Bf,IAAA,WAwBI;EAtBJ,QAAA,GAAW,uBAAA;EAiCE;;;;;;EA1Bb,KAAA;EAMA;;;;;EAAA,eAAA,YASI;EAHJ,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAKrB;EAHN,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;;KAmBM,YAAA;EAMV,oCAJA,KAAA,EAAO,uBAAA,EAIC;EAFR,MAAA,EAAQ,MAAA,kBAQsB;EAN9B,QAAA;AAAA;;AAcF;;KARY,oBAAA,GAAuB,YAAA;EAUH,6DAR9B,IAAA;AAAA;;;;KAMU,cAAA;EAUe,4DARzB,OAAA,WAAkB,YAAA,WAQO;EANzB,YAAA;AAAA;;;;KAMU,eAAA;EAYQ,uDAVlB,OAAA,YAUkB;EARlB,KAAA,YAUA;EARA,IAAA;AAAA;;AAmBF;;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;AAqBF;;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;AClGR;;;KD2GY,YAAA;;;KC3GA,WAAA;EACV,MAAA,EAAQ,eAAA;ED/BoC;;;;AAc9C;;;ECyBE,UAAA,GAAa,kBAAA;EDpBF;;;;;;EC2BX,QAAA,GAAW,YAAA;AAAA;AAAA,iBASG,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD7D6C;iBEM9C,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,IAAgB,EAAA,UAAY,OAAA,GAAU,eAAA;;;;;;iBCAtC,WAAA,CAAA,GAAe,QAAA;;;;;;iBCAf,cAAA,CAAA,GAAkB,QAAA;;;KCJ7B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;APFkD;EOO5D,WAAA;AAAA;;;APSF;;;;;;;;;;;;;;;;;;;;;;;;;iBOqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;APrC0B;;;;;AAgB9D;;;;;;;;;;;;iBQSgB,cAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;ARhC8B;;;;;AAgB9D;;;;;;;;;;;;;iBSUgB,aAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;ATjC+B;;;;;AAgB9D;;;;;;;;;;;;;;;;iBUagB,YAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBC/Bd,YAAA,CAAA;;;;;;AXL8C;KYSlD,aAAA;wBAEV,GAAA,EAAK,GAAA,EZTuC;EYW5C,GAAA,UZGiC;EYDjC,KAAA,WZEC;EYAD,IAAA;AAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useSearchParams.ts","../src/hooks/useBlocker.ts","../src/hooks/useRouteParams.ts","../src/hooks/useRouteState.ts","../src/hooks/useRouteData.ts","../src/hooks/useIsPending.ts","../src/core/RouterAdapter.ts"],"mappings":";;;;cAGM,6BAAA;;AAFwD;;;;;;;KAgBlD,uBAAA;EAAA,CACT,6BAAA,UA4Bc;EA1Bf,IAAA,WAwBI;EAtBJ,QAAA,GAAW,uBAAA;EAiCE;;;;;;EA1Bb,KAAA;EAMA;;;;;EAAA,eAAA,YASI;EAHJ,MAAA,IAAU,IAAA,EAAM,UAAA,CAAW,MAAA,+BAKrB;EAHN,SAAA,GACI,aAAA;IACE,IAAA;IACA,MAAA,GAAS,MAAA;IACT,KAAA;IACA,QAAA,IACE,KAAA,cAAmB,IAAA,2BAChB,OAAA;IACL,YAAA,IAAgB,KAAA,cAAmB,IAAA;IACnC,UAAA;IACA,IAAA;EAAA,KAEF,SAAA;AAAA;;;;KAmBM,YAAA;EAMV,oCAJA,KAAA,EAAO,uBAAA,EAIC;EAFR,MAAA,EAAQ,MAAA,kBAQsB;EAN9B,QAAA;AAAA;;AAcF;;KARY,oBAAA,GAAuB,YAAA;EAUH,6DAR9B,IAAA;AAAA;;;;KAMU,cAAA;EAUe,4DARzB,OAAA,WAAkB,YAAA,WAQO;EANzB,YAAA;AAAA;;;;KAMU,eAAA;EAYQ,uDAVlB,OAAA,YAUkB;EARlB,KAAA,YAUA;EARA,IAAA;AAAA;;AAmBF;;KAbY,QAAA;EACV,QAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;AAqBF;;;;KAXY,kBAAA,IACV,KAAA,EAAO,aAAA,EACP,IAAA,EAAM,cAAA;;;;ACrGR;;;KD8GY,YAAA;;;KC9GA,WAAA;EACV,MAAA,EAAQ,eAAA;ED5BoC;;;;AAc9C;;;ECsBE,UAAA,GAAa,kBAAA;EDjBF;;;;;;ECwBX,QAAA,GAAW,YAAA;AAAA;AAAA,iBAYG,MAAA,CAAA;EACd,MAAA,EAAQ,WAAA;EACR,UAAA;EACA;AAAA,GACC,WAAA,GAAc,SAAA;;;;;;AD7D6C;iBEM9C,MAAA,CAAA,GAAU,SAAA;;;;;;iBCAV,WAAA,CAAA,IAAgB,EAAA,UAAY,OAAA,GAAU,eAAA;;;;;;iBCAtC,WAAA,CAAA,GAAe,QAAA;;;KCJ1B,eAAA,IACH,MAAA,EACI,eAAA,GACA,MAAA,qBACE,IAAA,EAAM,eAAA,KAAoB,eAAA,GAAkB,MAAA;;;;iBAMpC,eAAA,CAAA,IAAoB,eAAA,EAAiB,eAAA;;;KCVzC,iBAAA;;;;ANFkD;EMO5D,WAAA;AAAA;;;ANSF;;;;;;;;;;;;;;;;;;;;;;;;;iBMqBgB,UAAA,CAAW,OAAA,EAAS,iBAAA;;;;;;ANrC0B;;;;;AAgB9D;;;;;;;;;;;;iBOSgB,cAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,kBAAA,CAAmB,CAAA;;;;;;APhC8B;;;;;AAgB9D;;;;;;;;;;;;;iBQUgB,aAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,iBAAA,CAAkB,CAAA;;;;;;ARjC+B;;;;;AAgB9D;;;;;;;;;;;;;;;;iBSagB,YAAA,WACJ,4BAAA,SAER,MAAA,oCAAA,CAIF,KAAA,EAAO,CAAA,GAAI,gBAAA,CAAiB,CAAA;;;;;;iBC/Bd,YAAA,CAAA;;;;;;AVL8C;KWSlD,aAAA;wBAEV,GAAA,EAAK,GAAA,EXTuC;EWW5C,GAAA,UXGiC;EWDjC,KAAA,WXEC;EWAD,IAAA;AAAA"}

package/dist/index.mjs

@@ -417,21 +417,21 @@ function createAdapter(fallback) {
 
 //#endregion
 //#region src/Router.tsx
-const noopSubscribe = () => () => {};
-const getServerSnapshot = () => null;
 /**
-* Initial value of locationEntry.
-* This value means to use the `initialEntry` from `useSyncExternalStore` instead.
+* Special value returned as server snapshot during SSR/hydration.
 */
-const entryInitValue = Symbol();
+const serverSnapshotSymbol = Symbol();
+const noopSubscribe = () => () => {};
+const getServerSnapshot = () => serverSnapshotSymbol;
 function Router({ routes: inputRoutes, onNavigate, fallback = "none" }) {
 	const routes = internalRoutes(inputRoutes);
 	const adapter = useMemo(() => createAdapter(fallback), [fallback]);
 	const [blockerRegistry] = useState(() => createBlockerRegistry());
 	const initialEntry = useSyncExternalStore(noopSubscribe, useCallback(() => adapter.getSnapshot(), [adapter]), getServerSnapshot);
 	const [isPending, startTransition] = useTransition();
-	const [locationEntryInternal, setLocationEntry] = useState(entryInitValue);
-	const locationEntry = locationEntryInternal === entryInitValue ? initialEntry : locationEntryInternal;
+	const [locationEntryInternal, setLocationEntry] = useState(initialEntry);
+	const locationEntry = locationEntryInternal === serverSnapshotSymbol ? null : locationEntryInternal;
+	if (locationEntryInternal === serverSnapshotSymbol && initialEntry !== serverSnapshotSymbol) setLocationEntry(initialEntry);
 	useEffect(() => {
 		return adapter.subscribe(() => {
 			startTransition(() => {
@@ -649,25 +649,6 @@ function useLocation() {
 	}, [url]);
 }
 
-//#endregion
-//#region src/hooks/useLocationSSR.ts
-/**
-* Returns the current location object, or `null` when the URL is not available (e.g. during SSR).
-*/
-function useLocationSSR() {
-	const context = useContext(RouterContext);
-	if (!context) throw new Error("useLocationSSR must be used within a Router");
-	const { url } = context;
-	return useMemo(() => {
-		if (url === null) return null;
-		return {
-			pathname: url.pathname,
-			search: url.search,
-			hash: url.hash
-		};
-	}, [url]);
-}
-
 //#endregion
 //#region src/hooks/useSearchParams.ts
 /**
@@ -855,5 +836,5 @@ function useIsPending() {
 }
 
 //#endregion
-export { Outlet, Router, route, routeState, useBlocker, useIsPending, useLocation, useLocationSSR, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
+export { Outlet, Router, route, routeState, useBlocker, useIsPending, useLocation, useNavigate, useRouteData, useRouteParams, useRouteState, useSearchParams };
 //# sourceMappingURL=index.mjs.map