@tanstack/solid-router 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/source/useRouterState.jsx

@@ -1,34 +1,7 @@
-import { createMemo, createSignal, onCleanup } from 'solid-js';
 import { isServer } from '@tanstack/router-core/isServer';
+import * as Solid from 'solid-js';
+import { replaceEqualDeep } from '@tanstack/router-core';
 import { useRouter } from './useRouter';
-function deepEqual(a, b) {
-    if (Object.is(a, b))
-        return true;
-    if (isPromiseLike(a) || isPromiseLike(b))
-        return false;
-    if (typeof a !== 'object' ||
-        a === null ||
-        typeof b !== 'object' ||
-        b === null) {
-        return false;
-    }
-    const keysA = Object.keys(a);
-    const keysB = Object.keys(b);
-    if (keysA.length !== keysB.length)
-        return false;
-    for (const key of keysA) {
-        if (!Object.prototype.hasOwnProperty.call(b, key))
-            return false;
-        if (!deepEqual(a[key], b[key]))
-            return false;
-    }
-    return true;
-}
-function isPromiseLike(value) {
-    return (!!value &&
-        (typeof value === 'object' || typeof value === 'function') &&
-        typeof value.then === 'function');
-}
 export function useRouterState(opts) {
     const contextRouter = useRouter({
         warn: opts?.router === undefined,
@@ -39,33 +12,19 @@ export function useRouterState(opts) {
     // implementation does not provide subscribe() semantics.
     const _isServer = isServer ?? router.isServer;
     if (_isServer) {
-        const state = router.state;
-        const selected = createMemo(() => opts?.select ? opts.select(state) : state);
-        return selected;
+        const state = router.stores.__store.state;
+        const selected = (opts?.select ? opts.select(state) : state);
+        return (() => selected);
     }
-    const selector = (state) => {
-        if (opts?.select)
-            return opts.select(state);
-        return state;
-    };
-    // Track the latest store state in a signal that updates via subscription.
-    // We store the full state so that the selector (which may read reactive
-    // props like props.matchId) re-runs inside a Solid tracking scope (the
-    // createMemo below) rather than inside the store subscriber callback
-    // where reactive reads would be untracked.
-    const [storeState, setStoreState] = createSignal(router.__store.get());
-    const unsub = router.__store.subscribe((s) => {
-        setStoreState(s);
-    }).unsubscribe;
-    onCleanup(() => {
-        unsub();
-    });
-    // Run the selector inside a memo so that:
-    // 1. Reactive values read by the selector (e.g. props.matchId) are tracked
-    // 2. The result is memoized and only updates when the selected value changes
-    const selected = createMemo(() => selector(storeState()), undefined, {
-        equals: (a, b) => deepEqual(a, b),
+    if (!opts?.select) {
+        return (() => router.stores.__store.state);
+    }
+    const select = opts.select;
+    return Solid.createMemo((prev) => {
+        const res = select(router.stores.__store.state);
+        if (prev === undefined)
+            return res;
+        return replaceEqualDeep(prev, res);
     });
-    return selected;
 }
 //# sourceMappingURL=useRouterState.jsx.map

package/dist/source/useRouterState.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"useRouterState.jsx","sourceRoot":"","sources":["../../src/useRouterState.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useRouterState.jsx","sourceRoot":"","sources":["../../src/useRouterState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAkBvC,MAAM,UAAU,cAAc,CAI5B,IAAgD;IAEhD,MAAM,aAAa,GAAG,SAAS,CAAU;QACvC,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS;KACjC,CAAC,CAAA;IACF,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,IAAI,aAAa,CAAA;IAE5C,gEAAgE;IAChE,sEAAsE;IACtE,yDAAyD;IACzD,MAAM,SAAS,GAAG,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAA;IAC7C,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAEnC,CAAA;QACD,MAAM,QAAQ,GAAG,CACf,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CACE,CAAA;QAC7C,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAErB,CAAA;IACH,CAAC;IAED,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAClB,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAExC,CAAA;IACH,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,IAA2B,EAAE,EAAE;QACtD,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAC/C,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO,GAAG,CAAA;QAClC,OAAO,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IACpC,CAAC,CAAuD,CAAA;AAC1D,CAAC"}

package/dist/source/useSearch.jsx

@@ -5,7 +5,8 @@ export function useSearch(opts) {
         strict: opts.strict,
         shouldThrow: opts.shouldThrow,
         select: (match) => {
-            return opts.select ? opts.select(match.search) : match.search;
+            const search = match.search;
+            return opts.select ? opts.select(search) : search;
         },
     });
 }

package/dist/source/useSearch.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"useSearch.jsx","sourceRoot":"","sources":["../../src/useSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AA6CrC,MAAM,UAAU,SAAS,CAOvB,IAMC;IAID,OAAO,QAAQ,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,IAAK;QAChB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,MAAM,EAAE,CAAC,KAAU,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAA;QAC/D,CAAC;KACF,CAAQ,CAAA;AACX,CAAC"}
+{"version":3,"file":"useSearch.jsx","sourceRoot":"","sources":["../../src/useSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AA6CrC,MAAM,UAAU,SAAS,CAOvB,IAMC;IAID,OAAO,QAAQ,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,IAAK;QAChB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,MAAM,EAAE,CAAC,KAAU,EAAE,EAAE;YACrB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;YAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;QACnD,CAAC;KACF,CAAQ,CAAA;AACX,CAAC"}

package/dist/source/utils.d.ts

@@ -1,9 +1,4 @@
 import * as Solid from 'solid-js';
-export declare const useLayoutEffect: typeof import("@solidjs/signals").createEffect;
-export declare const usePrevious: (fn: () => boolean) => Solid.Accessor<{
-    current: boolean | null;
-    previous: boolean | null;
-}>;
 /**
  * React hook to wrap `IntersectionObserver`.
  *

package/dist/source/utils.js

@@ -1,17 +1,4 @@
 import * as Solid from 'solid-js';
-export const useLayoutEffect = typeof window !== 'undefined' ? Solid.createEffect : Solid.createEffect;
-export const usePrevious = (fn) => {
-    return Solid.createMemo((prev = {
-        current: null,
-        previous: null,
-    }) => {
-        const current = fn();
-        if (prev.current !== current) {
-            return { previous: prev.current, current };
-        }
-        return prev;
-    });
-};
 /**
  * React hook to wrap `IntersectionObserver`.
  *
@@ -48,9 +35,9 @@ export function useIntersectionObserver(ref, callback, intersectionObserverOptio
             callback(entry);
         }, intersectionObserverOptions);
         observerRef.observe(r);
-        Solid.onCleanup(() => {
+        return () => {
             observerRef?.disconnect();
-        });
+        };
     });
     return () => observerRef;
 }

package/dist/source/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAA;AAEjC,MAAM,CAAC,MAAM,eAAe,GAC1B,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAA;AAEzE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAiB,EAAE,EAAE;IAC/C,OAAO,KAAK,CAAC,UAAU,CACrB,CACE,OAA8D;QAC5D,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;KACf,EACD,EAAE;QACF,MAAM,OAAO,GAAG,EAAE,EAAE,CAAA;QAEpB,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC7B,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAA;QAC5C,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CACF,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,uBAAuB,CACrC,GAA6B,EAC7B,QAAgE,EAChE,8BAAwD,EAAE,EAC1D,UAAkC,EAAE;IAEpC,MAAM,+BAA+B,GACnC,OAAO,oBAAoB,KAAK,UAAU,CAAA;IAC5C,IAAI,WAAW,GAAgC,IAAI,CAAA;IAEnD,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,IAAI,CAAC,+BAA+B,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;YAC/D,OAAM;QACR,CAAC;QAED,WAAW,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACjD,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EAAE,2BAA2B,CAAC,CAAA;QAE/B,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAEtB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YACnB,WAAW,EAAE,UAAU,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,EAAE,CAAC,WAAW,CAAA;AAC1B,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAA;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,uBAAuB,CACrC,GAA6B,EAC7B,QAAgE,EAChE,8BAAwD,EAAE,EAC1D,UAAkC,EAAE;IAEpC,MAAM,+BAA+B,GACnC,OAAO,oBAAoB,KAAK,UAAU,CAAA;IAC5C,IAAI,WAAW,GAAgC,IAAI,CAAA;IAEnD,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,IAAI,CAAC,+BAA+B,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;YAC/D,OAAM;QACR,CAAC;QAED,WAAW,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACjD,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EAAE,2BAA2B,CAAC,CAAA;QAE/B,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAEtB,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,UAAU,EAAE,CAAA;QAC3B,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,EAAE,CAAC,WAAW,CAAA;AAC1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.7",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -89,12 +89,12 @@
   "dependencies": {
     "@solid-devtools/logger": "^0.9.4",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/web": "2.0.0-beta.3",
+    "@solidjs/web": "2.0.0-beta.4",
     "isbot": "^5.1.22",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.161.6",
-    "@tanstack/router-core": "1.167.5"
+    "@tanstack/router-core": "1.168.1"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -102,15 +102,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "combinate": "^1.1.11",
     "eslint-plugin-solid": "^0.14.5",
-    "solid-js": "2.0.0-beta.3",
-    "@solidjs/web": "2.0.0-beta.3",
+    "solid-js": "2.0.0-beta.4",
+    "@solidjs/web": "2.0.0-beta.4",
     "vite": "*",
     "vite-plugin-solid": "3.0.0-next.3",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "solid-js": "2.0.0-beta.3",
-    "@solidjs/web": "2.0.0-beta.3"
+    "solid-js": "2.0.0-beta.4",
+    "@solidjs/web": "2.0.0-beta.4"
   },
   "bin": {
     "intent": "./bin/intent.js"

package/skills/solid-router/SKILL.md

@@ -141,6 +141,8 @@ function InvalidateButton() {
 
 ### `useRouterState()` — returns `Accessor<T>`
 
+Exposes the entire state and thus incurs a performance cost. For matches or location favor `useMatches` and `useLocation`.
+
 ```tsx
 import { useRouterState } from '@tanstack/solid-router'
 

package/src/Asset.tsx

@@ -1,5 +1,5 @@
 import { isServer } from '@tanstack/router-core/isServer'
-import { createEffect, onCleanup } from 'solid-js'
+import { createEffect } from 'solid-js'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
 import type { JSX } from 'solid-js'
@@ -168,11 +168,11 @@ function Script(props: {
         document.head.appendChild(script)
       }
 
-      onCleanup(() => {
+      return () => {
         if (script?.parentNode) {
           script.parentNode.removeChild(script)
         }
-      })
+      }
     },
   )
 

package/src/HeadContent.dev.tsx

@@ -1,6 +1,8 @@
 import { For, createEffect, createMemo } from 'solid-js'
+import { Portal, isServer } from '@solidjs/web'
 import { Asset } from './Asset'
 import { useHydrated } from './ClientOnly'
+import { useRouter } from './useRouter'
 import { useTags } from './headContentUtils'
 
 const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
@@ -17,6 +19,7 @@ const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
 export function HeadContent() {
   const tags = useTags()
   const hydrated = useHydrated()
+  const router = useRouter()
 
   // Fallback cleanup for hydration mismatch cases
   // Runs when hydration completes to remove any orphaned dev styles links from DOM
@@ -39,7 +42,7 @@ export function HeadContent() {
     return tags()
   })
 
-  return (
+  const content = () => (
     <For each={filteredTags()}>
       {(tag) => {
         const t = tag() as any
@@ -47,4 +50,10 @@ export function HeadContent() {
       }}
     </For>
   )
+
+  return (isServer ?? router.isServer) ? (
+    content()
+  ) : (
+    <Portal mount={document.head}>{content()}</Portal>
+  )
 }

package/src/HeadContent.tsx

@@ -1,5 +1,7 @@
 import { For } from 'solid-js'
+import { Portal, isServer } from '@solidjs/web'
 import { Asset } from './Asset'
+import { useRouter } from './useRouter'
 import { useTags } from './headContentUtils'
 
 /**
@@ -10,8 +12,9 @@ import { useTags } from './headContentUtils'
  */
 export function HeadContent() {
   const tags = useTags()
+  const router = useRouter()
 
-  return (
+  const content = () => (
     <For each={tags()}>
       {(tag) => {
         const t = tag() as any
@@ -19,4 +22,10 @@ export function HeadContent() {
       }}
     </For>
   )
+
+  return (isServer ?? router.isServer) ? (
+    content()
+  ) : (
+    <Portal mount={document.head}>{content()}</Portal>
+  )
 }