@solidjs/router 0.10.0-beta.1 → 0.10.0-beta.3

package/dist/components.jsx

@@ -9,7 +9,7 @@ export const Router = (props) => {
     const { source, url, base } = props;
     const integration = source ||
         (isServer
-            ? staticIntegration({ value: url || ((e = getRequestEvent()) && 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 || ""));
@@ -18,6 +18,10 @@ export const Router = (props) => {
       <Routes routerState={routerState} branches={branches()}/>
     </RouterContextObj.Provider>);
 };
+function getPath(url) {
+    const u = new URL(url);
+    return u.pathname + u.search;
+}
 function Routes(props) {
     const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
     const params = createMemoObject(() => {

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

@@ -49,6 +49,11 @@ export function action(fn, name) {
         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();
+            return data;
+        }
         router.submissions[1](s => [
             ...s,
             (submission = {
@@ -66,29 +71,15 @@ export function action(fn, name) {
                 retry() {
                     setResult(undefined);
                     const p = fn(variables);
-                    p.then(async (data) => {
-                        const keys = handleResponse(data, router.navigatorFactory());
-                        await revalidate(keys);
-                        data ? setResult({ data }) : submission.clear();
-                        return data;
-                    }).catch(error => {
-                        setResult({ data: error });
-                    });
+                    p.then(handler, handler);
                     return p;
                 }
             })
         ]);
-        p.then(async (data) => {
-            const keys = handleResponse(data, router.navigatorFactory());
-            await revalidate(keys);
-            data ? setResult({ data }) : submission.clear();
-            return data;
-        }).catch(error => {
-            setResult({ data: error });
-        });
+        p.then(handler, handler);
         return p;
     }
-    const url = fn.url || `action:${name}` || !isServer ? `action:${fn.name}` : "";
+    const url = fn.url || (name && `action:${name}`) || (!isServer ? `action:${fn.name}` : "");
     mutate.toString = () => {
         if (!url)
             throw new Error("Client Actions need explicit names if server rendered");
@@ -98,7 +89,8 @@ export function action(fn, name) {
         registerAction(url, mutate);
     return mutate;
 }
-function handleResponse(response, navigate) {
+async function handleResponse(response, navigate) {
+    let data;
     if (response instanceof Response && redirectStatusCodes.has(response.status)) {
         const locationUrl = response.headers.get("Location") || "/";
         if (locationUrl.startsWith("http")) {
@@ -108,6 +100,9 @@ function handleResponse(response, navigate) {
             navigate(locationUrl);
         }
     }
-    // return keys
-    return;
+    else
+        data = response;
+    // TODO: handle keys
+    await revalidate();
+    return data;
 }

package/dist/data/cache.js

@@ -50,13 +50,11 @@ 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(cached[1]);
-                cached[2] = intent;
             }
             if (!isServer && intent === "navigate") {
+                "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];
@@ -69,10 +67,9 @@ export function cache(fn, name, options) {
             sharedConfig.context && sharedConfig.context.serialize(key, res);
         }
         if (intent !== "preload") {
-            res =
-                "then" in res
-                    ? res.then(handleResponse)
-                    : handleResponse(res);
+            "then" in res
+                ? res.then(handleResponse(false), handleResponse(true))
+                : handleResponse(false)(res);
         }
         if (cached) {
             cached[0] = now;
@@ -86,29 +83,31 @@ export function cache(fn, name, options) {
         else
             cache.set(key, (cached = [now, res, intent, new Set(version ? [version] : [])]));
         return res;
-        function handleRedirect(response) {
-            startTransition(() => {
-                let url = response.headers.get(LocationHeader);
-                if (url && url.startsWith("/")) {
-                    navigate(url, {
-                        replace: true
-                    });
+        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;
                 }
-                else if (!isServer && url) {
-                    window.location.href = url;
-                }
-            });
-        }
-        function handleResponse(v) {
-            if (v instanceof Response && redirectStatusCodes.has(v.status)) {
-                if (navigate)
-                    isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
-                return;
-            }
-            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/createAsync.d.ts

@@ -2,4 +2,13 @@
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
 import { type Accessor } from "solid-js";
-export declare function createAsync<T>(fn: () => Promise<T>): Accessor<T | undefined>;
+export declare function createAsync<T>(fn: () => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+}): Accessor<T>;
+export declare function createAsync<T>(fn: () => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+}): Accessor<T | undefined>;

package/dist/data/createAsync.js

@@ -3,8 +3,8 @@
  */
 import { createResource, sharedConfig } from "solid-js";
 import { isServer } from "solid-js/web";
-export function createAsync(fn) {
-    const [resource] = createResource(() => subFetch(fn), v => v);
+export function createAsync(fn, options) {
+    const [resource] = createResource(() => subFetch(fn), v => v, options);
     return () => resource();
 }
 // mock promise while hydrating to prevent fetching

package/dist/data/index.d.ts

@@ -1,3 +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,3 +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/response.d.ts

@@ -0,0 +1 @@
+export declare function redirect(url: string, init?: number | ResponseInit): Response;

package/dist/data/response.js

@@ -0,0 +1,16 @@
+export function redirect(url, init = 302) {
+    let responseInit = init;
+    if (typeof responseInit === "number") {
+        responseInit = { status: responseInit };
+    }
+    else if (typeof responseInit.status === "undefined") {
+        responseInit.status = 302;
+    }
+    const headers = new Headers(responseInit.headers);
+    headers.set("Location", url);
+    const response = new Response(null, {
+        ...responseInit,
+        headers: headers
+    });
+    return response;
+}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isServer, delegateEvents, getRequestEvent, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { createSignal, onCleanup, getOwner, runWithOwner, createMemo, createContext, useContext, untrack, createRenderEffect, on, startTransition, createComponent, resetErrorBoundaries, children, createRoot, Show, mergeProps, splitProps, createResource, sharedConfig, $TRACK } from 'solid-js';
+import { createSignal, onCleanup, getOwner, runWithOwner, createMemo, createContext, useContext, untrack, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, createRoot, Show, mergeProps, splitProps, createResource, sharedConfig, $TRACK } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
 
 function bindEvent(target, type, handler) {
@@ -570,6 +570,16 @@ function createRouterContext(integration, getBranches, base = "") {
       return resolvePath(basePath, to);
     }
   };
+  const router = {
+    base: baseRoute,
+    location,
+    isRouting,
+    renderPath,
+    parsePath,
+    navigatorFactory,
+    beforeLeave,
+    submissions: createSignal(submissions)
+  };
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
     untrack(() => {
@@ -602,7 +612,12 @@ function createRouterContext(integration, getBranches, base = "") {
       if (resolvedTo !== current || nextState !== state()) {
         if (isServer) {
           const e = getRequestEvent();
-          e && (e.response = Response.redirect(resolvedTo, 302));
+          e && (e.response = new Response(null, {
+            status: 302,
+            headers: {
+              Location: resolvedTo
+            }
+          }));
           setSource({
             value: resolvedTo,
             replace,
@@ -758,7 +773,7 @@ function createRouterContext(integration, getBranches, base = "") {
       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.slice(7))(data);
+        actions.get(actionRef).call(router, data);
         evt.preventDefault();
       }
     }
@@ -794,16 +809,7 @@ function createRouterContext(integration, getBranches, base = "") {
     }
     submissions = initFromFlash(location.query);
   }
-  return {
-    base: baseRoute,
-    location,
-    isRouting,
-    renderPath,
-    parsePath,
-    navigatorFactory,
-    beforeLeave,
-    submissions: createSignal(submissions)
-  };
+  return router;
 }
 function createRouteContext(router, parent, outlet, match, params) {
   const {
@@ -841,7 +847,7 @@ 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 {
@@ -850,7 +856,7 @@ const Router = props => {
     base
   } = props;
   const integration = source || (isServer ? staticIntegration({
-    value: url || (e = getRequestEvent()) && e.request.url || ""
+    value: url || (e = getRequestEvent()) && getPath(e.request.url) || ""
   }) : pathIntegration());
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(props.root ? {
@@ -870,6 +876,10 @@ const Router = props => {
     }
   });
 };
+function getPath(url) {
+  const u = new URL(url);
+  return u.pathname + u.search;
+}
 function Routes(props) {
   const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   const params = createMemoObject(() => {
@@ -960,7 +970,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;
@@ -1006,8 +1016,8 @@ function Navigate(props) {
 /**
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
-function createAsync(fn) {
-  const [resource] = createResource(() => subFetch(fn), v => v);
+function createAsync(fn, options) {
+  const [resource] = createResource(() => subFetch(fn), v => v, options);
   return () => resource();
 }
 
@@ -1102,10 +1112,9 @@ 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(cached[1]);
-        cached[2] = intent;
       }
       if (!isServer && intent === "navigate") {
+        "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
         startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
       }
 
@@ -1119,7 +1128,7 @@ function cache(fn, name, options) {
       sharedConfig.context && sharedConfig.context.serialize(key, res);
     }
     if (intent !== "preload") {
-      res = "then" in res ? res.then(handleResponse) : handleResponse(res);
+      "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
     }
     if (cached) {
       cached[0] = now;
@@ -1131,26 +1140,28 @@ function cache(fn, name, options) {
       }
     } else cache.set(key, cached = [now, res, intent, new Set(version ? [version] : [])]);
     return res;
-    function handleRedirect(response) {
-      startTransition(() => {
-        let url = response.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;
         }
-      });
-    }
-    function handleResponse(v) {
-      if (v instanceof Response && redirectStatusCodes.has(v.status)) {
-        if (navigate) isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
-        return;
-      }
-      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];
+      };
     }
   };
 }
@@ -1189,12 +1200,23 @@ function useSubmission(fn, filter) {
     }
   };
 }
+function useAction(action) {
+  const router = useRouter();
+  return action.bind(router);
+}
 function action(fn, name) {
   function mutate(variables) {
     const p = 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();
+      return data;
+    }
     router.submissions[1](s => [...s, submission = {
       input: variables,
       url,
@@ -1210,36 +1232,14 @@ function action(fn, name) {
       retry() {
         setResult(undefined);
         const p = fn(variables);
-        p.then(async data => {
-          const keys = handleResponse(data, router.navigatorFactory());
-          await revalidate(keys);
-          data ? setResult({
-            data
-          }) : submission.clear();
-          return data;
-        }).catch(error => {
-          setResult({
-            data: error
-          });
-        });
+        p.then(handler, handler);
         return p;
       }
     }]);
-    p.then(async data => {
-      const keys = handleResponse(data, router.navigatorFactory());
-      await revalidate(keys);
-      data ? setResult({
-        data
-      }) : submission.clear();
-      return data;
-    }).catch(error => {
-      setResult({
-        data: error
-      });
-    });
+    p.then(handler, handler);
     return p;
   }
-  const url = fn.url || `action:${name}` || !isServer ? `action:${fn.name}` : "";
+  const url = fn.url || name && `action:${name}` || (!isServer ? `action:${fn.name}` : "");
   mutate.toString = () => {
     if (!url) throw new Error("Client Actions need explicit names if server rendered");
     return url;
@@ -1247,7 +1247,8 @@ function action(fn, name) {
   if (!isServer) registerAction(url, mutate);
   return mutate;
 }
-function handleResponse(response, navigate) {
+async function handleResponse(response, navigate) {
+  let data;
   if (response instanceof Response && redirectStatusCodes.has(response.status)) {
     const locationUrl = response.headers.get("Location") || "/";
     if (locationUrl.startsWith("http")) {
@@ -1255,9 +1256,28 @@ function handleResponse(response, navigate) {
     } else {
       navigate(locationUrl);
     }
+  } else data = response;
+  // TODO: handle keys
+  await revalidate();
+  return data;
+}
+
+function redirect(url, init = 302) {
+  let responseInit = init;
+  if (typeof responseInit === "number") {
+    responseInit = {
+      status: responseInit
+    };
+  } else if (typeof responseInit.status === "undefined") {
+    responseInit.status = 302;
   }
-  // return keys
-  return;
+  const headers = new Headers(responseInit.headers);
+  headers.set("Location", url);
+  const response = new Response(null, {
+    ...responseInit,
+    headers: headers
+  });
+  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, 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.js

@@ -217,6 +217,16 @@ export function createRouterContext(integration, getBranches, base = "") {
             return resolvePath(basePath, to);
         }
     };
+    const router = {
+        base: baseRoute,
+        location,
+        isRouting,
+        renderPath,
+        parsePath,
+        navigatorFactory,
+        beforeLeave,
+        submissions: createSignal(submissions)
+    };
     function navigateFromRoute(route, to, options) {
         // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
         untrack(() => {
@@ -249,7 +259,8 @@ export function createRouterContext(integration, getBranches, base = "") {
             if (resolvedTo !== current || nextState !== state()) {
                 if (isServer) {
                     const e = getRequestEvent();
-                    e && (e.response = Response.redirect(resolvedTo, 302));
+                    e &&
+                        (e.response = new Response(null, { status: 302, headers: { Location: resolvedTo } }));
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
                 else if (beforeLeave.confirm(resolvedTo, options)) {
@@ -413,7 +424,7 @@ export function createRouterContext(integration, getBranches, base = "") {
             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.slice(7))(data);
+                actions.get(actionRef).call(router, data);
                 evt.preventDefault();
             }
         }
@@ -451,16 +462,7 @@ export function createRouterContext(integration, getBranches, base = "") {
         }
         submissions = initFromFlash(location.query);
     }
-    return {
-        base: baseRoute,
-        location,
-        isRouting,
-        renderPath,
-        parsePath,
-        navigatorFactory,
-        beforeLeave,
-        submissions: createSignal(submissions)
-    };
+    return router;
 }
 export function createRouteContext(router, parent, outlet, match, params) {
     const { base, location } = router;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.10.0-beta.1",
+  "version": "0.10.0-beta.3",
   "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"