@benjavicente/angular-router-experimental 1.142.11

package/src/router.ts

@@ -0,0 +1,141 @@
+import { RouterCore } from '@benjavicente/router-core'
+import { getStoreFactory } from './routerStores'
+import type {
+  AnyRoute,
+  RouterOptions,
+  TrailingSlashOption,
+} from '@benjavicente/router-core'
+import type { EnvironmentInjector } from '@angular/core'
+import type { RouterHistory } from '@benjavicente/history'
+import type { ErrorRouteComponent, RouteComponent } from './route'
+
+export type AngularInjectFn = EnvironmentInjector['get']
+
+export type AngularRouterContext = {
+  inject: AngularInjectFn
+}
+
+type InferAngularRouterContext<TRouteTree extends AnyRoute> =
+  TRouteTree['types']['routerContext']
+
+type AngularRouterContextInput<TContext> = Omit<
+  TContext,
+  keyof AngularRouterContext
+> &
+  Partial<Pick<TContext, Extract<keyof TContext, keyof AngularRouterContext>>>
+
+type AngularRouterContextOptions<TRouteTree extends AnyRoute> =
+  {} extends Omit<InferAngularRouterContext<TRouteTree>, keyof AngularRouterContext>
+    ? {
+        context?: AngularRouterContextInput<InferAngularRouterContext<TRouteTree>>
+      }
+    : {
+        context: AngularRouterContextInput<InferAngularRouterContext<TRouteTree>>
+      }
+
+type AngularRouterConstructorOptions<
+  TRouteTree extends AnyRoute,
+  TTrailingSlashOption extends TrailingSlashOption,
+  TDefaultStructuralSharingOption extends boolean,
+  TRouterHistory extends RouterHistory,
+  TDehydrated extends Record<string, any>,
+> = Omit<
+  RouterOptions<
+    TRouteTree,
+    TTrailingSlashOption,
+    TDefaultStructuralSharingOption,
+    TRouterHistory,
+    TDehydrated
+  >,
+  'context' | 'serializationAdapters' | 'defaultSsr'
+> &
+  AngularRouterContextOptions<TRouteTree>
+
+export type CreateRouterFn = <
+  TRouteTree extends AnyRoute,
+  TTrailingSlashOption extends TrailingSlashOption = 'never',
+  TDefaultStructuralSharingOption extends boolean = false,
+  TRouterHistory extends RouterHistory = RouterHistory,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>(
+  options: undefined extends number
+    ? 'strictNullChecks must be enabled in tsconfig.json'
+    : AngularRouterConstructorOptions<
+        TRouteTree,
+        TTrailingSlashOption,
+        TDefaultStructuralSharingOption,
+        TRouterHistory,
+        TDehydrated
+      >,
+) => Router<
+  TRouteTree,
+  TTrailingSlashOption,
+  TDefaultStructuralSharingOption,
+  TRouterHistory,
+  TDehydrated
+>
+
+declare module '@benjavicente/router-core' {
+  export interface RouterOptionsExtensions {
+    /**
+     * The default `component` a route should use if no component is provided.
+     *
+     * @default Outlet
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultcomponent-property)
+     */
+    defaultComponent?: RouteComponent
+    /**
+     * The default `errorComponent` a route should use if no error component is provided.
+     *
+     * @default ErrorComponent
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaulterrorcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#handling-errors-with-routeoptionserrorcomponent)
+     */
+    defaultErrorComponent?: ErrorRouteComponent
+    /**
+     * The default `pendingComponent` a route should use if no pending component is provided.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultpendingcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#showing-a-pending-component)
+     */
+    defaultPendingComponent?: RouteComponent
+    /**
+     * The default `notFoundComponent` a route should use if no notFound component is provided.
+     *
+     * @default NotFound
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultnotfoundcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/not-found-errors#default-router-wide-not-found-handling)
+     */
+    defaultNotFoundComponent?: RouteComponent
+  }
+}
+
+export const createRouter: CreateRouterFn = (options: any) => {
+  return new Router(options)
+}
+
+export class Router<
+  in out TRouteTree extends AnyRoute,
+  in out TTrailingSlashOption extends TrailingSlashOption = 'never',
+  in out TDefaultStructuralSharingOption extends boolean = false,
+  in out TRouterHistory extends RouterHistory = RouterHistory,
+  in out TDehydrated extends Record<string, any> = Record<string, any>,
+> extends RouterCore<
+  TRouteTree,
+  TTrailingSlashOption,
+  TDefaultStructuralSharingOption,
+  TRouterHistory,
+  TDehydrated
+> {
+  constructor(
+    options: AngularRouterConstructorOptions<
+      TRouteTree,
+      TTrailingSlashOption,
+      TDefaultStructuralSharingOption,
+      TRouterHistory,
+      TDehydrated
+    >,
+  ) {
+    super(options as any, getStoreFactory)
+  }
+}

package/src/routerInjectionToken.ts

@@ -0,0 +1,24 @@
+import * as Angular from '@angular/core'
+import type { AnyRouter } from '@benjavicente/router-core'
+
+declare global {
+  interface Window {
+    __TSR_ROUTER_INJECTION_KEY__?: Angular.InjectionToken<AnyRouter>
+  }
+}
+
+const routerInjectionKey = new Angular.InjectionToken<AnyRouter>('ROUTER')
+
+export function getRouterInjectionKey() {
+  if (typeof document === 'undefined') {
+    return routerInjectionKey
+  }
+
+  if (window.__TSR_ROUTER_INJECTION_KEY__) {
+    return window.__TSR_ROUTER_INJECTION_KEY__
+  }
+
+  window.__TSR_ROUTER_INJECTION_KEY__ = routerInjectionKey as any
+
+  return routerInjectionKey
+}

package/src/routerStores.ts

@@ -0,0 +1,107 @@
+import * as Angular from '@angular/core'
+import {
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore,
+} from '@benjavicente/router-core'
+import { isServer } from '@benjavicente/router-core/isServer'
+import type {
+  AnyRoute,
+  GetStoreConfig,
+  RouterReadableStore,
+  RouterStores,
+  RouterWritableStore,
+} from '@benjavicente/router-core'
+
+declare module '@benjavicente/router-core' {
+  // 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> {
+    childMatchIdByRouteId: RouterReadableStore<Record<string, string>>
+    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 result: 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)
+      if (parentStore?.routeId) {
+        result[parentStore.routeId] = childId
+      }
+    }
+
+    return result
+  })
+
+  stores.pendingRouteIds = createReadonlyStore(() => {
+    const ids = stores.pendingMatchesId.state
+    const result: Record<string, boolean> = {}
+
+    for (const id of ids) {
+      const store = stores.pendingMatchStoresById.get(id)
+      if (store?.routeId) {
+        result[store.routeId] = true
+      }
+    }
+
+    return result
+  })
+}
+
+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) {
+    return {
+      createMutableStore: createNonReactiveMutableStore,
+      createReadonlyStore: createNonReactiveReadonlyStore,
+      batch: (fn) => fn(),
+      init: (stores) =>
+        initRouterStores(stores, createNonReactiveReadonlyStore),
+    }
+  }
+
+  return {
+    createMutableStore: createAngularMutableStore,
+    createReadonlyStore: createAngularReadonlyStore,
+    batch: (fn) => fn(),
+    init: (stores) => initRouterStores(stores, createAngularReadonlyStore),
+  }
+}

package/src/ssr-scroll-restoration.ts

@@ -0,0 +1,48 @@
+import { DOCUMENT } from '@angular/common'
+import { EnvironmentInjector, afterNextRender, inject } from '@angular/core'
+import { getScrollRestorationScriptForRouter } from '@benjavicente/router-core/scroll-restoration-script'
+import { injectRouter } from './injectRouter'
+
+const SSR_SCROLL_MARKER = 'data-tsr-scroll-restoration-inline'
+
+/**
+ * Injects the same inline scroll-restore script Solid/React emit on SSR
+ * (`ScrollRestoration` + `ScriptOnce`), so hydration can align window scroll
+ * with sessionStorage before the client router runs.
+ */
+export function injectSsrScrollRestorationScript(): void {
+  const router = injectRouter()
+  const doc = inject(DOCUMENT)
+  const envInjector = inject(EnvironmentInjector)
+
+  if (!router.isServer) {
+    return
+  }
+
+  afterNextRender(() => {
+      const enabled = router.options.scrollRestoration
+      if (!enabled) return
+      if (
+        typeof enabled === 'function' &&
+        !enabled({ location: router.latestLocation })
+      ) {
+        return
+      }
+      if (doc.querySelector(`script[${SSR_SCROLL_MARKER}]`)) {
+        return
+      }
+      const script = getScrollRestorationScriptForRouter(router)
+      if (!script) return
+      const el = doc.createElement('script')
+      el.setAttribute(SSR_SCROLL_MARKER, '')
+      el.className = '$tsr'
+      el.text = `${script};document.currentScript.remove()`
+      const nonce = router.options.ssr?.nonce
+      if (nonce) {
+        el.setAttribute('nonce', nonce)
+      }
+      ;(doc.head ?? doc.body).appendChild(el)
+    },
+    { injector: envInjector },
+  )
+}

package/src/transitioner.ts

@@ -0,0 +1,255 @@
+import * as Angular from '@angular/core'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@benjavicente/router-core'
+import { injectRouter } from './injectRouter'
+import { injectStore } from './injectStore'
+import type { AnyRouter } from '@benjavicente/router-core'
+
+// Track mount state per router to avoid double-loading
+let mountLoadForRouter: { router: AnyRouter | null; mounted: boolean } = {
+  router: null,
+  mounted: false,
+}
+
+/**
+ * Helper function that sets up router transition logic.
+ * This should be called from Matches component to set up:
+ * - router.startTransition
+ * - router.startViewTransition
+ * - History subscription
+ * - Router event watchers
+ *
+ * Must be called during component initialization.
+ *
+ * This is more complicated than the other adapters, since Angular
+ * does not have transition support and a mechanism to wait for the next tick.
+ */
+export function injectTransitionerSetup() {
+  const router = injectRouter()
+  const environmentInjector = Angular.inject(Angular.EnvironmentInjector)
+
+  // Skip on server - no transitions needed
+  if (router.isServer) return
+
+  const destroyRef = Angular.inject(Angular.DestroyRef)
+  let destroyed = false
+  const isLoading = injectStore(router.stores.isLoading, (value) => value)
+
+  // Track if we're in a transition
+  const isTransitioning = injectStore(
+    router.stores.isTransitioning,
+    (value) => value,
+  )
+
+  // Track pending state changes
+  const hasPendingMatches = injectStore(
+    router.stores.hasPendingMatches,
+    (value) => value,
+  )
+  const status = injectStore(router.stores.status, (value) => value)
+  const location = injectStore(router.stores.location, (value) => value)
+  const resolvedLocation = injectStore(
+    router.stores.resolvedLocation,
+    (value) => value,
+  )
+
+  const isAnyPending = Angular.computed(
+    () => isLoading() || isTransitioning() || hasPendingMatches(),
+  )
+
+  const isPagePending = Angular.computed(
+    () => isLoading() || hasPendingMatches(),
+  )
+
+  // Track previous values for comparison using proper previous value tracking
+  const prevIsLoading = injectPrevious(() => isLoading())
+  const prevIsAnyPending = injectPrevious(() => isAnyPending())
+  const prevIsPagePending = injectPrevious(() => isPagePending())
+
+  // 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)
+
+    // Helper to end the transition
+    const endTransition = () => {
+      if (destroyed) return
+
+      // Use afterNextRender to ensure Angular has processed all change detection
+      // This is similar to Vue's nextTick approach
+      Angular.afterNextRender(
+        {
+          read: () => {
+            try {
+              router.stores.isTransitioning.setState(() => false)
+            } catch {
+              // Ignore errors if component is unmounted
+            }
+          },
+        },
+        { injector: environmentInjector },
+      )
+    }
+
+    const result = fn()
+
+    if (result instanceof Promise) {
+      result.finally(() => endTransition())
+    } else {
+      endTransition()
+    }
+  }
+
+  // Subscribe to location changes and try to load the new location
+  let unsubscribe: (() => void) | undefined
+
+  Angular.afterNextRender(() => {
+    unsubscribe = router.history.subscribe(router.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
+    })
+
+    if (
+      trimPathRight(router.latestLocation.href) !==
+      trimPathRight(nextLocation.href)
+    ) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+  })
+
+  // Track if component is mounted to prevent updates after unmount
+  const isMounted = Angular.signal(false)
+
+  Angular.afterNextRender(() => {
+    isMounted.set(true)
+    if (!isAnyPending()) {
+      if (status() === 'pending') {
+        router.stores.status.setState(() => 'idle')
+        router.stores.resolvedLocation.setState(() => location())
+      }
+    }
+  })
+
+  destroyRef.onDestroy(() => {
+    isMounted.set(false)
+    destroyed = true
+    if (unsubscribe) {
+      unsubscribe()
+    }
+  })
+
+  // Try to load the initial location
+  Angular.afterNextRender(() => {
+    if (
+      (typeof window !== 'undefined' && router.ssr) ||
+      (mountLoadForRouter.router === router && mountLoadForRouter.mounted)
+    ) {
+      return
+    }
+    mountLoadForRouter = { router, mounted: true }
+    const tryLoad = async () => {
+      try {
+        await router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+    tryLoad()
+  })
+
+  // Setup effects for emitting events
+  // All effects check isMounted to prevent updates after unmount
+
+  // Watch for onLoad event
+  Angular.effect(() => {
+    if (!isMounted()) return
+    try {
+      if (prevIsLoading() && !isLoading()) {
+        router.emit({
+          type: 'onLoad',
+          ...getLocationChangeInfo(
+            location(),
+            resolvedLocation(),
+          ),
+        })
+      }
+    } catch {
+      // Ignore errors if component is unmounted
+    }
+  })
+
+  // Watch for onBeforeRouteMount event
+  Angular.effect(() => {
+    if (!isMounted()) return
+    try {
+      if (prevIsPagePending() && !isPagePending()) {
+        router.emit({
+          type: 'onBeforeRouteMount',
+          ...getLocationChangeInfo(
+            location(),
+            resolvedLocation(),
+          ),
+        })
+      }
+    } catch {
+      // Ignore errors if component is unmounted
+    }
+  })
+
+  // Watch for onResolved event
+  Angular.effect(() => {
+    if (!isMounted()) return
+    try {
+      if (
+        prevIsAnyPending() &&
+        !isAnyPending() &&
+        status() === 'pending'
+      ) {
+        router.stores.status.setState(() => 'idle')
+        router.stores.resolvedLocation.setState(() => location())
+      }
+
+      // The router was pending and now it's not
+      if (prevIsAnyPending() && !isAnyPending()) {
+        const changeInfo = getLocationChangeInfo(
+          location(),
+          resolvedLocation(),
+        )
+        router.emit({
+          type: 'onResolved',
+          ...changeInfo,
+        })
+
+        if (changeInfo.hrefChanged) {
+          handleHashScroll(router)
+        }
+      }
+    } catch {
+      // Ignore errors if component is unmounted
+    }
+  })
+}
+
+export function injectPrevious<T>(
+  fn: () => NonNullable<T>,
+): Angular.Signal<T | null> {
+  const value = Angular.computed(fn)
+  let previousValue: T | null = null
+
+  return Angular.computed(() => {
+    // We known value is different that the previous one,
+    // thanks to signal memoization.
+    const lastPreviousValue = previousValue
+    previousValue = value()
+    return lastPreviousValue
+  })
+}