@solidjs/router 0.10.0-beta.2 → 0.10.0-beta.4

package/dist/components.d.ts

@@ -12,6 +12,7 @@ declare module "solid-js" {
 }
 export type RouterProps = {
     base?: string;
+    actionBase?: string;
     root?: Component<RouteSectionProps>;
     children: JSX.Element;
 } & ({

package/dist/components.jsx

@@ -6,14 +6,16 @@ import { createBranches, createRouteContext, createRouterContext, getRouteMatche
 import { normalizePath, createMemoObject } from "./utils";
 export const Router = (props) => {
     let e;
-    const { source, url, base } = props;
+    const { source, url, base, actionBase } = props;
     const integration = source ||
         (isServer
-            ? staticIntegration({ value: url || ((e = getRequestEvent()) && getPath(e.request.url)) || "" })
+            ? staticIntegration({
+                value: url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
+            })
             : pathIntegration());
     const routeDefs = children(() => props.children);
     const branches = createMemo(() => createBranches(props.root ? { component: props.root, children: routeDefs() } : routeDefs(), props.base || ""));
-    const routerState = createRouterContext(integration, branches, base);
+    const routerState = createRouterContext(integration, branches, { base, actionBase });
     return (<RouterContextObj.Provider value={routerState}>
       <Routes routerState={routerState} branches={branches()}/>
     </RouterContextObj.Provider>);

package/dist/data/action.d.ts

@@ -1,5 +1,6 @@
+import { JSX } from "solid-js";
 import { Submission } from "../types";
-export type Action<T, U> = (vars: T) => Promise<U>;
+export type Action<T, U> = ((vars: T) => Promise<U>) & JSX.SerializableAttributeValue;
 export declare function useSubmissions<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
     pending: boolean;
 };

package/dist/data/action.js

@@ -20,22 +20,22 @@ export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
     return {
         get clear() {
-            return submissions[0]?.clear;
+            return submissions[submissions.length - 1]?.clear;
         },
         get retry() {
-            return submissions[0]?.retry;
+            return submissions[submissions.length - 1]?.retry;
         },
         get url() {
-            return submissions[0]?.url;
+            return submissions[submissions.length - 1]?.url;
         },
         get input() {
-            return submissions[0]?.input;
+            return submissions[submissions.length - 1]?.input;
         },
         get result() {
-            return submissions[0]?.result;
+            return submissions[submissions.length - 1]?.result;
         },
         get pending() {
-            return submissions[0]?.pending;
+            return submissions[submissions.length - 1]?.pending;
         }
     };
 }

package/dist/data/cache.js

@@ -50,16 +50,15 @@ export function cache(fn, name, options) {
             version && cached[3].add(version);
             if (cached[2] === "preload" && intent !== "preload") {
                 cached[0] = now;
-                cached[1] =
-                    "then" in cached[1]
-                        ? cached[1].then(handleResponse, handleResponse)
-                        : handleResponse(cached[1]);
-                cached[2] = intent;
             }
+            let res = cached[1];
             if (!isServer && intent === "navigate") {
+                res = "then" in cached[1]
+                    ? cached[1].then(handleResponse(false), handleResponse(true))
+                    : handleResponse(false)(cached[1]);
                 startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
             }
-            return cached[1];
+            return res;
         }
         let res = !isServer && sharedConfig.context && sharedConfig.load
             ? sharedConfig.load(key) // hydrating
@@ -68,12 +67,6 @@ export function cache(fn, name, options) {
         if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
             sharedConfig.context && sharedConfig.context.serialize(key, res);
         }
-        if (intent !== "preload") {
-            res =
-                "then" in res
-                    ? res.then(handleResponse, handleResponse)
-                    : handleResponse(res);
-        }
         if (cached) {
             cached[0] = now;
             cached[1] = res;
@@ -85,30 +78,37 @@ export function cache(fn, name, options) {
         }
         else
             cache.set(key, (cached = [now, res, intent, new Set(version ? [version] : [])]));
+        if (intent !== "preload") {
+            res = "then" in res
+                ? res.then(handleResponse(false), handleResponse(true))
+                : handleResponse(false)(res);
+        }
         return res;
-        function handleResponse(v) {
-            if (v instanceof Response && redirectStatusCodes.has(v.status)) {
-                if (navigate) {
-                    startTransition(() => {
-                        let url = v.headers.get(LocationHeader);
-                        if (url && url.startsWith("/")) {
-                            navigate(url, {
-                                replace: true
-                            });
-                        }
-                        else if (!isServer && url) {
-                            window.location.href = url;
-                        }
-                    });
+        function handleResponse(error) {
+            return (v) => {
+                if (v instanceof Response && redirectStatusCodes.has(v.status)) {
+                    if (navigate) {
+                        startTransition(() => {
+                            let url = v.headers.get(LocationHeader);
+                            if (url && url.startsWith("/")) {
+                                navigate(url, {
+                                    replace: true
+                                });
+                            }
+                            else if (!isServer && url) {
+                                window.location.href = url;
+                            }
+                        });
+                    }
+                    return;
                 }
-                return;
-            }
-            if (v instanceof Error)
-                throw v;
-            if (isServer)
-                return v;
-            setStore(key, reconcile(v, options));
-            return store[key];
+                if (error)
+                    throw error;
+                if (isServer)
+                    return v;
+                setStore(key, reconcile(v, options));
+                return store[key];
+            };
         }
     });
 }

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
 export { createAsync } from "./createAsync";
-export { action, useSubmission, useSubmissions } from "./action";
+export { action, useSubmission, useSubmissions, useAction } from "./action";
 export { cache, revalidate } from "./cache";
 export { redirect } from "./response";

package/dist/data/index.js

@@ -1,4 +1,4 @@
 export { createAsync } from "./createAsync";
-export { action, useSubmission, useSubmissions } from "./action";
+export { action, useSubmission, useSubmissions, useAction } from "./action";
 export { cache, revalidate } from "./cache";
 export { redirect } from "./response";

package/dist/index.js

@@ -529,7 +529,7 @@ let intent;
 function getIntent() {
   return intent;
 }
-function createRouterContext(integration, getBranches, base = "") {
+function createRouterContext(integration, getBranches, options = {}) {
   const {
     signal: [source, setSource],
     utils = {}
@@ -537,8 +537,8 @@ function createRouterContext(integration, getBranches, base = "") {
   const parsePath = utils.parsePath || (p => p);
   const renderPath = utils.renderPath || (p => p);
   const beforeLeave = utils.beforeLeave || createBeforeLeave();
-  let submissions = [];
-  const basePath = resolvePath("", base);
+  const basePath = resolvePath("", options.base || "");
+  const actionBase = options.actionBase || "/_server";
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
   } else if (basePath && !source().value) {
@@ -578,7 +578,7 @@ function createRouterContext(integration, getBranches, base = "") {
     parsePath,
     navigatorFactory,
     beforeLeave,
-    submissions: createSignal(submissions)
+    submissions: createSignal(initFromFlash(location.query))
   };
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
@@ -667,6 +667,16 @@ function createRouterContext(integration, getBranches, base = "") {
       referrers.length = 0;
     }
   }
+  function initFromFlash(params) {
+    let param = params.form ? JSON.parse(params.form) : null;
+    if (!param || !param.result) return [];
+    const input = new Map(param.entries);
+    return [{
+      url: param.url,
+      result: param.error ? new Error(param.result.message) : param.result,
+      input: input
+    }];
+  }
   createRenderEffect(() => {
     const {
       value,
@@ -771,10 +781,17 @@ function createRouterContext(integration, getBranches, base = "") {
     }
     function handleFormSubmit(evt) {
       let actionRef = evt.submitter && evt.submitter.getAttribute("formaction") || evt.target.action;
-      if (actionRef && actionRef.startsWith("action:")) {
-        const data = new FormData(evt.target);
-        actions.get(actionRef).call(router, data);
+      if (!actionRef) return;
+      if (!actionRef.startsWith("action:")) {
+        const url = new URL(actionRef);
+        actionRef = parsePath(url.pathname + url.search);
+        if (!actionRef.startsWith(actionBase)) return;
+      }
+      const handler = actions.get(actionRef);
+      if (handler) {
         evt.preventDefault();
+        const data = new FormData(evt.target);
+        handler.call(router, data);
       }
     }
 
@@ -794,20 +811,6 @@ function createRouterContext(integration, getBranches, base = "") {
       document.removeEventListener("touchstart", handleAnchorPreload);
       document.removeEventListener("submit", handleFormSubmit);
     });
-  } else {
-    function initFromFlash(params) {
-      let param = params.form ? JSON.parse(params.form) : null;
-      if (!param || !param.result) {
-        return [];
-      }
-      const input = new Map(param.entries);
-      return [{
-        url: param.url,
-        result: param.error ? new Error(param.result.message) : param.result,
-        input: input
-      }];
-    }
-    submissions = initFromFlash(location.query);
   }
   return router;
 }
@@ -847,13 +850,14 @@ function createRouteContext(router, parent, outlet, match, params) {
   return route;
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a></a>`, 2);
+const _tmpl$ = /*#__PURE__*/template(`<a>`);
 const Router = props => {
   let e;
   const {
     source,
     url,
-    base
+    base,
+    actionBase
   } = props;
   const integration = source || (isServer ? staticIntegration({
     value: url || (e = getRequestEvent()) && getPath(e.request.url) || ""
@@ -863,7 +867,10 @@ const Router = props => {
     component: props.root,
     children: routeDefs()
   } : routeDefs(), props.base || ""));
-  const routerState = createRouterContext(integration, branches, base);
+  const routerState = createRouterContext(integration, branches, {
+    base,
+    actionBase
+  });
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
     get children() {
@@ -970,7 +977,7 @@ function A(props) {
     return props.end ? path === loc : loc.startsWith(path);
   });
   return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
+    const _el$ = _tmpl$();
     spread(_el$, mergeProps$1(rest, {
       get href() {
         return href() || props.href;
@@ -1112,14 +1119,14 @@ function cache(fn, name, options) {
       version && cached[3].add(version);
       if (cached[2] === "preload" && intent !== "preload") {
         cached[0] = now;
-        cached[1] = "then" in cached[1] ? cached[1].then(handleResponse, handleResponse) : handleResponse(cached[1]);
-        cached[2] = intent;
       }
+      let res = cached[1];
       if (!isServer && intent === "navigate") {
+        res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
         startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
       }
 
-      return cached[1];
+      return res;
     }
     let res = !isServer && sharedConfig.context && sharedConfig.load ? sharedConfig.load(key) // hydrating
     : fn(...args);
@@ -1128,9 +1135,6 @@ function cache(fn, name, options) {
     if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
       sharedConfig.context && sharedConfig.context.serialize(key, res);
     }
-    if (intent !== "preload") {
-      res = "then" in res ? res.then(handleResponse, handleResponse) : handleResponse(res);
-    }
     if (cached) {
       cached[0] = now;
       cached[1] = res;
@@ -1140,27 +1144,32 @@ function cache(fn, name, options) {
         startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
       }
     } else cache.set(key, cached = [now, res, intent, new Set(version ? [version] : [])]);
+    if (intent !== "preload") {
+      res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
+    }
     return res;
-    function handleResponse(v) {
-      if (v instanceof Response && redirectStatusCodes.has(v.status)) {
-        if (navigate) {
-          startTransition(() => {
-            let url = v.headers.get(LocationHeader);
-            if (url && url.startsWith("/")) {
-              navigate(url, {
-                replace: true
-              });
-            } else if (!isServer && url) {
-              window.location.href = url;
-            }
-          });
+    function handleResponse(error) {
+      return v => {
+        if (v instanceof Response && redirectStatusCodes.has(v.status)) {
+          if (navigate) {
+            startTransition(() => {
+              let url = v.headers.get(LocationHeader);
+              if (url && url.startsWith("/")) {
+                navigate(url, {
+                  replace: true
+                });
+              } else if (!isServer && url) {
+                window.location.href = url;
+              }
+            });
+          }
+          return;
         }
-        return;
-      }
-      if (v instanceof Error) throw v;
-      if (isServer) return v;
-      setStore(key, reconcile(v, options));
-      return store[key];
+        if (error) throw error;
+        if (isServer) return v;
+        setStore(key, reconcile(v, options));
+        return store[key];
+      };
     }
   };
 }
@@ -1180,25 +1189,29 @@ function useSubmission(fn, filter) {
   const submissions = useSubmissions(fn, filter);
   return {
     get clear() {
-      return submissions[0]?.clear;
+      return submissions[submissions.length - 1]?.clear;
     },
     get retry() {
-      return submissions[0]?.retry;
+      return submissions[submissions.length - 1]?.retry;
     },
     get url() {
-      return submissions[0]?.url;
+      return submissions[submissions.length - 1]?.url;
     },
     get input() {
-      return submissions[0]?.input;
+      return submissions[submissions.length - 1]?.input;
     },
     get result() {
-      return submissions[0]?.result;
+      return submissions[submissions.length - 1]?.result;
     },
     get pending() {
-      return submissions[0]?.pending;
+      return submissions[submissions.length - 1]?.pending;
     }
   };
 }
+function useAction(action) {
+  const router = useRouter();
+  return action.bind(router);
+}
 function action(fn, name) {
   function mutate(variables) {
     const p = fn(variables);
@@ -1275,4 +1288,4 @@ function redirect(url, init = 302) {
   return response;
 }
 
-export { A, A as Link, A as NavLink, Navigate, Route, Router, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, redirect, revalidate, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, A as Link, A as NavLink, Navigate, Route, Router, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, redirect, revalidate, staticIntegration, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/routing.d.ts

@@ -20,5 +20,8 @@ export declare function getRouteMatches(branches: Branch[], location: string): R
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
 export declare function registerAction(url: string, fn: Function): void;
 export declare function getIntent(): Intent | undefined;
-export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, getBranches?: () => Branch[], base?: string): RouterContext;
+export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, getBranches?: () => Branch[], options?: {
+    base?: string;
+    actionBase?: string;
+}): RouterContext;
 export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;

package/dist/routing.js

@@ -181,13 +181,13 @@ let intent;
 export function getIntent() {
     return intent;
 }
-export function createRouterContext(integration, getBranches, base = "") {
+export function createRouterContext(integration, getBranches, options = {}) {
     const { signal: [source, setSource], utils = {} } = normalizeIntegration(integration);
     const parsePath = utils.parsePath || (p => p);
     const renderPath = utils.renderPath || (p => p);
     const beforeLeave = utils.beforeLeave || createBeforeLeave();
-    let submissions = [];
-    const basePath = resolvePath("", base);
+    const basePath = resolvePath("", options.base || "");
+    const actionBase = options.actionBase || "/_server";
     if (basePath === undefined) {
         throw new Error(`${basePath} is not a valid base path`);
     }
@@ -225,7 +225,7 @@ export function createRouterContext(integration, getBranches, base = "") {
         parsePath,
         navigatorFactory,
         beforeLeave,
-        submissions: createSignal(submissions)
+        submissions: createSignal(initFromFlash(location.query))
     };
     function navigateFromRoute(route, to, options) {
         // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
@@ -301,6 +301,19 @@ export function createRouterContext(integration, getBranches, base = "") {
             referrers.length = 0;
         }
     }
+    function initFromFlash(params) {
+        let param = params.form ? JSON.parse(params.form) : null;
+        if (!param || !param.result)
+            return [];
+        const input = new Map(param.entries);
+        return [
+            {
+                url: param.url,
+                result: param.error ? new Error(param.result.message) : param.result,
+                input: input
+            }
+        ];
+    }
     createRenderEffect(() => {
         const { value, state } = source();
         // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
@@ -422,10 +435,19 @@ export function createRouterContext(integration, getBranches, base = "") {
         }
         function handleFormSubmit(evt) {
             let actionRef = (evt.submitter && evt.submitter.getAttribute("formaction")) || evt.target.action;
-            if (actionRef && actionRef.startsWith("action:")) {
-                const data = new FormData(evt.target);
-                actions.get(actionRef).call(router, data);
+            if (!actionRef)
+                return;
+            if (!actionRef.startsWith("action:")) {
+                const url = new URL(actionRef);
+                actionRef = parsePath(url.pathname + url.search);
+                if (!actionRef.startsWith(actionBase))
+                    return;
+            }
+            const handler = actions.get(actionRef);
+            if (handler) {
                 evt.preventDefault();
+                const data = new FormData(evt.target);
+                handler.call(router, data);
             }
         }
         // ensure delegated event run first
@@ -445,23 +467,6 @@ export function createRouterContext(integration, getBranches, base = "") {
             document.removeEventListener("submit", handleFormSubmit);
         });
     }
-    else {
-        function initFromFlash(params) {
-            let param = params.form ? JSON.parse(params.form) : null;
-            if (!param || !param.result) {
-                return [];
-            }
-            const input = new Map(param.entries);
-            return [
-                {
-                    url: param.url,
-                    result: param.error ? new Error(param.result.message) : param.result,
-                    input: input
-                }
-            ];
-        }
-        submissions = initFromFlash(location.query);
-    }
     return router;
 }
 export function createRouteContext(router, parent, outlet, match, params) {

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.10.0-beta.2",
+  "version": "0.10.0-beta.4",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -37,17 +37,17 @@
     "@types/jest": "^29.0.0",
     "@types/node": "^20.9.0",
     "babel-jest": "^29.0.1",
-    "babel-preset-solid": "^1.6.6",
+    "babel-preset-solid": "^1.8.6",
     "jest": "^29.0.1",
     "jest-environment-jsdom": "^29.2.1",
     "prettier": "^2.7.1",
     "rollup": "^3.7.5",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.8.4",
+    "solid-js": "^1.8.6",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "solid-js": "^1.8.4"
+    "solid-js": "^1.8.6"
   },
   "jest": {
     "preset": "solid-jest/preset/browser"