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

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.6",
+  "version": "2.0.0-alpha.7",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -94,7 +94,7 @@
     "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",

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>
+  )
 }