@multiplatform.one/router 8.2.2 → 8.4.0

package/dist/jsx/seam/DomNavigationHost.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DomNavigationHost_exports","DomNavigationHost","DomStackAdapter","module","exports","import_jsx_runtime","require","import_react","import_navigator","_class_call_check","instance","Constructor","TypeError","_defineProperties","props","i","length","descriptor","configurable","writable","_create_class","protoProps","staticProps","_define_property","obj","DomStackAdapter2","rootTag","onChanged","stack","push_by_tag","tag","push","pop","pop_to_tag","idx","lastIndexOf","slice","replace_with_tags","tags","get_navigation_stack","snapshot","get_n_items","get_item","index","get_tag","_snapshot_index"],"sources":["../../../src/seam/DomNavigationHost.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DomNavigationHost_exports","DomNavigationHost","DomStackAdapter","module","exports","import_jsx_runtime","require","import_react","import_navigator","_class_call_check","instance","Constructor","TypeError","_defineProperties","props","i","length","descriptor","configurable","writable","_create_class","protoProps","staticProps","_define_property","obj","DomStackAdapter2","rootTag","onChanged","stack","push_by_tag","tag","push","pop","pop_to_tag","idx","lastIndexOf","slice","replace_with_tags","tags","get_navigation_stack","snapshot","get_n_items","get_item","index","get_tag","_snapshot_index","PAGE_STYLE","position","flex","minHeight","display","flexDirection","overflow","useZeroHeightWarning","ref","useEffect","process","env","NODE_ENV","el","current","raf","requestAnimationFrame","offsetParent","getBoundingClientRect","height"],"sources":["../../../src/seam/DomNavigationHost.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/router",
-  "version": "8.2.2",
+  "version": "8.4.0",
   "description": "multiplatform.one router with support for react-router-dom and react-navigation",
   "keywords": [
     "react",
@@ -61,12 +61,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^8.2.2",
+    "@multiplatform.one/platform": "^8.4.0",
     "@vxrn/color-scheme": "~1.16.5"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "8.2.2",
-    "@multiplatform.one/test-utils": "8.2.2",
+    "@multiplatform.one/config": "8.4.0",
+    "@multiplatform.one/test-utils": "8.4.0",
     "@react-navigation/native": "^7.2.2",
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.3",
@@ -86,6 +86,17 @@
     "react": "^19.1.0",
     "react-router-dom": "^7.0.0"
   },
+  "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    },
+    "one": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=16.0.0"
   },

package/src/router/index.native.tsx

@@ -1,6 +1,21 @@
-import { Link, useParams, usePathname as useOnePathname, useRouter } from "one";
+import type { LinkComponent, UseParams, UseRouter } from "../types";
+import { type NativeRouter, pickRouter } from "./nativeFallback";
 
-export { Link, useParams, useRouter };
+function loadOne(): NativeRouter | undefined {
+  try {
+    return require("one") as NativeRouter;
+  } catch {
+    return undefined;
+  }
+}
+
+const router = pickRouter(loadOne());
+
+export const Link: LinkComponent = router.Link;
+export const useParams: UseParams = router.useParams;
+export const useRouter: UseRouter = router.useRouter;
+
+const useRouterPathname = router.usePathname;
 
 /**
  * One 1.16.5 `usePathname()` reads `useRouteInfo().pathname` with no guard.
@@ -11,7 +26,7 @@ export { Link, useParams, useRouter };
  */
 export function usePathname(): string {
   try {
-    return useOnePathname() ?? "/";
+    return useRouterPathname() ?? "/";
   } catch {
     return "/";
   }

package/src/router/nativeFallback.spec.tsx

@@ -0,0 +1,46 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import type { LinkComponent } from "../types";
+import { type NativeRouter, nativeFallback, pickRouter } from "./nativeFallback";
+
+describe("native router without One", () => {
+  it("falls back to the no-op router when one is not installed", () => {
+    const router = pickRouter(undefined);
+    expect(router).toBe(nativeFallback);
+    const { result } = renderHook(() => router.useRouter());
+    expect(result.current.canGoBack()).toBe(false);
+    expect(() => result.current.push("/a" as never)).not.toThrow();
+    expect(renderHook(() => router.usePathname()).result.current).toBe("/");
+    expect(renderHook(() => router.useParams()).result.current).toEqual({});
+  });
+
+  it("renders a Link's children with no anchor", () => {
+    const { container } = render(
+      <nativeFallback.Link href={"/a" as never}>
+        <span>go</span>
+      </nativeFallback.Link>,
+    );
+    expect(screen.getByText("go")).toBeTruthy();
+    expect(container.querySelector("a")).toBeNull();
+    expect(nativeFallback.Link.resolveHref("/a" as never)).toBe("/a");
+  });
+
+  it("uses One's router when one is installed", () => {
+    const Link = (() => null) as unknown as LinkComponent;
+    const one: NativeRouter = {
+      Link,
+      useParams: () => ({ id: "1" }),
+      usePathname: () => "/one",
+      useRouter: nativeFallback.useRouter,
+    };
+    expect(pickRouter(one)).toBe(one);
+  });
+
+  it("loads one from inside a try block so Metro treats it as optional", () => {
+    const source = readFileSync(join(__dirname, "index.native.tsx"), "utf8");
+    expect(source).not.toMatch(/^import[^;]*from "one"/m);
+    expect(source).toMatch(/try \{\s*return require\("one"\)/);
+  });
+});

package/src/router/nativeFallback.tsx

@@ -0,0 +1,19 @@
+import type { LinkComponent, UseParams, UsePathname, UseRouter } from "../types";
+import { useParams, usePathname, useRouter } from "./EmptyRouter";
+
+export interface NativeRouter {
+  Link: LinkComponent;
+  useParams: UseParams;
+  usePathname: UsePathname;
+  useRouter: UseRouter;
+}
+
+const Link: LinkComponent = ({ children }) => <>{children}</>;
+
+Link.resolveHref = (href) => href.toString();
+
+export const nativeFallback: NativeRouter = { Link, useParams, usePathname, useRouter };
+
+export function pickRouter(one: NativeRouter | undefined): NativeRouter {
+  return one ?? nativeFallback;
+}

package/src/seam/DomNavigationHost.routeHold.spec.tsx

@@ -0,0 +1,78 @@
+import { act, render, screen } from "@testing-library/react";
+import { lazy, type ReactElement } from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { DomNavigationHost } from "./DomNavigationHost";
+import { stackNavigator } from "./navigator";
+
+const ROUTES = [
+  { pattern: "/", tag: "home", title: "Home" },
+  { pattern: "/todos", tag: "todos", title: "Todos" },
+];
+
+function deferredScreen() {
+  let resolve!: () => void;
+  const ready = new Promise<{ default: () => ReactElement }>((done) => {
+    resolve = () => done({ default: () => <div data-testid="todos-screen" /> });
+  });
+  return { Screen: lazy(() => ready), resolve: () => act(async () => resolve()) };
+}
+
+function page(container: HTMLElement, tag: string): HTMLElement {
+  return container.querySelector(`[data-seam-page="${tag}"]`) as HTMLElement;
+}
+
+function shown(container: HTMLElement): string[] {
+  return [...container.querySelectorAll<HTMLElement>("[data-seam-page]")]
+    .filter((el) => el.style.display !== "none")
+    .map((el) => el.dataset.seamPage ?? "");
+}
+
+describe("DomNavigationHost route change (LC-198)", () => {
+  beforeEach(() => {
+    stackNavigator.detach();
+    stackNavigator.configure(ROUTES);
+  });
+
+  it("holds the current page on screen while the next one is still loading", async () => {
+    const todos = deferredScreen();
+    const { container } = render(
+      <DomNavigationHost
+        routes={[
+          { ...ROUTES[0]!, element: <div data-testid="home-screen" /> },
+          { ...ROUTES[1]!, element: <todos.Screen /> },
+        ]}
+      />,
+    );
+
+    act(() => stackNavigator.push("/todos"));
+
+    expect(shown(container)).toEqual(["home"]);
+    expect(page(container, "home").childElementCount).toBeGreaterThan(0);
+    expect(page(container, "home").dataset.seamActive).toBe("true");
+    expect(page(container, "todos").dataset.seamPending).toBe("true");
+    expect(screen.getByTestId("home-screen")).toBeTruthy();
+
+    await todos.resolve();
+
+    expect(shown(container)).toEqual(["todos"]);
+    expect(page(container, "todos").dataset.seamActive).toBe("true");
+    expect(page(container, "todos").dataset.seamPending).toBeUndefined();
+    expect(screen.getByTestId("todos-screen")).toBeTruthy();
+  });
+
+  it("shows the page at once when it does not suspend", () => {
+    const { container } = render(
+      <DomNavigationHost
+        routes={[
+          { ...ROUTES[0]!, element: <div data-testid="home-screen" /> },
+          { ...ROUTES[1]!, element: <div data-testid="todos-screen" /> },
+        ]}
+      />,
+    );
+
+    act(() => stackNavigator.push("/todos"));
+
+    expect(shown(container)).toEqual(["todos"]);
+    expect(page(container, "todos").dataset.seamPending).toBeUndefined();
+  });
+});

package/src/seam/DomNavigationHost.tsx

@@ -26,7 +26,7 @@
 // See the contract above PAGE_STYLE.
 
 import type { CSSProperties, ReactNode } from "react";
-import { Suspense, useEffect, useRef } from "react";
+import { Suspense, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   RouteTagContext,
   stackNavigator,
@@ -149,6 +149,20 @@ function useZeroHeightWarning(ref: { current: HTMLDivElement | null }): void {
   }, [ref]);
 }
 
+function PageLoading({
+  tag,
+  onPending,
+}: {
+  tag: string;
+  onPending: (tag: string, isPending: boolean) => void;
+}): null {
+  useLayoutEffect(() => {
+    onPending(tag, true);
+    return () => onPending(tag, false);
+  }, [tag, onPending]);
+  return null;
+}
+
 export function DomNavigationHost({
   routes,
   initialHref,
@@ -183,6 +197,20 @@ export function DomNavigationHost({
   useZeroHeightWarning(hostRef);
 
   const nav = useNavState();
+  const pendingRef = useRef<Set<string>>(new Set());
+  const [, setPendingVersion] = useState(0);
+  const markPending = useCallback((tag: string, isPending: boolean) => {
+    if (pendingRef.current.has(tag) === isPending) return;
+    if (isPending) pendingRef.current.add(tag);
+    else pendingRef.current.delete(tag);
+    setPendingVersion((version) => version + 1);
+  }, []);
+  const settledRef = useRef(nav.tag);
+  useLayoutEffect(() => {
+    if (!pendingRef.current.has(nav.tag)) settledRef.current = nav.tag;
+  });
+  const pending = pendingRef.current;
+  const shown = pending.has(nav.tag) ? settledRef.current : nav.tag;
 
   return (
     <div
@@ -198,17 +226,20 @@ export function DomNavigationHost({
       }}
     >
       {routes.map((route) => {
-        const active = nav.tag === route.tag;
+        const active = shown === route.tag;
         const mounted = stackNavigator.isVisited(route.tag);
         return (
           <div
             key={route.tag}
             data-seam-page={route.tag}
             data-seam-active={active ? "true" : "false"}
+            data-seam-pending={pending.has(route.tag) ? "true" : undefined}
             style={{ ...PAGE_STYLE, display: active ? "flex" : "none" }}
           >
             <RouteTagContext.Provider value={route.tag}>
-              <Suspense fallback={null}>{mounted ? route.element : null}</Suspense>
+              <Suspense fallback={<PageLoading tag={route.tag} onPending={markPending} />}>
+                {mounted ? route.element : null}
+              </Suspense>
             </RouteTagContext.Provider>
           </div>
         );

package/types/router/index.native.d.ts

@@ -1,5 +1,7 @@
-import { Link, useParams, useRouter } from "one";
-export { Link, useParams, useRouter };
+import type { LinkComponent, UseParams, UseRouter } from "../types";
+export declare const Link: LinkComponent;
+export declare const useParams: UseParams;
+export declare const useRouter: UseRouter;
 /**
  * One 1.16.5 `usePathname()` reads `useRouteInfo().pathname` with no guard.
  * On native a layout node sees the router store's `routeInfo`, which is

package/types/router/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/router/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAiC,SAAS,EAAE,MAAM,KAAK,CAAC;AAEhF,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEtC;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAMpC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/router/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAapE,eAAO,MAAM,IAAI,EAAE,aAA2B,CAAC;AAC/C,eAAO,MAAM,SAAS,EAAE,SAA4B,CAAC;AACrD,eAAO,MAAM,SAAS,EAAE,SAA4B,CAAC;AAIrD;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAMpC"}

package/types/router/nativeFallback.d.ts

@@ -0,0 +1,10 @@
+import type { LinkComponent, UseParams, UsePathname, UseRouter } from "../types";
+export interface NativeRouter {
+    Link: LinkComponent;
+    useParams: UseParams;
+    usePathname: UsePathname;
+    useRouter: UseRouter;
+}
+export declare const nativeFallback: NativeRouter;
+export declare function pickRouter(one: NativeRouter | undefined): NativeRouter;
+//# sourceMappingURL=nativeFallback.d.ts.map

package/types/router/nativeFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeFallback.d.ts","sourceRoot":"","sources":["../../src/router/nativeFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,cAAc,EAAE,YAA0D,CAAC;AAExF,wBAAgB,UAAU,CAAC,GAAG,EAAE,YAAY,GAAG,SAAS,GAAG,YAAY,CAEtE"}

package/types/seam/DomNavigationHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DomNavigationHost.d.ts","sourceRoot":"","sources":["../../src/seam/DomNavigationHost.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAIL,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,QAAQ,EACd,MAAM,aAAa,CAAC;AAErB;;qBAEqB;AACrB,qBAAa,eAAgB,YAAW,eAAe;IACrD,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;gBAE3B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI;IAKlD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK9B,GAAG,IAAI,OAAO;IAOd,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAQhC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAKvC,oBAAoB,IAAI;QACtB,WAAW,IAAI,MAAM,CAAC;QACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG;YAAE,OAAO,IAAI,MAAM,GAAG,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;KAC9D;CAQF;AAED,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;8DAG0D;IAC1D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAmDD,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,WAAW,EACX,KAAK,GACN,EAAE,sBAAsB,GAAG,SAAS,CA8DpC"}
+{"version":3,"file":"DomNavigationHost.d.ts","sourceRoot":"","sources":["../../src/seam/DomNavigationHost.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAIL,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,QAAQ,EACd,MAAM,aAAa,CAAC;AAErB;;qBAEqB;AACrB,qBAAa,eAAgB,YAAW,eAAe;IACrD,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;gBAE3B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,IAAI;IAKlD,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK9B,GAAG,IAAI,OAAO;IAOd,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAQhC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAKvC,oBAAoB,IAAI;QACtB,WAAW,IAAI,MAAM,CAAC;QACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG;YAAE,OAAO,IAAI,MAAM,GAAG,IAAI,CAAA;SAAE,GAAG,IAAI,CAAC;KAC9D;CAQF;AAED,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC7C,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;8DAG0D;IAC1D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,WAAW,EACX,KAAK,GACN,EAAE,sBAAsB,GAAG,SAAS,CA+EpC"}