@benjavicente/angular-router-experimental 1.142.11 → 1.142.13

package/src/index.ts

@@ -54,10 +54,14 @@ export {
   type InjectMatchesBaseOptions,
   type InjectMatchesResult,
 } from './injectMatches'
-export { injectMatchRoute, type InjectMatchRouteOptions } from './injectMatchRoute'
+export {
+  injectMatchRoute,
+  type InjectMatchRouteOptions,
+} from './injectMatchRoute'
 
 // Injection functions
 export { injectRouter } from './injectRouter'
+export { injectIsShell } from './injectIsShell'
 
 export {
   injectRouterState,
@@ -125,7 +129,7 @@ export { injectCanGoBack } from './injectCanGoBack'
 
 export { injectErrorState } from './injectErrorState'
 
-export { injectStore } from './injectStore'
+export { injectStore } from './store/injectStore'
 
 // Link
 export { type LinkOptions as LinkInputOptions, Link } from './Link'

package/src/injectCanGoBack.ts

@@ -1,11 +1,11 @@
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 
 export function injectCanGoBack() {
   const router = injectRouter()
 
   return injectStore(
     router.stores.location,
-    (location) => location.state.__TSR_index !== 0,
+    (location) => (location.state?.__TSR_index ?? 0) !== 0,
   )
 }

package/src/injectIsShell.ts

@@ -0,0 +1,7 @@
+import { computed } from '@angular/core'
+import { injectRouter } from './injectRouter'
+
+export function injectIsShell() {
+  const router = injectRouter()
+  return computed(() => router.isShell())
+}

package/src/injectLocation.ts

@@ -1,12 +1,12 @@
 import { deepEqual } from '@benjavicente/router-core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
+import type * as Angular from '@angular/core'
 import type {
   AnyRouter,
   RegisteredRouter,
   RouterState,
 } from '@benjavicente/router-core'
-import type * as Angular from '@angular/core'
 
 export interface InjectLocationOptions<TRouter extends AnyRouter, TSelected> {
   select?: (
@@ -29,10 +29,13 @@ export function injectLocation<
 ): Angular.Signal<InjectLocationResult<TRouter, TSelected>> {
   const router = injectRouter<TRouter>()
 
-  return injectStore(
-    router.stores.location,
-    (location) =>
-      (opts?.select ? opts.select(location as any) : location) as any,
-    { equal: deepEqual }
-  ) as Angular.Signal<InjectLocationResult<TRouter, TSelected>>
+  if (!opts?.select) {
+    return injectStore(router.stores.location) as Angular.Signal<
+      InjectLocationResult<TRouter, TSelected>
+    >
+  }
+
+  return injectStore(router.stores.location, opts.select, {
+    equal: deepEqual,
+  }) as Angular.Signal<InjectLocationResult<TRouter, TSelected>>
 }

package/src/injectMatch.ts

@@ -2,7 +2,7 @@ import * as Angular from '@angular/core'
 import { deepEqual, invariant } from '@benjavicente/router-core'
 import { MATCH_CONTEXT_INJECTOR_TOKEN } from './matchInjectorToken'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import type {
   AnyRouter,
   MakeRouteMatch,
@@ -13,6 +13,11 @@ import type {
   ThrowOrOptional,
 } from '@benjavicente/router-core'
 
+const dummyStore = {
+  get: () => undefined,
+  subscribe: () => ({ unsubscribe: () => {} }),
+} as any
+
 export interface InjectMatchBaseOptions<
   TRouter extends AnyRouter,
   TFrom,
@@ -49,8 +54,8 @@ export type InjectMatchResult<
   TSelected,
 > = unknown extends TSelected
   ? TStrict extends true
-  ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
-  : MakeRouteMatchUnion<TRouter>
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
   : TSelected
 
 export function injectMatch<
@@ -75,48 +80,54 @@ export function injectMatch<
     ? undefined
     : Angular.inject(MATCH_CONTEXT_INJECTOR_TOKEN)
 
+  const match = injectStore(
+    opts.from
+      ? router.stores.getRouteMatchStore(opts.from)
+      : () => {
+          const matchId = nearestMatch?.matchId()
+          return matchId
+            ? (router.stores.matchStores.get(matchId) ?? dummyStore)
+            : dummyStore
+        },
+    (d) => d,
+  )
   const pendingRouteIds = injectStore(
     router.stores.pendingRouteIds,
-    (s) => s,
+    (ids) => ids,
   )
   const isTransitioning = injectStore(
     router.stores.isTransitioning,
-    (s) => s,
+    (value) => value,
   )
 
-  const match = () => {
-    if (opts.from) {
-      return router.stores.getMatchStoreByRouteId(opts.from).state
-    }
-
-    return nearestMatch?.match()
-  }
+  return Angular.computed(
+    () => {
+      const selectedMatch = match()
 
-  return Angular.computed(() => {
-    const selectedMatch = match()
+      if (selectedMatch !== undefined) {
+        return opts.select ? opts.select(selectedMatch as any) : selectedMatch
+      }
 
-    if (selectedMatch !== undefined) {
-      return opts.select ? opts.select(selectedMatch as any) : selectedMatch
-    }
+      const hasPendingMatch = opts.from
+        ? Boolean(pendingRouteIds()[opts.from!])
+        : (nearestMatch?.hasPending() ?? false)
 
-    const hasPendingMatch = opts.from
-      ? Boolean(pendingRouteIds()[opts.from])
-      : nearestMatch?.hasPending() ?? false
+      if (
+        !hasPendingMatch &&
+        !isTransitioning() &&
+        (opts.shouldThrow ?? true)
+      ) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error(
+            `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+          )
+        }
 
-    if (
-      !hasPendingMatch &&
-      !isTransitioning() &&
-      (opts.shouldThrow ?? true)
-    ) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(
-          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-        )
+        invariant()
       }
 
-      invariant()
-    }
-
-    return undefined
-  }, { equal: deepEqual }) as any
+      return undefined
+    },
+    { equal: deepEqual },
+  ) as any
 }

package/src/injectMatchRoute.ts

@@ -1,6 +1,6 @@
 import * as Angular from '@angular/core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import type {
   AnyRouter,
   DeepPartial,
@@ -9,7 +9,6 @@ import type {
   MakeOptionalSearchParams,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
   ResolveRoute,
   ToSubOptionsProps,
@@ -31,7 +30,7 @@ export function injectMatchRoute<
   TRouter extends AnyRouter = RegisteredRouter,
 >() {
   const router = injectRouter<TRouter>()
-  const reactivity = injectStore(router.stores.matchRouteReactivity, (d) => d)
+  const reactivity = injectStore(router.stores.matchRouteDeps, (d) => d)
 
   return <
     const TFrom extends string = string,
@@ -41,12 +40,12 @@ export function injectMatchRoute<
   >(
     opts: InjectMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
   ): Angular.Signal<
-    false | Expand<ResolveRoute<TRouter, TFrom, NoInfer<TTo>>['types']['allParams']>
+    false | Expand<ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']>
   > => {
     return Angular.computed(() => {
-      reactivity()
       const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
+      reactivity()
       return router.matchRoute(rest as any, {
         pending,
         caseSensitive,

package/src/injectMatches.ts

@@ -1,7 +1,7 @@
 import * as Angular from '@angular/core'
 import { deepEqual } from '@benjavicente/router-core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import { MATCH_CONTEXT_INJECTOR_TOKEN } from './matchInjectorToken'
 import type {
   AnyRouter,
@@ -28,15 +28,15 @@ export function injectMatches<
   opts?: InjectMatchesBaseOptions<TRouter, TSelected>,
 ): Angular.Signal<InjectMatchesResult<TRouter, TSelected>> {
   const router = injectRouter<TRouter>()
-  const matches = injectStore(router.stores.activeMatchesSnapshot, (value) => {
-    return value as Array<MakeRouteMatchUnion<TRouter>>
-  })
 
-  return Angular.computed(() => {
-    const currentMatches = matches()
-    const result = opts?.select ? opts.select(currentMatches) : currentMatches
-    return result as InjectMatchesResult<TRouter, TSelected>
-  }, { equal: deepEqual }) as any
+  return injectStore(
+    router.stores.matches,
+    (currentMatches) => {
+      const matches = currentMatches as Array<MakeRouteMatchUnion<TRouter>>
+      return opts?.select ? opts.select(matches) : matches
+    },
+    { equal: deepEqual },
+  ) as Angular.Signal<InjectMatchesResult<TRouter, TSelected>>
 }
 
 export function injectParentMatches<

package/src/injectRouterState.ts

@@ -2,7 +2,7 @@ import { isServer } from '@benjavicente/router-core/isServer'
 import * as Angular from '@angular/core'
 import { deepEqual } from '@benjavicente/router-core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -29,25 +29,30 @@ export function injectRouterState<
     warn: opts?.router === undefined,
   })
   const router = opts?.router ?? contextRouter
-  const state = injectStore(router.stores.__store, (state) => state)
 
   // During SSR we render exactly once and do not need reactivity.
   // Avoid subscribing to the store on the server since the server store
   // implementation does not provide subscribe() semantics.
-  const _isServer =
-    typeof isServer === 'boolean' ? isServer : router.isServer
+  const _isServer = isServer ?? router.isServer
   if (_isServer) {
-    const state = router.stores.__store.state as RouterState<
+    const state = router.stores.__store.get() as RouterState<
       TRouter['routeTree']
     >
     const selected = (
       opts?.select ? opts.select(state) : state
     ) as InjectRouterStateResult<TRouter, TSelected>
-    return (() => selected) as Angular.Signal<InjectRouterStateResult<TRouter, TSelected>>
+    return (() => selected) as Angular.Signal<
+      InjectRouterStateResult<TRouter, TSelected>
+    >
+  }
+
+  if (!opts?.select) {
+    return injectStore(router.stores.__store) as Angular.Signal<
+      InjectRouterStateResult<TRouter, TSelected>
+    >
   }
 
-  return Angular.computed(() => {
-    const result = opts?.select ? opts.select(state()) : state()
-    return result as InjectRouterStateResult<TRouter, TSelected>
-  }, { equal: deepEqual }) as any;
+  return injectStore(router.stores.__store, opts.select, {
+    equal: deepEqual,
+  }) as Angular.Signal<InjectRouterStateResult<TRouter, TSelected>>
 }

package/src/renderer/injectIsCatchingError.ts

@@ -1,13 +1,13 @@
 import * as Angular from '@angular/core'
 import { injectRouter } from '../injectRouter'
 import { injectRouterState } from '../injectRouterState'
-import type { AnyRoute } from '@benjavicente/router-core'
+import type { AnyRoute, AnyRouteMatch } from '@benjavicente/router-core'
 
-export function injectIsCatchingError({
+export function injectCatchingErrorMatch({
   matchId,
 }: {
   matchId: Angular.Signal<string | undefined>
-}): Angular.Signal<boolean> {
+}): Angular.Signal<AnyRouteMatch | undefined> {
   const router = injectRouter()
 
   const matches = injectRouterState({
@@ -20,21 +20,33 @@ export function injectIsCatchingError({
 
   return Angular.computed(() => {
     // The child route will handle the error with the default error component.
-    if (router.options.defaultErrorComponent != null) return false;
+    if (router.options.defaultErrorComponent != null) return undefined
 
     const startingIndex = matchIndex()
-    if (startingIndex === -1) return false
+    if (startingIndex === -1) return undefined
     const matchesList = matches()
 
     for (let i = startingIndex + 1; i < matchesList.length; i++) {
       const descendant = matchesList[i]
       const route = router.routesById[descendant?.routeId] as AnyRoute
       // Is catched by a child route with an error component.
-      if (route.options.errorComponent != null) return false
+      if (route.options.errorComponent != null) return undefined
 
       // Found error status without error component in between.
-      if (descendant?.status === "error") return true
+      if (descendant?.status === 'error') return descendant
     }
-    return false
+    return undefined
+  })
+}
+
+export function injectIsCatchingError({
+  matchId,
+}: {
+  matchId: Angular.Signal<string | undefined>
+}): Angular.Signal<boolean> {
+  const catchingErrorMatch = injectCatchingErrorMatch({ matchId })
+
+  return Angular.computed(() => {
+    return catchingErrorMatch() !== undefined
   })
 }

package/src/renderer/injectRender.ts

@@ -10,7 +10,7 @@ import type { Provider, Type } from '@angular/core'
 
 export type RenderValue =
   | {
-      key?: string
+      key?: unknown
       component: Type<any> | null | undefined
       inputs?: Record<string, () => unknown>
       providers?: Array<Provider>
@@ -57,7 +57,9 @@ export function injectRender(renderValueFn: () => RenderValue): void {
 function resolvedKey(value: RenderValue) {
   const component = value?.component
   if (!value || !component) return []
-  return [component, value.key]
+  return Array.isArray(value.key)
+    ? [component, ...value.key]
+    : [component, value.key]
 }
 
 function keysAreEqual(a: Array<any>, b: Array<any>) {

package/src/route.ts

@@ -53,9 +53,6 @@ declare module '@benjavicente/router-core' {
   }
 
   export interface RootRouteOptionsExtensions {
-    shellComponent?: Angular.Type<{
-      children: any
-    }>
   }
 
   export interface RouteExtensions<

package/src/routerStores.ts

@@ -1,9 +1,10 @@
-import * as Angular from '@angular/core'
+import { batch, createAtom } from '@tanstack/store'
 import {
   createNonReactiveMutableStore,
   createNonReactiveReadonlyStore,
 } from '@benjavicente/router-core'
 import { isServer } from '@benjavicente/router-core/isServer'
+import type { Readable } from '@tanstack/store'
 import type {
   AnyRoute,
   GetStoreConfig,
@@ -13,9 +14,13 @@ import type {
 } from '@benjavicente/router-core'
 
 declare module '@benjavicente/router-core' {
+  export interface RouterReadableStore<TValue> extends Readable<TValue> {}
+
   // eslint-disable-next-line unused-imports/no-unused-vars -- generic must match upstream `RouterStores<TRouteTree>` for augmentation
   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>>
   }
 }
@@ -27,68 +32,32 @@ function initRouterStores(
   ) => RouterReadableStore<TValue>,
 ) {
   stores.childMatchIdByRouteId = createReadonlyStore(() => {
-    const ids = stores.matchesId.state
-    const result: Record<string, string> = {}
-
+    const ids = stores.matchesId.get()
+    const obj: Record<string, string> = {}
     for (let i = 0; i < ids.length - 1; i++) {
-      const matchId = ids[i]
-      const childId = ids[i + 1]
-      if (matchId === undefined || childId === undefined) continue
-      const parentStore = stores.activeMatchStoresById.get(matchId)
+      const parentStore = stores.matchStores.get(ids[i]!)
       if (parentStore?.routeId) {
-        result[parentStore.routeId] = childId
+        obj[parentStore.routeId] = ids[i + 1]!
       }
     }
-
-    return result
+    return obj
   })
 
   stores.pendingRouteIds = createReadonlyStore(() => {
-    const ids = stores.pendingMatchesId.state
-    const result: Record<string, boolean> = {}
-
+    const ids = stores.pendingIds.get()
+    const obj: Record<string, boolean> = {}
     for (const id of ids) {
-      const store = stores.pendingMatchStoresById.get(id)
+      const store = stores.pendingMatchStores.get(id)
       if (store?.routeId) {
-        result[store.routeId] = true
+        obj[store.routeId] = true
       }
     }
-
-    return result
+    return obj
   })
 }
 
-function createAngularMutableStore<TValue>(
-  initialValue: TValue,
-): RouterWritableStore<TValue> {
-  const signal = Angular.signal(initialValue)
-
-  return {
-    get state() {
-      return signal()
-    },
-    setState(updater) {
-      signal.update(updater)
-    },
-  }
-}
-
-function createAngularReadonlyStore<TValue>(
-  read: () => TValue,
-): RouterReadableStore<TValue> {
-  const computed = Angular.computed(read)
-
-  return {
-    get state() {
-      return computed()
-    },
-  }
-}
-
 export const getStoreFactory: GetStoreConfig = (opts) => {
-  const useNonReactive =
-    typeof isServer === 'boolean' ? isServer : !!opts.isServer
-  if (useNonReactive) {
+  if (isServer ?? opts.isServer) {
     return {
       createMutableStore: createNonReactiveMutableStore,
       createReadonlyStore: createNonReactiveReadonlyStore,
@@ -99,9 +68,13 @@ export const getStoreFactory: GetStoreConfig = (opts) => {
   }
 
   return {
-    createMutableStore: createAngularMutableStore,
-    createReadonlyStore: createAngularReadonlyStore,
-    batch: (fn) => fn(),
-    init: (stores) => initRouterStores(stores, createAngularReadonlyStore),
+    createMutableStore: createAtom as <TValue>(
+      initialValue: TValue,
+    ) => RouterWritableStore<TValue>,
+    createReadonlyStore: createAtom as <TValue>(
+      read: () => TValue,
+    ) => RouterReadableStore<TValue>,
+    batch,
+    init: (stores) => initRouterStores(stores, createAtom),
   }
 }

package/src/store/injectSelector.ts

@@ -0,0 +1,62 @@
+import {
+  Injector,
+  assertInInjectionContext,
+  effect,
+  inject,
+  linkedSignal,
+  runInInjectionContext,
+} from '@angular/core'
+import type { CreateSignalOptions, Signal } from '@angular/core'
+
+export interface InjectSelectorOptions<TSelected> extends Omit<
+  CreateSignalOptions<TSelected>,
+  'equal'
+> {
+  compare?: (a: TSelected, b: TSelected) => boolean
+  injector?: Injector
+}
+
+export type SelectionSource<T> = {
+  get: () => T
+  subscribe: (listener: (value: T) => void) => {
+    unsubscribe: () => void
+  }
+}
+
+function resolveInjector(
+  fn: (...args: Array<never>) => unknown,
+  injector?: Injector,
+) {
+  if (!injector) {
+    assertInInjectionContext(fn)
+    return inject(Injector)
+  }
+
+  return injector
+}
+
+export function injectSelector<TState, TSelected = NoInfer<TState>>(
+  source: SelectionSource<TState> | (() => SelectionSource<TState>),
+  selector: (state: NoInfer<TState>) => TSelected = (d) =>
+    d as unknown as TSelected,
+  options?: InjectSelectorOptions<TSelected>,
+): Signal<TSelected> {
+  const injector = resolveInjector(injectSelector, options?.injector)
+
+  return runInInjectionContext(injector, () => {
+    const _source = typeof source === 'function' ? source : () => source
+
+    const slice = linkedSignal(() => selector(_source().get()), {
+      equal: options?.compare,
+    })
+
+    effect((onCleanup) => {
+      const { unsubscribe } = _source().subscribe((state) => {
+        slice.set(selector(state))
+      })
+      onCleanup(unsubscribe)
+    })
+
+    return slice.asReadonly()
+  })
+}

package/src/store/injectStore.ts

@@ -0,0 +1,33 @@
+import { injectSelector } from './injectSelector'
+import type { CreateSignalOptions, Injector, Signal } from '@angular/core'
+import type { SelectionSource } from './injectSelector'
+
+type CompatibilityInjectStoreOptions<TSelected> =
+  CreateSignalOptions<TSelected> & {
+    injector?: Injector
+  }
+
+export function injectStore<TState, TSelected = NoInfer<TState>>(
+  store: SelectionSource<TState>,
+  selector?: (state: NoInfer<TState>) => TSelected,
+  options?: CompatibilityInjectStoreOptions<TSelected>,
+): Signal<TSelected>
+export function injectStore<TState, TSelected = NoInfer<TState>>(
+  store: SelectionSource<TState> | (() => SelectionSource<TState>),
+  selector?: (state: NoInfer<TState>) => TSelected,
+  options?: CompatibilityInjectStoreOptions<TSelected>,
+): Signal<TSelected>
+export function injectStore<TState, TSelected = NoInfer<TState>>(
+  store: SelectionSource<TState> | (() => SelectionSource<TState>),
+  selector: (state: NoInfer<TState>) => TSelected = (d) =>
+    d as unknown as TSelected,
+  options?: CompatibilityInjectStoreOptions<TSelected>,
+): Signal<TSelected> {
+  const { equal, injector, ...signalOptions } = options ?? {}
+
+  return injectSelector(store, selector, {
+    ...signalOptions,
+    compare: equal,
+    injector,
+  })
+}