@tanstack/solid-router 1.167.4 → 1.168.0

package/src/useLocation.tsx

@@ -1,4 +1,6 @@
-import { useRouterState } from './useRouterState'
+import * as Solid from 'solid-js'
+import { replaceEqualDeep } from '@tanstack/router-core'
+import { useRouter } from './useRouter'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -23,8 +25,19 @@ export function useLocation<
 >(
   opts?: UseLocationBaseOptions<TRouter, TSelected>,
 ): Accessor<UseLocationResult<TRouter, TSelected>> {
-  return useRouterState({
-    select: (state: any) =>
-      opts?.select ? opts.select(state.location) : state.location,
-  } as any) as Accessor<UseLocationResult<TRouter, TSelected>>
+  const router = useRouter<TRouter>()
+
+  if (!opts?.select) {
+    return (() => router.stores.location.state) as Accessor<
+      UseLocationResult<TRouter, TSelected>
+    >
+  }
+
+  const select = opts.select
+
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const res = select(router.stores.location.state)
+    if (prev === undefined) return res
+    return replaceEqualDeep(prev, res)
+  }) as Accessor<UseLocationResult<TRouter, TSelected>>
 }

package/src/useMatch.tsx

@@ -1,7 +1,8 @@
 import * as Solid from 'solid-js'
 import invariant from 'tiny-invariant'
-import { useRouterState } from './useRouterState'
-import { dummyMatchContext, matchContext } from './matchContext'
+import { replaceEqualDeep } from '@tanstack/router-core'
+import { nearestMatchContext } from './matchContext'
+import { useRouter } from './useRouter'
 import type {
   AnyRouter,
   MakeRouteMatch,
@@ -69,52 +70,44 @@ export function useMatch<
 ): Solid.Accessor<
   ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
 > {
-  const nearestMatchId = Solid.useContext(
-    opts.from ? dummyMatchContext : matchContext,
-  )
+  const router = useRouter<TRouter>()
+  const nearestMatch = opts.from
+    ? undefined
+    : Solid.useContext(nearestMatchContext)
 
-  // Create a signal to track error state separately from the match
-  const matchState: Solid.Accessor<{
-    match: any
-    shouldThrowError: boolean
-  }> = useRouterState({
-    select: (state: any) => {
-      const match = state.matches.find((d: any) =>
-        opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
-      )
-
-      if (match === undefined) {
-        // During navigation transitions, check if the match exists in pendingMatches
-        const pendingMatch = state.pendingMatches?.find((d: any) =>
-          opts.from ? opts.from === d.routeId : d.id === nearestMatchId(),
-        )
-
-        // Determine if we should throw an error
-        const shouldThrowError =
-          !pendingMatch && !state.isTransitioning && (opts.shouldThrow ?? true)
-
-        return { match: undefined, shouldThrowError }
-      }
+  const match = () => {
+    if (opts.from) {
+      return router.stores.getMatchStoreByRouteId(opts.from).state
+    }
 
-      return {
-        match: opts.select ? opts.select(match) : match,
-        shouldThrowError: false,
-      }
-    },
-  } as any)
+    return nearestMatch?.match()
+  }
 
-  // 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 (match() !== undefined) {
+      return
     }
+
+    const hasPendingMatch = opts.from
+      ? Boolean(router.stores.pendingRouteIds.state[opts.from!])
+      : (nearestMatch?.hasPending() ?? false)
+
+    invariant(
+      !(
+        !hasPendingMatch &&
+        !router.stores.isTransitioning.state &&
+        (opts.shouldThrow ?? true)
+      ),
+      `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
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const selectedMatch = match()
+
+    if (selectedMatch === undefined) return undefined
+    const res = opts.select ? opts.select(selectedMatch as any) : selectedMatch
+    if (prev === undefined) return res as TSelected
+    return replaceEqualDeep(prev, res) as TSelected
+  }) as any
 }

package/src/useParams.tsx

@@ -62,11 +62,10 @@ export function useParams<
 > {
   return useMatch({
     from: opts.from!,
-    shouldThrow: opts.shouldThrow,
     strict: opts.strict,
-    select: (match) => {
+    shouldThrow: opts.shouldThrow,
+    select: (match: any) => {
       const params = opts.strict === false ? match.params : match._strictParams
-
       return opts.select ? opts.select(params) : params
     },
   }) as Accessor<any>

package/src/useRouterState.tsx

@@ -1,5 +1,6 @@
-import { useStore } from '@tanstack/solid-store'
 import { isServer } from '@tanstack/router-core/isServer'
+import * as Solid from 'solid-js'
+import { replaceEqualDeep } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
 import type {
   AnyRouter,
@@ -8,32 +9,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
-
-  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
-}
-
 export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
   router?: TRouter
   select?: (state: RouterState<TRouter['routeTree']>) => TSelected
@@ -60,7 +35,9 @@ export function useRouterState<
   // implementation does not provide subscribe() semantics.
   const _isServer = isServer ?? router.isServer
   if (_isServer) {
-    const state = router.state as RouterState<TRouter['routeTree']>
+    const state = router.stores.__store.state as RouterState<
+      TRouter['routeTree']
+    >
     const selected = (
       opts?.select ? opts.select(state) : state
     ) as UseRouterStateResult<TRouter, TSelected>
@@ -69,18 +46,17 @@ export function useRouterState<
     >
   }
 
-  return useStore(
-    router.__store,
-    (state) => {
-      if (opts?.select) return opts.select(state)
+  if (!opts?.select) {
+    return (() => router.stores.__store.state) as Accessor<
+      UseRouterStateResult<TRouter, TSelected>
+    >
+  }
+
+  const select = opts.select
 
-      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>>
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const res = select(router.stores.__store.state)
+    if (prev === undefined) return res
+    return replaceEqualDeep(prev, res)
+  }) as Accessor<UseRouterStateResult<TRouter, TSelected>>
 }

package/src/useSearch.tsx

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

package/src/utils.ts

@@ -1,25 +1,5 @@
 import * as Solid from 'solid-js'
 
-export const usePrevious = (fn: () => boolean) => {
-  return Solid.createMemo(
-    (
-      prev: { current: boolean | null; previous: boolean | null } = {
-        current: null,
-        previous: null,
-      },
-    ) => {
-      const current = fn()
-
-      if (prev.current !== current) {
-        prev.previous = prev.current
-        prev.current = current
-      }
-
-      return prev
-    },
-  )
-}
-
 /**
  * React hook to wrap `IntersectionObserver`.
  *