@solidjs/router 0.11.4 → 0.12.0

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;
@@ -89,8 +87,8 @@ export function cache(fn, name, options) {
             let res = cached[1];
             if (intent !== "preload") {
                 res =
-                    "then" in cached[1]
-                        ? cached[1].then(handleResponse(false), handleResponse(true))
+                    "then" in (cached[1])
+                        ? (cached[1]).then(handleResponse(false), handleResponse(true))
                         : handleResponse(false)(cached[1]);
                 !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
             }
@@ -124,8 +122,8 @@ export function cache(fn, name, options) {
         }
         if (intent !== "preload") {
             res =
-                "then" in res
-                    ? res.then(handleResponse(false), handleResponse(true))
+                "then" in (res)
+                    ? (res).then(handleResponse(false), handleResponse(true))
                     : handleResponse(false)(res);
         }
         return res;
@@ -153,10 +151,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();
@@ -641,6 +641,7 @@ const createRouterComponent = router => props => {
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(props.root ? {
     component: props.root,
+    load: props.rootLoad,
     children: routeDefs()
   } : routeDefs(), props.base || ""));
   const routerState = createRouterContext(router, branches, {
@@ -878,8 +879,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) => {
@@ -971,9 +971,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;
       };
     }
   };
@@ -1373,6 +1371,7 @@ function MemoryRouter(props) {
     get: memoryHistory.get,
     set: memoryHistory.set,
     init: memoryHistory.listen,
+    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
     utils: {
       go: memoryHistory.go
     }
@@ -1445,9 +1444,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 {
@@ -1479,14 +1499,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;
@@ -1546,4 +1566,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/routers/MemoryRouter.d.ts

@@ -17,5 +17,8 @@ export declare function createMemoryHistory(): {
 };
 export type MemoryRouterProps = BaseRouterProps & {
     history?: MemoryHistory;
+    actionBase?: string;
+    explicitLinks?: boolean;
+    preload?: boolean;
 };
 export declare function MemoryRouter(props: MemoryRouterProps): JSX.Element;

package/dist/routers/MemoryRouter.js

@@ -1,4 +1,5 @@
 import { createRouter, scrollToHash } from "./createRouter.js";
+import { setupNativeEvents } from "../data/events.js";
 export function createMemoryHistory() {
     const entries = ["/"];
     let index = 0;
@@ -45,6 +46,7 @@ export function MemoryRouter(props) {
         get: memoryHistory.get,
         set: memoryHistory.set,
         init: memoryHistory.listen,
+        create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
         utils: {
             go: memoryHistory.go
         }

package/dist/routers/components.d.ts

@@ -7,7 +7,7 @@ export type BaseRouterProps = {
      */
     root?: Component<RouteSectionProps>;
     rootLoad?: RouteLoadFunc;
-    singleFlight: boolean;
+    singleFlight?: boolean;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;

package/dist/routers/components.jsx

@@ -6,7 +6,7 @@ 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 branches = createMemo(() => createBranches(props.root ? { component: props.root, load: props.rootLoad, children: routeDefs() } : routeDefs(), props.base || ""));
     const routerState = createRouterContext(router, branches, { base, singleFlight: props.singleFlight });
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>

package/package.json

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