refactor(solid-router): replaceEqualDeep replaces deepEqual and shallo comparison methods

packages/solid-router/src/Matches.tsx

@@ -1,8 +1,7 @@
 import * as Solid from 'solid-js'
 import warning from 'tiny-warning'
-import { rootRouteId } from '@tanstack/router-core'
+import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import { shallow } from './store'
 import { CatchBoundary, ErrorComponent } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import { Transitioner } from './Transitioner'
@@ -217,16 +216,14 @@ export function useMatches<
   opts?: UseMatchesBaseOptions<TRouter, TSelected>,
 ): Solid.Accessor<UseMatchesResult<TRouter, TSelected>> {
   const router = useRouter<TRouter>()
-  return Solid.createMemo(
-    () => {
-      const matches = router.stores.activeMatchesSnapshot.state as Array<
-        MakeRouteMatchUnion<TRouter>
-      >
-      return opts?.select ? opts.select(matches) : matches
-    },
-    undefined,
-    { equals: shallow },
-  ) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const matches = router.stores.activeMatchesSnapshot.state as Array<
+      MakeRouteMatchUnion<TRouter>
+    >
+    const res = opts?.select ? opts.select(matches) : matches
+    if (prev === undefined) return res
+    return replaceEqualDeep(prev, res) as any
+  }) as Solid.Accessor<UseMatchesResult<TRouter, TSelected>>
 }
 
 export function useParentMatches<

packages/solid-router/src/link.tsx

@@ -176,7 +176,7 @@ export function useLinkProps<
     try {
       new URL(to as any)
       // Block dangerous protocols like javascript:, blob:, data:
-      if (isDangerousProtocol(to as string, router.protocolAllowlist)) {
+      if (isDangerousProtocol(to, router.protocolAllowlist)) {
         if (process.env.NODE_ENV !== 'production') {
           console.warn(`Blocked Link with dangerous protocol: ${to}`)
         }

packages/solid-router/src/ssr/renderRouterToString.tsx

@@ -3,7 +3,7 @@ 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,

packages/solid-router/src/useLoaderDeps.tsx

@@ -39,7 +39,6 @@ export function useLoaderDeps<
 ): Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>> {
   return useMatch({
     ...opts,
-    equals: opts.select ? undefined : Object.is,
     select: (s) => {
       return opts.select ? opts.select(s.loaderDeps) : s.loaderDeps
     },

packages/solid-router/src/useLocation.tsx

@@ -1,6 +1,6 @@
 import * as Solid from 'solid-js'
+import { replaceEqualDeep } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { shallow } from './store'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -35,9 +35,9 @@ export function useLocation<
 
   const select = opts.select
 
-  return Solid.createMemo(
-    () => select(router.stores.location.state),
-    undefined,
-    { equals: shallow },
-  ) as Accessor<UseLocationResult<TRouter, TSelected>>
+  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>>
 }

packages/solid-router/src/useMatch.tsx

@@ -1,7 +1,7 @@
 import * as Solid from 'solid-js'
 import invariant from 'tiny-invariant'
+import { replaceEqualDeep } from '@tanstack/router-core'
 import { nearestMatchContext } from './matchContext'
-import { shallow } from './store'
 import { useRouter } from './useRouter'
 import type {
   AnyRouter,
@@ -24,10 +24,6 @@ export interface UseMatchBaseOptions<
     match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
   ) => TSelected
   shouldThrow?: TThrow
-  /** @internal */
-  equals?:
-    | false
-    | ((prev: TSelected | undefined, next: TSelected | undefined) => boolean)
 }
 
 export type UseMatchRoute<out TFrom> = <
@@ -106,19 +102,12 @@ export function useMatch<
     )
   })
 
-  return Solid.createMemo(
-    () => {
-      const selectedMatch = match()
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const selectedMatch = match()
 
-      if (selectedMatch === undefined) {
-        return undefined
-      }
-
-      return (
-        opts.select ? opts.select(selectedMatch as any) : selectedMatch
-      ) as any
-    },
-    undefined,
-    { equals: opts.equals ?? shallow },
-  ) as any
+    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
 }

packages/solid-router/src/useParams.tsx

@@ -64,7 +64,6 @@ export function useParams<
     from: opts.from!,
     strict: opts.strict,
     shouldThrow: opts.shouldThrow,
-    equals: opts.select ? undefined : Object.is,
     select: (match: any) => {
       const params = opts.strict === false ? match.params : match._strictParams
       return opts.select ? opts.select(params) : params

packages/solid-router/src/useRouterState.tsx

@@ -1,5 +1,6 @@
 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
@@ -77,14 +52,9 @@ export function useRouterState<
 
   const select = opts.select
 
-  return Solid.createMemo(
-    () => select(router.stores.__store.state),
-    undefined,
-    {
-      // 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.
-      equals: 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>>
 }

packages/solid-router/src/useSearch.tsx

@@ -64,7 +64,6 @@ export function useSearch<
     from: opts.from!,
     strict: opts.strict,
     shouldThrow: opts.shouldThrow,
-    equals: opts.select ? undefined : Object.is,
     select: (match: any) => {
       const search = match.search
       return opts.select ? opts.select(search) : search

packages/solid-router/tests/router.test.tsx

@@ -1762,7 +1762,7 @@ describe('statusCode reset on navigation', () => {
 
   describe.each([true, false])(
     'status code is set when loader/beforeLoad throws (isAsync=%s)',
-    async (isAsync) => {
+    (isAsync) => {
       const throwingFun = isAsync
         ? (toThrow: () => void) => async () => {
             await new Promise((resolve) => setTimeout(resolve, 10))