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

package/src/lazyRouteComponent.tsx

@@ -1,6 +1,6 @@
-import { Dynamic } from 'solid-js/web'
-import { createResource } from 'solid-js'
 import { isModuleNotFoundError } from '@tanstack/router-core'
+import { Dynamic } from '@solidjs/web'
+import { createMemo } from 'solid-js'
 import type { AsyncRouteComponent } from './route'
 
 export function lazyRouteComponent<
@@ -74,7 +74,7 @@ export function lazyRouteComponent<
     }
 
     if (!comp) {
-      const [compResource] = createResource(load, {
+      const compResource = createMemo(load, {
         initialValue: comp,
         ssrLoadFrom: 'initial',
       })

package/src/link.tsx

@@ -1,7 +1,5 @@
 import * as Solid from 'solid-js'
 
-import { mergeRefs } from '@solid-primitives/refs'
-
 import {
   deepEqual,
   exactPathTest,
@@ -12,7 +10,7 @@ import {
 } from '@tanstack/router-core'
 
 import { isServer } from '@tanstack/router-core/isServer'
-import { Dynamic } from 'solid-js/web'
+import { Dynamic } from '@solidjs/web'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
@@ -31,6 +29,31 @@ import type {
   ValidateLinkOptionsArray,
 } from './typePrimitives'
 
+function mergeRefs<T>(
+  ...refs: Array<((el: T) => void) | undefined>
+): (el: T) => void {
+  return (el: T) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(el)
+      }
+    }
+  }
+}
+
+function splitProps<T extends Record<string, any>, TKey extends keyof T>(
+  props: T,
+  keys: ReadonlyArray<TKey>,
+): [Pick<T, TKey>, Omit<T, TKey>] {
+  const _local = {} as Pick<T, TKey>
+  const _rest = {} as Omit<T, TKey>
+
+  // A safe way to polyfill splitProps if native getter copy is too complex
+  // is just to return [props, Solid.omit(props, keys)] but it modifies typing.
+  // Actually, Solid.omit exists!
+  // Note: Solid.omit uses rest params (...keys), so we must spread the array.
+  return [props as any, Solid.omit(props, ...(keys as any)) as any]
+}
 const timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>()
 
 export function useLinkProps<
@@ -49,8 +72,8 @@ export function useLinkProps<
 
   let hasRenderFetched = false
 
-  const [local, rest] = Solid.splitProps(
-    Solid.mergeProps(
+  const [local, rest] = splitProps(
+    Solid.merge(
       {
         activeProps: () => ({ class: 'active' }),
         inactiveProps: () => ({}),
@@ -85,35 +108,7 @@ export function useLinkProps<
     ],
   )
 
-  // const {
-  //   // custom props
-  //   activeProps = () => ({ class: 'active' }),
-  //   inactiveProps = () => ({}),
-  //   activeOptions,
-  //   to,
-  //   preload: userPreload,
-  //   preloadDelay: userPreloadDelay,
-  //   hashScrollIntoView,
-  //   replace,
-  //   startTransition,
-  //   resetScroll,
-  //   viewTransition,
-  //   // element props
-  //   children,
-  //   target,
-  //   disabled,
-  //   style,
-  //   class,
-  //   onClick,
-  //   onFocus,
-  //   onMouseEnter,
-  //   onMouseLeave,
-  //   onTouchStart,
-  //   ignoreBlocker,
-  //   ...rest
-  // } = options
-
-  const [_, propsSafeToSpread] = Solid.splitProps(rest, [
+  const [_, propsSafeToSpread] = splitProps(rest, [
     'params',
     'search',
     'hash',
@@ -121,7 +116,7 @@ export function useLinkProps<
     'mask',
     'reloadDocument',
     'unsafeRelative',
-  ])
+  ] as any)
 
   const currentLocation = useRouterState({
     select: (s) => s.location,
@@ -141,10 +136,11 @@ export function useLinkProps<
   const from = options.from
 
   const _options = () => {
-    return {
+    const result = {
       ...options,
       from,
     }
+    return result
   }
 
   const next = Solid.createMemo(() => {
@@ -274,33 +270,39 @@ export function useLinkProps<
     }
   }
 
-  const [ref, setRef] = Solid.createSignal<Element | null>(null)
+  const [ref, setRefSignal] = Solid.createSignal<Element | null>(null)
+
+  const setRef = (el: Element | null) => {
+    Solid.runWithOwner(null, () => {
+      setRefSignal(el)
+    })
+  }
 
   useIntersectionObserver(
     ref,
     preloadViewportIoCallback,
     { rootMargin: '100px' },
-    { disabled: !!local.disabled || !(preload() === 'viewport') },
+    { disabled: !!local.disabled || !(Solid.untrack(preload) === 'viewport') },
   )
 
-  Solid.createEffect(() => {
+  Solid.createEffect(preload, (preloadValue) => {
     if (hasRenderFetched) {
       return
     }
-    if (!local.disabled && preload() === 'render') {
+    if (!local.disabled && preloadValue === 'render') {
       doPreload()
       hasRenderFetched = true
     }
   })
 
-  if (externalLink()) {
-    return Solid.mergeProps(
+  if (Solid.untrack(externalLink)) {
+    return Solid.merge(
       propsSafeToSpread,
       {
-        ref: mergeRefs(setRef, _options().ref),
+        // ref: mergeRefs(setRef, _options().ref),
         href: externalLink(),
       },
-      Solid.splitProps(local, [
+      splitProps(local, [
         'target',
         'disabled',
         'style',
@@ -443,14 +445,14 @@ export function useLinkProps<
     ...resolvedInactiveProps().style,
   })
 
-  return Solid.mergeProps(
+  return Solid.merge(
     propsSafeToSpread,
     resolvedActiveProps,
     resolvedInactiveProps,
     () => {
       return {
         href: hrefOption()?.href,
-        ref: mergeRefs(setRef, _options().ref),
+        ref: mergeRefs(setRef, (_options() as any).ref),
         onClick: composeEventHandlers([local.onClick, handleClick]),
         onBlur: composeEventHandlers([local.onBlur, handleLeave]),
         onFocus: composeEventHandlers([local.onFocus, enqueueIntentPreload]),
@@ -480,7 +482,7 @@ export function useLinkProps<
         })(),
         ...(local.disabled && {
           role: 'link',
-          'aria-disabled': true,
+          'aria-disabled': 'true',
         }),
         ...(isActive() && { 'data-status': 'active', 'aria-current': 'page' }),
         ...(isTransitioning() && { 'data-transitioning': 'transitioning' }),
@@ -610,20 +612,26 @@ export function createLink<const TComp>(
 }
 
 export const Link: LinkComponent<'a'> = (props) => {
-  const [local, rest] = Solid.splitProps(
-    props as typeof props & { _asChild: any },
-    ['_asChild', 'children'],
-  )
+  const [local, rest] = splitProps(props as typeof props & { _asChild: any }, [
+    '_asChild',
+    'children',
+  ])
 
-  const [_, linkProps] = Solid.splitProps(
-    useLinkProps(rest as unknown as any),
-    ['type'],
+  const [_, linkProps] = splitProps(useLinkProps(rest as unknown as any), [
+    'type',
+  ])
+
+  // Resolve children once using Solid.children to avoid
+  // re-accessing the children getter (which in Solid 2.0 would
+  // re-invoke createComponent each time for JSX children).
+  const resolvedChildren = Solid.children(
+    () => local.children as Solid.JSX.Element,
   )
 
-  const children = Solid.createMemo(() => {
-    const ch = local.children
+  const children = () => {
+    const ch = resolvedChildren()
     if (typeof ch === 'function') {
-      return ch({
+      return (ch as Function)({
         get isActive() {
           return (linkProps as any)['data-status'] === 'active'
         },
@@ -633,11 +641,11 @@ export const Link: LinkComponent<'a'> = (props) => {
       })
     }
 
-    return ch satisfies Solid.JSX.Element
-  })
+    return ch
+  }
 
   if (local._asChild === 'svg') {
-    const [_, svgLinkProps] = Solid.splitProps(linkProps, ['class'])
+    const [_, svgLinkProps] = splitProps(linkProps as any, ['class'])
     return (
       <svg>
         <a {...svgLinkProps}>{children()}</a>

package/src/ssr/RouterClient.tsx

@@ -1,14 +1,10 @@
 import { hydrate } from '@tanstack/router-core/ssr/client'
 import { Await } from '../awaited'
-import { HeadContent } from '../HeadContent'
 import { RouterProvider } from '../RouterProvider'
 import type { AnyRouter } from '@tanstack/router-core'
-import type { JSXElement } from 'solid-js'
 
 let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
 
-const Dummy = (props: { children?: JSXElement }) => <>{props.children}</>
-
 export function RouterClient(props: { router: AnyRouter }) {
   if (!hydrationPromise) {
     if (!props.router.state.matches.length) {
@@ -20,24 +16,7 @@ export function RouterClient(props: { router: AnyRouter }) {
   return (
     <Await
       promise={hydrationPromise}
-      children={() => (
-        <Dummy>
-          <Dummy>
-            <RouterProvider
-              router={props.router}
-              InnerWrap={(props) => (
-                <Dummy>
-                  <Dummy>
-                    <HeadContent />
-                    {props.children}
-                  </Dummy>
-                  <Dummy />
-                </Dummy>
-              )}
-            />
-          </Dummy>
-        </Dummy>
-      )}
+      children={() => <RouterProvider router={props.router} />}
     />
   )
 }

package/src/ssr/RouterServer.tsx

@@ -1,60 +1,8 @@
-import {
-  Hydration,
-  HydrationScript,
-  NoHydration,
-  ssr,
-  useAssets,
-} from 'solid-js/web'
-import { MetaProvider } from '@solidjs/meta'
-import { Asset } from '../Asset'
-import { useTags } from '../headContentUtils'
 import { RouterProvider } from '../RouterProvider'
-import { Scripts } from '../Scripts'
 import type { AnyRouter } from '@tanstack/router-core'
 
-export function ServerHeadContent() {
-  const tags = useTags()
-  useAssets(() => {
-    return (
-      <MetaProvider>
-        {tags().map((tag) => (
-          <Asset {...tag} />
-        ))}
-      </MetaProvider>
-    )
-  })
-  return null
-}
-
-const docType = ssr('<!DOCTYPE html>')
-
 export function RouterServer<TRouter extends AnyRouter>(props: {
   router: TRouter
 }) {
-  return (
-    <NoHydration>
-      {docType as any}
-      <html>
-        <head>
-          <HydrationScript />
-        </head>
-        <body>
-          <Hydration>
-            <RouterProvider
-              router={props.router}
-              InnerWrap={(props) => (
-                <NoHydration>
-                  <MetaProvider>
-                    <ServerHeadContent />
-                    <Hydration>{props.children}</Hydration>
-                    <Scripts />
-                  </MetaProvider>
-                </NoHydration>
-              )}
-            />
-          </Hydration>
-        </body>
-      </html>
-    </NoHydration>
-  )
+  return <RouterProvider router={props.router} />
 }

package/src/ssr/renderRouterToStream.tsx

@@ -1,4 +1,4 @@
-import * as Solid from 'solid-js/web'
+import * as Solid from '@solidjs/web'
 import { isbot } from 'isbot'
 import { transformReadableStreamWithRouter } from '@tanstack/router-core/ssr/server'
 import { makeSsrSerovalPlugin } from '@tanstack/router-core'
@@ -19,8 +19,6 @@ export const renderRouterToStream = async ({
 }) => {
   const { writable, readable } = new TransformStream()
 
-  const docType = Solid.ssr('<!DOCTYPE html>')
-
   const serializationAdapters =
     (router.options as any)?.serializationAdapters ||
     (router.options.ssr as any)?.serializationAdapters
@@ -29,18 +27,10 @@ export const renderRouterToStream = async ({
     return plugin
   })
 
-  const stream = Solid.renderToStream(
-    () => (
-      <>
-        {docType}
-        {children()}
-      </>
-    ),
-    {
-      nonce: router.options.ssr?.nonce,
-      plugins: serovalPlugins,
-    } as any,
-  )
+  const stream = Solid.renderToStream(() => children, {
+    nonce: router.options.ssr?.nonce,
+    plugins: serovalPlugins,
+  } as any)
 
   if (isbot(request.headers.get('User-Agent'))) {
     await stream

package/src/ssr/renderRouterToString.tsx

@@ -1,9 +1,9 @@
-import * as Solid from 'solid-js/web'
+import * as Solid from '@solidjs/web'
 import { makeSsrSerovalPlugin } from '@tanstack/router-core'
 import type { AnyRouter } from '@tanstack/router-core'
 import type { JSXElement } from 'solid-js'
 
-export const renderRouterToString = async ({
+export const renderRouterToString = ({
   router,
   responseHeaders,
   children,

package/src/useBlocker.tsx

@@ -160,7 +160,7 @@ export function useBlocker(
   opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
   condition?: boolean | any,
 ): Solid.Accessor<BlockerResolver> | void {
-  const props = Solid.mergeProps(
+  const props = Solid.merge(
     {
       enableBeforeUnload: true,
       disabled: false,
@@ -180,7 +180,7 @@ export function useBlocker(
     reset: undefined,
   })
 
-  Solid.createEffect(() => {
+  Solid.createTrackedEffect(() => {
     const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
       function getLocation(
         location: HistoryLocation,
@@ -303,8 +303,12 @@ export function Block<
 export function Block(opts: LegacyPromptProps): SolidNode
 
 export function Block(opts: PromptProps | LegacyPromptProps): SolidNode {
-  const [propsWithChildren, rest] = Solid.splitProps(opts, ['children'])
-  const args = _resolvePromptBlockerArgs(rest)
+  const propsWithChildren = {
+    get children() {
+      return opts.children
+    },
+  }
+  const args = _resolvePromptBlockerArgs(opts)
 
   const resolver = useBlocker(args)
   const children = Solid.createMemo(() => {

package/src/useMatch.tsx

@@ -103,17 +103,12 @@ export function useMatch<
     },
   } as any)
 
-  // Use createEffect to throw errors outside the reactive selector context
-  // This allows error boundaries to properly catch the errors
-  Solid.createEffect(() => {
-    const state = matchState()
-    if (state.shouldThrowError) {
-      invariant(
-        false,
-        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-      )
-    }
-  })
+  if (Solid.untrack(matchState).shouldThrowError) {
+    invariant(
+      false,
+      `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+    )
+  }
 
   // Return an accessor that extracts just the match value
   return Solid.createMemo(() => matchState().match) as any

package/src/useNavigate.tsx

@@ -33,7 +33,7 @@ export function Navigate<
 >(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const { navigate } = useRouter()
 
-  Solid.onMount(() => {
+  Solid.onSettled(() => {
     navigate({
       ...props,
     })

package/src/useRouterState.tsx

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/solid-store'
+import { createMemo, createSignal, onCleanup } from 'solid-js'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
 import type {
@@ -8,7 +8,6 @@ import type {
 } from '@tanstack/router-core'
 import type { Accessor } from 'solid-js'
 
-// Deep equality check to match behavior of solid-store 0.7.0's reconcile()
 function deepEqual(a: any, b: any): boolean {
   if (Object.is(a, b)) return true
 
@@ -61,26 +60,39 @@ export function useRouterState<
   const _isServer = isServer ?? router.isServer
   if (_isServer) {
     const state = router.state as RouterState<TRouter['routeTree']>
-    const selected = (
-      opts?.select ? opts.select(state) : state
-    ) as UseRouterStateResult<TRouter, TSelected>
-    return (() => selected) as Accessor<
-      UseRouterStateResult<TRouter, TSelected>
-    >
+    const selected = createMemo(() =>
+      opts?.select ? opts.select(state) : state,
+    ) as Accessor<UseRouterStateResult<TRouter, TSelected>>
+    return selected
   }
 
-  return useStore(
-    router.__store,
-    (state) => {
-      if (opts?.select) return opts.select(state)
-
-      return state
-    },
-    {
-      // Use deep equality to match behavior of solid-store 0.7.0 which used
-      // reconcile(). This ensures updates work correctly when selectors
-      // return new object references but with the same values.
-      equal: deepEqual,
-    },
-  ) as Accessor<UseRouterStateResult<TRouter, TSelected>>
+  const selector = (state: any) => {
+    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: any, b: any) => deepEqual(a, b),
+  })
+
+  return selected as Accessor<UseRouterStateResult<TRouter, TSelected>>
 }

package/src/utils.ts

@@ -1,5 +1,8 @@
 import * as Solid from 'solid-js'
 
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? Solid.createEffect : Solid.createEffect
+
 export const usePrevious = (fn: () => boolean) => {
   return Solid.createMemo(
     (
@@ -11,8 +14,7 @@ export const usePrevious = (fn: () => boolean) => {
       const current = fn()
 
       if (prev.current !== current) {
-        prev.previous = prev.current
-        prev.current = current
+        return { previous: prev.current, current }
       }
 
       return prev
@@ -55,8 +57,7 @@ export function useIntersectionObserver<T extends Element>(
     typeof IntersectionObserver === 'function'
   let observerRef: IntersectionObserver | null = null
 
-  Solid.createEffect(() => {
-    const r = ref()
+  Solid.createEffect(ref, (r) => {
     if (!r || !isIntersectionObserverAvailable || options.disabled) {
       return
     }