@solidjs/router 1.0.0-next.8 → 1.0.0

package/dist/components.d.ts

@@ -0,0 +1,31 @@
+import type { JSX } from "solid-js";
+import type { Location, Navigator } from "./types.js";
+declare module "solid-js" {
+    namespace JSX {
+        interface AnchorHTMLAttributes<T> {
+            state?: string;
+            noScroll?: boolean;
+            replace?: boolean;
+            preload?: boolean;
+            link?: boolean;
+        }
+    }
+}
+export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
+    href: string;
+    replace?: boolean | undefined;
+    noScroll?: boolean | undefined;
+    state?: unknown | undefined;
+    inactiveClass?: string | undefined;
+    activeClass?: string | undefined;
+    end?: boolean | undefined;
+}
+export declare function A(props: AnchorProps): JSX.Element;
+export interface NavigateProps {
+    href: ((args: {
+        navigate: Navigator;
+        location: Location;
+    }) => string) | string;
+    state?: unknown;
+}
+export declare function Navigate(props: NavigateProps): null;

package/dist/components.jsx

@@ -0,0 +1,40 @@
+import { createMemo, mergeProps, splitProps } from "solid-js";
+import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing.js";
+import { normalizePath } from "./utils.js";
+export function A(props) {
+    props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
+    const [, rest] = splitProps(props, [
+        "href",
+        "state",
+        "class",
+        "activeClass",
+        "inactiveClass",
+        "end"
+    ]);
+    const to = useResolvedPath(() => props.href);
+    const href = useHref(to);
+    const location = useLocation();
+    const isActive = createMemo(() => {
+        const to_ = to();
+        if (to_ === undefined)
+            return [false, false];
+        // trailing slashes are ignored so `/route` and `/route/` share active state
+        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+        const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
+        return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
+    });
+    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
+            ...(props.class && { [props.class]: true }),
+            [props.inactiveClass]: !isActive()[0],
+            [props.activeClass]: isActive()[0],
+            ...rest.classList
+        }} link aria-current={isActive()[1] ? "page" : undefined}/>);
+}
+export function Navigate(props) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { href, state } = props;
+    const path = typeof href === "function" ? href({ navigate, location }) : href;
+    navigate(path, { replace: true, state });
+    return null;
+}

package/dist/data/action.d.ts

@@ -1,46 +1,17 @@
-import { type JSX } from "@solidjs/web";
-import type { RouterContext, Submission, NarrowResponse } from "../types.js";
+import { JSX } from "solid-js";
+import type { Submission, SubmissionStub, 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>;
-};
-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 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 useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>>[] & {
+    pending: boolean;
+};
+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 function useAction<T extends Array<any>, U, V>(action: Action<T, U, V>): (...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<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 {};
+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>;

package/dist/data/action.js

@@ -1,119 +1,9 @@
-import { $TRACK, action as createSolidAction, createMemo, onCleanup, getOwner } from "solid-js";
-import { isResponseEnvelope, isServer } from "@solidjs/web";
-import { createServerReference, decodeResponse, subscribeFlightData } from "@solidjs/web/server-functions";
-import { provideFlashDecoder, provideFlightConsumer, useRouter } from "../routing.js";
-import { setRouterFormHandler } from "./events.js";
-import { decodeFlashCookie } from "./flash.js";
+import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js";
+import { isServer } from "solid-js/web";
+import { useRouter } from "../routing.js";
 import { mockBase, setFunctionName } from "../utils.js";
 import { cacheKeyOp, hashKey, revalidate, query } from "./query.js";
-const submitHooksSymbol = Symbol("routerActionSubmitHooks");
-const settledHooksSymbol = Symbol("routerActionSettledHooks");
-const invokeSymbol = Symbol("routerActionInvoke");
-// Forms submitted through delegation are marked `aria-busy` while their
-// action is in flight — the form half of the attribute vocabulary links get
-// (`data-active`/`data-pending`). Style with `form[aria-busy] button { ... }`.
-// A counter (not a boolean) keeps the attribute through overlapping
-// submissions from the same form.
-const busyForms = /* #__PURE__ */ new WeakMap();
-function setFormBusy(form, delta) {
-    const count = (busyForms.get(form) || 0) + delta;
-    busyForms.set(form, count);
-    count > 0 ? form.setAttribute("aria-busy", "true") : form.removeAttribute("aria-busy");
-}
 export const actions = /* #__PURE__ */ new Map();
-/**
- * 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 function handleFormAction(evt, router, actionBase) {
-    if (evt.defaultPrevented)
-        return;
-    let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
-        ? evt.submitter.getAttribute("formaction")
-        : evt.target.getAttribute("action");
-    if (!actionRef)
-        return;
-    const serverAction = !actionRef.startsWith("https://action/");
-    if (serverAction) {
-        // normalize server actions
-        const url = new URL(actionRef, mockBase);
-        actionRef = router.parsePath(url.pathname + url.search);
-        if (!actionRef.startsWith(actionBase))
-            return;
-    }
-    if (evt.target.method.toUpperCase() !== "POST")
-        throw new Error("Only POST forms are supported for Actions");
-    // A registry miss on a server-action url is a direct bind whose module
-    // never loaded client-side (server components): the url is self-describing
-    // (`?id`, bound `?args`), so a generic invocation is synthesized from it —
-    // delegation alone is sufficient, the no-JS path stays a no-JS fallback.
-    // Client-only actions (`https://action/`) are their module's JS by
-    // definition, so a miss there falls through to native submission.
-    const handler = actions.get(actionRef) || (serverAction && createServerFormAction(actionRef));
-    if (handler) {
-        evt.preventDefault();
-        const data = new FormData(evt.target, evt.submitter);
-        handler.call({ r: router, f: evt.target }, evt.target.enctype === "multipart/form-data"
-            ? data
-            : new URLSearchParams(data));
-    }
-}
-/**
- * Synthesizes a router action for a server-rendered action url. The url
- * carries everything an invocation needs — the function id and any bound
- * `.with()` arguments (plain JSON in `?args`, which the server prepends for
- * natural-encoding bodies exactly as it does for no-JS posts) — so the
- * FormData is posted to it verbatim through the server-function transport:
- * submissions, `aria-busy`, redirects, revalidation, and single-flight all
- * flow through the normal action machinery. Registered under the url, so
- * repeat submits reuse it (and a later real registration overrides it).
- */
-function createServerFormAction(url) {
-    const id = new URL(url, mockBase).searchParams.get("id");
-    if (!id)
-        return undefined;
-    // typecheck resolves the server half of the dual module; this path only
-    // runs in the browser, where the client transport's signature applies
-    const stub = createServerReference(id, undefined, url);
-    const caller = Object.assign((form) => stub(form), { url });
-    return actionImpl(caller);
-}
-/**
- * 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 function submitServerForm(router, url, form, data) {
-    const handler = actions.get(url) || createServerFormAction(url);
-    // no `?id` — not the server function convention; nothing can run it,
-    // resubmit natively (submit() bypasses the delegated handler)
-    if (!handler)
-        return form.submit();
-    handler.call({ r: router, f: form }, form.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
-}
-// Wires the action layer into the router's slots exactly once, triggered by
-// the first action creation. Not an import side effect — with
-// `sideEffects: false`, module evaluation only happens when action() is
-// actually used, which is precisely when the wiring is wanted: no action in
-// the graph means no form interception, no single-flight subscription (the
-// server is never asked to collect), and no flash cookies to decode. On the
-// server, actions are created at module scope, so the flash decoder is
-// always installed before useSubmission can read the submissions signal.
-let integrationsInstalled = false;
-function installRouterIntegrations() {
-    if (integrationsInstalled)
-        return;
-    integrationsInstalled = true;
-    provideFlashDecoder(decodeFlashCookie);
-    if (!isServer) {
-        setRouterFormHandler(handleFormAction);
-        provideFlightConsumer(setupFlightDataConsumer);
-    }
-}
 export function useSubmissions(fn, filter) {
     const router = useRouter();
     const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.base && (!filter || filter(s.input))));
@@ -121,6 +11,8 @@ export function useSubmissions(fn, filter) {
         get(_, property) {
             if (property === $TRACK)
                 return subs();
+            if (property === "pending")
+                return subs().some(sub => !sub.result);
             return subs()[property];
         },
         has(_, property) {
@@ -128,169 +20,130 @@ export function useSubmissions(fn, filter) {
         }
     });
 }
+export function useSubmission(fn, filter) {
+    const submissions = useSubmissions(fn, filter);
+    return new Proxy({}, {
+        get(_, property) {
+            if (submissions.length === 0 && (property === "clear" || property === "retry"))
+                return () => { };
+            return submissions[submissions.length - 1]?.[property];
+        }
+    });
+}
 export function useAction(action) {
     const r = useRouter();
     return (...args) => action.apply({ r }, args);
 }
-function actionImpl(fn, options = {}) {
-    async function invoke(variables, current) {
+export function action(fn, options = {}) {
+    function mutate(...variables) {
         const router = this.r;
         const form = this.f;
-        const submitHooks = current[submitHooksSymbol];
-        const settledHooks = current[settledHooksSymbol];
-        // Single-flight opt-in is no longer per call: the router's registered
-        // flight-data consumer (see setupFlightDataConsumer) makes the transport
-        // send the request header itself, so the mutation is just called.
-        const runMutation = () => fn(...variables);
-        const run = createSolidAction(async function* (context) {
-            context.optimistic?.();
-            try {
-                const value = await context.call();
-                yield;
-                return { error: false, value };
-            }
-            catch (error) {
-                yield;
-                return { error: true, value: error };
-            }
-        });
-        form && setFormBusy(form, 1);
-        let settled;
-        let response;
-        try {
-            settled = await settleActionResult(run({
-                call: runMutation,
-                optimistic: submitHooks.size
-                    ? () => {
-                        for (const hook of submitHooks.values())
-                            hook(...variables);
+        const p = (router.singleFlight && fn.withOptions
+            ? fn.withOptions({ headers: { "X-Single-Flight": "true" } })
+            : fn)(...variables);
+        const [result, setResult] = createSignal();
+        let submission;
+        function handler(error) {
+            return async (res) => {
+                const result = await handleResponse(res, error, router.navigatorFactory());
+                let retry = null;
+                o.onComplete?.({
+                    ...submission,
+                    result: result?.data,
+                    error: result?.error,
+                    pending: false,
+                    retry() {
+                        return (retry = submission.retry());
                     }
-                    : undefined
-            }));
-            response = await handleResponse(settled.value, settled.error, router.navigatorFactory());
+                });
+                if (retry)
+                    return retry;
+                if (!result)
+                    return submission.clear();
+                setResult(result);
+                if (result.error && !form)
+                    throw result.error;
+                return result.data;
+            };
         }
-        finally {
-            form && setFormBusy(form, -1);
-        }
-        if (!response)
-            return undefined;
-        let submission;
-        submission = {
-            input: variables,
-            url,
-            result: response.data,
-            error: response.error,
-            clear() {
-                router.submissions[1](entries => entries.filter(entry => entry !== submission));
-            },
-            retry() {
-                submission.clear();
-                return current[invokeSymbol].call({ r: router, f: form }, variables, current);
-            }
-        };
-        router.submissions[1](entries => [...entries, submission]);
-        for (const hook of settledHooks.values())
-            hook(submission);
-        if (response.error && !form)
-            throw response.error;
-        return response.data;
+        router.submissions[1](s => [
+            ...s,
+            (submission = {
+                input: variables,
+                url,
+                get result() {
+                    return result()?.data;
+                },
+                get error() {
+                    return result()?.error;
+                },
+                get pending() {
+                    return !result();
+                },
+                clear() {
+                    router.submissions[1](v => v.filter(i => i !== submission));
+                },
+                retry() {
+                    setResult(undefined);
+                    const p = fn(...variables);
+                    return p.then(handler(), handler(true));
+                }
+            })
+        ]);
+        return p.then(handler(), handler(true));
     }
     const o = typeof options === "string" ? { name: options } : options;
     const name = o.name || (!isServer ? String(hashString(fn.toString())) : undefined);
     const url = fn.url || (name && `https://action/${name}`) || "";
-    const wrapped = toAction(invoke, url);
+    mutate.base = url;
     if (name)
-        setFunctionName(wrapped, name);
-    return wrapped;
+        setFunctionName(mutate, name);
+    return toAction(mutate, url);
 }
-export const action = actionImpl;
-function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map(), settledHooks = new Map()) {
-    const fn = function (...args) {
-        return invoke.call(this, [...boundArgs, ...args], fn);
-    };
+function toAction(fn, url) {
     fn.toString = () => {
         if (!url)
             throw new Error("Client Actions need explicit names if server rendered");
         return url;
     };
     fn.with = function (...args) {
+        const newFn = function (...passedArgs) {
+            return fn.call(this, ...args, ...passedArgs);
+        };
+        newFn.base = fn.base;
         const uri = new URL(url, mockBase);
         uri.searchParams.set("args", hashKey(args));
-        const next = toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
-        return next;
-    };
-    fn.onSubmit = function (hook) {
-        const id = Symbol("actionOnSubmitHook");
-        submitHooks.set(id, hook);
-        getOwner() && onCleanup(() => submitHooks.delete(id));
-        return this;
-    };
-    fn.onSettled = function (hook) {
-        const id = Symbol("actionOnSettledHook");
-        settledHooks.set(id, hook);
-        getOwner() && onCleanup(() => settledHooks.delete(id));
-        return this;
+        return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
     };
     fn.url = url;
-    fn.base = base;
-    fn[submitHooksSymbol] = submitHooks;
-    fn[settledHooksSymbol] = settledHooks;
-    fn[invokeSymbol] = invoke;
-    installRouterIntegrations();
     if (!isServer) {
         actions.set(url, fn);
         // Only remove the registration if it still belongs to this instance —
         // a re-created action (e.g. a new `.with()` binding after revalidation)
         // may have registered itself under the same URL since.
-        getOwner() &&
-            onCleanup(() => actions.get(url) === fn && actions.delete(url));
+        getOwner() && onCleanup(() => actions.get(url) === fn && actions.delete(url));
     }
     return fn;
 }
 const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
-async function settleActionResult(result) {
-    const value = result;
-    if (value && typeof value.then === "function") {
-        return result.then(value => value);
-    }
-    if (value && typeof value.next === "function") {
-        const iterator = value;
-        let next = await iterator.next();
-        while (!next.done) {
-            next = await iterator.next();
-        }
-        return next.value;
-    }
-    return result;
-}
-/**
- * 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 function setupFlightDataConsumer(router) {
-    return subscribeFlightData((data, { response }) => applyResponseMetadata(response, router.navigatorFactory(), data));
-}
-/**
- * Applies a server function response's integration metadata: `X-Revalidate`
- * keys invalidate, `Location` navigates (hard for absolute urls), flight
- * data seeds the query cache, and matching entries revalidate. Shared by
- * the flight-data consumer and the action response path (which still sees
- * metadata-bearing responses when no flight data was collected).
- */
-async function applyResponseMetadata(metadata, navigate, flightData) {
+async function handleResponse(response, error, navigate) {
+    let data;
+    let custom;
     let keys;
-    if (metadata) {
-        if (metadata.headers.has("X-Revalidate"))
-            keys = metadata.headers.get("X-Revalidate").split(",");
-        if (metadata.headers.has("Location")) {
-            const locationUrl = metadata.headers.get("Location") || "/";
+    let flightKeys;
+    if (response instanceof Response) {
+        if (response.headers.has("X-Revalidate"))
+            keys = response.headers.get("X-Revalidate").split(",");
+        if (response.customBody) {
+            data = custom = await response.customBody();
+            if (response.headers.has("X-Single-Flight")) {
+                data = data._$value;
+                delete custom._$value;
+                flightKeys = Object.keys(custom);
+            }
+        }
+        if (response.headers.has("Location")) {
+            const locationUrl = response.headers.get("Location") || "/";
             if (locationUrl.startsWith("http")) {
                 window.location.href = locationUrl;
             }
@@ -299,42 +152,15 @@ async function applyResponseMetadata(metadata, navigate, flightData) {
             }
         }
     }
+    else if (error)
+        return { error: response };
+    else
+        data = response;
     // invalidate
     cacheKeyOp(keys, entry => (entry[0] = 0));
     // set cache
-    flightData && Object.keys(flightData).forEach(k => query.set(k, flightData[k]));
+    flightKeys && flightKeys.forEach(k => query.set(k, custom[k]));
     // trigger revalidation
     await revalidate(keys, false);
-}
-async function handleResponse(response, error, navigate) {
-    let data;
-    let flightData;
-    let metadata;
-    if (isResponseEnvelope(response)) {
-        // client-only respond(): the value rides in memory beside the metadata
-        data = response.value;
-        metadata = response.response;
-    }
-    else if (response instanceof Response) {
-        metadata = response;
-        // responses the transport hands over whole (redirects, revalidation)
-        // carry a codec-encoded body the router decodes itself. With the
-        // flight-data consumer registered single-flight payloads never reach
-        // this path, but a manually opted-in call (no consumer) still can —
-        // unwrap the standardized { value, data } shape for it too.
-        if (response.body) {
-            data = await decodeResponse(response);
-            if (response.headers.has("X-Single-Flight")) {
-                const payload = data;
-                data = payload.value;
-                flightData = payload.data;
-            }
-        }
-    }
-    else if (error)
-        return { error: response };
-    else
-        data = response;
-    await applyResponseMetadata(metadata, navigate, flightData);
     return data != null ? { data } : undefined;
 }

package/dist/data/createAsync.d.ts

@@ -0,0 +1,32 @@
+import { type ReconcileOptions } from "solid-js/store";
+/**
+ * As `createAsync` and `createAsyncStore` are wrappers for `createResource`,
+ * this type allows to support `latest` field for these primitives.
+ * It will be removed in the future.
+ */
+export type AccessorWithLatest<T> = {
+    (): T;
+    latest: T;
+};
+export declare function createAsync<T>(fn: (prev: T) => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+}): AccessorWithLatest<T>;
+export declare function createAsync<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+}): AccessorWithLatest<T | undefined>;
+export declare function createAsyncStore<T>(fn: (prev: T) => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): AccessorWithLatest<T>;
+export declare function createAsyncStore<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): AccessorWithLatest<T | undefined>;