@solidjs/router 0.17.0-next.5 → 0.17.0-next.6

package/dist/routers/components.jsx

@@ -1,7 +1,8 @@
 /*@refresh skip*/
 import { children, createMemo, createRoot, getOwner, merge, onCleanup, runWithOwner, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
-import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
+import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, resolveRouteDefinitions, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
+import { setupFlightDataConsumer } from "../data/action.js";
 export const createRouterComponent = (router) => function IntegratedRouter(props) {
     const { base, singleFlight, transformUrl, root, rootPreload, routeChildren } = untrack(() => ({
         base: props.base,
@@ -11,7 +12,7 @@ export const createRouterComponent = (router) => function IntegratedRouter(props
         rootPreload: props.rootPreload,
         routeChildren: props.children
     }));
-    const routeDefs = children(() => routeChildren);
+    const routeDefs = resolveRouteDefinitions(routeChildren);
     const branches = createMemo(() => createBranches(routeDefs(), base || ""));
     let context;
     const routerState = createRouterContext(router, branches, () => context, {
@@ -20,6 +21,12 @@ export const createRouterComponent = (router) => function IntegratedRouter(props
         transformUrl,
     });
     router.create && router.create(routerState);
+    if (!isServer && routerState.singleFlight) {
+        // Registering the consumer IS the single-flight opt-in: the transport
+        // sends the request header while one is subscribed. `singleFlight={false}`
+        // simply never subscribes, so the server is never asked to collect.
+        onCleanup(setupFlightDataConsumer(routerState));
+    }
     return (<RouterContextObj value={routerState}>
       <Root routerState={routerState} root={root} preload={rootPreload}>
         {(context = getOwner()) && null}

package/dist/routing.d.ts

@@ -162,8 +162,17 @@ export declare const useSearchParams: <T extends SearchParams>() => [Partial<T>,
 export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
 export declare function createRoutes(routeDef: RouteDefinition, base?: string): RouteDescription[];
 export declare function createBranch(routes: RouteDescription[], index?: number): Branch;
+/**
+ * Resolves the route tree an app hands the router — JSX `<Route>` children
+ * (`Route` is a data-holder component, evaluating to its merged props),
+ * config objects, arrays, or thunks producing either — into route
+ * definitions. Shared by the `<Router>` component (which keeps the
+ * resolution live) and the server integration's preload runner (one-shot).
+ */
+export declare function resolveRouteDefinitions(routes: JSX.Element | RouteDefinition | RouteDefinition[]): () => RouteDefinition | RouteDefinition[];
 export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
+export declare function mergeParams(matches: RouteMatch[]): Params;
 export declare function getIntent(): Intent | undefined;
 export declare function getInPreloadFn(): boolean;
 export declare function setInPreloadFn(value: boolean): void;

package/dist/routing.js

@@ -1,8 +1,9 @@
 import { flush, runWithOwner } from "solid-js";
-import { createComponent, createContext, createMemo, createSignal, onCleanup, untrack, useContext } from "solid-js";
+import { children, createComponent, createContext, createMemo, createSignal, onCleanup, untrack, useContext } from "solid-js";
 import { isServer, getRequestEvent } from "@solidjs/web";
 import { createBeforeLeave } from "./lifecycle.js";
 import { mockBase, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils.js";
+import { clearFlashCookie, decodeFlashCookie, hasFlashCookie } from "./data/flash.js";
 const MAX_REDIRECTS = 100;
 /** Consider this API opaque and internal. It is likely to change in the future. */
 export const RouterContextObj = createContext();
@@ -283,6 +284,16 @@ export function createBranch(routes, index = 0) {
 function asArray(value) {
     return Array.isArray(value) ? value : [value];
 }
+/**
+ * Resolves the route tree an app hands the router — JSX `<Route>` children
+ * (`Route` is a data-holder component, evaluating to its merged props),
+ * config objects, arrays, or thunks producing either — into route
+ * definitions. Shared by the `<Router>` component (which keeps the
+ * resolution live) and the server integration's preload runner (one-shot).
+ */
+export function resolveRouteDefinitions(routes) {
+    return children(() => routes);
+}
 export function createBranches(routeDef, base = "", stack = [], branches = []) {
     const routeDefs = asArray(routeDef);
     for (let i = 0, len = routeDefs.length; i < len; i++) {
@@ -317,7 +328,7 @@ export function getRouteMatches(branches, location) {
     }
     return [];
 }
-function mergeParams(matches) {
+export function mergeParams(matches) {
     const params = {};
     for (let i = 0; i < matches.length; i++) {
         Object.assign(params, matches[i].params);
@@ -552,13 +563,29 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         intent = prevIntent;
     }
+    // Seeds the initial submission from a no-JS form post: the server
+    // function handler redirected back with the outcome in a one-shot flash
+    // cookie (see src/server.ts's handleNoJS), which is read here — and
+    // cleared — so the post-redirect SSR renders useSubmission() state
+    // exactly as a scripted submission would. An explicitly pre-seeded
+    // `event.router.submission` (framework integrations) takes precedence.
     function initFromFlash() {
         const e = getRequestEvent();
-        if (!(e && e.router && e.router.submission))
+        if (!e)
+            return [];
+        let submission = e.router && e.router.submission;
+        if (!submission) {
+            const cookieHeader = e.request.headers.get("cookie");
+            submission = decodeFlashCookie(cookieHeader);
+            // one-shot: clear it even when unreadable so it can't haunt later renders
+            if (hasFlashCookie(cookieHeader) && e.response && e.response.headers)
+                e.response.headers.append("Set-Cookie", clearFlashCookie());
+        }
+        if (!submission)
             return [];
         return [
             {
-                ...e.router.submission,
+                ...submission,
                 clear() { },
                 retry() { }
             }

package/dist/server.d.ts

@@ -0,0 +1,65 @@
+import type { JSX } from "@solidjs/web";
+import type { CollectFlightDataHook, ServerFunctionOutcome } from "@solidjs/web/server-functions/server";
+import type { RouteDefinition, RoutePreloadFunc } from "./types.js";
+export type { FlashSubmission } from "./data/flash.js";
+export type { CollectFlightDataHook, ServerFunctionOutcome };
+export interface FlightDataCollectorOptions {
+    /**
+     * The app's route tree — the same thing the `<Router>` receives as
+     * children: JSX `<Route>` trees, config objects, arrays, or a thunk
+     * producing either (for lazily/per-request built trees). Normalized to
+     * route definitions the same way the `<Router>` normalizes its children
+     * (on the server `Route` evaluates to its props, so no render pass is
+     * needed). Flight data is produced by the pure preload runner: the target
+     * URL is matched against the tree and the matched routes' `preload`
+     * functions run in data-only mode.
+     */
+    routes: JSX.Element | RouteDefinition | RouteDefinition[] | (() => JSX.Element | RouteDefinition | RouteDefinition[]);
+    /**
+     * The root layout's preload — the same function the app passes to
+     * `<Router rootPreload>`. Runs before the matched routes' preloads with
+     * the semantics the root gets during a real server render: the merged
+     * params of every match and `intent: "initial"`.
+     */
+    rootPreload?: RoutePreloadFunc;
+    /** The app's base path, for resolving redirect `Location`s and matching. */
+    base?: string;
+}
+/**
+ * Produces the `collectFlightData` implementation for
+ * `configureServerFunctionsServer` (or `handleServerFunctionRequest`
+ * options). Strategy: rerun the route data for the URL the client will show
+ * after the mutation — the redirect `Location` when the outcome carries
+ * one, the referring page otherwise — collecting each `query` result under
+ * its cache key, scoped to the outcome's `X-Revalidate` keys when present
+ * (routes newly entered via redirect always collect fully). The returned
+ * payload seeds the client router's cache through its registered
+ * flight-data consumer.
+ */
+export declare function createFlightDataCollector(options: FlightDataCollectorOptions): CollectFlightDataHook;
+/**
+ * The request headers for the flight-data collection pass: the source
+ * request's headers with the mutation's `Set-Cookie` mutations folded into
+ * the `Cookie` header, so preloads observe the post-mutation cookie state
+ * (deletions honored via Max-Age/Expires).
+ */
+export declare function createSingleFlightHeaders(sourceEvent: {
+    request: Request;
+    response?: {
+        headers?: Headers;
+    };
+}): Headers;
+export interface NoJSHandlerOptions {
+    /** The app's base path, for resolving redirect `Location`s. */
+    base?: string;
+}
+/**
+ * Produces the `handleNoJS` implementation for
+ * `handleServerFunctionRequest` options: form posts made without the client
+ * runtime redirect back to the referring page (or to the result's
+ * `Location`) with the outcome riding a one-shot `flash` cookie. The
+ * router's SSR initialization reads the cookie into submission state, so
+ * `useSubmission()` renders the result exactly as a scripted submission
+ * would — progressive enhancement with no app code.
+ */
+export declare function createNoJSHandler(options?: NoJSHandlerOptions): (result: unknown, request: Request, args: unknown[], thrown?: boolean) => Response;

package/dist/server.js

@@ -0,0 +1,228 @@
+// The router's server-side integration with the server function runtime
+// (@solidjs/web/server-functions). Server-only entry (`@solidjs/router/server`):
+// it reaches for node async context via @solidjs/web/storage — keep it out of
+// client bundles.
+//
+// Two policies live here, both previously implemented inside SolidStart and
+// now owned by the router (the vocabulary — query keys, submissions — is the
+// router's):
+//
+// - single-flight mutations: `createFlightDataCollector` produces the
+//   `collectFlightData` hook the app hands to
+//   `configureServerFunctionsServer` (or the handler options). After a
+//   mutation it produces the route data the mutation invalidated for the
+//   page the client is on (or is being redirected to), which the handler
+//   folds into the response — mutation and fresh data in one round trip.
+// - the no-JS form convention: `createNoJSHandler` produces the
+//   `handleNoJS` hook — form posts made without the client runtime redirect
+//   back (303) carrying the outcome in a one-shot flash cookie that the
+//   router's SSR initialization reads into submission state.
+import { provideRequestEvent } from "@solidjs/web/storage";
+import { createBranches, getRouteMatches, mergeParams, resolveRouteDefinitions } from "./routing.js";
+import { extractSearchParams } from "./utils.js";
+import { encodeFlashCookie } from "./data/flash.js";
+/**
+ * Produces the `collectFlightData` implementation for
+ * `configureServerFunctionsServer` (or `handleServerFunctionRequest`
+ * options). Strategy: rerun the route data for the URL the client will show
+ * after the mutation — the redirect `Location` when the outcome carries
+ * one, the referring page otherwise — collecting each `query` result under
+ * its cache key, scoped to the outcome's `X-Revalidate` keys when present
+ * (routes newly entered via redirect always collect fully). The returned
+ * payload seeds the client router's cache through its registered
+ * flight-data consumer.
+ */
+export function createFlightDataCollector(options) {
+    const { routes, rootPreload, base = "" } = options;
+    if (!routes)
+        throw new Error("createFlightDataCollector requires `routes`");
+    let branches;
+    // resolveRouteDefinitions handles every accepted shape — thunks are called
+    // during resolution, JSX <Route> elements evaluate to their definitions
+    const resolveBranches = () => branches ||
+        (branches = createBranches(resolveRouteDefinitions(routes)(), base));
+    return async (sourceEvent, outcome) => {
+        // no referrer, nothing to produce data for (e.g. non-browser callers)
+        const referrer = outcome.request.headers.get("referer");
+        if (!referrer)
+            return undefined;
+        // a raw body-carrying Response is the caller's verbatim payload — there
+        // is no envelope to fold data into
+        if (outcome.value instanceof Response && outcome.value.body)
+            return undefined;
+        const origin = new URL(outcome.request.url).origin;
+        let revalidate;
+        let url = new URL(referrer).toString();
+        if (outcome.response) {
+            if (outcome.response.headers.has("X-Revalidate"))
+                revalidate = outcome.response.headers.get("X-Revalidate").split(",");
+            if (outcome.response.headers.has("Location"))
+                url = new URL(outcome.response.headers.get("Location"), origin + base).toString();
+        }
+        // redirects leaving the app can't be collected for
+        if (new URL(url).origin !== origin)
+            return undefined;
+        // The flight event: the source event (its `response` rides along, so
+        // cookies/headers set during preloads still reach the real response)
+        // pointed at the target URL, with the mutation's own cookie mutations
+        // folded into the request, in data-only router mode.
+        const event = { ...sourceEvent };
+        event.request = new Request(url, { headers: createSingleFlightHeaders(sourceEvent) });
+        event.router = {
+            dataOnly: revalidate || true,
+            previousUrl: referrer,
+            data: {}
+        };
+        return provideRequestEvent(event, async () => {
+            try {
+                runPreloads(event, resolveBranches(), url, referrer, rootPreload);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            const data = event.router.data;
+            if (!data)
+                return undefined;
+            let containsKey = false;
+            for (const key in data) {
+                if (data[key] === undefined)
+                    delete data[key];
+                else
+                    containsKey = true;
+            }
+            return containsKey ? data : undefined;
+        });
+    };
+}
+// The pure preload runner: the same collection loop the router's <Routes>
+// component runs when it detects a data-only render (routers/components.tsx),
+// driven directly off the route tree — matched routes' preloads run and
+// their `query` calls store results on `event.router.data`. Routes not
+// matched by the previous URL flip collection from the revalidation-key
+// filter to everything (their queries have no client cache yet).
+function runPreloads(event, branches, url, previousUrl, rootPreload) {
+    const target = new URL(url);
+    const prevMatches = getRouteMatches(branches, new URL(previousUrl, target).pathname);
+    const matches = getRouteMatches(branches, target.pathname);
+    const location = {
+        pathname: target.pathname,
+        search: target.search,
+        hash: target.hash,
+        query: extractSearchParams(target),
+        state: null,
+        key: ""
+    };
+    // the root layout preloads first, exactly as <Root> would during a real
+    // server render: merged params of every match, intent "initial" (there is
+    // no navigation intent on the server), before any dataOnly-filter flip
+    rootPreload && rootPreload({ params: mergeParams(matches), location, intent: "initial" });
+    for (let match = 0; match < matches.length; match++) {
+        if (!prevMatches[match] || matches[match].route !== prevMatches[match].route)
+            event.router.dataOnly = true;
+        const { route, params } = matches[match];
+        route.preload &&
+            route.preload({
+                params,
+                location,
+                intent: "preload"
+            });
+    }
+}
+/**
+ * The request headers for the flight-data collection pass: the source
+ * request's headers with the mutation's `Set-Cookie` mutations folded into
+ * the `Cookie` header, so preloads observe the post-mutation cookie state
+ * (deletions honored via Max-Age/Expires).
+ */
+export function createSingleFlightHeaders(sourceEvent) {
+    const headers = new Headers(sourceEvent.request.headers);
+    const setCookies = sourceEvent.response?.headers?.getSetCookie() ?? [];
+    if (!setCookies.length)
+        return headers;
+    const cookies = {};
+    for (const pair of headers.get("cookie")?.split(";") ?? []) {
+        const eq = pair.indexOf("=");
+        if (eq > -1)
+            cookies[pair.slice(0, eq).trim()] = pair.slice(eq + 1).trim();
+    }
+    for (const setCookie of setCookies) {
+        const parsed = parseSetCookie(setCookie);
+        if (!parsed)
+            continue;
+        if ((parsed.maxAge != null && parsed.maxAge <= 0) ||
+            (parsed.expires != null && parsed.expires.getTime() <= Date.now())) {
+            delete cookies[parsed.name];
+        }
+        else {
+            cookies[parsed.name] = parsed.value;
+        }
+    }
+    headers.delete("cookie");
+    const serialized = Object.entries(cookies)
+        .map(([name, value]) => `${name}=${value}`)
+        .join("; ");
+    if (serialized)
+        headers.set("cookie", serialized);
+    return headers;
+}
+function parseSetCookie(setCookie) {
+    const [pair, ...attributes] = setCookie.split(";");
+    const eq = pair.indexOf("=");
+    if (eq < 0)
+        return undefined;
+    const parsed = {
+        name: pair.slice(0, eq).trim(),
+        value: pair.slice(eq + 1).trim()
+    };
+    for (const attribute of attributes) {
+        const attrEq = attribute.indexOf("=");
+        const key = (attrEq < 0 ? attribute : attribute.slice(0, attrEq)).trim().toLowerCase();
+        const value = attrEq < 0 ? "" : attribute.slice(attrEq + 1).trim();
+        if (key === "max-age")
+            parsed.maxAge = Number(value);
+        else if (key === "expires")
+            parsed.expires = new Date(value);
+    }
+    return parsed;
+}
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages
+const validRedirectStatuses = new Set([301, 302, 303, 307, 308]);
+/**
+ * Produces the `handleNoJS` implementation for
+ * `handleServerFunctionRequest` options: form posts made without the client
+ * runtime redirect back to the referring page (or to the result's
+ * `Location`) with the outcome riding a one-shot `flash` cookie. The
+ * router's SSR initialization reads the cookie into submission state, so
+ * `useSubmission()` renders the result exactly as a scripted submission
+ * would — progressive enhancement with no app code.
+ */
+export function createNoJSHandler(options = {}) {
+    const { base = "" } = options;
+    return function handleNoJS(result, request, args, thrown) {
+        const url = new URL(request.url);
+        const back = request.headers.get("referer") || url.origin + base;
+        // form post -> GET: 303 See Other unless the result names a redirect status
+        let status = 303;
+        let headers;
+        if (result instanceof Response) {
+            headers = new Headers(result.headers);
+            if (result.headers.has("Location")) {
+                headers.set("Location", new URL(result.headers.get("Location"), url.origin + base).toString());
+                if (validRedirectStatuses.has(result.status))
+                    status = result.status;
+            }
+            else {
+                headers.set("Location", back);
+            }
+        }
+        else {
+            headers = new Headers({ Location: back });
+        }
+        // Responses carry their meaning in their metadata; anything else flashes
+        // the outcome for the next render's submission state.
+        if (result && !(result instanceof Response)) {
+            headers.append("Set-Cookie", encodeFlashCookie(url.pathname + url.search, result, args, thrown));
+        }
+        return new Response(null, { status, headers });
+    };
+}

package/dist/types.d.ts

@@ -12,7 +12,7 @@ declare module "@solidjs/web" {
             cache?: Map<string, CacheEntry>;
             submission?: {
                 input: any;
-                result: any;
+                result?: any;
                 error?: any;
                 url: string;
             };

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.17.0-next.5",
+  "version": "0.17.0-next.6",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -22,14 +22,15 @@
     ".": {
       "solid": "./dist/index.jsx",
       "default": "./dist/index.js"
-    }
+    },
+    "./server": "./dist/server.js"
   },
   "files": [
     "dist"
   ],
   "sideEffects": false,
   "devDependencies": {
-    "@solidjs/web": "2.0.0-beta.19",
+    "@solidjs/web": "2.0.0-beta.21",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.10",
@@ -38,24 +39,25 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
-    "babel-preset-solid": "2.0.0-beta.19",
+    "babel-preset-solid": "2.0.0-beta.21",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "2.0.0-beta.19",
+    "solid-js": "2.0.0-beta.21",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
     "vite-plugin-solid": "3.0.0-next.10",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "@solidjs/web": ">=2.0.0-beta.19 <2.0.0-experimental.0",
-    "solid-js": ">=2.0.0-beta.19 <2.0.0-experimental.0"
+    "@solidjs/web": ">=2.0.0-beta.21 <2.0.0-experimental.0",
+    "solid-js": ">=2.0.0-beta.21 <2.0.0-experimental.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",
-    "test": "vitest run && npm run test:types",
+    "test": "vitest run && vitest run --config vitest.config.server.ts && npm run test:types",
     "test:watch": "vitest",
+    "test:server": "vitest run --config vitest.config.server.ts",
     "test:types": "tsc --project tsconfig.test.json",
     "pretty": "prettier --write \"{src,test}/**/*.{ts,tsx}\"",
     "release": "pnpm build && changeset publish"