@solidjs/router 1.0.0 → 2.0.0-next.13

package/dist/claims.d.ts

@@ -0,0 +1,21 @@
+import type { RouterContext } from "./types.js";
+/**
+ * The compiler claims every `a[href]` (and `form[action]`, which this handler
+ * ignores) at creation, and the runtime re-claims on `href` writes. This
+ * consumer gives each router-managed anchor the link-state vocabulary without
+ * a wrapper component:
+ *
+ * - `aria-current="page"` — the location matches the link exactly
+ * - `data-active` — exact or prefix match
+ * - `data-pending` — the link is the target of an in-flight navigation
+ *
+ * Elements are claimed at creation, so late mounts (`<Show>`, `<For>`,
+ * portals) are correct immediately. One render effect (owned by the router)
+ * subscribes to the location and sweeps a registry of claimed anchors —
+ * anchors themselves carry no reactive machinery, just a registry entry
+ * removed by their creating owner's cleanup. State is applied once at claim
+ * so it is correct before the next navigation; re-claims (an `href` write)
+ * are the same one-shot untracked refresh, reading the element's current
+ * `href` from the DOM.
+ */
+export declare function setupLinkClaims(router: RouterContext, explicitLinks?: boolean): void;

package/dist/claims.js

@@ -0,0 +1,115 @@
+import { registerElementClaim } from "@solidjs/web";
+import { createRenderEffect, getOwner, onCleanup, untrack } from "solid-js";
+import { comparablePath } from "./utils.js";
+/**
+ * The compiler claims every `a[href]` (and `form[action]`, which this handler
+ * ignores) at creation, and the runtime re-claims on `href` writes. This
+ * consumer gives each router-managed anchor the link-state vocabulary without
+ * a wrapper component:
+ *
+ * - `aria-current="page"` — the location matches the link exactly
+ * - `data-active` — exact or prefix match
+ * - `data-pending` — the link is the target of an in-flight navigation
+ *
+ * Elements are claimed at creation, so late mounts (`<Show>`, `<For>`,
+ * portals) are correct immediately. One render effect (owned by the router)
+ * subscribes to the location and sweeps a registry of claimed anchors —
+ * anchors themselves carry no reactive machinery, just a registry entry
+ * removed by their creating owner's cleanup. State is applied once at claim
+ * so it is correct before the next navigation; re-claims (an `href` write)
+ * are the same one-shot untracked refresh, reading the element's current
+ * `href` from the DOM.
+ */
+export function setupLinkClaims(router, explicitLinks) {
+    const basePath = router.base.path();
+    // per-element record; `current` remembers whether we set `aria-current`,
+    // so user-authored values (steppers, breadcrumbs) are never stripped
+    const claimed = new WeakMap();
+    const registry = new Set();
+    function isSvg(el) {
+        return el.namespaceURI === "http://www.w3.org/2000/svg";
+    }
+    /** The comparable pathname when the router manages this anchor, else `undefined`. */
+    function managedPath(a) {
+        if (explicitLinks && !a.hasAttribute("link"))
+            return;
+        const svg = isSvg(a);
+        // claims fire at creation while the element is still in the template's
+        // inert fragment, where the `href` property is not resolved — resolve the
+        // raw attribute against the live document instead
+        const href = svg ? a.href.baseVal : a.getAttribute("href");
+        const target = svg ? a.target.baseVal : a.target;
+        if (target || !href)
+            return;
+        const rel = (a.getAttribute("rel") || "").split(/\s+/);
+        if (a.hasAttribute("download") || rel.includes("external"))
+            return;
+        let url;
+        try {
+            url = new URL(href, document.baseURI);
+        }
+        catch {
+            return;
+        }
+        if (url.origin !== window.location.origin ||
+            (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
+            return;
+        return comparablePath(url.pathname);
+    }
+    function linkState(a) {
+        // read reactive sources unconditionally so the owning effect stays
+        // subscribed even while the anchor is not router-managed
+        const loc = decodeURI(comparablePath(router.location.pathname));
+        const routing = router.isRouting();
+        const path = managedPath(a);
+        // the root path is a prefix of everything, so it only matches exactly —
+        // there is no per-anchor `end` opt-out like useLinkState has
+        const matches = (target) => path !== undefined && (target === path || (path !== "" && target.startsWith(path + "/")));
+        // effects observe the committed location during a transition, so the
+        // in-flight target comes from pendingTarget — readable here because the
+        // isRouting write flushes after the target is assigned
+        const pending = routing && !!router.pendingTarget && matches(decodeURI(comparablePath(router.pendingTarget.value)));
+        return { active: matches(loc), pending, exact: path !== undefined && loc === path };
+    }
+    function apply(a, rec, { active, pending, exact }) {
+        active ? a.setAttribute("data-active", "") : a.removeAttribute("data-active");
+        pending ? a.setAttribute("data-pending", "") : a.removeAttribute("data-pending");
+        if (exact !== rec.current) {
+            exact ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current");
+            rec.current = exact;
+        }
+    }
+    const refresh = (a, rec) => untrack(() => apply(a, rec, linkState(a)));
+    // The one subscription for every anchor: compute tracks the sources
+    // linkState derives from (the in-flight pendingTarget is readable in the
+    // effect phase because the isRouting write flushes after the target is
+    // assigned), the effect phase sweeps the registry untracked.
+    //
+    // `transparent` keeps the effect invisible to the hydration id scheme.
+    // This setup is client-only, so an id-consuming node here has no server
+    // counterpart and every subsequent hydration id would shift by one child
+    // slot — lazy-route lookups miss and hydration leaves server nodes
+    // unclaimed. (The option is honored by the runtime but missing from the
+    // published EffectOptions type, hence the cast.)
+    createRenderEffect(() => (router.location.pathname, router.isRouting()), () => registry.forEach(a => refresh(a, claimed.get(a))), { transparent: true });
+    onCleanup(registerElementClaim(node => {
+        if (node.nodeName.toUpperCase() !== "A")
+            return;
+        const a = node;
+        // re-claim (href changed): the claiming write runs inside another
+        // effect, so refresh without leaking subscriptions into it
+        const existing = claimed.get(a);
+        if (existing)
+            return refresh(a, existing);
+        const rec = { current: false };
+        claimed.set(a, rec);
+        // claims fire during component setup, so an owner is present in
+        // practice to bound the registry entry's lifetime; without one, state
+        // is still applied once at creation
+        if (getOwner()) {
+            registry.add(a);
+            onCleanup(() => registry.delete(a));
+        }
+        refresh(a, rec);
+    }));
+}

package/dist/data/action.d.ts

@@ -1,17 +1,46 @@
-import { JSX } from "solid-js";
-import type { Submission, SubmissionStub, NarrowResponse } from "../types.js";
+import { type JSX } from "@solidjs/web";
+import type { RouterContext, Submission, NarrowResponse } from "../types.js";
 export type Action<T extends Array<any>, U, V = T> = (T extends [FormData | URLSearchParams] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;
     with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<NarrowResponse<U>>, ...args: A): Action<B, U, V>;
+    onSubmit(hook: (...args: V extends Array<any> ? V : T) => void): Action<T, U, V>;
+    onSettled(hook: (submission: Submission<V extends Array<any> ? V : T, NarrowResponse<U>>) => void): Action<T, U, V>;
 };
-export declare const actions: Map<string, Action<any, any, any>>;
-export declare function useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>>[] & {
-    pending: boolean;
+type ActionFactory = {
+    <T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;
+    <T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, options?: {
+        name?: string;
+    }): Action<T, U>;
 };
-export declare function useSubmission<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>> | SubmissionStub;
+export declare const actions: Map<string, Action<any, any, any>>;
+/**
+ * The document-delegation submit handler for router actions. Lives here —
+ * not in events.ts — so the router's event wiring holds no static reference
+ * to the action module; `installRouterIntegrations` slots it in when the
+ * first action is created on the client.
+ */
+export declare function handleFormAction(evt: SubmitEvent, router: RouterContext, actionBase: string): void;
+/**
+ * Entry point for delegation's lazy fallback (data/events.ts): when no form
+ * handler was ever installed — no action module in the client graph at all —
+ * the router intercepts posts to server-action urls synchronously and loads
+ * this module to run them. The FormData was captured at submit time; only
+ * the enctype conversion and the generic invocation happen here.
+ */
+export declare function submitServerForm(router: RouterContext, url: string, form: HTMLFormElement, data: FormData): void;
+export declare function useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<V, NarrowResponse<U>>[];
 export declare function useAction<T extends Array<any>, U, V>(action: Action<T, U, V>): (...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>;
-export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;
-export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, options?: {
-    name?: string;
-    onComplete?: (s: Submission<T, U>) => void;
-}): Action<T, U>;
+export declare const action: ActionFactory;
+/**
+ * Registers the router as the single-flight consumer of the server function
+ * transport. Subscribing is the opt-in: while registered, the transport
+ * sends the `X-Single-Flight` request header on mutations and delivers the
+ * folded payload here — fresh route data is seeded into the `query` cache
+ * and the envelope metadata (redirect `Location`, `X-Revalidate` keys) is
+ * applied, all before the action sees its plain return value. Called by the
+ * Router component on the client unless `singleFlight={false}`, which now
+ * simply means "never subscribe" — no consumer, no request header, no
+ * collection work on the server. Returns the unsubscribe function.
+ */
+export declare function setupFlightDataConsumer(router: RouterContext): () => void;
+export {};