@solidjs/router 1.0.0-next.8 → 1.0.0

package/dist/data/createAsync.js

@@ -0,0 +1,96 @@
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+import { createResource, sharedConfig, untrack, catchError } from "solid-js";
+import { createStore, reconcile, unwrap } from "solid-js/store";
+import { isServer } from "solid-js/web";
+import { setFunctionName } from "../utils.js";
+export function createAsync(fn, options) {
+    let resource;
+    let prev = () => !resource || resource.state === "unresolved" ? undefined : resource.latest;
+    [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, options);
+    const resultAccessor = (() => resource());
+    if (options?.name)
+        setFunctionName(resultAccessor, options.name);
+    Object.defineProperty(resultAccessor, "latest", {
+        get() {
+            return resource.latest;
+        }
+    });
+    return resultAccessor;
+}
+export function createAsyncStore(fn, options = {}) {
+    let resource;
+    let prev = () => !resource || resource.state === "unresolved"
+        ? undefined
+        : unwrap(resource.latest);
+    [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, {
+        ...options,
+        storage: (init) => createDeepSignal(init, options.reconcile)
+    });
+    const resultAccessor = (() => resource());
+    Object.defineProperty(resultAccessor, "latest", {
+        get() {
+            return resource.latest;
+        }
+    });
+    return resultAccessor;
+}
+function createDeepSignal(value, options) {
+    const [store, setStore] = createStore({
+        value: structuredClone(value)
+    });
+    return [
+        () => store.value,
+        (v) => {
+            typeof v === "function" && (v = v());
+            setStore("value", reconcile(structuredClone(v), options));
+            return store.value;
+        }
+    ];
+}
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+    static all() {
+        return new MockPromise();
+    }
+    static allSettled() {
+        return new MockPromise();
+    }
+    static any() {
+        return new MockPromise();
+    }
+    static race() {
+        return new MockPromise();
+    }
+    static reject() {
+        return new MockPromise();
+    }
+    static resolve() {
+        return new MockPromise();
+    }
+    catch() {
+        return new MockPromise();
+    }
+    then() {
+        return new MockPromise();
+    }
+    finally() {
+        return new MockPromise();
+    }
+}
+function subFetch(fn, prev) {
+    if (isServer || !sharedConfig.context)
+        return fn(prev);
+    const ogFetch = fetch;
+    const ogPromise = Promise;
+    try {
+        window.fetch = () => new MockPromise();
+        Promise = MockPromise;
+        return fn(prev);
+    }
+    finally {
+        window.fetch = ogFetch;
+        Promise = ogPromise;
+    }
+}

package/dist/data/events.d.ts

@@ -1,12 +1,4 @@
 import type { RouterContext } from "../types.js";
-/**
- * The submit delegation consults this slot instead of importing the action
- * module: the action side installs its handler on first action creation
- * (see data/action.ts), so an app that never creates an action never pulls
- * the data layer into its bundle through the router's event wiring.
- */
-export type RouterFormHandler = (evt: SubmitEvent, router: RouterContext, actionBase: string) => void;
-export declare function setRouterFormHandler(handler: RouterFormHandler | undefined): void;
 type NativeEventConfig = {
     preload?: boolean;
     explicitLinks?: boolean;

package/dist/data/events.js

@@ -1,9 +1,7 @@
-import { delegateEvents } from "@solidjs/web";
+import { delegateEvents } from "solid-js/web";
 import { onCleanup } from "solid-js";
-let formHandler;
-export function setRouterFormHandler(handler) {
-    formHandler = handler;
-}
+import { actions } from "./action.js";
+import { mockBase } from "../utils.js";
 export function setupNativeEvents({ preload = true, explicitLinks = false, actionBase = "/_server", transformUrl } = {}) {
     return (router) => {
         const basePath = router.base.path();
@@ -78,29 +76,30 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
             }, 20);
         }
         function handleFormSubmit(evt) {
-            if (formHandler)
-                return formHandler(evt, router, actionBase);
-            // No form handler means no action module in the client graph at all
-            // (e.g. server components binding forms straight to server functions).
-            // A POST to a url under actionBase is self-describing, so delegation
-            // is still sufficient: intercept synchronously — the no-JS treatment
-            // is reserved for clients with no JS — capture the FormData, and load
-            // the handler lazily. Apps that never submit one never load it.
             if (evt.defaultPrevented)
                 return;
-            const form = evt.target;
-            const ref = evt.submitter && evt.submitter.hasAttribute("formaction")
+            let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
                 ? evt.submitter.getAttribute("formaction")
-                : form.getAttribute("action");
-            if (!ref || ref.startsWith("https://action/"))
-                return;
-            const url = new URL(ref, document.baseURI);
-            const path = router.parsePath(url.pathname + url.search);
-            if (!path.startsWith(actionBase) || form.method.toUpperCase() !== "POST")
+                : evt.target.getAttribute("action");
+            if (!actionRef)
                 return;
-            evt.preventDefault();
-            const data = new FormData(form, evt.submitter);
-            import("./serverForms.js").then(m => m.submitServerForm(router, path, form, data));
+            if (!actionRef.startsWith("https://action/")) {
+                // 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");
+            const handler = actions.get(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));
+            }
         }
         // ensure delegated event run first
         delegateEvents(["click", "submit"]);

package/dist/data/index.d.ts

@@ -1,2 +1,4 @@
-export { action, useSubmissions, useAction, type Action } from "./action.js";
-export { query, revalidate, type CachedFunction } from "./query.js";
+export { createAsync, createAsyncStore, type AccessorWithLatest } from "./createAsync.js";
+export { action, useSubmission, useSubmissions, useAction, type Action } from "./action.js";
+export { query, revalidate, cache, type CachedFunction } from "./query.js";
+export { redirect, reload, json } from "./response.js";

package/dist/data/index.js

@@ -1,2 +1,4 @@
-export { action, useSubmissions, useAction } from "./action.js";
-export { query, revalidate } from "./query.js";
+export { createAsync, createAsyncStore } from "./createAsync.js";
+export { action, useSubmission, useSubmissions, useAction } from "./action.js";
+export { query, revalidate, cache } from "./query.js";
+export { redirect, reload, json } from "./response.js";

package/dist/data/query.d.ts

@@ -2,7 +2,7 @@ import type { CacheEntry, NarrowResponse } from "../types.js";
 /**
  * Revalidates the given cache entry/entries.
  */
-export declare function revalidate(key?: string | string[] | void, force?: boolean): void;
+export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
 export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
 export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends {
     [K in keyof A]-?: A[K];
@@ -18,4 +18,6 @@ export declare namespace query {
     export var clear: () => void;
     export { _a as delete };
 }
+/** @deprecated use query instead */
+export declare const cache: typeof query;
 export declare function hashKey<T extends Array<any>>(args: T): string;

package/dist/data/query.js

@@ -1,6 +1,5 @@
-import { createSignal, getObserver, getOwner, onCleanup, sharedConfig } from "solid-js";
-import { getRequestEvent, isResponseEnvelope, isServer } from "@solidjs/web";
-import { GET, decodeResponse, getServerFunctionMetadata, isServerFunction } from "@solidjs/web/server-functions";
+import { createSignal, getListener, getOwner, onCleanup, sharedConfig, startTransition } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
 import { useNavigate, getIntent, getInPreloadFn } from "../routing.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
@@ -30,9 +29,11 @@ function getCache() {
  */
 export function revalidate(key, force = true) {
     const now = Date.now();
-    cacheKeyOp(key, entry => {
-        force && (entry[0] = 0); //force cache miss
-        entry[4][1](now); // retrigger live signals
+    // force the cache miss synchronously so a `refetch` in the same tick sees it —
+    // startTransition defers its callback to a microtask (#497)
+    force && cacheKeyOp(key, entry => (entry[0] = 0));
+    return startTransition(() => {
+        cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
     });
 }
 export function cacheKeyOp(key, fn) {
@@ -43,16 +44,9 @@ export function cacheKeyOp(key, fn) {
     }
 }
 export function query(fn, name) {
-    // query implies GET: the router primitive is the declaration site, so a
-    // server function handed to query() is wrapped with core `GET(fn)` here,
-    // at query-creation (module scope) — the server half records the method
-    // declaration for dispatch, the client half swaps in the GET transport.
-    // An explicit `GET(fn)` already carries the declaration on the metadata
-    // channel (`getServerFunctionMetadata(fn)?.method === "GET"`) and passes
-    // through; non-server functions are untouched.
-    if (isServerFunction(fn) && !getServerFunctionMetadata(fn)?.method) {
-        fn = GET(fn);
-    }
+    // prioritize GET for server functions
+    if (fn.GET)
+        fn = fn.GET;
     const cachedFn = ((...args) => {
         const cache = getCache();
         const intent = getIntent();
@@ -78,7 +72,7 @@ export function query(fn, name) {
                 }
             }
         }
-        if (getObserver() && !isServer) {
+        if (getListener() && !isServer) {
             tracking = true;
             onCleanup(() => cached[4].count--);
         }
@@ -101,7 +95,7 @@ export function query(fn, name) {
                     "then" in cached[1]
                         ? cached[1].then(handleResponse(false), handleResponse(true))
                         : handleResponse(false)(cached[1]);
-                !isServer && intent === "navigate" && cached[4][1](cached[0]); // update version
+                !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
             }
             inPreloadFn && "then" in res && res.catch(() => { });
             return res;
@@ -118,10 +112,10 @@ export function query(fn, name) {
             cached[0] = now;
             cached[1] = res;
             cached[3] = intent;
-            !isServer && intent === "navigate" && cached[4][1](cached[0]); // update version
+            !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
         }
         else {
-            cache.set(key, (cached = [now, res, , intent, createSignal(now, { ownedWrite: true })]));
+            cache.set(key, (cached = [now, res, , intent, createSignal(now)]));
             cached[4].count = 0;
         }
         if (tracking) {
@@ -151,14 +145,6 @@ export function query(fn, name) {
         return res;
         function handleResponse(error) {
             return async (v) => {
-                let enveloped;
-                let hasEnveloped = false;
-                if (isResponseEnvelope(v)) {
-                    // respond(): the value rides in memory beside the metadata
-                    enveloped = v.value;
-                    hasEnveloped = true;
-                    v = v.response;
-                }
                 if (v instanceof Response) {
                     const e = getRequestEvent();
                     if (e) {
@@ -173,22 +159,17 @@ export function query(fn, name) {
                     if (url !== null) {
                         // client + server relative redirect
                         if (navigate && url.startsWith("/"))
-                            navigate(url, { replace: true });
+                            startTransition(() => {
+                                navigate(url, { replace: true });
+                            });
                         else if (!isServer)
                             window.location.href = url;
                         else if (e)
                             e.response.status = 302;
                         return;
                     }
-                    if (hasEnveloped)
-                        v = enveloped;
-                    else if (v.body) {
-                        // responses the transport hands over whole (revalidation) carry a
-                        // codec-encoded body; anything else (a raw user Response) stays whole
-                        const decoded = await decodeResponse(v);
-                        if (decoded !== undefined)
-                            v = decoded;
-                    }
+                    if (v.customBody)
+                        v = await v.customBody();
                 }
                 if (error)
                     throw v;
@@ -216,12 +197,14 @@ query.set = (key, value) => {
         cached[3] = "preload";
     }
     else {
-        cache.set(key, (cached = [now, Promise.resolve(value), value, "preload", createSignal(now, { ownedWrite: true })]));
+        cache.set(key, (cached = [now, Promise.resolve(value), value, "preload", createSignal(now)]));
         cached[4].count = 0;
     }
 };
 query.delete = (key) => getCache().delete(key);
 query.clear = () => getCache().clear();
+/** @deprecated use query instead */
+export const cache = query;
 function matchKey(key, keys) {
     for (let k of keys) {
         if (k && key.startsWith(k))

package/dist/data/response.d.ts

@@ -0,0 +1,4 @@
+import type { RouterResponseInit, CustomResponse } from "../types.js";
+export declare function redirect(url: string, init?: number | RouterResponseInit): CustomResponse<never>;
+export declare function reload(init?: RouterResponseInit): CustomResponse<never>;
+export declare function json<T>(data: T, init?: RouterResponseInit): CustomResponse<T>;

package/dist/data/response.js

@@ -0,0 +1,42 @@
+export function redirect(url, init = 302) {
+    let responseInit;
+    let revalidate;
+    if (typeof init === "number") {
+        responseInit = { status: init };
+    }
+    else {
+        ({ revalidate, ...responseInit } = init);
+        if (typeof responseInit.status === "undefined") {
+            responseInit.status = 302;
+        }
+    }
+    const headers = new Headers(responseInit.headers);
+    headers.set("Location", url);
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+    const response = new Response(null, {
+        ...responseInit,
+        headers: headers
+    });
+    return response;
+}
+export function reload(init = {}) {
+    const { revalidate, ...responseInit } = init;
+    const headers = new Headers(responseInit.headers);
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+    return new Response(null, {
+        ...responseInit,
+        headers
+    });
+}
+export function json(data, init = {}) {
+    const { revalidate, ...responseInit } = init;
+    const headers = new Headers(responseInit.headers);
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+    headers.set("Content-Type", "application/json");
+    const response = new Response(JSON.stringify(data), {
+        ...responseInit,
+        headers
+    });
+    response.customBody = () => data;
+    return response;
+}

package/dist/index.d.ts

@@ -1,9 +1,7 @@
 export * from "./routers/index.js";
+export * from "./components.jsx";
 export * from "./lifecycle.js";
-export { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, usePreloadRoute, useParams, useResolvedPath, useRouteMatches, useSearchParams, RouterContextObj as RouterContext } from "./routing.js";
-export type { LinkState } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, usePreloadRoute, RouterContextObj as RouterContext } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
-export { int } from "./paths.js";
-export type { RoutePaths, PathParamsOf, PathEnd, TypedMatchFilter } from "./paths.js";
 export * from "./data/index.js";
-export type { Location, LocationChange, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, Submission, BeforeLeaveEventArgs, TypedPath, TypedSearchPath, StandardSchemaV1 } from "./types.js";
+export type { Location, LocationChange, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, Submission, BeforeLeaveEventArgs, RouteLoadFunc, RouteLoadFuncArgs, RouterResponseInit, CustomResponse } from "./types.js";