@solidjs/router 0.17.0-next.0 → 0.17.0-next.2

package/dist/index.js

@@ -380,7 +380,7 @@ const useCurrentMatches = () => useRouter().matches;
  * const params = useParams();
  * 
  * // fetch user based on the id path parameter
- * const [user] = createResource(() => params.id, fetchUser);
+ * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
 const useParams = () => useRouter().params;
@@ -551,7 +551,7 @@ function getRouteMatches(branches, location) {
 }
 function createLocation(path, state, queryWrapper) {
   const origin = new URL(mockBase);
-  const url = createMemo(prev => {
+  const url = createMemo((prev = origin) => {
     const path_ = path();
     try {
       return new URL(path_, origin);
@@ -559,11 +559,11 @@ function createLocation(path, state, queryWrapper) {
       console.error(`Invalid path ${path_}`);
       return prev;
     }
-  }, origin, {
+  }, {
     equals: (a, b) => a.href === b.href
   });
   const pathname = createMemo(() => url().pathname);
-  const search = createMemo(() => url().search, true);
+  const search = createMemo(() => url().search);
   const hash = createMemo(() => url().hash);
   const key = () => "";
   const queryFn = createMemo(() => extractSearchParams(url()));
@@ -606,9 +606,10 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   const renderPath = utils.renderPath || (p => p);
   const beforeLeave = utils.beforeLeave || createBeforeLeave();
   const basePath = resolvePath("", options.base || "");
+  const initialSource = untrack(source);
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
-  } else if (basePath && !source().value) {
+  } else if (basePath && !initialSource.value) {
     setSource({
       value: basePath,
       replace: true,
@@ -616,12 +617,12 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     });
   }
   const [isRouting, setIsRouting] = createSignal(false, {
-    pureWrite: true
+    ownedWrite: true
   });
 
   // Navigate override written from event handlers.
   const [navigateTarget, setNavigateTarget] = createSignal(undefined, {
-    pureWrite: true
+    ownedWrite: true
   });
 
   // Keep track of last target, so that last call to navigate wins
@@ -629,20 +630,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
 
   // source() remains canonical for native history changes; navigateTarget()
   // temporarily overrides it for in-flight programmatic navigation.
-  const reference = createMemo(() => {
-    const nav = navigateTarget();
-    if (nav !== undefined) return nav.value;
-    return source().value;
-  });
-  const state = createMemo(() => {
-    const nav = navigateTarget();
-    if (nav !== undefined) return nav.state;
-    return source().state;
-  });
-  const location = createLocation(reference, state, utils.queryWrapper);
+  const effective = createMemo(() => navigateTarget() ?? source());
+  const location = createLocation(() => effective().value, () => effective().state, utils.queryWrapper);
   const referrers = [];
   const submissions = createSignal(isServer ? initFromFlash() : [], {
-    pureWrite: true
+    ownedWrite: true
   });
   const matches = createMemo(() => {
     if (typeof options.transformUrl === "function") {
@@ -710,8 +702,8 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       } else if (referrers.length >= MAX_REDIRECTS) {
         throw new Error("Too many redirects");
       }
-      const current = reference();
-      if (resolvedTo !== current || nextState !== state()) {
+      const current = effective();
+      if (resolvedTo !== current.value || nextState !== current.state) {
         if (isServer) {
           const e = getRequestEvent();
           e && (e.response = {
@@ -728,10 +720,10 @@ function createRouterContext(integration, branches, getContext, options = {}) {
           });
         } else if (beforeLeave.confirm(resolvedTo, options)) {
           referrers.push({
-            value: current,
+            value: current.value,
             replace,
             scroll,
-            state: state()
+            state: current.state
           });
           const newTarget = {
             value: resolvedTo,
@@ -855,17 +847,29 @@ function createRouteContext(router, parent, outlet, match) {
   return route;
 }
 
-const createRouterComponent = router => props => {
+const createRouterComponent = router => function IntegratedRouter(props) {
   const {
-    base
-  } = props;
-  const routeDefs = children(() => props.children);
-  const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+    base,
+    singleFlight,
+    transformUrl,
+    root,
+    rootPreload,
+    routeChildren
+  } = untrack(() => ({
+    base: props.base,
+    singleFlight: props.singleFlight,
+    transformUrl: props.transformUrl,
+    root: props.root,
+    rootPreload: props.rootPreload,
+    routeChildren: props.children
+  }));
+  const routeDefs = children(() => routeChildren);
+  const branches = createMemo(() => createBranches(routeDefs(), base || ""));
   let context;
   const routerState = createRouterContext(router, branches, () => context, {
     base,
-    singleFlight: props.singleFlight,
-    transformUrl: props.transformUrl
+    singleFlight,
+    transformUrl
   });
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj, {
@@ -873,12 +877,8 @@ const createRouterComponent = router => props => {
     get children() {
       return createComponent$1(Root, {
         routerState: routerState,
-        get root() {
-          return props.root;
-        },
-        get preload() {
-          return props.rootPreload;
-        },
+        root: root,
+        preload: rootPreload,
         get children() {
           return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
             routerState: routerState,
@@ -972,8 +972,9 @@ function Routes(props) {
     root = next[0];
     prevMatches = nextMatches;
     return next;
-  }, undefined);
-  return createOutlet(() => routeStates() && root)();
+  });
+  const outlet = createOutlet(() => routeStates() && root);
+  return memo(outlet);
 }
 const createOutlet = child => {
   return () => {
@@ -1017,21 +1018,20 @@ function dataOnly(event, routerState, branches) {
   }
 }
 
-function intercept([value, setValue], get, set) {
-  return [value, set ? v => setValue(set(v)) : setValue];
-}
 function createRouter(config) {
   let ignore = false;
   const wrap = value => typeof value === "string" ? {
     value
   } : value;
-  const signal = intercept(createSignal(wrap(config.get()), {
-    equals: (a, b) => a.value === b.value && a.state === b.state
-  }), undefined, next => {
+  const [read, write] = createSignal(wrap(config.get()), {
+    equals: (a, b) => a.value === b.value && a.state === b.state,
+    ownedWrite: true
+  });
+  const signal = [read, next => {
     !ignore && config.set(next);
     if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = true;
-    return next;
-  });
+    write(next);
+  }];
   config.init && onCleanup(config.init((value = config.get()) => {
     ignore = true;
     signal[1](wrap(value));
@@ -1752,7 +1752,7 @@ function A(props) {
       get ["aria-current"]() {
         return isActive()[1] ? "page" : undefined;
       }
-    }), false, false);
+    }), false);
     return _el$;
   })();
 }

package/dist/routers/components.jsx

@@ -2,19 +2,26 @@
 import { children, createMemo, createRoot, getOwner, merge, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
 import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
-export const createRouterComponent = (router) => (props) => {
-    const { base } = props;
-    const routeDefs = children(() => props.children);
-    const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+export const createRouterComponent = (router) => function IntegratedRouter(props) {
+    const { base, singleFlight, transformUrl, root, rootPreload, routeChildren } = untrack(() => ({
+        base: props.base,
+        singleFlight: props.singleFlight,
+        transformUrl: props.transformUrl,
+        root: props.root,
+        rootPreload: props.rootPreload,
+        routeChildren: props.children
+    }));
+    const routeDefs = children(() => routeChildren);
+    const branches = createMemo(() => createBranches(routeDefs(), base || ""));
     let context;
     const routerState = createRouterContext(router, branches, () => context, {
         base,
-        singleFlight: props.singleFlight,
-        transformUrl: props.transformUrl,
+        singleFlight,
+        transformUrl,
     });
     router.create && router.create(routerState);
     return (<RouterContextObj value={routerState}>
-      <Root routerState={routerState} root={props.root} preload={props.rootPreload}>
+      <Root routerState={routerState} root={root} preload={rootPreload}>
         {(context = getOwner()) && null}
         <Routes routerState={routerState} branches={branches()}/>
       </Root>
@@ -90,8 +97,9 @@ function Routes(props) {
         root = next[0];
         prevMatches = nextMatches;
         return next;
-    }, undefined);
-    return createOutlet(() => routeStates() && root)();
+    });
+    const outlet = createOutlet(() => routeStates() && root);
+    return <>{outlet()}</>;
 }
 const createOutlet = (child) => {
     return () => {

package/dist/routers/createRouter.js

@@ -1,19 +1,18 @@
 import { createSignal, onCleanup, sharedConfig } from "solid-js";
 import { createRouterComponent } from "./components.jsx";
-function intercept([value, setValue], get, set) {
-    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
-}
 export function createRouter(config) {
     let ignore = false;
     const wrap = (value) => (typeof value === "string" ? { value } : value);
-    const signal = intercept(createSignal(wrap(config.get()), {
-        equals: (a, b) => a.value === b.value && a.state === b.state
-    }), undefined, next => {
-        !ignore && config.set(next);
-        if (sharedConfig.registry && !sharedConfig.done)
-            sharedConfig.done = true;
-        return next;
+    const [read, write] = createSignal(wrap(config.get()), {
+        equals: (a, b) => a.value === b.value && a.state === b.state,
+        ownedWrite: true
     });
+    const signal = [read, (next) => {
+            !ignore && config.set(next);
+            if (sharedConfig.registry && !sharedConfig.done)
+                sharedConfig.done = true;
+            write(next);
+        }];
     config.init &&
         onCleanup(config.init((value = config.get()) => {
             ignore = true;

package/dist/routing.d.ts

@@ -100,7 +100,7 @@ export declare const useCurrentMatches: () => () => RouteMatch[];
  * const params = useParams();
  *
  * // fetch user based on the id path parameter
- * const [user] = createResource(() => params.id, fetchUser);
+ * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
 export declare const useParams: <T extends Params>() => T;

package/dist/routing.js

@@ -133,7 +133,7 @@ export const useCurrentMatches = () => useRouter().matches;
  * const params = useParams();
  *
  * // fetch user based on the id path parameter
- * const [user] = createResource(() => params.id, fetchUser);
+ * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
 export const useParams = () => useRouter().params;
@@ -301,7 +301,7 @@ export function getRouteMatches(branches, location) {
 }
 function createLocation(path, state, queryWrapper) {
     const origin = new URL(mockBase);
-    const url = createMemo(prev => {
+    const url = createMemo((prev = origin) => {
         const path_ = path();
         try {
             return new URL(path_, origin);
@@ -310,11 +310,11 @@ function createLocation(path, state, queryWrapper) {
             console.error(`Invalid path ${path_}`);
             return prev;
         }
-    }, origin, {
+    }, {
         equals: (a, b) => a.href === b.href
     });
     const pathname = createMemo(() => url().pathname);
-    const search = createMemo(() => url().search, true);
+    const search = createMemo(() => url().search);
     const hash = createMemo(() => url().hash);
     const key = () => "";
     const queryFn = createMemo(() => extractSearchParams(url()));
@@ -354,37 +354,27 @@ export function createRouterContext(integration, branches, getContext, options =
     const renderPath = utils.renderPath || (p => p);
     const beforeLeave = utils.beforeLeave || createBeforeLeave();
     const basePath = resolvePath("", options.base || "");
+    const initialSource = untrack(source);
     if (basePath === undefined) {
         throw new Error(`${basePath} is not a valid base path`);
     }
-    else if (basePath && !source().value) {
+    else if (basePath && !initialSource.value) {
         setSource({ value: basePath, replace: true, scroll: false });
     }
-    const [isRouting, setIsRouting] = createSignal(false, { pureWrite: true });
+    const [isRouting, setIsRouting] = createSignal(false, { ownedWrite: true });
     // Navigate override written from event handlers.
     const [navigateTarget, setNavigateTarget] = createSignal(undefined, {
-        pureWrite: true
+        ownedWrite: true
     });
     // Keep track of last target, so that last call to navigate wins
     let lastTransitionTarget;
     // source() remains canonical for native history changes; navigateTarget()
     // temporarily overrides it for in-flight programmatic navigation.
-    const reference = createMemo(() => {
-        const nav = navigateTarget();
-        if (nav !== undefined)
-            return nav.value;
-        return source().value;
-    });
-    const state = createMemo(() => {
-        const nav = navigateTarget();
-        if (nav !== undefined)
-            return nav.state;
-        return source().state;
-    });
-    const location = createLocation(reference, state, utils.queryWrapper);
+    const effective = createMemo(() => navigateTarget() ?? source());
+    const location = createLocation(() => effective().value, () => effective().state, utils.queryWrapper);
     const referrers = [];
     const submissions = createSignal(isServer ? initFromFlash() : [], {
-        pureWrite: true
+        ownedWrite: true
     });
     const matches = createMemo(() => {
         if (typeof options.transformUrl === "function") {
@@ -456,15 +446,15 @@ export function createRouterContext(integration, branches, getContext, options =
             else if (referrers.length >= MAX_REDIRECTS) {
                 throw new Error("Too many redirects");
             }
-            const current = reference();
-            if (resolvedTo !== current || nextState !== state()) {
+            const current = effective();
+            if (resolvedTo !== current.value || nextState !== current.state) {
                 if (isServer) {
                     const e = getRequestEvent();
                     e && (e.response = { status: 302, headers: new Headers({ Location: resolvedTo }) });
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
                 else if (beforeLeave.confirm(resolvedTo, options)) {
-                    referrers.push({ value: current, replace, scroll, state: state() });
+                    referrers.push({ value: current.value, replace, scroll, state: current.state });
                     const newTarget = {
                         value: resolvedTo,
                         state: nextState

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.17.0-next.0",
+  "version": "0.17.0-next.2",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   ],
   "sideEffects": false,
   "devDependencies": {
-    "@solidjs/web": "2.0.0-beta.3",
+    "@solidjs/web": "2.0.0-beta.7",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.10",
@@ -38,19 +38,19 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
-    "babel-preset-solid": "2.0.0-beta.3",
+    "babel-preset-solid": "2.0.0-beta.7",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.7",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
-    "vite-plugin-solid": "3.0.0-next.2",
+    "vite-plugin-solid": "3.0.0-next.4",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-beta.3",
-    "solid-js": "^2.0.0-beta.3"
+    "@solidjs/web": ">=2.0.0-beta.7 <2.0.0-experimental.0",
+    "solid-js": ">=2.0.0-beta.7 <2.0.0-experimental.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",