@flight-framework/router 0.0.4 → 0.0.5

package/dist/index.d.ts

@@ -266,9 +266,32 @@ declare function prefetchWhenIdle(page: string, options?: PrefetchOptions): void
  * Router Hooks
  *
  * React hooks for accessing router state.
- * These require React to be available.
+ * Uses useSyncExternalStore for concurrent-safe external state (2026 best practice).
  */
 
+/**
+ * Subscribe to pathname changes - for useSyncExternalStore
+ */
+declare function subscribeToPathname(callback: () => void): () => void;
+/**
+ * Get current pathname snapshot - for useSyncExternalStore
+ */
+declare function getPathnameSnapshot(): string;
+/**
+ * Get server snapshot - for useSyncExternalStore SSR
+ */
+declare function getPathnameServerSnapshot(): string;
+/**
+ * Create usePathname hook with provided React instance
+ * This pattern ensures proper bundler support for React hooks
+ *
+ * @example
+ * import { useSyncExternalStore } from 'react';
+ * import { createUsePathname } from '@flight-framework/router';
+ *
+ * const usePathname = createUsePathname(useSyncExternalStore);
+ */
+declare function createUsePathname(useSyncExternalStore: <T>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T) => T): () => string;
 declare let useParams: <T extends RouteParams = RouteParams>() => T;
 declare let useSearchParams: () => [URLSearchParams, (params: SearchParams | URLSearchParams) => void];
 declare let usePathname: () => string;
@@ -409,4 +432,4 @@ declare function observeForPrefetch(element: Element, href: string): () => void;
  */
 declare function setupIntentPrefetch(element: HTMLElement, href: string): () => void;
 
-export { Link, type LinkProps, type LoaderContext, type LoaderFunction, type NavigateOptions, type PrefetchOptions, PrefetchPageLinks, type PrefetchPriority, type PrefetchStrategy, type RouteDefinition, type RouteMatch, type RouteParams, RouterContext, type RouterContextValue, RouterProvider, type RouterProviderProps, type SearchParams, clearPrefetchCache, createLink, findRoute, generatePath, isActive, isPrefetched, matchRoute, navigate, observeForPrefetch, parseParams, prefetch, prefetchAll, prefetchPages, prefetchRoute, prefetchWhenIdle, redirect, setupIntentPrefetch, useLinkProps, useParams, usePathname, useRouter, useSearchParams };
+export { Link, type LinkProps, type LoaderContext, type LoaderFunction, type NavigateOptions, type PrefetchOptions, PrefetchPageLinks, type PrefetchPriority, type PrefetchStrategy, type RouteDefinition, type RouteMatch, type RouteParams, RouterContext, type RouterContextValue, RouterProvider, type RouterProviderProps, type SearchParams, clearPrefetchCache, createLink, createUsePathname, findRoute, generatePath, getPathnameServerSnapshot, getPathnameSnapshot, isActive, isPrefetched, matchRoute, navigate, observeForPrefetch, parseParams, prefetch, prefetchAll, prefetchPages, prefetchRoute, prefetchWhenIdle, redirect, setupIntentPrefetch, subscribeToPathname, useLinkProps, useParams, usePathname, useRouter, useSearchParams };

package/dist/index.js

@@ -39,6 +39,63 @@ function navigateTo(to, options = {}) {
     window.scrollTo({ top: 0, left: 0, behavior: "instant" });
   }
 }
+function initRouter(options = {}) {
+  const { initialPath, basePath = "" } = options;
+  let path;
+  let searchParams;
+  if (isBrowser) {
+    path = window.location.pathname;
+    searchParams = new URLSearchParams(window.location.search);
+  } else {
+    path = initialPath || "/";
+    searchParams = new URLSearchParams();
+  }
+  if (basePath && path.startsWith(basePath)) {
+    path = path.slice(basePath.length) || "/";
+  }
+  currentContext = {
+    path,
+    searchParams,
+    navigate: navigateTo,
+    back: () => isBrowser && window.history.back(),
+    forward: () => isBrowser && window.history.forward()
+  };
+  if (isBrowser) {
+    window.addEventListener("popstate", () => {
+      updateContext({
+        path: window.location.pathname,
+        searchParams: new URLSearchParams(window.location.search)
+      });
+    });
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function(state, unused, url) {
+      originalPushState(state, unused, url);
+      if (url) {
+        const newUrl = new URL(url.toString(), window.location.origin);
+        updateContext({
+          path: newUrl.pathname,
+          searchParams: newUrl.searchParams
+        });
+      }
+    };
+    history.replaceState = function(state, unused, url) {
+      originalReplaceState(state, unused, url);
+      if (url) {
+        const newUrl = new URL(url.toString(), window.location.origin);
+        updateContext({
+          path: newUrl.pathname,
+          searchParams: newUrl.searchParams
+        });
+      }
+    };
+  }
+}
+var initialized = false;
+if (isBrowser && !initialized) {
+  initialized = true;
+  initRouter();
+}
 var RouterContext = null;
 var RouterProvider = null;
 var useRouter = getRouterContext;
@@ -493,15 +550,65 @@ function prefetchWhenIdle(page, options = {}) {
 
 // src/hooks.ts
 var isBrowser5 = typeof window !== "undefined";
+var pathSubscribers = /* @__PURE__ */ new Set();
+function notifyPathChange() {
+  pathSubscribers.forEach((fn) => fn());
+}
+var historyIntercepted = false;
+function interceptHistory() {
+  if (!isBrowser5 || historyIntercepted) return;
+  historyIntercepted = true;
+  const originalPushState = history.pushState.bind(history);
+  const originalReplaceState = history.replaceState.bind(history);
+  history.pushState = function(state, unused, url) {
+    originalPushState(state, unused, url);
+    notifyPathChange();
+  };
+  history.replaceState = function(state, unused, url) {
+    originalReplaceState(state, unused, url);
+    notifyPathChange();
+  };
+  window.addEventListener("popstate", notifyPathChange);
+}
+if (isBrowser5) {
+  interceptHistory();
+}
+function subscribeToPathname(callback) {
+  pathSubscribers.add(callback);
+  return () => pathSubscribers.delete(callback);
+}
+function getPathnameSnapshot() {
+  return isBrowser5 ? window.location.pathname : "/";
+}
+function getPathnameServerSnapshot() {
+  return "/";
+}
+function createUsePathname(useSyncExternalStore) {
+  return function usePathname2() {
+    return useSyncExternalStore(
+      subscribeToPathname,
+      getPathnameSnapshot,
+      getPathnameServerSnapshot
+    );
+  };
+}
 var useParams = () => ({});
 var useSearchParams = () => [new URLSearchParams(), () => {
 }];
-var usePathname = () => "/";
+var usePathname = () => {
+  if (isBrowser5) {
+    return window.location.pathname;
+  }
+  return "/";
+};
 if (typeof globalThis !== "undefined") {
   try {
     const React = globalThis.React;
+    if (React?.useSyncExternalStore) {
+      usePathname = createUsePathname(React.useSyncExternalStore);
+    }
     if (React?.useState) {
-      const { useState, useEffect, useCallback, useMemo } = React;
+      const { useState, useEffect, useCallback } = React;
       useParams = function useFlightParams() {
         const [params, setParams] = useState({});
         useEffect(() => {
@@ -545,19 +652,6 @@ if (typeof globalThis !== "undefined") {
         }, []);
         return [searchParams, setSearchParams];
       };
-      usePathname = function useFlightPathname() {
-        const { path } = getRouterContext();
-        const [pathname, setPathname] = useState(path);
-        useEffect(() => {
-          if (!isBrowser5) return;
-          const handleChange = () => {
-            setPathname(window.location.pathname);
-          };
-          window.addEventListener("popstate", handleChange);
-          return () => window.removeEventListener("popstate", handleChange);
-        }, []);
-        return pathname;
-      };
     }
   } catch {
   }
@@ -644,8 +738,11 @@ export {
   RouterProvider,
   clearPrefetchCache,
   createLink,
+  createUsePathname,
   findRoute,
   generatePath,
+  getPathnameServerSnapshot,
+  getPathnameSnapshot,
   isActive,
   isPrefetched,
   matchRoute,
@@ -659,6 +756,7 @@ export {
   prefetchWhenIdle,
   redirect,
   setupIntentPrefetch,
+  subscribeToPathname,
   useLinkProps,
   useParams,
   usePathname,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flight-framework/router",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "Agnostic client-side routing primitives for Flight Framework",
     "type": "module",
     "main": "./dist/index.js",
@@ -45,4 +45,4 @@
             "optional": true
         }
     }
-}
+}