@solidjs/router 0.11.3 → 0.11.4

package/dist/data/action.js

@@ -1,8 +1,8 @@
 import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js";
 import { isServer } from "solid-js/web";
 import { useRouter } from "../routing.js";
-import { redirectStatusCodes, mockBase } from "../utils.js";
-import { cacheKeyOp, hashKey, revalidate } from "./cache.js";
+import { mockBase } from "../utils.js";
+import { cacheKeyOp, hashKey, revalidate, cache } from "./cache.js";
 export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
@@ -31,10 +31,12 @@ export function useAction(action) {
 }
 export function action(fn, name) {
     function mutate(...variables) {
-        const p = fn(...variables);
+        const router = this;
+        const p = (router.singleFlight && fn.withOptions
+            ? fn.withOptions({ headers: { "X-Single-Flight": "true" } })
+            : fn)(...variables);
         const [result, setResult] = createSignal();
         let submission;
-        const router = this;
         async function handler(res) {
             const data = await handleResponse(res, router.navigatorFactory());
             data ? setResult({ data }) : submission.clear();
@@ -95,12 +97,25 @@ const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCod
 async function handleResponse(response, navigate) {
     let data;
     let keys;
+    let invalidateKeys;
     if (response instanceof Response) {
         if (response.headers.has("X-Revalidate"))
-            keys = response.headers.get("X-Revalidate").split(",");
-        if (response.customBody)
+            keys = invalidateKeys = response.headers.get("X-Revalidate").split(",");
+        if (response.customBody) {
             data = await response.customBody();
-        if (redirectStatusCodes.has(response.status)) {
+            if (response.headers.has("X-Single-Flight")) {
+                keys || (keys = []);
+                invalidateKeys || (invalidateKeys = []);
+                Object.keys(data).forEach(key => {
+                    if (key === "_$value")
+                        return;
+                    keys.push(key);
+                    cache.set(key, data[key]);
+                });
+                data = data._$value;
+            }
+        }
+        if (response.headers.has("Location")) {
             const locationUrl = response.headers.get("Location") || "/";
             if (locationUrl.startsWith("http")) {
                 window.location.href = locationUrl;
@@ -113,7 +128,7 @@ async function handleResponse(response, navigate) {
     else
         data = response;
     // invalidate
-    cacheKeyOp(keys, entry => (entry[0] = 0));
+    cacheKeyOp(invalidateKeys, entry => (entry[0] = 0));
     // trigger revalidation
     await revalidate(keys, false);
     return data;

package/dist/data/cache.js

@@ -2,7 +2,6 @@ import { createSignal, getListener, getOwner, onCleanup, sharedConfig, startTran
 import { createStore, reconcile } from "solid-js/store";
 import { getRequestEvent, isServer } from "solid-js/web";
 import { useNavigate, getIntent } from "../routing.js";
-import { redirectStatusCodes } from "../utils.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
 const CACHE_TIMEOUT = 180000;
@@ -56,6 +55,21 @@ export function cache(fn, name, options) {
         const key = name + hashKey(args);
         let cached = cache.get(key);
         let tracking;
+        if (isServer) {
+            const e = getRequestEvent();
+            if (e) {
+                const dataOnly = (e.router || (e.router = {})).dataOnly;
+                if (dataOnly) {
+                    const data = e && (e.router.data || (e.router.data = {}));
+                    if (data && key in data)
+                        return data[key];
+                    if (Array.isArray(dataOnly) && !dataOnly.includes(key)) {
+                        data[key] = undefined;
+                        return Promise.resolve();
+                    }
+                }
+            }
+        }
         if (getListener() && !isServer) {
             tracking = true;
             onCleanup(() => cached[3].count--);
@@ -91,6 +105,7 @@ export function cache(fn, name, options) {
             sharedConfig.context.async &&
             !sharedConfig.context.noHydrate) {
             const e = getRequestEvent();
+            e && e.router.dataOnly && (e.router.data[key] = res);
             (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
         }
         if (cached) {
@@ -117,7 +132,7 @@ export function cache(fn, name, options) {
         function handleResponse(error) {
             return async (v) => {
                 if (v instanceof Response) {
-                    if (redirectStatusCodes.has(v.status)) {
+                    if (v.headers.has("Location")) {
                         if (navigate) {
                             startTransition(() => {
                                 let url = v.headers.get(LocationHeader);

package/dist/data/response.d.ts

@@ -1,6 +1,6 @@
-export type RouterResponseInit = ResponseInit & {
+export type RouterResponseInit = Omit<ResponseInit, "body"> & {
     revalidate?: string | string[];
 };
 export declare function redirect(url: string, init?: number | RouterResponseInit): never;
-export declare function reload(init: RouterResponseInit): never;
-export declare function json<T>(data: T, init?: Omit<ResponseInit, "body">): T;
+export declare function reload(init?: RouterResponseInit): never;
+export declare function json<T>(data: T, init?: RouterResponseInit): T;

package/dist/data/response.js

@@ -19,20 +19,22 @@ export function redirect(url, init = 302) {
     });
     return response;
 }
-export function reload(init) {
+export function reload(init = {}) {
     const { revalidate, ...responseInit } = init;
+    const headers = new Headers(responseInit.headers);
+    revalidate && headers.set("X-Revalidate", revalidate.toString());
     return new Response(null, {
         ...responseInit,
-        ...(revalidate
-            ? { headers: new Headers(responseInit.headers).set("X-Revalidate", revalidate.toString()) }
-            : {})
+        headers
     });
 }
-export function json(data, init) {
-    const headers = new Headers((init || {}).headers);
+export function json(data, init = {}) {
+    const { revalidate, ...responseInit } = init;
+    const headers = new Headers(responseInit.headers);
+    revalidate && headers.set("X-Revalidate", revalidate.toString());
     headers.set("Content-Type", "application/json");
     const response = new Response(JSON.stringify(data), {
-        ...init,
+        ...responseInit,
         headers
     });
     response.customBody = () => data;

package/dist/index.js

@@ -79,7 +79,6 @@ function notifyIfNotBlocked(notify, block) {
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
 const mockBase = "http://sr";
-const redirectStatusCodes = new Set([204, 301, 302, 303, 307, 308]);
 function normalizePath(path, omitSlash = false) {
   const s = path.replace(trimPathRegex, "$1");
   return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
@@ -477,6 +476,7 @@ function createRouterContext(integration, getBranches, options = {}) {
     navigatorFactory,
     beforeLeave,
     preloadRoute,
+    singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
     submissions
   };
   function navigateFromRoute(route, to, options) {
@@ -644,7 +644,8 @@ const createRouterComponent = router => props => {
     children: routeDefs()
   } : routeDefs(), props.base || ""));
   const routerState = createRouterContext(router, branches, {
-    base
+    base,
+    singleFlight: props.singleFlight
   });
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
@@ -663,6 +664,10 @@ function Routes(props) {
   const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   if (isServer) {
     const e = getRequestEvent();
+    if (e && e.router && e.router.dataOnly) {
+      dataOnly(e, props.branches);
+      return;
+    }
     e && ((e.router || (e.router = {})).matches || (e.router.matches = matches().map(({
       route,
       path,
@@ -747,6 +752,32 @@ const Route = props => {
   });
 };
 
+// for data only mode with single flight mutations
+function dataOnly(event, branches) {
+  const url = new URL(event.request.url);
+  const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
+  const matches = getRouteMatches(branches, url.pathname);
+  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.load && route.load({
+      params,
+      location: {
+        pathname: url.pathname,
+        search: url.search,
+        hash: url.hash,
+        query: extractSearchParams(url),
+        state: null,
+        key: ""
+      },
+      intent: "preload"
+    });
+  }
+}
+
 function intercept([value, setValue], get, set) {
   return [get ? () => get(value()) : value, set ? v => setValue(set(v)) : setValue];
 }
@@ -860,6 +891,20 @@ function cache(fn, name, options) {
     const key = name + hashKey(args);
     let cached = cache.get(key);
     let tracking;
+    if (isServer) {
+      const e = getRequestEvent();
+      if (e) {
+        const dataOnly = (e.router || (e.router = {})).dataOnly;
+        if (dataOnly) {
+          const data = e && (e.router.data || (e.router.data = {}));
+          if (data && key in data) return data[key];
+          if (Array.isArray(dataOnly) && !dataOnly.includes(key)) {
+            data[key] = undefined;
+            return Promise.resolve();
+          }
+        }
+      }
+    }
     if (getListener() && !isServer) {
       tracking = true;
       onCleanup(() => cached[3].count--);
@@ -885,6 +930,7 @@ function cache(fn, name, options) {
     // serialize on server
     if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
       const e = getRequestEvent();
+      e && e.router.dataOnly && (e.router.data[key] = res);
       (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
     }
     if (cached) {
@@ -907,7 +953,7 @@ function cache(fn, name, options) {
     function handleResponse(error) {
       return async v => {
         if (v instanceof Response) {
-          if (redirectStatusCodes.has(v.status)) {
+          if (v.headers.has("Location")) {
             if (navigate) {
               startTransition(() => {
                 let url = v.headers.get(LocationHeader);
@@ -995,10 +1041,14 @@ function useAction(action) {
 }
 function action(fn, name) {
   function mutate(...variables) {
-    const p = fn(...variables);
+    const router = this;
+    const p = (router.singleFlight && fn.withOptions ? fn.withOptions({
+      headers: {
+        "X-Single-Flight": "true"
+      }
+    }) : fn)(...variables);
     const [result, setResult] = createSignal();
     let submission;
-    const router = this;
     async function handler(res) {
       const data = await handleResponse(res, router.navigatorFactory());
       data ? setResult({
@@ -1055,10 +1105,23 @@ const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt
 async function handleResponse(response, navigate) {
   let data;
   let keys;
+  let invalidateKeys;
   if (response instanceof Response) {
-    if (response.headers.has("X-Revalidate")) keys = response.headers.get("X-Revalidate").split(",");
-    if (response.customBody) data = await response.customBody();
-    if (redirectStatusCodes.has(response.status)) {
+    if (response.headers.has("X-Revalidate")) keys = invalidateKeys = response.headers.get("X-Revalidate").split(",");
+    if (response.customBody) {
+      data = await response.customBody();
+      if (response.headers.has("X-Single-Flight")) {
+        keys || (keys = []);
+        invalidateKeys || (invalidateKeys = []);
+        Object.keys(data).forEach(key => {
+          if (key === "_$value") return;
+          keys.push(key);
+          cache.set(key, data[key]);
+        });
+        data = data._$value;
+      }
+    }
+    if (response.headers.has("Location")) {
       const locationUrl = response.headers.get("Location") || "/";
       if (locationUrl.startsWith("http")) {
         window.location.href = locationUrl;
@@ -1068,7 +1131,7 @@ async function handleResponse(response, navigate) {
     }
   } else data = response;
   // invalidate
-  cacheKeyOp(keys, entry => entry[0] = 0);
+  cacheKeyOp(invalidateKeys, entry => entry[0] = 0);
   // trigger revalidation
   await revalidate(keys, false);
   return data;
@@ -1455,23 +1518,28 @@ function redirect(url, init = 302) {
   });
   return response;
 }
-function reload(init) {
+function reload(init = {}) {
   const {
     revalidate,
     ...responseInit
   } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate && headers.set("X-Revalidate", revalidate.toString());
   return new Response(null, {
     ...responseInit,
-    ...(revalidate ? {
-      headers: new Headers(responseInit.headers).set("X-Revalidate", revalidate.toString())
-    } : {})
+    headers
   });
 }
-function json(data, init) {
-  const headers = new Headers((init || {}).headers);
+function json(data, init = {}) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate && headers.set("X-Revalidate", revalidate.toString());
   headers.set("Content-Type", "application/json");
   const response = new Response(JSON.stringify(data), {
-    ...init,
+    ...responseInit,
     headers
   });
   response.customBody = () => data;

package/dist/routers/components.d.ts

@@ -1,11 +1,13 @@
 import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteLoadFunc, RouteDefinition, RouterIntegration, RouteSectionProps } from "../types.ts";
+import type { MatchFilters, RouteLoadFunc, RouteDefinition, RouterIntegration, RouteSectionProps } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
      * A component that wraps the content of every route.
      */
     root?: Component<RouteSectionProps>;
+    rootLoad?: RouteLoadFunc;
+    singleFlight: boolean;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;

package/dist/routers/components.jsx

@@ -2,12 +2,12 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import { children, createMemo, createRoot, mergeProps, on, Show } from "solid-js";
 import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing.js";
-import { createMemoObject } from "../utils.js";
+import { createMemoObject, extractSearchParams } from "../utils.js";
 export const createRouterComponent = (router) => (props) => {
     const { base } = props;
     const routeDefs = children(() => props.children);
     const branches = createMemo(() => createBranches(props.root ? { component: props.root, children: routeDefs() } : routeDefs(), props.base || ""));
-    const routerState = createRouterContext(router, branches, { base });
+    const routerState = createRouterContext(router, branches, { base, singleFlight: props.singleFlight });
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
       <Routes routerState={routerState} branches={branches()}/>
@@ -17,6 +17,10 @@ function Routes(props) {
     const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
     if (isServer) {
         const e = getRequestEvent();
+        if (e && e.router && e.router.dataOnly) {
+            dataOnly(e, props.branches);
+            return;
+        }
         e &&
             ((e.router || (e.router = {})).matches ||
                 (e.router.matches = matches().map(({ route, path, params }) => ({
@@ -81,3 +85,27 @@ export const Route = (props) => {
         }
     });
 };
+// for data only mode with single flight mutations
+function dataOnly(event, branches) {
+    const url = new URL(event.request.url);
+    const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
+    const matches = getRouteMatches(branches, url.pathname);
+    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.load &&
+            route.load({
+                params,
+                location: {
+                    pathname: url.pathname,
+                    search: url.search,
+                    hash: url.hash,
+                    query: extractSearchParams(url),
+                    state: null,
+                    key: ""
+                },
+                intent: "preload"
+            });
+    }
+}

package/dist/routing.d.ts

@@ -21,5 +21,6 @@ export declare function createLocation(path: Accessor<string>, state: Accessor<a
 export declare function getIntent(): Intent | undefined;
 export declare function createRouterContext(integration: RouterIntegration, getBranches?: () => Branch[], options?: {
     base?: string;
+    singleFlight?: boolean;
 }): RouterContext;
 export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;

package/dist/routing.js

@@ -245,6 +245,7 @@ export function createRouterContext(integration, getBranches, options = {}) {
         navigatorFactory,
         beforeLeave,
         preloadRoute,
+        singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
         submissions
     };
     function navigateFromRoute(route, to, options) {

package/dist/types.d.ts

@@ -10,6 +10,9 @@ declare module "solid-js/web" {
             matches?: OutputMatch[];
             cache?: Map<string, CacheEntry>;
             submission?: Submission<any, any>;
+            dataOnly?: boolean | string[];
+            data?: Record<string, any>;
+            previousUrl?: string;
         };
         serverOnly?: boolean;
     }
@@ -127,6 +130,7 @@ export interface RouterContext {
     parsePath(str: string): string;
     beforeLeave: BeforeLeaveLifecycle;
     preloadRoute: (url: URL, preloadData: boolean) => void;
+    singleFlight: boolean;
     submissions: Signal<Submission<any, any>[]>;
 }
 export interface BeforeLeaveEventArgs {

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 import type { MatchFilters, Params, PathMatch, Route, SetParams } from "./types.ts";
 export declare const mockBase = "http://sr";
-export declare const redirectStatusCodes: Set<number>;
 export declare function normalizePath(path: string, omitSlash?: boolean): string;
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;

package/dist/utils.js

@@ -2,7 +2,6 @@ import { createMemo, getOwner, runWithOwner } from "solid-js";
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
 export const mockBase = "http://sr";
-export const redirectStatusCodes = new Set([204, 301, 302, 303, 307, 308]);
 export function normalizePath(path, omitSlash = false) {
     const s = path.replace(trimPathRegex, "$1");
     return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",