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

package/src/useBlocker.tsx

@@ -180,86 +180,103 @@ export function useBlocker(
     reset: undefined,
   })
 
-  Solid.createTrackedEffect(() => {
-    const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
-      function getLocation(
-        location: HistoryLocation,
-      ): AnyShouldBlockFnLocation {
-        const parsedLocation = router.parseLocation(location)
-        const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)
-        if (matchedRoutes.foundRoute === undefined) {
+  let disposeBlock: (() => void) | undefined
+
+  Solid.createEffect(
+    () => props.disabled,
+    (disabled) => {
+      // Dispose previous blocker registration when re-running
+      disposeBlock?.()
+      disposeBlock = undefined
+
+      if (disabled) {
+        return
+      }
+
+      const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+        function getLocation(
+          location: HistoryLocation,
+        ): AnyShouldBlockFnLocation {
+          const parsedLocation = router.parseLocation(location)
+          const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)
+          if (matchedRoutes.foundRoute === undefined) {
+            return {
+              routeId: '__notFound__',
+              fullPath: parsedLocation.pathname,
+              pathname: parsedLocation.pathname,
+              params: matchedRoutes.routeParams,
+              search: parsedLocation.search,
+            }
+          }
           return {
-            routeId: '__notFound__',
-            fullPath: parsedLocation.pathname,
+            routeId: matchedRoutes.foundRoute.id,
+            fullPath: matchedRoutes.foundRoute.fullPath,
             pathname: parsedLocation.pathname,
             params: matchedRoutes.routeParams,
             search: parsedLocation.search,
           }
         }
-        return {
-          routeId: matchedRoutes.foundRoute.id,
-          fullPath: matchedRoutes.foundRoute.fullPath,
-          pathname: parsedLocation.pathname,
-          params: matchedRoutes.routeParams,
-          search: parsedLocation.search,
-        }
-      }
-
-      const current = getLocation(blockerFnArgs.currentLocation)
-      const next = getLocation(blockerFnArgs.nextLocation)
 
-      if (
-        current.routeId === '__notFound__' &&
-        next.routeId !== '__notFound__'
-      ) {
-        return false
-      }
-
-      const shouldBlock = await props.shouldBlockFn({
-        action: blockerFnArgs.action,
-        current,
-        next,
-      })
-      if (!props.withResolver) {
-        return shouldBlock
-      }
+        const current = getLocation(blockerFnArgs.currentLocation)
+        const next = getLocation(blockerFnArgs.nextLocation)
 
-      if (!shouldBlock) {
-        return false
-      }
+        if (
+          current.routeId === '__notFound__' &&
+          next.routeId !== '__notFound__'
+        ) {
+          return false
+        }
 
-      const promise = new Promise<boolean>((resolve) => {
-        setResolver({
-          status: 'blocked',
+        const shouldBlock = await props.shouldBlockFn({
+          action: blockerFnArgs.action,
           current,
           next,
-          action: blockerFnArgs.action,
-          proceed: () => resolve(false),
-          reset: () => resolve(true),
         })
-      })
+        if (!props.withResolver) {
+          return shouldBlock
+        }
 
-      const canNavigateAsync = await promise
-      setResolver({
-        status: 'idle',
-        current: undefined,
-        next: undefined,
-        action: undefined,
-        proceed: undefined,
-        reset: undefined,
-      })
+        if (!shouldBlock) {
+          return false
+        }
 
-      return canNavigateAsync
-    }
+        const promise = new Promise<boolean>((resolve) => {
+          setResolver({
+            status: 'blocked',
+            current,
+            next,
+            action: blockerFnArgs.action,
+            proceed: () => resolve(false),
+            reset: () => resolve(true),
+          })
+        })
 
-    const disposeBlock = props.disabled
-      ? undefined
-      : router.history.block({
-          blockerFn: blockerFnComposed,
-          enableBeforeUnload: props.enableBeforeUnload,
+        const canNavigateAsync = await promise
+        setResolver({
+          status: 'idle',
+          current: undefined,
+          next: undefined,
+          action: undefined,
+          proceed: undefined,
+          reset: undefined,
         })
 
-    return () => disposeBlock?.()
+        return canNavigateAsync
+      }
+
+      disposeBlock = router.history.block({
+        blockerFn: blockerFnComposed,
+        enableBeforeUnload: props.enableBeforeUnload,
+      })
+    },
+  )
+
+  // Clean up on unmount
+  Solid.onSettled(() => {
+    return () => {
+      disposeBlock?.()
+      disposeBlock = undefined
+    }
   })
 
   return resolver

package/src/useCanGoBack.ts

@@ -1,5 +1,9 @@
-import { useRouterState } from './useRouterState'
+import * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
 
 export function useCanGoBack() {
-  return useRouterState({ select: (s) => s.location.state.__TSR_index !== 0 })
+  const router = useRouter()
+  return Solid.createMemo(
+    () => router.stores.location.state.state.__TSR_index !== 0,
+  )
 }

package/src/useLoaderDeps.tsx

@@ -37,11 +37,10 @@ export function useLoaderDeps<
 >(
   opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected>,
 ): Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>> {
-  const { select, ...rest } = opts
   return useMatch({
-    ...rest,
+    ...opts,
     select: (s) => {
-      return select ? select(s.loaderDeps) : s.loaderDeps
+      return opts.select ? opts.select(s.loaderDeps) : s.loaderDeps
     },
   }) as Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>>
 }

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,47 +70,45 @@ 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(),
-      )
+  const match = () => {
+    if (opts.from) {
+      const ids = router.stores.matchesId.state
+      for (const id of ids) {
+        const matchStore = router.stores.activeMatchStoresById.get(id)
+        if (matchStore?.routeId === opts.from) {
+          return matchStore.state
+        }
+      }
 
-      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(),
-        )
+      return undefined
+    }
 
-        // Determine if we should throw an error
-        const shouldThrowError =
-          !pendingMatch && !state.isTransitioning && (opts.shouldThrow ?? true)
+    return nearestMatch?.match()
+  }
 
-        return { match: undefined, shouldThrowError }
-      }
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const selectedMatch = match()
 
-      return {
-        match: opts.select ? opts.select(match) : match,
-        shouldThrowError: false,
-      }
-    },
-  } as any)
+    if (selectedMatch === undefined) {
+      const hasPendingMatch = opts.from
+        ? Boolean(router.stores.pendingRouteIds.state[opts.from!])
+        : (nearestMatch?.hasPending() ?? false)
+      const isTransitioning = router.stores.isTransitioning.state
 
-  if (Solid.untrack(matchState).shouldThrowError) {
-    invariant(
-      false,
-      `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-    )
-  }
+      invariant(
+        !(!hasPendingMatch && !isTransitioning && (opts.shouldThrow ?? true)),
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+      return undefined
+    }
 
-  // Return an accessor that extracts just the match value
-  return Solid.createMemo(() => matchState().match) as any
+    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 { createMemo, createSignal, onCleanup } from 'solid-js'
 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,41 +9,6 @@ import type {
 } from '@tanstack/router-core'
 import type { Accessor } from 'solid-js'
 
-function deepEqual(a: any, b: any): boolean {
-  if (Object.is(a, b)) return true
-
-  if (isPromiseLike(a) || isPromiseLike(b)) return false
-
-  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
-}
-
-function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
-  return (
-    !!value &&
-    (typeof value === 'object' || typeof value === 'function') &&
-    typeof (value as PromiseLike<unknown>).then === 'function'
-  )
-}
-
 export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
   router?: TRouter
   select?: (state: RouterState<TRouter['routeTree']>) => TSelected
@@ -69,40 +35,28 @@ 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 selected = createMemo(() =>
-      opts?.select ? opts.select(state) : state,
-    ) as Accessor<UseRouterStateResult<TRouter, TSelected>>
-    return selected
+    const state = router.stores.__store.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 selector = (state: any) => {
-    if (opts?.select) return opts.select(state)
-
-    return state
+  if (!opts?.select) {
+    return (() => router.stores.__store.state) as Accessor<
+      UseRouterStateResult<TRouter, TSelected>
+    >
   }
 
-  // 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),
-  })
+  const select = opts.select
 
-  return selected 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,27 +1,5 @@
 import * as Solid from 'solid-js'
 
-export const useLayoutEffect =
-  typeof window !== 'undefined' ? Solid.createEffect : Solid.createEffect
-
-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) {
-        return { previous: prev.current, current }
-      }
-
-      return prev
-    },
-  )
-}
-
 /**
  * React hook to wrap `IntersectionObserver`.
  *
@@ -68,9 +46,9 @@ export function useIntersectionObserver<T extends Element>(
 
     observerRef.observe(r)
 
-    Solid.onCleanup(() => {
+    return () => {
       observerRef?.disconnect()
-    })
+    }
   })
 
   return () => observerRef