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

package/README.md

@@ -372,14 +372,12 @@ This cache can be defined anywhere and then used inside your components with:
 
 ### `createAsync`
 
-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 ready causes Suspense/Transitions to trigger.
+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))
 ```
 
-`createAsync` is designed to only work with cached functions otherwise it will over fetch. If not using `cache`, continue using `createResource` instead.
-
 ### `action`
 
 Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response builders can be found below(TODO).

package/dist/components.jsx

@@ -11,13 +11,8 @@ export const Router = (props) => {
         (isServer
             ? staticIntegration({ value: url || ((e = getRequestEvent()) && e.request.url) || "" })
             : pathIntegration());
-    const routeDefs = children(() => props.root
-        ? {
-            component: props.root,
-            children: props.children
-        }
-        : props.children);
-    const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+    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);
     return (<RouterContextObj.Provider value={routerState}>
       <Routes routerState={routerState} branches={branches()}/>

package/dist/data/cache.d.ts

@@ -1,3 +1,3 @@
 import { type ReconcileOptions } from "solid-js/store";
 export declare function revalidate(key?: string | any[] | void): Promise<void>;
-export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options: ReconcileOptions): T;
+export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): T;

package/dist/data/cache.js

@@ -61,7 +61,13 @@ export function cache(fn, name, options) {
             }
             return cached[1];
         }
-        let res = fn(...args);
+        let res = !isServer && sharedConfig.context && sharedConfig.load
+            ? sharedConfig.load(key) // hydrating
+            : fn(...args);
+        // serialize on server
+        if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
+            sharedConfig.context && sharedConfig.context.serialize(key, res);
+        }
         if (intent !== "preload") {
             res =
                 "then" in res
@@ -99,6 +105,8 @@ export function cache(fn, name, options) {
                     isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
                 return;
             }
+            if (isServer)
+                return v;
             setStore(key, reconcile(v, options));
             return store[key];
         }

package/dist/data/createAsync.d.ts

@@ -1,5 +1,5 @@
 /**
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
-import { Accessor } from "solid-js";
-export declare function createAsync<T>(fn: () => Promise<T>): Accessor<T>;
+import { type Accessor } from "solid-js";
+export declare function createAsync<T>(fn: () => Promise<T>): Accessor<T | undefined>;

package/dist/data/createAsync.js

@@ -1,8 +1,54 @@
 /**
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
-import { createResource } from "solid-js";
+import { createResource, sharedConfig } from "solid-js";
+import { isServer } from "solid-js/web";
 export function createAsync(fn) {
-    const [resource] = createResource(() => fn(), v => v);
+    const [resource] = createResource(() => subFetch(fn), v => v);
     return () => resource();
 }
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+    static all() {
+        return new MockPromise();
+    }
+    static allSettled() {
+        return new MockPromise();
+    }
+    static any() {
+        return new MockPromise();
+    }
+    static race() {
+        return new MockPromise();
+    }
+    static reject() {
+        return new MockPromise();
+    }
+    static resolve() {
+        return new MockPromise();
+    }
+    catch() {
+        return new MockPromise();
+    }
+    then() {
+        return new MockPromise();
+    }
+    finally() {
+        return new MockPromise();
+    }
+}
+function subFetch(fn) {
+    if (isServer || !sharedConfig.context)
+        return fn();
+    const ogFetch = fetch;
+    const ogPromise = Promise;
+    try {
+        window.fetch = () => new MockPromise();
+        Promise = MockPromise;
+        return fn();
+    }
+    finally {
+        window.fetch = ogFetch;
+        Promise = ogPromise;
+    }
+}

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export * from "./lifecycle";
 export { useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";
 export * from "./data";
-export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";
+export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";

package/dist/index.js

@@ -501,7 +501,7 @@ function createLocation(path, state) {
   const pathname = createMemo(() => url().pathname);
   const search = createMemo(() => url().search, true);
   const hash = createMemo(() => url().hash);
-  const key = createMemo(() => "");
+  const key = () => "";
   return {
     get pathname() {
       return pathname();
@@ -703,9 +703,9 @@ function createRouterContext(integration, getBranches, base = "") {
         state: state && JSON.parse(state)
       });
     }
-    function doPreload(a, path) {
+    function doPreload(a, url) {
       const preload = a.getAttribute("preload") !== "false";
-      const matches = getRouteMatches(getBranches(), path);
+      const matches = getRouteMatches(getBranches(), url.pathname);
       const prevIntent = intent;
       intent = "preload";
       for (let match in matches) {
@@ -716,7 +716,15 @@ function createRouterContext(integration, getBranches, base = "") {
         route.component && route.component.preload && route.component.preload();
         preload && route.load && route.load({
           params,
-          location
+          location: {
+            pathname: url.pathname,
+            search: url.search,
+            hash: url.hash,
+            query: extractSearchParams(url),
+            state: null,
+            key: ""
+          },
+          intent
         });
       }
       intent = prevIntent;
@@ -725,7 +733,7 @@ function createRouterContext(integration, getBranches, base = "") {
       const res = handleAnchor(evt);
       if (!res) return;
       const [a, url] = res;
-      if (!preloadTimeout[url.pathname]) doPreload(a, url.pathname);
+      if (!preloadTimeout[url.pathname]) doPreload(a, url);
     }
     function handleAnchorIn(evt) {
       const res = handleAnchor(evt);
@@ -733,9 +741,9 @@ function createRouterContext(integration, getBranches, base = "") {
       const [a, url] = res;
       if (preloadTimeout[url.pathname]) return;
       preloadTimeout[url.pathname] = setTimeout(() => {
-        doPreload(a, url.pathname);
+        doPreload(a, url);
         delete preloadTimeout[url.pathname];
-      }, 50);
+      }, 200);
     }
     function handleAnchorOut(evt) {
       const res = handleAnchor(evt);
@@ -827,7 +835,8 @@ function createRouteContext(router, parent, outlet, match, params) {
   component && component.preload && component.preload();
   load && load({
     params,
-    location
+    location,
+    intent: intent || "navigate"
   });
   return route;
 }
@@ -843,11 +852,11 @@ const Router = props => {
   const integration = source || (isServer ? staticIntegration({
     value: url || (e = getRequestEvent()) && e.request.url || ""
   }) : pathIntegration());
-  const routeDefs = children(() => props.root ? {
+  const routeDefs = children(() => props.children);
+  const branches = createMemo(() => createBranches(props.root ? {
     component: props.root,
-    children: props.children
-  } : props.children);
-  const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+    children: routeDefs()
+  } : routeDefs(), props.base || ""));
   const routerState = createRouterContext(integration, branches, base);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
@@ -998,10 +1007,54 @@ function Navigate(props) {
  * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
  */
 function createAsync(fn) {
-  const [resource] = createResource(() => fn(), v => v);
+  const [resource] = createResource(() => subFetch(fn), v => v);
   return () => resource();
 }
 
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+  static all() {
+    return new MockPromise();
+  }
+  static allSettled() {
+    return new MockPromise();
+  }
+  static any() {
+    return new MockPromise();
+  }
+  static race() {
+    return new MockPromise();
+  }
+  static reject() {
+    return new MockPromise();
+  }
+  static resolve() {
+    return new MockPromise();
+  }
+  catch() {
+    return new MockPromise();
+  }
+  then() {
+    return new MockPromise();
+  }
+  finally() {
+    return new MockPromise();
+  }
+}
+function subFetch(fn) {
+  if (isServer || !sharedConfig.context) return fn();
+  const ogFetch = fetch;
+  const ogPromise = Promise;
+  try {
+    window.fetch = () => new MockPromise();
+    Promise = MockPromise;
+    return fn();
+  } finally {
+    window.fetch = ogFetch;
+    Promise = ogPromise;
+  }
+}
+
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
 let cacheMap = new Map();
@@ -1058,7 +1111,13 @@ function cache(fn, name, options) {
 
       return cached[1];
     }
-    let res = fn(...args);
+    let res = !isServer && sharedConfig.context && sharedConfig.load ? sharedConfig.load(key) // hydrating
+    : fn(...args);
+
+    // serialize on server
+    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(res);
     }
@@ -1089,6 +1148,7 @@ function cache(fn, name, options) {
         if (navigate) isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
         return;
       }
+      if (isServer) return v;
       setStore(key, reconcile(v, options));
       return store[key];
     }

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
-import type { JSX, Accessor } from "solid-js";
-import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, MatchFilters, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
+import { JSX, Accessor } from "solid-js";
+import type { BeforeLeaveEventArgs, Branch, Intent, Location, LocationChangeSignal, MatchFilters, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
 export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
 export declare const useRouter: () => RouterContext;
@@ -19,6 +19,6 @@ export declare function createBranches(routeDef: RouteDefinition | RouteDefiniti
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
 export declare function registerAction(url: string, fn: Function): void;
-export declare function getIntent(): "native" | "navigate" | "preload" | undefined;
+export declare function getIntent(): Intent | undefined;
 export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, getBranches?: () => Branch[], base?: string): RouterContext;
 export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;

package/dist/routing.js

@@ -153,7 +153,7 @@ export function createLocation(path, state) {
     const pathname = createMemo(() => url().pathname);
     const search = createMemo(() => url().search, true);
     const hash = createMemo(() => url().hash);
-    const key = createMemo(() => "");
+    const key = () => "";
     return {
         get pathname() {
             return pathname();
@@ -352,9 +352,9 @@ export function createRouterContext(integration, getBranches, base = "") {
                 state: state && JSON.parse(state)
             });
         }
-        function doPreload(a, path) {
+        function doPreload(a, url) {
             const preload = a.getAttribute("preload") !== "false";
-            const matches = getRouteMatches(getBranches(), path);
+            const matches = getRouteMatches(getBranches(), url.pathname);
             const prevIntent = intent;
             intent = "preload";
             for (let match in matches) {
@@ -362,7 +362,20 @@ export function createRouterContext(integration, getBranches, base = "") {
                 route.component &&
                     route.component.preload &&
                     route.component.preload();
-                preload && route.load && route.load({ params, location });
+                preload &&
+                    route.load &&
+                    route.load({
+                        params,
+                        location: {
+                            pathname: url.pathname,
+                            search: url.search,
+                            hash: url.hash,
+                            query: extractSearchParams(url),
+                            state: null,
+                            key: ""
+                        },
+                        intent
+                    });
             }
             intent = prevIntent;
         }
@@ -372,7 +385,7 @@ export function createRouterContext(integration, getBranches, base = "") {
                 return;
             const [a, url] = res;
             if (!preloadTimeout[url.pathname])
-                doPreload(a, url.pathname);
+                doPreload(a, url);
         }
         function handleAnchorIn(evt) {
             const res = handleAnchor(evt);
@@ -382,9 +395,9 @@ export function createRouterContext(integration, getBranches, base = "") {
             if (preloadTimeout[url.pathname])
                 return;
             preloadTimeout[url.pathname] = setTimeout(() => {
-                doPreload(a, url.pathname);
+                doPreload(a, url);
                 delete preloadTimeout[url.pathname];
-            }, 50);
+            }, 200);
         }
         function handleAnchorOut(evt) {
             const res = handleAnchor(evt);
@@ -397,14 +410,13 @@ export function createRouterContext(integration, getBranches, base = "") {
             }
         }
         function handleFormSubmit(evt) {
-            let actionRef = evt.submitter && evt.submitter.getAttribute("formaction") || evt.target.action;
+            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);
                 evt.preventDefault();
             }
         }
-        ;
         // ensure delegated event run first
         delegateEvents(["click", "submit"]);
         document.addEventListener("click", handleAnchorClick);
@@ -429,11 +441,13 @@ export function createRouterContext(integration, getBranches, base = "") {
                 return [];
             }
             const input = new Map(param.entries);
-            return [{
+            return [
+                {
                     url: param.url,
                     result: param.error ? new Error(param.result.message) : param.result,
                     input: input
-                }];
+                }
+            ];
         }
         submissions = initFromFlash(location.query);
     }
@@ -473,6 +487,6 @@ export function createRouteContext(router, parent, outlet, match, params) {
     component &&
         component.preload &&
         component.preload();
-    load && load({ params, location });
+    load && load({ params, location, intent: intent || "navigate" });
     return route;
 }

package/dist/types.d.ts

@@ -39,16 +39,20 @@ export interface RouterIntegration {
     signal: LocationChangeSignal;
     utils?: Partial<RouterUtils>;
 }
+export type Intent = "native" | "navigate" | "preload";
 export interface RouteLoadFuncArgs {
     params: Params;
     location: Location;
+    intent: Intent;
 }
 export type RouteLoadFunc = (args: RouteLoadFuncArgs) => void;
-export interface RouteSectionProps extends RouteLoadFuncArgs {
+export interface RouteSectionProps {
+    params: Params;
+    location: Location;
     children?: JSX.Element;
 }
 export type RouteDefinition<S extends string | string[] = any> = {
-    path: S;
+    path?: S;
     matchFilters?: MatchFilters<S>;
     load?: RouteLoadFunc;
     children?: RouteDefinition | RouteDefinition[];

package/package.json

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