Require solid-js / @solidjs/web 2.0.0-rc.15

.changeset/require-solid-rc-15.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+Require solid-js / @solidjs/web 2.0.0-rc.15. Link and form claims follow rc.15's claim contract: an element's compiled mount claim fires once, after its initial attributes are applied, and later claims come from compiler-owned `href`/`action` writes or from `claimElementTree` sweeps (frame streams, morphs). The router's claim handlers are unchanged.

package.json

@@ -48,22 +48,22 @@
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "@solidjs/vite-plugin": "3.0.0-next.47",
-    "@solidjs/web": "^2.0.0-rc.14",
+    "@solidjs/web": "^2.0.0-rc.15",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
     "babel-preset-solid": "^2.0.0-rc.2",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "^2.0.0-rc.14",
+    "solid-js": "^2.0.0-rc.15",
     "typescript": "^5.7.2",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-rc.14",
+    "@solidjs/web": "^2.0.0-rc.15",
     "filesystem-routing": ">=0.4.0",
-    "solid-js": "^2.0.0-rc.14"
+    "solid-js": "^2.0.0-rc.15"
   },
   "peerDependenciesMeta": {
     "filesystem-routing": {

test/action-commit-release.spec.tsx

@@ -11,7 +11,7 @@
  */
 import { action, createMemo, createRoot, createSignal, For, Loading, Show } from "solid-js";
 import { vi } from "vitest";
-import { claimElement, redirect, render } from "@solidjs/web";
+import { claimElementTree, redirect, render } from "@solidjs/web";
 import {
   action as routerAction,
   createRouter,
@@ -199,14 +199,14 @@ describe("#649 router actions release at the transition's commit", () => {
     // a server-component morph resets attributes to the server HTML (which
     // never carries aria-busy), then re-claims the element
     t.form().removeAttribute("aria-busy");
-    claimElement(t.form());
+    claimElementTree(t.form());
     expect(t.busy()).toBe("true");
 
     t.mutation().resolve("ok");
     await until(() => t.log.length > 0);
     expect(t.busy()).toBeNull();
 
-    claimElement(t.form());
+    claimElementTree(t.form());
     expect(t.busy()).toBeNull();
     t.dispose();
   });
@@ -315,7 +315,7 @@ describe("#649 router actions release at the transition's commit", () => {
     t.form().requestSubmit();
     await t.mutationStarted();
     expect(t.busy()).toBe("false");
-    claimElement(t.form());
+    claimElementTree(t.form());
     expect(t.busy()).toBe("false");
 
     t.mutation().resolve("ok");
@@ -419,7 +419,7 @@ describe("#649 router actions release at the transition's commit", () => {
     expect(t.busy()).toBe("true");
 
     t.form().setAttribute("aria-busy", "false");
-    claimElement(t.form());
+    claimElementTree(t.form());
     expect(t.busy()).toBe("false");
 
     t.mutation().resolve("ok");

test/claims.spec.tsx

@@ -4,7 +4,7 @@
  * wrapper component. These specs compile real JSX, so they exercise the full
  * chain — compiler claim emission → runtime claim hook → router consumer.
  */
-import { claimElement, render } from "@solidjs/web";
+import { claimElementTree, render } from "@solidjs/web";
 import {
   createRoot,
   createSignal,
@@ -351,7 +351,7 @@ describe("compiler-claimed anchors", () => {
 
       about.removeAttribute("aria-current");
       about.removeAttribute("data-active");
-      claimElement(about);
+      claimElementTree(about);
 
       expect(about.getAttribute("aria-current")).toBe("page");
       expect(about.hasAttribute("data-active")).toBe(true);
@@ -725,7 +725,7 @@ describe("compiler-claimed anchors", () => {
       // state stripped) and re-claims
       step.setAttribute("aria-current", "step");
       step.removeAttribute("data-active");
-      claimElement(step);
+      claimElementTree(step);
       expect(step.getAttribute("aria-current")).toBe("step");
       expect(step.hasAttribute("data-active")).toBe(true);
 
@@ -807,7 +807,7 @@ describe("compiler-claimed anchors", () => {
     const morph = (a: Element) => {
       a.removeAttribute("aria-current");
       a.removeAttribute("data-active");
-      claimElement(a);
+      claimElementTree(a);
     };
     try {
       const about = div.querySelector('[data-testid="about"]')!;

test/data/events.spec.ts

@@ -1,4 +1,4 @@
-import { claimElement } from "@solidjs/web";
+import { claimElement, setAttribute } from "@solidjs/web";
 import { createRoot, createSignal } from "solid-js";
 import { vi } from "vitest";
 import { setRouterFormHandler, setupNativeEvents } from "../../src/data/events.js";
@@ -959,10 +959,10 @@ describe("tap and ambient preload strategies", () => {
       const a = link({ href: "/a", preload: "viewport" });
       observer().intersect(a);
       vi.runAllTimers();
-      a.setAttribute("href", "/b");
-      // the re-claim runs under the effect writing `href`, which outlives
-      // neither the anchor nor its arming
-      createRoot(d => (claimElement(a), d))();
+      // a compiler-owned `href` write re-claims the claimed anchor; it runs
+      // under the effect writing `href`, which outlives neither the anchor
+      // nor its arming
+      createRoot(d => (setAttribute(a, "href", "/b"), d))();
       observer().intersect(a);
       vi.runAllTimers();
       expect(preloaded()).toEqual(["/a:false", "/b:false"]);

test/hash-history.spec.tsx

@@ -92,7 +92,7 @@ describe("hashHistory navigation (#582)", () => {
     // header carries (display today, logical once @solidjs/web unwraps the
     // brand) must route — this is the client leg of an action redirect
     expect(isHref(paths.page1)).toBe(true);
-    const res = redirect(paths.page1);
+    const res = redirect<Response>(paths.page1);
     const target = res.headers.get("Location")!;
     nav(target, { scroll: false });
     await settle();

test/navigation-pending.spec.tsx

@@ -429,10 +429,10 @@ describe("navigation pending state (characterization, #655)", () => {
           "| navigate /slow/2: call routing=true target=/slow/1 intent=navigate at=/",
           "fetch:2:navigate",
           "routing:true@/slow/2",
-          "link:/slow/1:false",
-          "link:/slow/2:true",
           "attr:/slow/1:-",
           "attr:/slow/2:+",
+          "link:/slow/1:false",
+          "link:/slow/2:true",
           "| navigate /slow/2: flush routing=true target=/slow/2 intent=navigate at=/",
           "| navigate /slow/2: settled routing=true target=/slow/2 intent=navigate at=/",
           "| resolved 1 routing=true target=/slow/2 intent=navigate at=/",

test/server/query-response-cookies.spec.ts

@@ -8,8 +8,9 @@ describe.each(["returned", "thrown"] as const)("%s query response cookies", outc
     "%s appends cookies once across concurrent and cached reads",
     async kind => {
       const value = { message: "query result" };
-      const result = kind === "respond" ? respond(value) : new Response("query body");
-      const response = result instanceof Response ? result : result.response!;
+      // respond() is typed as its value; at runtime it is a Response envelope
+      const result = (kind === "respond" ? respond(value) : new Response("query body")) as Response;
+      const response = result;
       response.headers.set("Cache-Control", "private, no-store");
       response.headers.set("X-Query", "metadata");
       const cookies = [

test/server/query-response-headers.spec.tsx

@@ -19,8 +19,11 @@ describe.each(["returned", "thrown"] as const)(
       "%s preserves document headers, cookies and query metadata",
       async kind => {
         const value = { message: "query result" };
-        const result = kind === "respond" ? respond(value) : new Response("query body");
-        const response = result instanceof Response ? result : result.response!;
+        // respond() is typed as its value; at runtime it is a Response envelope
+        const result = (
+          kind === "respond" ? respond(value) : new Response("query body")
+        ) as Response;
+        const response = result;
         response.headers.set("Content-Type", "application/json");
         response.headers.set("Content-Length", "42");
         response.headers.set("Content-Encoding", "br");