@solidjs/router 0.11.5 → 0.12.1

package/README.md

@@ -29,7 +29,6 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
   - [useLocation](#uselocation)
   - [useSearchParams](#usesearchparams)
   - [useIsRouting](#useisrouting)
-  - [useRouteData](#useroutedata)
   - [useMatch](#usematch)
   - [useBeforeLeave](#usebeforeleave)
 - [SPAs in Deployed Environments](#spas-in-deployed-environments)
@@ -490,7 +489,7 @@ You can revalidate the cache using the `revalidate` method or you can set `reval
 This is light wrapper over `createResource` that aims to serve as stand-in for a future primitive we intend to bring to Solid core in 2.0. It is a simpler async primitive where the function tracks like `createMemo` and it expects a promise back that it turns into a Signal. Reading it before it is ready causes Suspense/Transitions to trigger.
 
 ```jsx
-const user = createAsync(() => getUser(params.id))
+const user = createAsync((currentValue) => getUser(params.id))
 ```
 
 Using `cache` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
@@ -674,7 +673,7 @@ render(() => <Router>{route}</Router>, document.getElementById("app"));
 
 ### Hash Mode Router
 
-By default, Solid Router uses `location.pathname` as route path. You can simply switch to hash mode through the `source` property on `<Router>` component.
+By default, Solid Router uses `location.pathname` as route path. You can simply switch to hash mode through using `<HashRouter>`.
 
 ```jsx
 import { HashRouter } from "@solidjs/router";

package/dist/data/cache.d.ts

@@ -1,12 +1,11 @@
-import { type ReconcileOptions } from "solid-js/store";
 import { CacheEntry } from "../types.js";
 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) => U | Response, U> = T & {
-    keyFor: (...args: Parameters<T>) => string;
+export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends A ? (...args: never[]) => R : T) & {
+    keyFor: (...args: A) => string;
     key: string;
-};
-export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): CachedFunction<T, U>;
+} : never;
+export declare function cache<T extends (...args: any) => any>(fn: T, name: string): CachedFunction<T>;
 export declare namespace cache {
     var set: (key: string, value: any) => void;
     var clear: () => void;

package/dist/data/cache.js

@@ -1,5 +1,4 @@
 import { createSignal, getListener, getOwner, onCleanup, sharedConfig, startTransition } from "solid-js";
-import { createStore, reconcile } from "solid-js/store";
 import { getRequestEvent, isServer } from "solid-js/web";
 import { useNavigate, getIntent } from "../routing.js";
 const LocationHeader = "Location";
@@ -41,8 +40,7 @@ export function cacheKeyOp(key, fn) {
             fn(cacheMap.get(k));
     }
 }
-export function cache(fn, name, options) {
-    const [store, setStore] = createStore({});
+export function cache(fn, name) {
     // prioritize GET for server functions
     if (fn.GET)
         fn = fn.GET;
@@ -99,15 +97,6 @@ export function cache(fn, name, options) {
         let res = !isServer && sharedConfig.context && sharedConfig.has(key)
             ? sharedConfig.load(key) // hydrating
             : fn(...args);
-        // 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) {
             cached[0] = now;
             cached[1] = res;
@@ -122,12 +111,25 @@ export function cache(fn, name, options) {
             cached[3].count++;
             cached[3][0](); // track
         }
+        if (isServer) {
+            const e = getRequestEvent();
+            e && e.router.dataOnly && (e.router.data[key] = res);
+            return res;
+        }
         if (intent !== "preload") {
             res =
                 "then" in res
                     ? res.then(handleResponse(false), handleResponse(true))
                     : handleResponse(false)(res);
         }
+        // serialize on server
+        if (isServer &&
+            sharedConfig.context &&
+            sharedConfig.context.async &&
+            !sharedConfig.context.noHydrate) {
+            const e = getRequestEvent();
+            (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
+        }
         return res;
         function handleResponse(error) {
             return async (v) => {
@@ -153,10 +155,7 @@ export function cache(fn, name, options) {
                 }
                 if (error)
                     throw v;
-                if (isServer)
-                    return v;
-                setStore(key, reconcile(v, options));
-                return store[key];
+                return v;
             };
         }
     });

package/dist/data/createAsync.d.ts

@@ -2,13 +2,26 @@
  * 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>, options: {
+import { type ReconcileOptions } from "solid-js/store";
+export declare function createAsync<T>(fn: (prev: T) => Promise<T>, options: {
     name?: string;
     initialValue: T;
     deferStream?: boolean;
 }): Accessor<T>;
-export declare function createAsync<T>(fn: () => Promise<T>, options?: {
+export declare function createAsync<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
     name?: string;
     initialValue?: T;
     deferStream?: boolean;
 }): Accessor<T | undefined>;
+export declare function createAsyncStore<T>(fn: (prev: T) => Promise<T>, options: {
+    name?: string;
+    initialValue: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): Accessor<T>;
+export declare function createAsyncStore<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
+    name?: string;
+    initialValue?: T;
+    deferStream?: boolean;
+    reconcile?: ReconcileOptions;
+}): Accessor<T | undefined>;

package/dist/data/createAsync.js

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

package/dist/data/index.d.ts

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

package/dist/data/index.js

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

package/dist/index.js

@@ -1,6 +1,6 @@
 import { isServer, getRequestEvent, createComponent as createComponent$1, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, createRoot, Show, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
-import { createStore, reconcile } from 'solid-js/store';
+import { createStore, reconcile, unwrap } from 'solid-js/store';
 
 function createBeforeLeave() {
   let listeners = new Set();
@@ -467,6 +467,7 @@ function createRouterContext(integration, getBranches, options = {}) {
       }
     });
   });
+  const owner = getOwner();
   return {
     base: baseRoute,
     location,
@@ -577,7 +578,10 @@ function createRouterContext(integration, getBranches, options = {}) {
         params
       } = matches[match];
       route.component && route.component.preload && route.component.preload();
-      preloadData && route.load && route.load({
+      const {
+        load
+      } = route;
+      preloadData && load && runWithOwner(owner, () => load({
         params,
         location: {
           pathname: url.pathname,
@@ -588,7 +592,7 @@ function createRouterContext(integration, getBranches, options = {}) {
           key: ""
         },
         intent: "preload"
-      });
+      }));
     }
     intent = prevIntent;
   }
@@ -879,8 +883,7 @@ function cacheKeyOp(key, fn) {
     if (key === undefined || matchKey(k, key)) fn(cacheMap.get(k));
   }
 }
-function cache(fn, name, options) {
-  const [store, setStore] = createStore({});
+function cache(fn, name) {
   // prioritize GET for server functions
   if (fn.GET) fn = fn.GET;
   const cachedFn = (...args) => {
@@ -927,13 +930,6 @@ function cache(fn, name, options) {
     }
     let res = !isServer && sharedConfig.context && sharedConfig.has(key) ? sharedConfig.load(key) // hydrating
     : fn(...args);
-
-    // 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) {
       cached[0] = now;
       cached[1] = res;
@@ -947,9 +943,19 @@ function cache(fn, name, options) {
       cached[3].count++;
       cached[3][0](); // track
     }
+    if (isServer) {
+      const e = getRequestEvent();
+      e && e.router.dataOnly && (e.router.data[key] = res);
+      return res;
+    }
     if (intent !== "preload") {
       res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
     }
+    // serialize on server
+    if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
+      const e = getRequestEvent();
+      (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
+    }
     return res;
     function handleResponse(error) {
       return async v => {
@@ -972,9 +978,7 @@ function cache(fn, name, options) {
           if (v.customBody) v = await v.customBody();
         }
         if (error) throw v;
-        if (isServer) return v;
-        setStore(key, reconcile(v, options));
-        return store[key];
+        return v;
       };
     }
   };
@@ -1447,9 +1451,30 @@ function Navigate(props) {
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
 function createAsync(fn, options) {
-  const [resource] = createResource(() => subFetch(fn), v => v, options);
+  let resource;
+  let prev = () => !resource || resource.state === "unresolved" ? undefined : resource.latest;
+  [resource] = createResource(() => subFetch(fn, untrack(prev)), v => v, options);
   return () => resource();
 }
+function createAsyncStore(fn, options = {}) {
+  let resource;
+  let prev = () => !resource || resource.state === "unresolved" ? undefined : unwrap(resource.latest);
+  [resource] = createResource(() => subFetch(fn, untrack(prev)), v => v, {
+    ...options,
+    storage: init => createDeepSignal(init, options.reconcile)
+  });
+  return () => resource();
+}
+function createDeepSignal(value, options) {
+  const [store, setStore] = createStore({
+    value
+  });
+  return [() => store.value, v => {
+    typeof v === "function" && (v = v());
+    setStore("value", reconcile(v, options));
+    return store.value;
+  }];
+}
 
 // mock promise while hydrating to prevent fetching
 class MockPromise {
@@ -1481,14 +1506,14 @@ class MockPromise {
     return new MockPromise();
   }
 }
-function subFetch(fn) {
-  if (isServer || !sharedConfig.context) return fn();
+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();
+    return fn(prev);
   } finally {
     window.fetch = ogFetch;
     Promise = ogPromise;
@@ -1548,4 +1573,4 @@ function json(data, init = {}) {
   return response;
 }
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/routing.js

@@ -1,3 +1,4 @@
+import { getOwner, runWithOwner } from "solid-js";
 import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";
 import { isServer, getRequestEvent } from "solid-js/web";
 import { createBeforeLeave } from "./lifecycle.js";
@@ -236,6 +237,7 @@ export function createRouterContext(integration, getBranches, options = {}) {
             }
         });
     });
+    const owner = getOwner();
     return {
         base: baseRoute,
         location,
@@ -331,9 +333,10 @@ export function createRouterContext(integration, getBranches, options = {}) {
             route.component &&
                 route.component.preload &&
                 route.component.preload();
+            const { load } = route;
             preloadData &&
-                route.load &&
-                route.load({
+                load &&
+                runWithOwner(owner, () => load({
                     params,
                     location: {
                         pathname: url.pathname,
@@ -344,7 +347,7 @@ export function createRouterContext(integration, getBranches, options = {}) {
                         key: ""
                     },
                     intent: "preload"
-                });
+                }));
         }
         intent = prevIntent;
     }

package/package.json

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