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

package/src/link.tsx

@@ -11,7 +11,6 @@ import {
 
 import { isServer } from '@tanstack/router-core/isServer'
 import { Dynamic } from '@solidjs/web'
-import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
 import { useIntersectionObserver } from './utils'
@@ -75,8 +74,8 @@ export function useLinkProps<
   const [local, rest] = splitProps(
     Solid.merge(
       {
-        activeProps: () => ({ class: 'active' }),
-        inactiveProps: () => ({}),
+        activeProps: STATIC_ACTIVE_PROPS_GET,
+        inactiveProps: STATIC_INACTIVE_PROPS_GET,
       },
       options,
     ),
@@ -118,34 +117,20 @@ export function useLinkProps<
     'unsafeRelative',
   ] as any)
 
-  const currentLocation = useRouterState({
-    select: (s) => s.location,
-  })
-
-  const buildLocationKey = useRouterState({
-    select: (s) => {
-      const leaf = s.matches[s.matches.length - 1]
-      return {
-        search: leaf?.search,
-        hash: s.location.hash,
-        path: leaf?.pathname, // path + params
-      }
-    },
-  })
+  const currentLocation = Solid.createMemo(
+    () => router.stores.location.state,
+    undefined,
+    { equals: (prev, next) => prev?.href === next?.href },
+  )
 
-  const from = options.from
-
-  const _options = () => {
-    const result = {
-      ...options,
-      from,
-    }
-    return result
-  }
+  const _options = () => options
 
   const next = Solid.createMemo(() => {
-    buildLocationKey()
-    return router.buildLocation(_options() as any)
+    // Rebuild when inherited search/hash or the current route context changes.
+    const _fromLocation = currentLocation()
+    const options = { _fromLocation, ..._options() } as any
+    // untrack because router-core will also access stores, which are signals in solid
+    return Solid.untrack(() => router.buildLocation(options))
   })
 
   const hrefOption = Solid.createMemo(() => {
@@ -181,15 +166,13 @@ export function useLinkProps<
       return _href.href
     }
     const to = _options().to
-    const isSafeInternal =
-      typeof to === 'string' &&
-      to.charCodeAt(0) === 47 && // '/'
-      to.charCodeAt(1) !== 47 // but not '//'
-    if (isSafeInternal) return undefined
+    const safeInternal = isSafeInternal(to)
+    if (safeInternal) return undefined
+    if (typeof to !== 'string' || to.indexOf(':') === -1) return undefined
     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}`)
         }
@@ -211,56 +194,60 @@ export function useLinkProps<
 
   const isActive = Solid.createMemo(() => {
     if (externalLink()) return false
-    if (local.activeOptions?.exact) {
+    const activeOptions = local.activeOptions
+    const current = currentLocation()
+    const nextLocation = next()
+
+    if (activeOptions?.exact) {
       const testExact = exactPathTest(
-        currentLocation().pathname,
-        next().pathname,
+        current.pathname,
+        nextLocation.pathname,
         router.basepath,
       )
       if (!testExact) {
         return false
       }
     } else {
-      const currentPathSplit = removeTrailingSlash(
-        currentLocation().pathname,
+      const currentPath = removeTrailingSlash(current.pathname, router.basepath)
+      const nextPath = removeTrailingSlash(
+        nextLocation.pathname,
         router.basepath,
-      ).split('/')
-      const nextPathSplit = removeTrailingSlash(
-        next()?.pathname,
-        router.basepath,
-      )?.split('/')
-
-      const pathIsFuzzyEqual = nextPathSplit?.every(
-        (d, i) => d === currentPathSplit[i],
       )
+
+      const pathIsFuzzyEqual =
+        currentPath.startsWith(nextPath) &&
+        (currentPath.length === nextPath.length ||
+          currentPath[nextPath.length] === '/')
       if (!pathIsFuzzyEqual) {
         return false
       }
     }
 
-    if (local.activeOptions?.includeSearch ?? true) {
-      const searchTest = deepEqual(currentLocation().search, next().search, {
-        partial: !local.activeOptions?.exact,
-        ignoreUndefined: !local.activeOptions?.explicitUndefined,
+    if (activeOptions?.includeSearch ?? true) {
+      const searchTest = deepEqual(current.search, nextLocation.search, {
+        partial: !activeOptions?.exact,
+        ignoreUndefined: !activeOptions?.explicitUndefined,
       })
       if (!searchTest) {
         return false
       }
     }
 
-    if (local.activeOptions?.includeHash) {
+    if (activeOptions?.includeHash) {
       const currentHash =
-        shouldHydrateHash && !hasHydrated() ? '' : currentLocation().hash
-      return currentHash === next().hash
+        shouldHydrateHash && !hasHydrated() ? '' : current.hash
+      return currentHash === nextLocation.hash
     }
     return true
   })
 
   const doPreload = () =>
-    router.preloadRoute(_options() as any).catch((err: any) => {
-      console.warn(err)
-      console.warn(preloadWarning)
-    })
+    router
+      .preloadRoute({ ..._options(), _builtLocation: next() } as any)
+      .catch((err: any) => {
+        console.warn(err)
+        console.warn(preloadWarning)
+      })
 
   const preloadViewportIoCallback = (
     entry: IntersectionObserverEntry | undefined,
@@ -290,17 +277,18 @@ export function useLinkProps<
       return
     }
     if (!local.disabled && preloadValue === 'render') {
-      doPreload()
+      Solid.untrack(() => doPreload())
       hasRenderFetched = true
     }
   })
 
   if (Solid.untrack(externalLink)) {
+    const externalHref = Solid.untrack(externalLink)
     return Solid.merge(
       propsSafeToSpread,
       {
         // ref: mergeRefs(setRef, _options().ref),
-        href: externalLink(),
+        href: externalHref,
       },
       splitProps(local, [
         'target',
@@ -337,11 +325,15 @@ export function useLinkProps<
     ) {
       e.preventDefault()
 
-      setIsTransitioning(true)
+      Solid.runWithOwner(null, () => {
+        setIsTransitioning(true)
+      })
 
       const unsub = router.subscribe('onResolved', () => {
         unsub()
-        setIsTransitioning(false)
+        Solid.runWithOwner(null, () => {
+          setIsTransitioning(false)
+        })
       })
 
       // All is well? Navigate!
@@ -395,100 +387,139 @@ export function useLinkProps<
     }
   }
 
-  /** Call a JSX.EventHandlerUnion with the event. */
-  function callHandler<T, TEvent extends Event>(
-    event: TEvent & { currentTarget: T; target: Element },
-    handler: Solid.JSX.EventHandlerUnion<T, TEvent> | undefined,
-  ) {
-    if (handler) {
-      if (typeof handler === 'function') {
-        handler(event)
-      } else {
-        handler[0](handler[1], event)
-      }
-    }
+  const simpleStyling = Solid.createMemo(
+    () =>
+      local.activeProps === STATIC_ACTIVE_PROPS_GET &&
+      local.inactiveProps === STATIC_INACTIVE_PROPS_GET &&
+      local.class === undefined &&
+      local.style === undefined,
+  )
+
+  const onClick = createComposedHandler(() => local.onClick, handleClick)
+  const onBlur = createComposedHandler(() => local.onBlur, handleLeave)
+  const onFocus = createComposedHandler(
+    () => local.onFocus,
+    enqueueIntentPreload,
+  )
+  const onMouseEnter = createComposedHandler(
+    () => local.onMouseEnter,
+    enqueueIntentPreload,
+  )
+  const onMouseOver = createComposedHandler(
+    () => local.onMouseOver,
+    enqueueIntentPreload,
+  )
+  const onMouseLeave = createComposedHandler(
+    () => local.onMouseLeave,
+    handleLeave,
+  )
+  const onMouseOut = createComposedHandler(() => local.onMouseOut, handleLeave)
+  const onTouchStart = createComposedHandler(
+    () => local.onTouchStart,
+    handleTouchStart,
+  )
 
-    return event.defaultPrevented
+  type ResolvedLinkStateProps = Omit<Solid.ComponentProps<'a'>, 'style'> & {
+    style?: Solid.JSX.CSSProperties
   }
 
-  function composeEventHandlers<T>(
-    handlers: Array<Solid.JSX.EventHandlerUnion<T, any> | undefined>,
-  ) {
-    return (event: any) => {
-      for (const handler of handlers) {
-        callHandler(event, handler)
+  const resolvedProps = Solid.createMemo(() => {
+    const active = isActive()
+
+    const base = {
+      href: hrefOption()?.href,
+      ref: mergeRefs(setRef, _options().ref as any),
+      onClick,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseOver,
+      onMouseLeave,
+      onMouseOut,
+      onTouchStart,
+      disabled: !!local.disabled,
+      target: local.target,
+      ...(local.disabled && STATIC_DISABLED_PROPS),
+      ...(isTransitioning() && STATIC_TRANSITIONING_ATTRIBUTES),
+    }
+
+    if (simpleStyling()) {
+      return {
+        ...base,
+        ...(active && STATIC_DEFAULT_ACTIVE_ATTRIBUTES),
       }
     }
-  }
 
-  // Get the active props
-  const resolvedActiveProps: () => Omit<Solid.ComponentProps<'a'>, 'style'> & {
-    style?: Solid.JSX.CSSProperties
-  } = () =>
-    isActive() ? (functionalUpdate(local.activeProps as any, {}) ?? {}) : {}
-
-  // Get the inactive props
-  const resolvedInactiveProps: () => Omit<
-    Solid.ComponentProps<'a'>,
-    'style'
-  > & { style?: Solid.JSX.CSSProperties } = () =>
-    isActive() ? {} : functionalUpdate(local.inactiveProps, {})
-
-  const resolvedClassName = () =>
-    [local.class, resolvedActiveProps().class, resolvedInactiveProps().class]
+    const activeProps: ResolvedLinkStateProps = active
+      ? (functionalUpdate(local.activeProps as any, {}) ?? EMPTY_OBJECT)
+      : EMPTY_OBJECT
+    const inactiveProps: ResolvedLinkStateProps = active
+      ? EMPTY_OBJECT
+      : functionalUpdate(local.inactiveProps, {})
+    const style = {
+      ...local.style,
+      ...activeProps.style,
+      ...inactiveProps.style,
+    }
+    const className = [local.class, activeProps.class, inactiveProps.class]
       .filter(Boolean)
       .join(' ')
 
-  const resolvedStyle = () => ({
-    ...local.style,
-    ...resolvedActiveProps().style,
-    ...resolvedInactiveProps().style,
+    return {
+      ...activeProps,
+      ...inactiveProps,
+      ...base,
+      ...(Object.keys(style).length ? { style } : undefined),
+      ...(className ? { class: className } : undefined),
+      ...(active && STATIC_ACTIVE_ATTRIBUTES),
+    } as ResolvedLinkStateProps
   })
 
-  return Solid.merge(
-    propsSafeToSpread,
-    resolvedActiveProps,
-    resolvedInactiveProps,
-    () => {
-      return {
-        href: hrefOption()?.href,
-        ref: mergeRefs(setRef, (_options() as any).ref),
-        onClick: composeEventHandlers([local.onClick, handleClick]),
-        onBlur: composeEventHandlers([local.onBlur, handleLeave]),
-        onFocus: composeEventHandlers([local.onFocus, enqueueIntentPreload]),
-        onMouseEnter: composeEventHandlers([
-          local.onMouseEnter,
-          enqueueIntentPreload,
-        ]),
-        onMouseOver: composeEventHandlers([
-          local.onMouseOver,
-          enqueueIntentPreload,
-        ]),
-        onMouseLeave: composeEventHandlers([local.onMouseLeave, handleLeave]),
-        onMouseOut: composeEventHandlers([local.onMouseOut, handleLeave]),
-        onTouchStart: composeEventHandlers([
-          local.onTouchStart,
-          handleTouchStart,
-        ]),
-        disabled: !!local.disabled,
-        target: local.target,
-        ...(() => {
-          const s = resolvedStyle()
-          return Object.keys(s).length ? { style: s } : {}
-        })(),
-        ...(() => {
-          const c = resolvedClassName()
-          return c ? { class: c } : {}
-        })(),
-        ...(local.disabled && {
-          role: 'link',
-          'aria-disabled': 'true',
-        }),
-        ...(isActive() && { 'data-status': 'active', 'aria-current': 'page' }),
-        ...(isTransitioning() && { 'data-transitioning': 'transitioning' }),
-      }
-    },
-  ) as any
+  return Solid.merge(propsSafeToSpread, resolvedProps) as any
+}
+
+const STATIC_ACTIVE_PROPS = { class: 'active' }
+const STATIC_ACTIVE_PROPS_GET = () => STATIC_ACTIVE_PROPS
+const EMPTY_OBJECT = {}
+const STATIC_INACTIVE_PROPS_GET = () => EMPTY_OBJECT
+const STATIC_DEFAULT_ACTIVE_ATTRIBUTES = {
+  class: 'active',
+  'data-status': 'active',
+  'aria-current': 'page',
+}
+const STATIC_DISABLED_PROPS = {
+  role: 'link',
+  'aria-disabled': 'true',
+}
+const STATIC_ACTIVE_ATTRIBUTES = {
+  'data-status': 'active',
+  'aria-current': 'page',
+}
+const STATIC_TRANSITIONING_ATTRIBUTES = {
+  'data-transitioning': 'transitioning',
+}
+
+/** Call a JSX.EventHandlerUnion with the event. */
+function callHandler<T, TEvent extends Event>(
+  event: TEvent & { currentTarget: T; target: Element },
+  handler: Solid.JSX.EventHandlerUnion<T, TEvent>,
+) {
+  if (typeof handler === 'function') {
+    handler(event)
+  } else {
+    handler[0](handler[1], event)
+  }
+  return event.defaultPrevented
+}
+
+function createComposedHandler<T, TEvent extends Event>(
+  getHandler: () => Solid.JSX.EventHandlerUnion<T, TEvent> | undefined,
+  fallback: (event: TEvent) => void,
+) {
+  return (event: TEvent & { currentTarget: T; target: Element }) => {
+    const handler = getHandler()
+    if (!handler || !callHandler(event, handler)) fallback(event)
+  }
 }
 
 export type UseLinkPropsOptions<
@@ -653,8 +684,12 @@ export const Link: LinkComponent<'a'> = (props) => {
     )
   }
 
+  if (!local._asChild) {
+    return <a {...linkProps}>{children()}</a>
+  }
+
   return (
-    <Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
+    <Dynamic component={local._asChild as Solid.ValidComponent} {...linkProps}>
       {children()}
     </Dynamic>
   )
@@ -664,6 +699,13 @@ function isCtrlEvent(e: MouseEvent) {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
 }
 
+function isSafeInternal(to: unknown) {
+  if (typeof to !== 'string') return false
+  const zero = to.charCodeAt(0)
+  if (zero === 47) return to.charCodeAt(1) !== 47 // '/' but not '//'
+  return zero === 46 // '.', '..', './', '../'
+}
+
 export type LinkOptionsFnOptions<
   TOptions,
   TComp,

package/src/matchContext.tsx

@@ -1,10 +1,19 @@
 import * as Solid from 'solid-js'
+import type { AnyRouteMatch } from '@tanstack/router-core'
 
-export const matchContext = Solid.createContext<
-  Solid.Accessor<string | undefined>
->(() => undefined)
+export type NearestMatchContextValue = {
+  matchId: Solid.Accessor<string | undefined>
+  routeId: Solid.Accessor<string | undefined>
+  match: Solid.Accessor<AnyRouteMatch | undefined>
+  hasPending: Solid.Accessor<boolean>
+}
 
-// N.B. this only exists so we can conditionally call useContext on it when we are not interested in the nearest match
-export const dummyMatchContext = Solid.createContext<
-  Solid.Accessor<string | undefined>
->(() => undefined)
+const defaultNearestMatchContext: NearestMatchContextValue = {
+  matchId: () => undefined,
+  routeId: () => undefined,
+  match: () => undefined,
+  hasPending: () => false,
+}
+
+export const nearestMatchContext =
+  Solid.createContext<NearestMatchContextValue>(defaultNearestMatchContext)

package/src/not-found.tsx

@@ -1,7 +1,7 @@
 import { isNotFound } from '@tanstack/router-core'
+import * as Solid from 'solid-js'
 import { CatchBoundary } from './CatchBoundary'
-import { useRouterState } from './useRouterState'
-import type * as Solid from 'solid-js'
+import { useRouter } from './useRouter'
 import type { NotFoundError } from '@tanstack/router-core'
 
 export function CatchNotFound(props: {
@@ -9,14 +9,14 @@ export function CatchNotFound(props: {
   onCatch?: (error: Error) => void
   children: Solid.JSX.Element
 }) {
+  const router = useRouter()
   // TODO: Some way for the user to programmatically reset the not-found boundary?
-  const resetKey = useRouterState({
-    select: (s) => `not-found-${s.location.pathname}-${s.status}`,
-  })
+  const pathname = Solid.createMemo(() => router.stores.location.state.pathname)
+  const status = Solid.createMemo(() => router.stores.status.state)
 
   return (
     <CatchBoundary
-      getResetKey={() => resetKey()}
+      getResetKey={() => `not-found-${pathname()}-${status()}`}
       onCatch={(error) => {
         if (isNotFound(error)) {
           props.onCatch?.(error)

package/src/router.ts

@@ -1,5 +1,6 @@
 import { RouterCore } from '@tanstack/router-core'
 import { createFileRoute, createLazyFileRoute } from './fileRoute'
+import { getStoreFactory } from './routerStores'
 import type { RouterHistory } from '@tanstack/history'
 import type {
   AnyRoute,
@@ -99,7 +100,7 @@ export class Router<
       TDehydrated
     >,
   ) {
-    super(options)
+    super(options, getStoreFactory)
   }
 }
 

package/src/routerStores.ts

@@ -0,0 +1,119 @@
+import * as Solid from 'solid-js'
+import {
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore,
+} from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import type {
+  AnyRoute,
+  GetStoreConfig,
+  RouterReadableStore,
+  RouterStores,
+  RouterWritableStore,
+} from '@tanstack/router-core'
+
+declare module '@tanstack/router-core' {
+  export interface RouterStores<in out TRouteTree extends AnyRoute> {
+    /** Maps each active routeId to the matchId of its child in the match tree. */
+    childMatchIdByRouteId: RouterReadableStore<Record<string, string>>
+    /** Maps each pending routeId to true for quick lookup. */
+    pendingRouteIds: RouterReadableStore<Record<string, boolean>>
+  }
+}
+
+function initRouterStores(
+  stores: RouterStores<AnyRoute>,
+  createReadonlyStore: <TValue>(
+    read: () => TValue,
+  ) => RouterReadableStore<TValue>,
+) {
+  stores.childMatchIdByRouteId = createReadonlyStore(() => {
+    const ids = stores.matchesId.state
+    const obj: Record<string, string> = {}
+    for (let i = 0; i < ids.length - 1; i++) {
+      const parentStore = stores.activeMatchStoresById.get(ids[i]!)
+      if (parentStore?.routeId) {
+        obj[parentStore.routeId] = ids[i + 1]!
+      }
+    }
+    return obj
+  })
+
+  stores.pendingRouteIds = createReadonlyStore(() => {
+    const ids = stores.pendingMatchesId.state
+    const obj: Record<string, boolean> = {}
+    for (const id of ids) {
+      const store = stores.pendingMatchStoresById.get(id)
+      if (store?.routeId) {
+        obj[store.routeId] = true
+      }
+    }
+    return obj
+  })
+}
+
+function createSolidMutableStore<TValue>(
+  initialValue: TValue,
+): RouterWritableStore<TValue> {
+  const [signal, setSignal] = Solid.createSignal(initialValue as any)
+
+  return {
+    get state() {
+      return signal()
+    },
+    setState: setSignal,
+  }
+}
+
+let finalizationRegistry: FinalizationRegistry<() => void> | null = null
+if (typeof globalThis !== 'undefined' && 'FinalizationRegistry' in globalThis) {
+  finalizationRegistry = new FinalizationRegistry((cb) => cb())
+}
+
+function createSolidReadonlyStore<TValue>(
+  read: () => TValue,
+): RouterReadableStore<TValue> {
+  let dispose!: () => void
+  const memo = Solid.createRoot((d) => {
+    dispose = d
+    return Solid.createMemo(read)
+  })
+  const store = {
+    get state() {
+      return memo()
+    },
+  }
+  finalizationRegistry?.register(store, dispose)
+  return store
+}
+
+export const getStoreFactory: GetStoreConfig = (opts) => {
+  if (isServer ?? opts.isServer) {
+    return {
+      createMutableStore: createNonReactiveMutableStore,
+      createReadonlyStore: createNonReactiveReadonlyStore,
+      batch: (fn) => fn(),
+      init: (stores) =>
+        initRouterStores(stores, createNonReactiveReadonlyStore),
+    }
+  }
+
+  let depth = 0
+
+  return {
+    createMutableStore: createSolidMutableStore,
+    createReadonlyStore: createSolidReadonlyStore,
+
+    batch: (fn) => {
+      depth++
+      fn()
+      depth--
+      if (depth === 0) {
+        try {
+          Solid.flush()
+        } catch {}
+      }
+    },
+    init: (stores) => initRouterStores(stores, createSolidReadonlyStore),
+  }
+}

package/src/ssr/RouterClient.tsx

@@ -7,7 +7,7 @@ let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
 
 export function RouterClient(props: { router: AnyRouter }) {
   if (!hydrationPromise) {
-    if (!props.router.state.matches.length) {
+    if (!props.router.stores.matchesId.state.length) {
       hydrationPromise = hydrate(props.router)
     } else {
       hydrationPromise = Promise.resolve()

package/src/ssr/renderRouterToStream.tsx

@@ -42,7 +42,7 @@ export const renderRouterToStream = async ({
     readable as unknown as ReadableStream,
   )
   return new Response(responseStream as any, {
-    status: router.state.statusCode,
+    status: router.stores.statusCode.state,
     headers: responseHeaders,
   })
 }

package/src/ssr/renderRouterToString.tsx

@@ -32,7 +32,7 @@ export const renderRouterToString = ({
       html = html.replace(`</body>`, () => `${injectedHtml}</body>`)
     }
     return new Response(`<!DOCTYPE html>${html}`, {
-      status: router.state.statusCode,
+      status: router.stores.statusCode.state,
       headers: responseHeaders,
     })
   } catch (error) {