@benjavicente/angular-router-experimental 1.142.11 → 1.142.12

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/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,
+  })
+}

package/src/transitioner.ts

@@ -5,7 +5,7 @@ import {
   trimPathRight,
 } from '@benjavicente/router-core'
 import { injectRouter } from './injectRouter'
-import { injectStore } from './injectStore'
+import { injectStore } from './store/injectStore'
 import type { AnyRouter } from '@benjavicente/router-core'
 
 // Track mount state per router to avoid double-loading
@@ -46,7 +46,7 @@ export function injectTransitionerSetup() {
 
   // Track pending state changes
   const hasPendingMatches = injectStore(
-    router.stores.hasPendingMatches,
+    router.stores.hasPending,
     (value) => value,
   )
   const status = injectStore(router.stores.status, (value) => value)
@@ -72,7 +72,7 @@ export function injectTransitionerSetup() {
   // Implement startTransition similar to React/Solid
   // Angular doesn't have a native startTransition like React 18, so we simulate it
   router.startTransition = (fn: () => void | Promise<void>) => {
-    router.stores.isTransitioning.setState(() => true)
+    router.stores.isTransitioning.set(true)
 
     // Helper to end the transition
     const endTransition = () => {
@@ -84,7 +84,7 @@ export function injectTransitionerSetup() {
         {
           read: () => {
             try {
-              router.stores.isTransitioning.setState(() => false)
+              router.stores.isTransitioning.set(false)
             } catch {
               // Ignore errors if component is unmounted
             }
@@ -133,8 +133,8 @@ export function injectTransitionerSetup() {
     isMounted.set(true)
     if (!isAnyPending()) {
       if (status() === 'pending') {
-        router.stores.status.setState(() => 'idle')
-        router.stores.resolvedLocation.setState(() => location())
+        router.stores.status.set('idle')
+        router.stores.resolvedLocation.set(location())
       }
     }
   })
@@ -176,10 +176,7 @@ export function injectTransitionerSetup() {
       if (prevIsLoading() && !isLoading()) {
         router.emit({
           type: 'onLoad',
-          ...getLocationChangeInfo(
-            location(),
-            resolvedLocation(),
-          ),
+          ...getLocationChangeInfo(location(), resolvedLocation()),
         })
       }
     } catch {
@@ -194,10 +191,7 @@ export function injectTransitionerSetup() {
       if (prevIsPagePending() && !isPagePending()) {
         router.emit({
           type: 'onBeforeRouteMount',
-          ...getLocationChangeInfo(
-            location(),
-            resolvedLocation(),
-          ),
+          ...getLocationChangeInfo(location(), resolvedLocation()),
         })
       }
     } catch {
@@ -209,21 +203,14 @@ export function injectTransitionerSetup() {
   Angular.effect(() => {
     if (!isMounted()) return
     try {
-      if (
-        prevIsAnyPending() &&
-        !isAnyPending() &&
-        status() === 'pending'
-      ) {
-        router.stores.status.setState(() => 'idle')
-        router.stores.resolvedLocation.setState(() => location())
+      if (prevIsAnyPending() && !isAnyPending() && status() === 'pending') {
+        router.stores.status.set('idle')
+        router.stores.resolvedLocation.set(location())
       }
 
       // The router was pending and now it's not
       if (prevIsAnyPending() && !isAnyPending()) {
-        const changeInfo = getLocationChangeInfo(
-          location(),
-          resolvedLocation(),
-        )
+        const changeInfo = getLocationChangeInfo(location(), resolvedLocation())
         router.emit({
           type: 'onResolved',
           ...changeInfo,

package/src/injectStore.ts

@@ -1,87 +0,0 @@
-import {
-  assertInInjectionContext,
-  effect,
-  linkedSignal,
-} from '@angular/core'
-import type { CreateSignalOptions, Signal } from '@angular/core'
-
-type ReadableStore<TState> = {
-  state: TState
-}
-
-export function injectStore<TState, TSelected = NoInfer<TState>>(
-  storeOrStoreSignal:
-    | ReadableStore<TState>
-    | (() => ReadableStore<TState>),
-  selector: (state: NoInfer<TState>) => TSelected = (d) =>
-    d as unknown as TSelected,
-  options: CreateSignalOptions<TSelected> = {
-    equal: shallow,
-  },
-): Signal<TSelected> {
-  assertInInjectionContext(injectStore)
-
-  const storeSignal =
-    typeof storeOrStoreSignal === 'function'
-      ? storeOrStoreSignal
-      : () => storeOrStoreSignal
-
-  const slice = linkedSignal(() => selector(storeSignal().state), options)
-
-  effect(() => {
-    slice()
-  })
-
-  return slice.asReadonly()
-}
-
-function shallow<T>(objA: T, objB: T) {
-  if (Object.is(objA, objB)) {
-    return true
-  }
-
-  if (
-    typeof objA !== 'object' ||
-    objA === null ||
-    typeof objB !== 'object' ||
-    objB === null
-  ) {
-    return false
-  }
-
-  if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size) return false
-    for (const [k, v] of objA) {
-      if (!objB.has(k) || !Object.is(v, objB.get(k))) return false
-    }
-    return true
-  }
-
-  if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size) return false
-    for (const v of objA) {
-      if (!objB.has(v)) return false
-    }
-    return true
-  }
-
-  if (objA instanceof Date && objB instanceof Date) {
-    return objA.getTime() === objB.getTime()
-  }
-
-  const keysA = Object.keys(objA)
-  if (keysA.length !== Object.keys(objB).length) {
-    return false
-  }
-
-  for (const key of keysA) {
-    if (
-      !Object.prototype.hasOwnProperty.call(objB, key) ||
-      !Object.is(objA[key as keyof T], objB[key as keyof T])
-    ) {
-      return false
-    }
-  }
-
-  return true
-}