@tanstack/solid-router 1.166.7 → 2.0.0-alpha.1

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,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,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAA;YAC5B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,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;QACtB,MAAM,CAAC,GAAG,GAAG,EAAE,CAAA;QACf,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "1.166.7",
+  "version": "2.0.0-alpha.1",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -85,9 +85,8 @@
   },
   "dependencies": {
     "@solid-devtools/logger": "^0.9.4",
-    "@solid-primitives/refs": "^1.0.8",
     "@solidjs/meta": "^0.29.4",
-    "@tanstack/solid-store": "^0.9.1",
+    "@solidjs/web": "2.0.0-beta.2",
     "isbot": "^5.1.22",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
@@ -99,13 +98,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "combinate": "^1.1.11",
     "eslint-plugin-solid": "^0.14.5",
-    "solid-js": "^1.9.10",
+    "solid-js": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.2",
     "vite": "*",
-    "vite-plugin-solid": "^2.11.10",
+    "vite-plugin-solid": "3.0.0-next.2",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.10"
+    "solid-js": "2.0.0-beta.2",
+    "@solidjs/web": "2.0.0-beta.2"
   },
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./coverage",

package/src/Asset.tsx

@@ -1,6 +1,5 @@
-import { Link, Meta, Style, Title } from '@solidjs/meta'
-import { onCleanup, onMount } from 'solid-js'
 import { isServer } from '@tanstack/router-core/isServer'
+import { createEffect, onCleanup } from 'solid-js'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
 import type { JSX } from 'solid-js'
@@ -12,105 +11,114 @@ export function Asset({
 }: RouterManagedTag): JSX.Element | null {
   switch (tag) {
     case 'title':
-      return <Title {...attrs}>{children}</Title>
+      return <Title attrs={attrs} children={children} />
     case 'meta':
-      return <Meta {...attrs} />
+      return <meta {...attrs} />
     case 'link':
-      return <Link {...attrs} />
+      return <link {...attrs} />
     case 'style':
-      return <Style {...attrs}>{children}</Style>
+      if (typeof children === 'string') {
+        return <style {...attrs} innerHTML={children} />
+      }
+      return <style {...attrs} />
     case 'script':
-      return <Script attrs={attrs}>{children}</Script>
+      return <Script attrs={attrs} children={children} />
     default:
       return null
   }
 }
 
-interface ScriptAttrs {
-  [key: string]: string | boolean | undefined
-  src?: string
+function Title(props: {
+  attrs?: Record<string, any>
+  children?: unknown
+}): JSX.Element | null {
+  const router = useRouter()
+  const attrs = props.attrs
+  const children = props.children
+
+  // Server: render <title> normally
+  if (isServer ?? router.isServer) {
+    return <title {...attrs}>{children as string}</title>
+  }
+
+  // Client: imperatively set document.title so it updates during
+  // client-side navigation (JSX <title> in <head> doesn't reliably
+  // update the browser's document.title).
+  createEffect(
+    () => children,
+    (titleText) => {
+      document.title = typeof titleText === 'string' ? titleText : ''
+    },
+  )
+
+  // Still render the <title> element in the DOM for consistency,
+  // but the imperative assignment above is what actually drives the update.
+  return <title {...attrs}>{children as string}</title>
 }
 
-function Script({
-  attrs,
-  children,
-}: {
-  attrs?: ScriptAttrs
-  children?: string
+function Script(props: {
+  attrs?: Record<string, any>
+  children?: unknown
 }): JSX.Element | null {
   const router = useRouter()
+  const attrs = props.attrs
+  const children = props.children
+
   const dataScript =
     typeof attrs?.type === 'string' &&
     attrs.type !== '' &&
     attrs.type !== 'text/javascript' &&
     attrs.type !== 'module'
 
-  onMount(() => {
-    if (dataScript) return
-
+  // --- Server rendering ---
+  if (isServer ?? router.isServer) {
     if (attrs?.src) {
-      const normSrc = (() => {
-        try {
-          const base = document.baseURI || window.location.href
-          return new URL(attrs.src, base).href
-        } catch {
-          return attrs.src
-        }
-      })()
-      const existingScript = Array.from(
-        document.querySelectorAll('script[src]'),
-      ).find((el) => (el as HTMLScriptElement).src === normSrc)
-
-      if (existingScript) {
-        return
-      }
+      return <script {...attrs} />
+    }
 
-      const script = document.createElement('script')
+    if (typeof children === 'string') {
+      return <script {...attrs} innerHTML={children} />
+    }
 
-      for (const [key, value] of Object.entries(attrs)) {
-        if (value !== undefined && value !== false) {
-          script.setAttribute(
-            key,
-            typeof value === 'boolean' ? '' : String(value),
-          )
-        }
-      }
+    return null
+  }
 
-      document.head.appendChild(script)
+  // --- Client rendering ---
 
-      onCleanup(() => {
-        if (script.parentNode) {
-          script.parentNode.removeChild(script)
-        }
-      })
-    }
+  // Data scripts (e.g. application/ld+json) are rendered in the tree;
+  // they don't need to execute.
+  if (dataScript && typeof children === 'string') {
+    return <script {...attrs} innerHTML={children} />
+  }
 
-    if (typeof children === 'string') {
-      const typeAttr =
-        typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'
-      const nonceAttr =
-        typeof attrs?.nonce === 'string' ? attrs.nonce : undefined
-      const existingScript = Array.from(
-        document.querySelectorAll('script:not([src])'),
-      ).find((el) => {
-        if (!(el instanceof HTMLScriptElement)) return false
-        const sType = el.getAttribute('type') ?? 'text/javascript'
-        const sNonce = el.getAttribute('nonce') ?? undefined
-        return (
-          el.textContent === children &&
-          sType === typeAttr &&
-          sNonce === nonceAttr
-        )
-      })
+  // For executable scripts, use imperative DOM injection so the browser
+  // actually executes them during client-side navigation.
+  createEffect(
+    () => ({ attrs, children, dataScript }) as const,
+    ({ attrs, children, dataScript }) => {
+      if (dataScript) return
+
+      let script: HTMLScriptElement | undefined
+
+      if (attrs?.src) {
+        const normSrc = (() => {
+          try {
+            const base = document.baseURI || window.location.href
+            return new URL(attrs.src, base).href
+          } catch {
+            return attrs.src
+          }
+        })()
+        const existingScript = Array.from(
+          document.querySelectorAll('script[src]'),
+        ).find((el) => (el as HTMLScriptElement).src === normSrc)
 
-      if (existingScript) {
-        return
-      }
+        if (existingScript) {
+          return
+        }
 
-      const script = document.createElement('script')
-      script.textContent = children
+        script = document.createElement('script')
 
-      if (attrs) {
         for (const [key, value] of Object.entries(attrs)) {
           if (value !== undefined && value !== false) {
             script.setAttribute(
@@ -119,34 +127,54 @@ function Script({
             )
           }
         }
-      }
 
-      document.head.appendChild(script)
+        document.head.appendChild(script)
+      } else if (typeof children === 'string') {
+        const typeAttr =
+          typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'
+        const nonceAttr =
+          typeof attrs?.nonce === 'string' ? attrs.nonce : undefined
+        const existingScript = Array.from(
+          document.querySelectorAll('script:not([src])'),
+        ).find((el) => {
+          if (!(el instanceof HTMLScriptElement)) return false
+          const sType = el.getAttribute('type') ?? 'text/javascript'
+          const sNonce = el.getAttribute('nonce') ?? undefined
+          return (
+            el.textContent === children &&
+            sType === typeAttr &&
+            sNonce === nonceAttr
+          )
+        })
 
-      onCleanup(() => {
-        if (script.parentNode) {
-          script.parentNode.removeChild(script)
+        if (existingScript) {
+          return
         }
-      })
-    }
-  })
 
-  if (!(isServer ?? router.isServer)) {
-    if (dataScript && typeof children === 'string') {
-      return <script {...attrs} innerHTML={children} />
-    }
-
-    // render an empty script on the client just to avoid hydration errors
-    return null
-  }
+        script = document.createElement('script')
+        script.textContent = children
+
+        if (attrs) {
+          for (const [key, value] of Object.entries(attrs)) {
+            if (value !== undefined && value !== false) {
+              script.setAttribute(
+                key,
+                typeof value === 'boolean' ? '' : String(value),
+              )
+            }
+          }
+        }
 
-  if (attrs?.src && typeof attrs.src === 'string') {
-    return <script {...attrs} />
-  }
+        document.head.appendChild(script)
+      }
 
-  if (typeof children === 'string') {
-    return <script {...attrs} innerHTML={children} />
-  }
+      onCleanup(() => {
+        if (script?.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      })
+    },
+  )
 
   return null
 }

package/src/CatchBoundary.tsx

@@ -1,5 +1,5 @@
 import * as Solid from 'solid-js'
-import { Dynamic } from 'solid-js/web'
+import { Dynamic } from '@solidjs/web'
 import type { ErrorRouteComponent } from './route'
 
 export function CatchBoundary(
@@ -11,13 +11,15 @@ export function CatchBoundary(
   } & Solid.ParentProps,
 ) {
   return (
-    <Solid.ErrorBoundary
+    <Solid.Errored
       fallback={(error, reset) => {
         props.onCatch?.(error)
 
-        Solid.createEffect(
-          Solid.on([props.getResetKey], () => reset(), { defer: true }),
-        )
+        Solid.createEffect(props.getResetKey, () => {
+          // We trigger reset here. For a fully deferred effect we might need usePrevious,
+          // but calling reset on key change is the main goal.
+          reset()
+        })
 
         return (
           <Dynamic
@@ -29,7 +31,7 @@ export function CatchBoundary(
       }}
     >
       {props.children}
-    </Solid.ErrorBoundary>
+    </Solid.Errored>
   )
 }
 
@@ -41,7 +43,7 @@ export function ErrorComponent({ error }: { error: any }) {
   return (
     <div style={{ padding: '.5rem', 'max-width': '100%' }}>
       <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>
-        <strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>
+        ∂<strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>
         <button
           style={{
             appearance: 'none',

package/src/ClientOnly.tsx

@@ -58,8 +58,13 @@ export function ClientOnly(props: ClientOnlyProps) {
  */
 export function useHydrated(): Solid.Accessor<boolean> {
   const [hydrated, setHydrated] = Solid.createSignal(false)
-  Solid.onMount(() => {
-    setHydrated(true)
-  })
+
+  Solid.createEffect(
+    () => true,
+    () => {
+      setHydrated(true)
+    },
+  )
+
   return hydrated
 }

package/src/HeadContent.dev.tsx

@@ -1,4 +1,3 @@
-import { MetaProvider } from '@solidjs/meta'
 import { For, createEffect, createMemo } from 'solid-js'
 import { Asset } from './Asset'
 import { useHydrated } from './ClientOnly'
@@ -21,13 +20,16 @@ export function HeadContent() {
 
   // Fallback cleanup for hydration mismatch cases
   // Runs when hydration completes to remove any orphaned dev styles links from DOM
-  createEffect(() => {
-    if (hydrated()) {
-      document
-        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)
-        .forEach((el) => el.remove())
-    }
-  })
+  createEffect(
+    () => [hydrated()] as const,
+    ([hydrated]) => {
+      if (hydrated) {
+        document
+          .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)
+          .forEach((el) => el.remove())
+      }
+    },
+  )
 
   // Filter out dev styles after hydration
   const filteredTags = createMemo(() => {
@@ -38,8 +40,11 @@ export function HeadContent() {
   })
 
   return (
-    <MetaProvider>
-      <For each={filteredTags()}>{(tag) => <Asset {...tag} />}</For>
-    </MetaProvider>
+    <For each={filteredTags()}>
+      {(tag) => {
+        const t = tag() as any
+        return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />
+      }}
+    </For>
   )
 }

package/src/HeadContent.tsx

@@ -1,4 +1,3 @@
-import { MetaProvider } from '@solidjs/meta'
 import { For } from 'solid-js'
 import { Asset } from './Asset'
 import { useTags } from './headContentUtils'
@@ -13,8 +12,11 @@ export function HeadContent() {
   const tags = useTags()
 
   return (
-    <MetaProvider>
-      <For each={tags()}>{(tag) => <Asset {...tag} />}</For>
-    </MetaProvider>
+    <For each={tags()}>
+      {(tag) => {
+        const t = tag() as any
+        return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />
+      }}
+    </For>
   )
 }