@funstack/router 0.0.1-alpha.0

package/README.md

@@ -0,0 +1,225 @@
+# FUNSTACK Router
+
+A modern React router built on the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API).
+
+> **Warning**
+> This project is in early development and is not ready for production use. APIs may change without notice.
+
+## Features
+
+- **Navigation API based** - Uses the modern Navigation API instead of the History API
+- **Object-based routes** - Define routes as plain JavaScript objects
+- **Nested routing** - Support for layouts and nested routes with `<Outlet>`
+- **Type-safe** - Full TypeScript support
+- **Lightweight** - ~2.5 kB gzipped
+
+## Installation
+
+```bash
+npm install @funstack/router
+```
+
+## Quick Start
+
+```tsx
+import { Router, Link, Outlet, useParams } from "@funstack/router";
+import type { RouteDefinition } from "@funstack/router";
+
+function Layout() {
+  return (
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/users">Users</Link>
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
+function Home() {
+  return <h1>Home</h1>;
+}
+
+function Users() {
+  return <h1>Users</h1>;
+}
+
+function UserDetail() {
+  const { id } = useParams<{ id: string }>();
+  return <h1>User {id}</h1>;
+}
+
+const routes: RouteDefinition[] = [
+  {
+    path: "/",
+    component: Layout,
+    children: [
+      { path: "", component: Home },
+      { path: "users", component: Users },
+      { path: "users/:id", component: UserDetail },
+    ],
+  },
+];
+
+function App() {
+  return <Router routes={routes} />;
+}
+```
+
+## API Reference
+
+### Components
+
+#### `<Router>`
+
+The root component that provides routing context.
+
+```tsx
+<Router routes={routes} />
+```
+
+| Prop       | Type                | Description                                 |
+| ---------- | ------------------- | ------------------------------------------- |
+| `routes`   | `RouteDefinition[]` | Array of route definitions                  |
+| `children` | `ReactNode`         | Optional children rendered alongside routes |
+
+#### `<Link>`
+
+Navigation link component.
+
+```tsx
+<Link to="/users" replace state={{ from: "home" }}>
+  Users
+</Link>
+```
+
+| Prop      | Type      | Description                           |
+| --------- | --------- | ------------------------------------- |
+| `to`      | `string`  | Destination URL                       |
+| `replace` | `boolean` | Replace history entry instead of push |
+| `state`   | `unknown` | State to pass to the destination      |
+
+#### `<Outlet>`
+
+Renders the matched child route. Used in layout components.
+
+```tsx
+function Layout() {
+  return (
+    <div>
+      <nav>...</nav>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+### Hooks
+
+#### `useNavigate()`
+
+Returns a function for programmatic navigation.
+
+```tsx
+const navigate = useNavigate();
+
+// Basic navigation
+navigate("/users");
+
+// With options
+navigate("/users", { replace: true, state: { from: "home" } });
+```
+
+#### `useLocation()`
+
+Returns the current location.
+
+```tsx
+const location = useLocation();
+// { pathname: "/users", search: "?page=1", hash: "#section" }
+```
+
+#### `useParams()`
+
+Returns the current route's path parameters.
+
+```tsx
+// Route: /users/:id
+const { id } = useParams<{ id: string }>();
+```
+
+#### `useSearchParams()`
+
+Returns and allows updating URL search parameters.
+
+```tsx
+const [searchParams, setSearchParams] = useSearchParams();
+
+// Read
+const page = searchParams.get("page");
+
+// Update
+setSearchParams({ page: "2" });
+
+// Update with function
+setSearchParams((prev) => {
+  prev.set("page", "2");
+  return prev;
+});
+```
+
+### Types
+
+#### `RouteDefinition`
+
+```typescript
+type RouteDefinition = {
+  path: string;
+  component?: React.ComponentType;
+  children?: RouteDefinition[];
+};
+```
+
+#### `Location`
+
+```typescript
+type Location = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+```
+
+#### `NavigateOptions`
+
+```typescript
+type NavigateOptions = {
+  replace?: boolean;
+  state?: unknown;
+};
+```
+
+## Path Patterns
+
+FUNSTACK Router uses the [URLPattern API](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) for path matching.
+
+| Pattern      | Example        | Matches         |
+| ------------ | -------------- | --------------- |
+| `/users`     | `/users`       | Exact match     |
+| `/users/:id` | `/users/123`   | Named parameter |
+| `/files/*`   | `/files/a/b/c` | Wildcard        |
+
+## Browser Support
+
+The Navigation API is supported in:
+
+- Chrome 102+
+- Edge 102+
+- Opera 88+
+
+Firefox and Safari do not yet support the Navigation API. For these browsers, consider using a polyfill.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,108 @@
+import * as react0 from "react";
+import { AnchorHTMLAttributes, ComponentType, ReactNode } from "react";
+
+//#region src/types.d.ts
+/**
+ * Route definition for the router.
+ */
+type RouteDefinition = {
+  /** Path pattern to match (e.g., "users/:id") */
+  path: string;
+  /** Component to render when this route matches */
+  component?: ComponentType;
+  /** Child routes for nested routing */
+  children?: RouteDefinition[];
+};
+/**
+ * A matched route with its parameters.
+ */
+type MatchedRoute = {
+  /** The original route definition */
+  route: RouteDefinition;
+  /** Extracted path parameters */
+  params: Record<string, string>;
+  /** The matched pathname segment */
+  pathname: string;
+};
+/**
+ * Options for navigation.
+ */
+type NavigateOptions = {
+  /** Replace current history entry instead of pushing */
+  replace?: boolean;
+  /** State to associate with the navigation */
+  state?: unknown;
+};
+/**
+ * Location object representing current URL state.
+ */
+type Location = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+//#endregion
+//#region src/Router.d.ts
+type RouterProps = {
+  routes: RouteDefinition[];
+  children?: ReactNode;
+};
+declare function Router({
+  routes,
+  children
+}: RouterProps): ReactNode;
+//#endregion
+//#region src/Link.d.ts
+type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  /** The destination URL */
+  to: string;
+  /** Replace current history entry instead of pushing */
+  replace?: boolean;
+  /** State to associate with the navigation */
+  state?: unknown;
+  children?: ReactNode;
+};
+declare const Link: react0.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  /** The destination URL */
+  to: string;
+  /** Replace current history entry instead of pushing */
+  replace?: boolean;
+  /** State to associate with the navigation */
+  state?: unknown;
+  children?: ReactNode;
+} & react0.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+//#region src/Outlet.d.ts
+/**
+ * Renders the matched child route.
+ * Used in layout components to specify where child routes should render.
+ */
+declare function Outlet(): ReactNode;
+//#endregion
+//#region src/hooks/useNavigate.d.ts
+/**
+ * Returns a function for programmatic navigation.
+ */
+declare function useNavigate(): (to: string, options?: NavigateOptions) => void;
+//#endregion
+//#region src/hooks/useLocation.d.ts
+/**
+ * Returns the current location object.
+ */
+declare function useLocation(): Location;
+//#endregion
+//#region src/hooks/useParams.d.ts
+/**
+ * Returns route parameters from the matched path.
+ */
+declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+//#endregion
+//#region src/hooks/useSearchParams.d.ts
+type SetSearchParams = (params: URLSearchParams | Record<string, string> | ((prev: URLSearchParams) => URLSearchParams | Record<string, string>)) => void;
+/**
+ * Returns and allows manipulation of URL search parameters.
+ */
+declare function useSearchParams(): [URLSearchParams, SetSearchParams];
+//#endregion
+export { Link, type LinkProps, type Location, type MatchedRoute, type NavigateOptions, Outlet, type RouteDefinition, Router, type RouterProps, useLocation, useNavigate, useParams, useSearchParams };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/Router.tsx","../src/Link.tsx","../src/Outlet.tsx","../src/hooks/useNavigate.ts","../src/hooks/useLocation.ts","../src/hooks/useParams.ts","../src/hooks/useSearchParams.ts"],"sourcesContent":[],"mappings":";;;;;;;AAKY,KAAA,eAAA,GAAe;EAYf;EAYA,IAAA,EAAA,MAAA;EAUA;cA9BE;;aAED;ACKb,CAAA;AA4CA;;;AAA6C,KD3CjC,YAAA,GC2CiC;EAAc;EAAS,KAAA,EDzC3D,eCyC2D;;UDvC1D;;EEZE,QAAA,EAAA,MAAS;CACE;;;;AASD,KFUV,eAAA,GEVU;EAGT;EAAI,OAAA,CAAA,EAAA,OAAA;EAAA;EAAA,KAAA,CAAA,EAAA,OAAA;CAHJ;;;;AAGI,KFiBL,QAAA,GEjBK;;;;ACfjB,CAAA;;;KFSY,WAAA;UACF;EDZE,QAAA,CAAA,ECaC,SDbc;AAY3B,CAAA;AAYY,iBC+BI,MAAA,CD/BW;EAAA,MAAA;EAAA;AAAA,CAAA,EC+BkB,WD/BlB,CAAA,EC+BgC,SD/BhC;;;KEpBf,SAAA,GAAY,KACtB,qBAAqB;;;EFLX;EAYA,OAAA,CAAA,EAAA,OAAY;EAYZ;EAUA,KAAA,CAAA,EAAA,OAAQ;aEpBP;;cAGA,aAAI,0BAAA,KAAA,qBAAA;EDNL;EA4CI,EAAA,EAAA,MAAM;EAAG;EAAQ,OAAA,CAAA,EAAA,OAAA;EAAY;EAAc,KAAA,CAAA,EAAA,OAAA;EAAS,QAAA,CAAA,ECzCvD,SDyCuD;;;;;;;ADvDpE;AAYY,iBGVI,MAAA,CAAA,CHYP,EGZiB,SHYjB;;;;;;AAdG,iBIEI,WAAA,CAAA,CJEF,EAAA,CAAA,EAAA,EAAA,MAED,EAAA,OAAe,CAAf,EIJyC,eJI1B,EAAA,GAAA,IAAA;;;;;;AANhB,iBKEI,WAAA,CAAA,CLEF,EKFiB,QLEjB;;;;;;iBMHE,oBACJ,yBAAyB,2BAChC;;;KCLA,eAAA,YAEC,kBACA,iCACQ,oBAAoB,kBAAkB;;;;APFxC,iBOQI,eAAA,CAAA,CPJF,EAAA,COIsB,ePFvB,EOEwC,ePFzB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,295 @@
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/context/RouterContext.ts
+const RouterContext = createContext(null);
+
+//#endregion
+//#region src/context/RouteContext.ts
+const RouteContext = createContext(null);
+
+//#endregion
+//#region src/core/matchRoutes.ts
+/**
+* Match a pathname against a route tree, returning the matched route stack.
+* Returns null if no match is found.
+*/
+function matchRoutes(routes, pathname) {
+	for (const route of routes) {
+		const matched = matchRoute(route, pathname);
+		if (matched) return matched;
+	}
+	return null;
+}
+/**
+* Match a single route and its children recursively.
+*/
+function matchRoute(route, pathname) {
+	const hasChildren = Boolean(route.children?.length);
+	const { matched, params, consumedPathname } = matchPath(route.path, pathname, !hasChildren);
+	if (!matched) return null;
+	const result = {
+		route,
+		params,
+		pathname: consumedPathname
+	};
+	if (hasChildren) {
+		let remainingPathname = pathname.slice(consumedPathname.length);
+		if (!remainingPathname.startsWith("/")) remainingPathname = "/" + remainingPathname;
+		if (remainingPathname === "") remainingPathname = "/";
+		for (const child of route.children) {
+			const childMatch = matchRoute(child, remainingPathname);
+			if (childMatch) return [result, ...childMatch.map((m) => ({
+				...m,
+				params: {
+					...params,
+					...m.params
+				}
+			}))];
+		}
+		if (route.component) return [result];
+		return null;
+	}
+	return [result];
+}
+/**
+* Match a path pattern against a pathname.
+*/
+function matchPath(pattern, pathname, exact) {
+	const normalizedPattern = pattern.startsWith("/") ? pattern : `/${pattern}`;
+	let urlPatternPath;
+	if (exact) urlPatternPath = normalizedPattern;
+	else if (normalizedPattern === "/") urlPatternPath = "/*";
+	else urlPatternPath = `${normalizedPattern}{/*}?`;
+	const match = new URLPattern({ pathname: urlPatternPath }).exec({ pathname });
+	if (!match) return {
+		matched: false,
+		params: {},
+		consumedPathname: ""
+	};
+	const params = {};
+	for (const [key, value] of Object.entries(match.pathname.groups)) if (value !== void 0 && key !== "0") params[key] = value;
+	let consumedPathname;
+	if (exact) consumedPathname = pathname;
+	else if (normalizedPattern === "/") consumedPathname = "/";
+	else {
+		const patternSegments = normalizedPattern.split("/").filter(Boolean);
+		consumedPathname = "/" + pathname.split("/").filter(Boolean).slice(0, patternSegments.length).join("/");
+	}
+	return {
+		matched: true,
+		params,
+		consumedPathname
+	};
+}
+
+//#endregion
+//#region src/Router.tsx
+/**
+* Check if Navigation API is available.
+*/
+function hasNavigation() {
+	return typeof navigation !== "undefined";
+}
+/**
+* Subscribe to Navigation API's currententrychange event.
+*/
+function subscribeToNavigation(callback) {
+	if (!hasNavigation()) return () => {};
+	navigation.addEventListener("currententrychange", callback);
+	return () => {
+		if (hasNavigation()) navigation.removeEventListener("currententrychange", callback);
+	};
+}
+/**
+* Get current navigation entry snapshot.
+*/
+function getNavigationSnapshot() {
+	if (!hasNavigation()) return null;
+	return navigation.currentEntry;
+}
+/**
+* Server snapshot - Navigation API not available on server.
+*/
+function getServerSnapshot() {
+	return null;
+}
+function Router({ routes, children }) {
+	const currentEntry = useSyncExternalStore(subscribeToNavigation, getNavigationSnapshot, getServerSnapshot);
+	useEffect(() => {
+		if (!hasNavigation()) return;
+		const handleNavigate = (event) => {
+			if (!event.canIntercept || event.hashChange) return;
+			if (matchRoutes(routes, new URL(event.destination.url).pathname)) event.intercept({ handler: async () => {} });
+		};
+		navigation.addEventListener("navigate", handleNavigate);
+		return () => {
+			if (hasNavigation()) navigation.removeEventListener("navigate", handleNavigate);
+		};
+	}, [routes]);
+	const navigate = useCallback((to, options) => {
+		if (!hasNavigation()) return;
+		navigation.navigate(to, {
+			history: options?.replace ? "replace" : "push",
+			state: options?.state
+		});
+	}, []);
+	const currentUrl = currentEntry?.url;
+	const matchedRoutes = useMemo(() => {
+		if (!currentUrl) return null;
+		return matchRoutes(routes, new URL(currentUrl).pathname);
+	}, [currentUrl, routes]);
+	const routerContextValue = useMemo(() => ({
+		currentEntry,
+		navigate
+	}), [currentEntry, navigate]);
+	return /* @__PURE__ */ jsxs(RouterContext.Provider, {
+		value: routerContextValue,
+		children: [matchedRoutes ? /* @__PURE__ */ jsx(RouteRenderer, {
+			matchedRoutes,
+			index: 0
+		}) : null, children]
+	});
+}
+/**
+* Recursively render matched routes with proper context.
+*/
+function RouteRenderer({ matchedRoutes, index }) {
+	const match = matchedRoutes[index];
+	if (!match) return null;
+	const { route, params, pathname } = match;
+	const Component = route.component;
+	const outlet = index < matchedRoutes.length - 1 ? /* @__PURE__ */ jsx(RouteRenderer, {
+		matchedRoutes,
+		index: index + 1
+	}) : null;
+	const routeContextValue = useMemo(() => ({
+		params,
+		matchedPath: pathname,
+		outlet
+	}), [
+		params,
+		pathname,
+		outlet
+	]);
+	return /* @__PURE__ */ jsx(RouteContext.Provider, {
+		value: routeContextValue,
+		children: Component ? /* @__PURE__ */ jsx(Component, {}) : outlet
+	});
+}
+
+//#endregion
+//#region src/hooks/useNavigate.ts
+/**
+* Returns a function for programmatic navigation.
+*/
+function useNavigate() {
+	const context = useContext(RouterContext);
+	if (!context) throw new Error("useNavigate must be used within a Router");
+	return context.navigate;
+}
+
+//#endregion
+//#region src/Link.tsx
+const Link = forwardRef(function Link$1({ to, replace, state, onClick, children, ...rest }, ref) {
+	const navigate = useNavigate();
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		href: to,
+		onClick: useCallback((event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
+			if (event.button !== 0) return;
+			event.preventDefault();
+			navigate(to, {
+				replace,
+				state
+			});
+		}, [
+			navigate,
+			to,
+			replace,
+			state,
+			onClick
+		]),
+		...rest,
+		children
+	});
+});
+
+//#endregion
+//#region src/Outlet.tsx
+/**
+* Renders the matched child route.
+* Used in layout components to specify where child routes should render.
+*/
+function Outlet() {
+	const routeContext = useContext(RouteContext);
+	if (!routeContext) return null;
+	return routeContext.outlet;
+}
+
+//#endregion
+//#region src/hooks/useLocation.ts
+/**
+* Returns the current location object.
+*/
+function useLocation() {
+	const context = useContext(RouterContext);
+	if (!context) throw new Error("useLocation must be used within a Router");
+	return useMemo(() => {
+		if (!context.currentEntry?.url) return {
+			pathname: "/",
+			search: "",
+			hash: ""
+		};
+		const url = new URL(context.currentEntry.url);
+		return {
+			pathname: url.pathname,
+			search: url.search,
+			hash: url.hash
+		};
+	}, [context.currentEntry?.url]);
+}
+
+//#endregion
+//#region src/hooks/useParams.ts
+/**
+* Returns route parameters from the matched path.
+*/
+function useParams() {
+	const context = useContext(RouteContext);
+	if (!context) throw new Error("useParams must be used within a Router");
+	return context.params;
+}
+
+//#endregion
+//#region src/hooks/useSearchParams.ts
+/**
+* Returns and allows manipulation of URL search parameters.
+*/
+function useSearchParams() {
+	const context = useContext(RouterContext);
+	if (!context) throw new Error("useSearchParams must be used within a Router");
+	return [useMemo(() => {
+		if (!context.currentEntry?.url) return new URLSearchParams();
+		return new URL(context.currentEntry.url).searchParams;
+	}, [context.currentEntry?.url]), useCallback((params) => {
+		const currentUrl = context.currentEntry?.url;
+		if (!currentUrl) return;
+		const url = new URL(currentUrl);
+		let newParams;
+		if (typeof params === "function") {
+			const result = params(new URLSearchParams(url.search));
+			newParams = result instanceof URLSearchParams ? result : new URLSearchParams(result);
+		} else if (params instanceof URLSearchParams) newParams = params;
+		else newParams = new URLSearchParams(params);
+		url.search = newParams.toString();
+		context.navigate(url.pathname + url.search + url.hash, { replace: true });
+	}, [context])];
+}
+
+//#endregion
+export { Link, Outlet, Router, useLocation, useNavigate, useParams, useSearchParams };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["result: MatchedRoute","urlPatternPath: string","params: Record<string, string>","consumedPathname: string","Link","newParams: URLSearchParams"],"sources":["../src/context/RouterContext.ts","../src/context/RouteContext.ts","../src/core/matchRoutes.ts","../src/Router.tsx","../src/hooks/useNavigate.ts","../src/Link.tsx","../src/Outlet.tsx","../src/hooks/useLocation.ts","../src/hooks/useParams.ts","../src/hooks/useSearchParams.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { NavigateOptions } from \"../types.js\";\n\nexport type RouterContextValue = {\n  /** Current navigation entry */\n  currentEntry: NavigationHistoryEntry | null;\n  /** Navigate to a new URL */\n  navigate: (to: string, options?: NavigateOptions) => void;\n};\n\nexport const RouterContext = createContext<RouterContextValue | null>(null);\n","import { createContext, type ReactNode } from \"react\";\n\nexport type RouteContextValue = {\n  /** Matched route parameters */\n  params: Record<string, string>;\n  /** The matched path pattern */\n  matchedPath: string;\n  /** Child route element to render via Outlet */\n  outlet: ReactNode;\n};\n\nexport const RouteContext = createContext<RouteContextValue | null>(null);\n","import type { RouteDefinition, MatchedRoute } from \"../types.js\";\n\n/**\n * Match a pathname against a route tree, returning the matched route stack.\n * Returns null if no match is found.\n */\nexport function matchRoutes(\n  routes: RouteDefinition[],\n  pathname: string,\n): MatchedRoute[] | null {\n  for (const route of routes) {\n    const matched = matchRoute(route, pathname);\n    if (matched) {\n      return matched;\n    }\n  }\n  return null;\n}\n\n/**\n * Match a single route and its children recursively.\n */\nfunction matchRoute(\n  route: RouteDefinition,\n  pathname: string,\n): MatchedRoute[] | null {\n  const hasChildren = Boolean(route.children?.length);\n\n  // For parent routes (with children), we need to match as a prefix\n  // For leaf routes (no children), we need an exact match\n  const { matched, params, consumedPathname } = matchPath(\n    route.path,\n    pathname,\n    !hasChildren,\n  );\n\n  if (!matched) {\n    return null;\n  }\n\n  const result: MatchedRoute = {\n    route,\n    params,\n    pathname: consumedPathname,\n  };\n\n  // If this route has children, try to match them\n  if (hasChildren) {\n    // Calculate remaining pathname, ensuring it starts with /\n    let remainingPathname = pathname.slice(consumedPathname.length);\n    if (!remainingPathname.startsWith(\"/\")) {\n      remainingPathname = \"/\" + remainingPathname;\n    }\n    if (remainingPathname === \"\") {\n      remainingPathname = \"/\";\n    }\n\n    for (const child of route.children!) {\n      const childMatch = matchRoute(child, remainingPathname);\n      if (childMatch) {\n        // Merge params from parent into children\n        return [\n          result,\n          ...childMatch.map((m) => ({\n            ...m,\n            params: { ...params, ...m.params },\n          })),\n        ];\n      }\n    }\n\n    // If no children matched but this route has a component, it's still a valid match\n    if (route.component) {\n      return [result];\n    }\n\n    return null;\n  }\n\n  return [result];\n}\n\n/**\n * Match a path pattern against a pathname.\n */\nfunction matchPath(\n  pattern: string,\n  pathname: string,\n  exact: boolean,\n): {\n  matched: boolean;\n  params: Record<string, string>;\n  consumedPathname: string;\n} {\n  // Normalize pattern\n  const normalizedPattern = pattern.startsWith(\"/\") ? pattern : `/${pattern}`;\n\n  // Build URLPattern\n  let urlPatternPath: string;\n  if (exact) {\n    urlPatternPath = normalizedPattern;\n  } else if (normalizedPattern === \"/\") {\n    // Special case: root path as prefix matches anything\n    urlPatternPath = \"/*\";\n  } else {\n    // For other prefix matches, add optional wildcard suffix\n    urlPatternPath = `${normalizedPattern}{/*}?`;\n  }\n\n  const urlPattern = new URLPattern({ pathname: urlPatternPath });\n\n  const match = urlPattern.exec({ pathname });\n  if (!match) {\n    return { matched: false, params: {}, consumedPathname: \"\" };\n  }\n\n  // Extract params (excluding the wildcard group \"0\")\n  const params: Record<string, string> = {};\n  for (const [key, value] of Object.entries(match.pathname.groups)) {\n    if (value !== undefined && key !== \"0\") {\n      params[key] = value;\n    }\n  }\n\n  // Calculate consumed pathname\n  let consumedPathname: string;\n  if (exact) {\n    consumedPathname = pathname;\n  } else if (normalizedPattern === \"/\") {\n    // Root pattern consumes just \"/\"\n    consumedPathname = \"/\";\n  } else {\n    // For prefix matches, calculate based on pattern segments\n    const patternSegments = normalizedPattern.split(\"/\").filter(Boolean);\n    const pathnameSegments = pathname.split(\"/\").filter(Boolean);\n    consumedPathname =\n      \"/\" + pathnameSegments.slice(0, patternSegments.length).join(\"/\");\n  }\n\n  return { matched: true, params, consumedPathname };\n}\n","import {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useSyncExternalStore,\n} from \"react\";\nimport { RouterContext } from \"./context/RouterContext.js\";\nimport { RouteContext } from \"./context/RouteContext.js\";\nimport type {\n  RouteDefinition,\n  NavigateOptions,\n  MatchedRoute,\n} from \"./types.js\";\nimport { matchRoutes } from \"./core/matchRoutes.js\";\n\nexport type RouterProps = {\n  routes: RouteDefinition[];\n  children?: ReactNode;\n};\n\n/**\n * Check if Navigation API is available.\n */\nfunction hasNavigation(): boolean {\n  return typeof navigation !== \"undefined\";\n}\n\n/**\n * Subscribe to Navigation API's currententrychange event.\n */\nfunction subscribeToNavigation(callback: () => void): () => void {\n  if (!hasNavigation()) {\n    return () => {};\n  }\n  navigation.addEventListener(\"currententrychange\", callback);\n  return () => {\n    if (hasNavigation()) {\n      navigation.removeEventListener(\"currententrychange\", callback);\n    }\n  };\n}\n\n/**\n * Get current navigation entry snapshot.\n */\nfunction getNavigationSnapshot(): NavigationHistoryEntry | null {\n  if (!hasNavigation()) {\n    return null;\n  }\n  return navigation.currentEntry;\n}\n\n/**\n * Server snapshot - Navigation API not available on server.\n */\nfunction getServerSnapshot(): null {\n  return null;\n}\n\nexport function Router({ routes, children }: RouterProps): ReactNode {\n  const currentEntry = useSyncExternalStore(\n    subscribeToNavigation,\n    getNavigationSnapshot,\n    getServerSnapshot,\n  );\n\n  // Set up navigation interception\n  useEffect(() => {\n    if (!hasNavigation()) {\n      return;\n    }\n\n    const handleNavigate = (event: NavigateEvent) => {\n      // Only intercept same-origin navigations\n      if (!event.canIntercept || event.hashChange) {\n        return;\n      }\n\n      // Check if the URL matches any of our routes\n      const url = new URL(event.destination.url);\n      const matched = matchRoutes(routes, url.pathname);\n\n      if (matched) {\n        event.intercept({\n          handler: async () => {\n            // Navigation will complete and currententrychange will fire\n          },\n        });\n      }\n    };\n\n    navigation.addEventListener(\"navigate\", handleNavigate);\n    return () => {\n      if (hasNavigation()) {\n        navigation.removeEventListener(\"navigate\", handleNavigate);\n      }\n    };\n  }, [routes]);\n\n  // Navigate function for programmatic navigation\n  const navigate = useCallback((to: string, options?: NavigateOptions) => {\n    if (!hasNavigation()) {\n      return;\n    }\n    navigation.navigate(to, {\n      history: options?.replace ? \"replace\" : \"push\",\n      state: options?.state,\n    });\n  }, []);\n\n  // Match current URL against routes\n  const currentUrl = currentEntry?.url;\n  const matchedRoutes = useMemo(() => {\n    if (!currentUrl) return null;\n    const url = new URL(currentUrl);\n    return matchRoutes(routes, url.pathname);\n  }, [currentUrl, routes]);\n\n  const routerContextValue = useMemo(\n    () => ({ currentEntry, navigate }),\n    [currentEntry, navigate],\n  );\n\n  return (\n    <RouterContext.Provider value={routerContextValue}>\n      {matchedRoutes ? (\n        <RouteRenderer matchedRoutes={matchedRoutes} index={0} />\n      ) : null}\n      {children}\n    </RouterContext.Provider>\n  );\n}\n\ntype RouteRendererProps = {\n  matchedRoutes: MatchedRoute[];\n  index: number;\n};\n\n/**\n * Recursively render matched routes with proper context.\n */\nfunction RouteRenderer({\n  matchedRoutes,\n  index,\n}: RouteRendererProps): ReactNode {\n  const match = matchedRoutes[index];\n  if (!match) return null;\n\n  const { route, params, pathname } = match;\n  const Component = route.component;\n\n  // Create outlet for child routes\n  const outlet =\n    index < matchedRoutes.length - 1 ? (\n      <RouteRenderer matchedRoutes={matchedRoutes} index={index + 1} />\n    ) : null;\n\n  const routeContextValue = useMemo(\n    () => ({ params, matchedPath: pathname, outlet }),\n    [params, pathname, outlet],\n  );\n\n  return (\n    <RouteContext.Provider value={routeContextValue}>\n      {Component ? <Component /> : outlet}\n    </RouteContext.Provider>\n  );\n}\n","import { useContext } from \"react\";\nimport { RouterContext } from \"../context/RouterContext.js\";\nimport type { NavigateOptions } from \"../types.js\";\n\n/**\n * Returns a function for programmatic navigation.\n */\nexport function useNavigate(): (to: string, options?: NavigateOptions) => void {\n  const context = useContext(RouterContext);\n\n  if (!context) {\n    throw new Error(\"useNavigate must be used within a Router\");\n  }\n\n  return context.navigate;\n}\n","import {\n  type AnchorHTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n} from \"react\";\nimport { useNavigate } from \"./hooks/useNavigate.js\";\n\nexport type LinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\"\n> & {\n  /** The destination URL */\n  to: string;\n  /** Replace current history entry instead of pushing */\n  replace?: boolean;\n  /** State to associate with the navigation */\n  state?: unknown;\n  children?: ReactNode;\n};\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { to, replace, state, onClick, children, ...rest },\n  ref,\n) {\n  const navigate = useNavigate();\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLAnchorElement>) => {\n      // Call user's onClick handler if provided\n      onClick?.(event);\n\n      // Don't handle if default was prevented\n      if (event.defaultPrevented) return;\n\n      // Don't handle modified clicks (new tab, etc.)\n      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n        return;\n      }\n\n      // Don't handle right clicks\n      if (event.button !== 0) return;\n\n      // Prevent default and navigate via Navigation API\n      event.preventDefault();\n      navigate(to, { replace, state });\n    },\n    [navigate, to, replace, state, onClick],\n  );\n\n  return (\n    <a ref={ref} href={to} onClick={handleClick} {...rest}>\n      {children}\n    </a>\n  );\n});\n","import { type ReactNode, useContext } from \"react\";\nimport { RouteContext } from \"./context/RouteContext.js\";\n\n/**\n * Renders the matched child route.\n * Used in layout components to specify where child routes should render.\n */\nexport function Outlet(): ReactNode {\n  const routeContext = useContext(RouteContext);\n\n  if (!routeContext) {\n    return null;\n  }\n\n  return routeContext.outlet;\n}\n","import { useContext, useMemo } from \"react\";\nimport { RouterContext } from \"../context/RouterContext.js\";\nimport type { Location } from \"../types.js\";\n\n/**\n * Returns the current location object.\n */\nexport function useLocation(): Location {\n  const context = useContext(RouterContext);\n\n  if (!context) {\n    throw new Error(\"useLocation must be used within a Router\");\n  }\n\n  return useMemo(() => {\n    if (!context.currentEntry?.url) {\n      return { pathname: \"/\", search: \"\", hash: \"\" };\n    }\n\n    const url = new URL(context.currentEntry.url);\n    return {\n      pathname: url.pathname,\n      search: url.search,\n      hash: url.hash,\n    };\n  }, [context.currentEntry?.url]);\n}\n","import { useContext } from \"react\";\nimport { RouteContext } from \"../context/RouteContext.js\";\n\n/**\n * Returns route parameters from the matched path.\n */\nexport function useParams<\n  T extends Record<string, string> = Record<string, string>,\n>(): T {\n  const context = useContext(RouteContext);\n\n  if (!context) {\n    throw new Error(\"useParams must be used within a Router\");\n  }\n\n  return context.params as T;\n}\n","import { useCallback, useContext, useMemo } from \"react\";\nimport { RouterContext } from \"../context/RouterContext.js\";\n\ntype SetSearchParams = (\n  params:\n    | URLSearchParams\n    | Record<string, string>\n    | ((prev: URLSearchParams) => URLSearchParams | Record<string, string>),\n) => void;\n\n/**\n * Returns and allows manipulation of URL search parameters.\n */\nexport function useSearchParams(): [URLSearchParams, SetSearchParams] {\n  const context = useContext(RouterContext);\n\n  if (!context) {\n    throw new Error(\"useSearchParams must be used within a Router\");\n  }\n\n  const searchParams = useMemo(() => {\n    if (!context.currentEntry?.url) {\n      return new URLSearchParams();\n    }\n    const url = new URL(context.currentEntry.url);\n    return url.searchParams;\n  }, [context.currentEntry?.url]);\n\n  const setSearchParams = useCallback<SetSearchParams>(\n    (params) => {\n      const currentUrl = context.currentEntry?.url;\n      if (!currentUrl) return;\n\n      const url = new URL(currentUrl);\n\n      let newParams: URLSearchParams;\n      if (typeof params === \"function\") {\n        const result = params(new URLSearchParams(url.search));\n        newParams =\n          result instanceof URLSearchParams\n            ? result\n            : new URLSearchParams(result);\n      } else if (params instanceof URLSearchParams) {\n        newParams = params;\n      } else {\n        newParams = new URLSearchParams(params);\n      }\n\n      url.search = newParams.toString();\n      context.navigate(url.pathname + url.search + url.hash, { replace: true });\n    },\n    [context],\n  );\n\n  return [searchParams, setSearchParams];\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@funstack/router",
+  "version": "0.0.1-alpha.0",
+  "description": "A modern React router based on the Navigation API",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "keywords": [
+    "react",
+    "router",
+    "navigation-api"
+  ],
+  "author": "uhyo <uhyo@uhy.ooo>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "prettier": "^3.7.4",
+    "react": "^19.0.0",
+    "tsdown": "^0.17.2",
+    "typescript": "^5.7.0",
+    "urlpattern-polyfill": "^10.1.0",
+    "vitest": "^4.0.15"
+  }
+}