single flight mutations

Author: ryansolid

.changeset/many-wasps-care.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+single flight mutations

src/data/action.ts

@@ -2,8 +2,8 @@ import { $TRACK, createMemo, createSignal, JSX, onCleanup, getOwner } from "soli
 import { isServer } from "solid-js/web";
 import { useRouter } from "../routing.js";
 import { RouterContext, Submission, Navigator } from "../types.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 type Action<T extends Array<any>, U> = (T extends [FormData] | []
   ? JSX.SerializableAttributeValue
@@ -60,10 +60,14 @@ export function action<T extends Array<any>, U = void>(
   name?: string
 ): Action<T, U> {
   function mutate(this: RouterContext, ...variables: T) {
-    const p = fn(...variables);
+    const router = this;
+    const p = (
+      router.singleFlight && (fn as any).withOptions
+        ? (fn as any).withOptions({ headers: { "X-Single-Flight": "true" } })
+        : fn
+    )(...variables);
     const [result, setResult] = createSignal<{ data?: U }>();
     let submission: Submission<T, U>;
-    const router = this;
     async function handler(res: any) {
       const data = await handleResponse(res as any, router.navigatorFactory());
       data ? setResult({ data }) : submission.clear();
@@ -135,11 +139,24 @@ const hashString = (s: string) =>
 async function handleResponse(response: Response, navigate: Navigator) {
   let data: any;
   let keys: string[] | undefined;
+  let invalidateKeys: string[] | undefined;
   if (response instanceof Response) {
     if (response.headers.has("X-Revalidate"))
-      keys = response.headers.get("X-Revalidate")!.split(",");
-    if ((response as any).customBody) data = await (response as any).customBody();
-    if (redirectStatusCodes.has(response.status)) {
+      keys = invalidateKeys = response.headers.get("X-Revalidate")!.split(",");
+    if ((response as any).customBody) {
+      data = await (response as any).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;
@@ -149,7 +166,7 @@ async function handleResponse(response: Response, navigate: Navigator) {
     }
   } else data = response;
   // invalidate
-  cacheKeyOp(keys, entry => (entry[0] = 0));
+  cacheKeyOp(invalidateKeys, entry => (entry[0] = 0));
   // trigger revalidation
   await revalidate(keys, false);
   return data;

src/data/cache.ts

@@ -10,7 +10,6 @@ import {
 import { createStore, reconcile, type ReconcileOptions } from "solid-js/store";
 import { getRequestEvent, isServer } from "solid-js/web";
 import { useNavigate, getIntent } from "../routing.js";
-import { redirectStatusCodes } from "../utils.js";
 import { CacheEntry } from "../types.js";
 
 const LocationHeader = "Location";
@@ -76,6 +75,20 @@ export function cache<T extends (...args: any) => U | Response, U>(
     const key = name + hashKey(args);
     let cached = cache.get(key) as CacheEntry;
     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--);
@@ -118,6 +131,7 @@ export function cache<T extends (...args: any) => U | Response, U>(
       !(sharedConfig.context as any).noHydrate
     ) {
       const e = getRequestEvent();
+      e && e.router!.dataOnly && (e.router!.data![key] = res);
       (!e || !e.serverOnly) && (sharedConfig.context as any).serialize(key, res);
     }
 
@@ -148,7 +162,7 @@ export function cache<T extends (...args: any) => U | Response, U>(
     function handleResponse(error: boolean) {
       return async (v: U | Response) => {
         if (v instanceof Response) {
-          if (redirectStatusCodes.has(v.status)) {
+          if (v.headers.has("Location")) {
             if (navigate) {
               startTransition(() => {
                 let url = (v as Response).headers.get(LocationHeader);

src/routers/components.tsx

@@ -1,7 +1,7 @@
 /*@refresh skip*/
 
 import type { Component, JSX } from "solid-js";
-import { getRequestEvent, isServer } from "solid-js/web";
+import { type RequestEvent, getRequestEvent, isServer } from "solid-js/web";
 import { children, createMemo, createRoot, mergeProps, on, Show } from "solid-js";
 import {
   createBranches,
@@ -21,15 +21,17 @@ import type {
   RouterContext,
   Branch,
   RouteSectionProps
-} from "../types.ts";
-import { createMemoObject } from "../utils.js";
+} from "../types.js";
+import { createMemoObject, extractSearchParams } from "../utils.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[];
 };
 
@@ -45,7 +47,7 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
       props.base || ""
     )
   );
-  const routerState = createRouterContext(router, branches, { base });
+  const routerState = createRouterContext(router, branches, { base, singleFlight: props.singleFlight });
   router.create && router.create(routerState);
 
   return (
@@ -62,6 +64,10 @@ function Routes(props: { routerState: RouterContext; branches: Branch[] }) {
 
   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 }) => ({
@@ -153,3 +159,30 @@ export const Route = <S extends string, T = unknown>(props: RouteProps<S, T>) =>
     }
   }) as unknown as JSX.Element;
 };
+
+// for data only mode with single flight mutations
+function dataOnly(event: RequestEvent, branches: Branch[]) {
+  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"
+      });
+  }
+}

src/routing.ts

@@ -269,7 +269,7 @@ export function getIntent() {
 export function createRouterContext(
   integration: RouterIntegration,
   getBranches?: () => Branch[],
-  options: { base?: string } = {}
+  options: { base?: string, singleFlight?: boolean } = {}
 ): RouterContext {
   const {
     signal: [source, setSource],
@@ -339,6 +339,7 @@ export function createRouterContext(
     navigatorFactory,
     beforeLeave,
     preloadRoute,
+    singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
     submissions
   };
 

src/types.ts

@@ -11,6 +11,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;
   }
@@ -160,6 +163,7 @@ export interface RouterContext {
   parsePath(str: string): string;
   beforeLeave: BeforeLeaveLifecycle;
   preloadRoute: (url: URL, preloadData: boolean) => void;
+  singleFlight: boolean;
   submissions: Signal<Submission<any, any>[]>;
 }
 

src/utils.ts

@@ -4,7 +4,6 @@ import type { MatchFilter, MatchFilters, Params, PathMatch, Route, SetParams } f
 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: string, omitSlash: boolean = false) {
   const s = path.replace(trimPathRegex, "$1");