@gusnips/react 0.4.2 → 0.4.4

package/dist/hydrate.d.ts

@@ -30,6 +30,16 @@ export { PRERENDERED_ROUTE_ATTR, SHELL_ROUTE } from "./prerender-contract.ts";
  * serves `/pt/pricing` from a file rendered for `/pricing`, with the locale carried in the
  * router's `basename` — so the address and the route are different strings, and only the caller
  * knows which one the build wrote.
+ *
+ * **A trailing slash is not a different page.** The router renders `/precos/` and `/precos` alike,
+ * and which one is in the address bar is the host's call: a host serving `precos/index.html`
+ * redirects `/precos` to `/precos/` by default (Firebase Hosting does). Compared exactly, that was
+ * false on every page of one adopter: every prerendered body was thrown away and drawn again, on a
+ * page that looks the same either way.
+ *
+ * **`null` means nothing the build wrote can be this reader's page.** The case is a site that
+ * prerenders one language and detects the reader's at runtime: Portuguese markup hydrated with
+ * Spanish strings is the wrong-page mismatch again, spread across every string on the page.
  */
-export declare function hydrateOrMount(rootEl: Element, tree: ReactNode, route: string): void;
+export declare function hydrateOrMount(rootEl: Element, tree: ReactNode, route: string | null): void;
 //# sourceMappingURL=hydrate.d.ts.map

package/dist/hydrate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAGpF"}
+{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAI3F"}

package/dist/hydrate.js

@@ -15,11 +15,27 @@ export { PRERENDERED_ROUTE_ATTR, SHELL_ROUTE } from "./prerender-contract.js";
  * serves `/pt/pricing` from a file rendered for `/pricing`, with the locale carried in the
  * router's `basename` — so the address and the route are different strings, and only the caller
  * knows which one the build wrote.
+ *
+ * **A trailing slash is not a different page.** The router renders `/precos/` and `/precos` alike,
+ * and which one is in the address bar is the host's call: a host serving `precos/index.html`
+ * redirects `/precos` to `/precos/` by default (Firebase Hosting does). Compared exactly, that was
+ * false on every page of one adopter: every prerendered body was thrown away and drawn again, on a
+ * page that looks the same either way.
+ *
+ * **`null` means nothing the build wrote can be this reader's page.** The case is a site that
+ * prerenders one language and detects the reader's at runtime: Portuguese markup hydrated with
+ * Spanish strings is the wrong-page mismatch again, spread across every string on the page.
  */
 export function hydrateOrMount(rootEl, tree, route) {
-    if (rootEl.getAttribute(PRERENDERED_ROUTE_ATTR) === route)
+    const rendered = rootEl.getAttribute(PRERENDERED_ROUTE_ATTR);
+    if (route !== null && rendered !== null && samePath(rendered, route))
         hydrateRoot(rootEl, tree);
     else
         createRoot(rootEl).render(tree);
 }
+/** `/precos/` and `/precos` are one page; `/` stays `/`. */
+function samePath(a, b) {
+    const trim = (path) => path.replace(/(.)\/+$/, "$1");
+    return trim(a) === trim(b);
+}
 //# sourceMappingURL=hydrate.js.map

package/dist/hydrate.js.map

@@ -1 +1 @@
-{"version":3,"file":"hydrate.js","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,cAAc,CAAC,MAAe,EAAE,IAAe,EAAE,KAAa;IAC5E,IAAI,MAAM,CAAC,YAAY,CAAC,sBAAsB,CAAC,KAAK,KAAK;QAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;QAChF,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACvC,CAAC"}
+{"version":3,"file":"hydrate.js","sourceRoot":"","sources":["../src/hydrate.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,cAAc,CAAC,MAAe,EAAE,IAAe,EAAE,KAAoB;IACnF,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC;IAC7D,IAAI,KAAK,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC;QAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;QAC3F,UAAU,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACvC,CAAC;AAED,4DAA4D;AAC5D,SAAS,QAAQ,CAAC,CAAS,EAAE,CAAS;IACpC,MAAM,IAAI,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACrE,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC"}

package/dist/index.js

@@ -13,11 +13,11 @@
 //   @gusnips/react/guards   the route guards       → react-router-dom
 //   @gusnips/react/hydrate  hydrateOrMount         → react-dom
 //
-// `react-dom` is the one the second migration added, and it is the sharpest case yet: olhary
-// ships a REACT NATIVE app beside its two web apps, and React Native has no react-dom to give.
-// A required peer nobody can satisfy is not a strict contract, it is a closed door — the whole
-// package was unusable there, for one function no phone would ever call. The rule did not need
-// changing to catch it; `react-dom` simply had to stop being required.
+// `react-dom` is the one the second migration added, and it is the sharpest case yet: that
+// adopter ships a REACT NATIVE app beside its two web apps, and React Native has no react-dom to
+// give. A required peer nobody can satisfy is not a strict contract, it is a closed door — the
+// whole package was unusable there, for one function no phone would ever call. The rule did not
+// need changing to catch it; `react-dom` simply had to stop being required.
 //
 // So what is left here imports `react` and `@gusnips/http` and nothing else, and an app on
 // TanStack Router, on Redux, or on a phone takes the fetch client without installing a router, a

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,EAAE;AACF,2CAA2C;AAC3C,EAAE;AACF,+FAA+F;AAC/F,gGAAgG;AAChG,+FAA+F;AAC/F,iGAAiG;AACjG,0BAA0B;AAC1B,EAAE;AACF,oEAAoE;AACpE,6DAA6D;AAC7D,sEAAsE;AACtE,+DAA+D;AAC/D,EAAE;AACF,6FAA6F;AAC7F,+FAA+F;AAC/F,+FAA+F;AAC/F,+FAA+F;AAC/F,uEAAuE;AACvE,EAAE;AACF,2FAA2F;AAC3F,iGAAiG;AACjG,qFAAqF;AACrF,6FAA6F;AAC7F,iGAAiG;AACjG,yFAAyF;AACzF,uBAAuB;AAEvB,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,eAAe,GAMhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAiB,MAAM,UAAU,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAA6B,MAAM,YAAY,CAAC;AAEjG,OAAO,EACL,aAAa,GAGd,MAAM,qBAAsB,CAAC;AAC9B,OAAO,EACL,oBAAoB,EACpB,YAAY,GAMb,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAE3B,iGAAiG;AACjG,kGAAkG;AAClG,6FAA6F;AAC7F,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,cAAc,EAAE,eAAe,EAAwB,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,EAAE;AACF,2CAA2C;AAC3C,EAAE;AACF,+FAA+F;AAC/F,gGAAgG;AAChG,+FAA+F;AAC/F,iGAAiG;AACjG,0BAA0B;AAC1B,EAAE;AACF,oEAAoE;AACpE,6DAA6D;AAC7D,sEAAsE;AACtE,+DAA+D;AAC/D,EAAE;AACF,2FAA2F;AAC3F,iGAAiG;AACjG,+FAA+F;AAC/F,gGAAgG;AAChG,4EAA4E;AAC5E,EAAE;AACF,2FAA2F;AAC3F,iGAAiG;AACjG,qFAAqF;AACrF,6FAA6F;AAC7F,iGAAiG;AACjG,yFAAyF;AACzF,uBAAuB;AAEvB,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,eAAe,GAMhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAiB,MAAM,UAAU,CAAC;AAEzE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAA6B,MAAM,YAAY,CAAC;AAEjG,OAAO,EACL,aAAa,GAGd,MAAM,qBAAsB,CAAC;AAC9B,OAAO,EACL,oBAAoB,EACpB,YAAY,GAMb,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,mBAAmB,CAAC;AAE3B,iGAAiG;AACjG,kGAAkG;AAClG,6FAA6F;AAC7F,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,cAAc,EAAE,eAAe,EAAwB,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gusnips/react",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "The headless runtime under a Vite + React SPA: typed fetch client with single-flight refresh, auth store, query defaults, route guards, error boundary, chunk-reload recovery, i18n bootstrap.",
   "type": "module",
   "license": "MIT",

package/src/hydrate.test.ts

@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { hydrateOrMount, SHELL_ROUTE } from "./hydrate.ts";
+
+// Both roots are mocked: the question is only WHICH one the entry picks, and either choice is
+// silent in a real browser — a wrong mount looks like a hydrate and a wrong hydrate recovers.
+const roots = vi.hoisted(() => ({
+  hydrateRoot: vi.fn(),
+  createRoot: vi.fn(() => ({ render: vi.fn() })),
+}));
+vi.mock("react-dom/client", () => roots);
+
+/** A root whose file names `route` — or names nothing, for `null`. */
+const rootFor = (route: string | null): Element =>
+  ({ getAttribute: () => route }) as unknown as Element; // Only `getAttribute` is read.
+
+const picked = (): "hydrate" | "mount" => {
+  const hydrated = roots.hydrateRoot.mock.calls.length > 0;
+  const mounted = roots.createRoot.mock.calls.length > 0;
+  expect(hydrated !== mounted).toBe(true);
+  return hydrated ? "hydrate" : "mount";
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("hydrateOrMount", () => {
+  it("hydrates the render this file is", () => {
+    hydrateOrMount(rootFor("/precos"), null, "/precos");
+    expect(picked()).toBe("hydrate");
+  });
+
+  it.each([
+    ["the address has one", "/precos", "/precos/"],
+    ["the file has one", "/precos/", "/precos"],
+  ])("ignores a trailing slash when %s", (_case, rendered, route) => {
+    hydrateOrMount(rootFor(rendered), null, route);
+    expect(picked()).toBe("hydrate");
+  });
+
+  it("keeps the front page's slash — it is the whole path", () => {
+    hydrateOrMount(rootFor("/"), null, "/");
+    expect(picked()).toBe("hydrate");
+  });
+
+  it("mounts fresh over a different page", () => {
+    hydrateOrMount(rootFor("/precos"), null, "/faq");
+    expect(picked()).toBe("mount");
+  });
+
+  it("mounts fresh over a shell, whatever the address", () => {
+    hydrateOrMount(rootFor(SHELL_ROUTE), null, "/nao-existe");
+    expect(picked()).toBe("mount");
+  });
+
+  it("mounts fresh over a file that names no route", () => {
+    hydrateOrMount(rootFor(null), null, "/precos");
+    expect(picked()).toBe("mount");
+  });
+
+  it("mounts fresh when the reader cannot be shown this file at all", () => {
+    hydrateOrMount(rootFor("/precos"), null, null);
+    expect(picked()).toBe("mount");
+  });
+});

package/src/hydrate.ts

@@ -34,8 +34,25 @@ export { PRERENDERED_ROUTE_ATTR, SHELL_ROUTE } from "./prerender-contract.ts";
  * serves `/pt/pricing` from a file rendered for `/pricing`, with the locale carried in the
  * router's `basename` — so the address and the route are different strings, and only the caller
  * knows which one the build wrote.
+ *
+ * **A trailing slash is not a different page.** The router renders `/precos/` and `/precos` alike,
+ * and which one is in the address bar is the host's call: a host serving `precos/index.html`
+ * redirects `/precos` to `/precos/` by default (Firebase Hosting does). Compared exactly, that was
+ * false on every page of one adopter: every prerendered body was thrown away and drawn again, on a
+ * page that looks the same either way.
+ *
+ * **`null` means nothing the build wrote can be this reader's page.** The case is a site that
+ * prerenders one language and detects the reader's at runtime: Portuguese markup hydrated with
+ * Spanish strings is the wrong-page mismatch again, spread across every string on the page.
  */
-export function hydrateOrMount(rootEl: Element, tree: ReactNode, route: string): void {
-  if (rootEl.getAttribute(PRERENDERED_ROUTE_ATTR) === route) hydrateRoot(rootEl, tree);
+export function hydrateOrMount(rootEl: Element, tree: ReactNode, route: string | null): void {
+  const rendered = rootEl.getAttribute(PRERENDERED_ROUTE_ATTR);
+  if (route !== null && rendered !== null && samePath(rendered, route)) hydrateRoot(rootEl, tree);
   else createRoot(rootEl).render(tree);
 }
+
+/** `/precos/` and `/precos` are one page; `/` stays `/`. */
+function samePath(a: string, b: string): boolean {
+  const trim = (path: string): string => path.replace(/(.)\/+$/, "$1");
+  return trim(a) === trim(b);
+}

package/src/index.ts

@@ -13,11 +13,11 @@
 //   @gusnips/react/guards   the route guards       → react-router-dom
 //   @gusnips/react/hydrate  hydrateOrMount         → react-dom
 //
-// `react-dom` is the one the second migration added, and it is the sharpest case yet: olhary
-// ships a REACT NATIVE app beside its two web apps, and React Native has no react-dom to give.
-// A required peer nobody can satisfy is not a strict contract, it is a closed door — the whole
-// package was unusable there, for one function no phone would ever call. The rule did not need
-// changing to catch it; `react-dom` simply had to stop being required.
+// `react-dom` is the one the second migration added, and it is the sharpest case yet: that
+// adopter ships a REACT NATIVE app beside its two web apps, and React Native has no react-dom to
+// give. A required peer nobody can satisfy is not a strict contract, it is a closed door — the
+// whole package was unusable there, for one function no phone would ever call. The rule did not
+// need changing to catch it; `react-dom` simply had to stop being required.
 //
 // So what is left here imports `react` and `@gusnips/http` and nothing else, and an app on
 // TanStack Router, on Redux, or on a phone takes the fetch client without installing a router, a