@tanstack/router-core 0.0.1-beta.45 → 0.0.1-beta.49

package/src/routeMatch.ts

@@ -1,4 +1,3 @@
-import { boolean } from 'zod'
 import { GetFrameworkGeneric } from './frameworks'
 import { Route } from './route'
 import {
@@ -7,16 +6,15 @@ import {
   DefaultAllRouteInfo,
   RouteInfo,
 } from './routeInfo'
-import { Router } from './router'
-import { batch, createStore } from '@solidjs/reactivity'
+import { AnyRouter, Router } from './router'
+import { batch, createStore, Store } from './store'
 import { Expand } from './utils'
-import { sharedClone } from './sharedClone'
+import { replaceEqualDeep } from './interop'
 
 export interface RouteMatchStore<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
   TRouteInfo extends AnyRouteInfo = RouteInfo,
 > {
-  parentMatch?: RouteMatch
   routeSearch: TRouteInfo['searchSchema']
   search: Expand<
     TAllRouteInfo['fullSearchSchema'] & TRouteInfo['fullSearchSchema']
@@ -25,337 +23,324 @@ export interface RouteMatchStore<
   updatedAt?: number
   error?: unknown
   invalid: boolean
-  isInvalid: boolean
   loaderData: TRouteInfo['loaderData']
   routeLoaderData: TRouteInfo['routeLoaderData']
   isFetching: boolean
   invalidAt: number
 }
 
-export interface RouteMatch<
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TRouteInfo extends AnyRouteInfo = RouteInfo,
-> extends Route<TAllRouteInfo, TRouteInfo> {
-  store: RouteMatchStore<TAllRouteInfo, TRouteInfo>
-  // setStore: WritableStore<RouteMatchStore<TAllRouteInfo, TRouteInfo>>
-  matchId: string
-  pathname: string
-  params: TRouteInfo['allParams']
-  childMatches: RouteMatch[]
-  cancel: () => void
-  load: (
-    loaderOpts?:
-      | { preload: true; maxAge: number; gcMaxAge: number }
-      | { preload?: false; maxAge?: never; gcMaxAge?: never },
-  ) => Promise<TRouteInfo['routeLoaderData']>
-  fetch: (opts?: { maxAge?: number }) => Promise<TRouteInfo['routeLoaderData']>
-  invalidate: () => void
-  hasLoaders: () => boolean
-  __: {
-    setParentMatch: (parentMatch?: RouteMatch) => void
-    component?: GetFrameworkGeneric<'Component'>
-    errorComponent?: GetFrameworkGeneric<'ErrorComponent'>
-    pendingComponent?: GetFrameworkGeneric<'Component'>
-    loadPromise?: Promise<void>
-    onExit?:
-      | void
-      | ((matchContext: {
-          params: TRouteInfo['allParams']
-          search: TRouteInfo['fullSearchSchema']
-        }) => void)
-    abortController: AbortController
-    validate: () => void
-  }
-}
-
 const componentTypes = [
   'component',
   'errorComponent',
   'pendingComponent',
 ] as const
 
-export function createRouteMatch<
+export class RouteMatch<
   TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
   TRouteInfo extends AnyRouteInfo = RouteInfo,
->(
-  router: Router<any, any, any>,
-  route: Route<TAllRouteInfo, TRouteInfo>,
-  opts: {
-    parentMatch?: RouteMatch<any, any>
-    matchId: string
-    params: TRouteInfo['allParams']
-    pathname: string
-  },
-): RouteMatch<TAllRouteInfo, TRouteInfo> {
-  let componentsPromise: Promise<void>
-  let dataPromise: Promise<TRouteInfo['routeLoaderData']>
-  let latestId = ''
-  let resolve = () => {}
-
-  function setLoaderData(loaderData: TRouteInfo['routeLoaderData']) {
+> {
+  route!: Route<TAllRouteInfo, TRouteInfo>
+  router!: Router<TAllRouteInfo['routeConfig'], TAllRouteInfo>
+  store!: Store<RouteMatchStore<TAllRouteInfo, TRouteInfo>>
+  id!: string
+  pathname!: string
+  params!: TRouteInfo['allParams']
+
+  component: GetFrameworkGeneric<'Component'>
+  errorComponent: GetFrameworkGeneric<'ErrorComponent'>
+  pendingComponent: GetFrameworkGeneric<'Component'>
+  abortController = new AbortController()
+  #latestId = ''
+  #resolve = () => {}
+  onLoaderDataListeners = new Set<() => void>()
+  parentMatch?: RouteMatch
+
+  __loadPromise?: Promise<void>
+  __onExit?:
+    | void
+    | ((matchContext: {
+        params: TRouteInfo['allParams']
+        search: TRouteInfo['fullSearchSchema']
+      }) => void)
+
+  constructor(
+    router: AnyRouter,
+    route: Route<TAllRouteInfo, TRouteInfo>,
+    opts: {
+      matchId: string
+      params: TRouteInfo['allParams']
+      pathname: string
+    },
+  ) {
+    Object.assign(this, {
+      route,
+      router,
+      matchId: opts.matchId,
+      pathname: opts.pathname,
+      params: opts.params,
+      store: createStore<RouteMatchStore<TAllRouteInfo, TRouteInfo>>({
+        routeSearch: {},
+        search: {} as any,
+        status: 'idle',
+        routeLoaderData: {} as TRouteInfo['routeLoaderData'],
+        loaderData: {} as TRouteInfo['loaderData'],
+        isFetching: false,
+        invalid: false,
+        invalidAt: Infinity,
+      }),
+    })
+
+    if (!this.__hasLoaders()) {
+      this.store.setState((s) => (s.status = 'success'))
+    }
+  }
+
+  #setLoaderData = (loaderData: TRouteInfo['routeLoaderData']) => {
     batch(() => {
-      setStore((s) => {
-        s.routeLoaderData = sharedClone(s.routeLoaderData, loaderData)
+      this.store.setState((s) => {
+        s.routeLoaderData = loaderData
       })
-      updateLoaderData()
+      this.#updateLoaderData()
     })
   }
 
-  function updateLoaderData() {
-    setStore((s) => {
-      s.loaderData = sharedClone(s.loaderData, {
-        ...store.parentMatch?.store.loaderData,
-        ...s.routeLoaderData,
-      }) as TRouteInfo['loaderData']
-    })
+  cancel = () => {
+    this.abortController?.abort()
   }
 
-  const [store, setStore] = createStore<
-    RouteMatchStore<TAllRouteInfo, TRouteInfo>
-  >({
-    routeSearch: {},
-    search: {} as any,
-    status: 'idle',
-    routeLoaderData: {} as TRouteInfo['routeLoaderData'],
-    loaderData: {} as TRouteInfo['loaderData'],
-    isFetching: false,
-    invalid: false,
-    invalidAt: Infinity,
-    get isInvalid(): boolean {
-      const now = Date.now()
-      return this.invalid || this.invalidAt < now
-    },
-  })
-
-  const routeMatch: RouteMatch<TAllRouteInfo, TRouteInfo> = {
-    ...route,
-    ...opts,
-    store,
-    // setStore,
-    router,
-    childMatches: [],
-    __: {
-      setParentMatch: (parentMatch?: RouteMatch) => {
-        batch(() => {
-          setStore((s) => {
-            s.parentMatch = parentMatch
-          })
+  load = async (
+    loaderOpts?:
+      | { preload: true; maxAge: number; gcMaxAge: number }
+      | { preload?: false; maxAge?: never; gcMaxAge?: never },
+  ): Promise<void> => {
+    const now = Date.now()
+    const minMaxAge = loaderOpts?.preload
+      ? Math.max(loaderOpts?.maxAge, loaderOpts?.gcMaxAge)
+      : 0
+
+    // If this is a preload, add it to the preload cache
+    if (loaderOpts?.preload && minMaxAge > 0) {
+      // If the match is currently active, don't preload it
+      if (
+        this.router.store.state.currentMatches.find((d) => d.id === this.id)
+      ) {
+        return
+      }
 
-          updateLoaderData()
-        })
-      },
-      abortController: new AbortController(),
-      validate: () => {
-        // Validate the search params and stabilize them
-        const parentSearch =
-          store.parentMatch?.store.search ?? router.store.currentLocation.search
+      this.router.store.setState((s) => {
+        s.matchCache[this.id] = {
+          gc: now + loaderOpts.gcMaxAge,
+          match: this as RouteMatch<any, any>,
+        }
+      })
+    }
+
+    // If the match is invalid, errored or idle, trigger it to load
+    if (
+      (this.store.state.status === 'success' && this.getIsInvalid()) ||
+      this.store.state.status === 'error' ||
+      this.store.state.status === 'idle'
+    ) {
+      const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
+      await this.fetch({ maxAge })
+    }
+  }
 
-        try {
-          const prevSearch = store.routeSearch
-
-          const validator =
-            typeof routeMatch.options.validateSearch === 'object'
-              ? routeMatch.options.validateSearch.parse
-              : routeMatch.options.validateSearch
-
-          let nextSearch = sharedClone(
-            prevSearch,
-            validator?.(parentSearch) ?? {},
-          )
-
-          batch(() => {
-            // Invalidate route matches when search param stability changes
-            if (prevSearch !== nextSearch) {
-              setStore((s) => (s.invalid = true))
-            }
+  fetch = async (opts?: {
+    maxAge?: number
+  }): Promise<TRouteInfo['routeLoaderData']> => {
+    this.__loadPromise = new Promise(async (resolve) => {
+      const loadId = '' + Date.now() + Math.random()
+      this.#latestId = loadId
 
-            // TODO: Alright, do we need batch() here?
-            setStore((s) => {
-              s.routeSearch = nextSearch
-              s.search = sharedClone(parentSearch, {
-                ...parentSearch,
-                ...nextSearch,
-              })
-            })
-          })
+      const checkLatest = () =>
+        loadId !== this.#latestId
+          ? this.__loadPromise?.then(() => resolve())
+          : undefined
+
+      let latestPromise
 
+      batch(() => {
+        // If the match was in an error state, set it
+        // to a loading state again. Otherwise, keep it
+        // as loading or resolved
+        if (this.store.state.status === 'idle') {
+          this.store.setState((s) => (s.status = 'loading'))
+        }
+
+        // We started loading the route, so it's no longer invalid
+        this.store.setState((s) => (s.invalid = false))
+      })
+
+      // We are now fetching, even if it's in the background of a
+      // resolved state
+      this.store.setState((s) => (s.isFetching = true))
+      this.#resolve = resolve as () => void
+
+      const componentsPromise = (async () => {
+        // then run all component and data loaders in parallel
+        // For each component type, potentially load it asynchronously
+
+        await Promise.all(
           componentTypes.map(async (type) => {
-            const component = routeMatch.options[type]
+            const component = this.route.options[type]
 
-            if (typeof routeMatch.__[type] !== 'function') {
-              routeMatch.__[type] = component
+            if (this[type]?.preload) {
+              this[type] = await this.router.options.loadComponent!(component)
             }
+          }),
+        )
+      })()
+
+      const dataPromise = Promise.resolve().then(async () => {
+        try {
+          if (this.route.options.loader) {
+            const data = await this.router.loadMatchData(this)
+            if ((latestPromise = checkLatest())) return latestPromise
+
+            this.#setLoaderData(data)
+          }
+
+          this.store.setState((s) => {
+            s.error = undefined
+            s.status = 'success'
+            s.updatedAt = Date.now()
+            s.invalidAt =
+              s.updatedAt +
+              (opts?.maxAge ??
+                this.route.options.loaderMaxAge ??
+                this.router.options.defaultLoaderMaxAge ??
+                0)
           })
-        } catch (err: any) {
-          console.error(err)
-          const error = new (Error as any)('Invalid search params found', {
-            cause: err,
-          })
-          error.code = 'INVALID_SEARCH_PARAMS'
 
-          setStore((s) => {
+          return this.store.state.routeLoaderData
+        } catch (err) {
+          if ((latestPromise = checkLatest())) return latestPromise
+
+          if (process.env.NODE_ENV !== 'production') {
+            console.error(err)
+          }
+
+          this.store.setState((s) => {
+            s.error = err
             s.status = 'error'
-            s.error = error
+            s.updatedAt = Date.now()
           })
 
-          // Do not proceed with loading the route
-          return
-        }
-      },
-    },
-    cancel: () => {
-      routeMatch.__.abortController?.abort()
-    },
-    invalidate: () => {
-      setStore((s) => (s.invalid = true))
-    },
-    hasLoaders: () => {
-      return !!(
-        route.options.loader ||
-        componentTypes.some((d) => route.options[d]?.preload)
-      )
-    },
-    load: async (loaderOpts) => {
-      const now = Date.now()
-      const minMaxAge = loaderOpts?.preload
-        ? Math.max(loaderOpts?.maxAge, loaderOpts?.gcMaxAge)
-        : 0
-
-      // If this is a preload, add it to the preload cache
-      if (loaderOpts?.preload && minMaxAge > 0) {
-        // If the match is currently active, don't preload it
-        if (
-          router.store.currentMatches.find(
-            (d) => d.matchId === routeMatch.matchId,
-          )
-        ) {
-          return
+          throw err
         }
+      })
 
-        router.store.matchCache[routeMatch.matchId] = {
-          gc: now + loaderOpts.gcMaxAge,
-          match: routeMatch as RouteMatch<any, any>,
-        }
+      const after = async () => {
+        if ((latestPromise = checkLatest())) return latestPromise
+        this.store.setState((s) => (s.isFetching = false))
+        this.#resolve()
+        delete this.__loadPromise
       }
 
-      // If the match is invalid, errored or idle, trigger it to load
-      if (
-        (store.status === 'success' && store.isInvalid) ||
-        store.status === 'error' ||
-        store.status === 'idle'
-      ) {
-        const maxAge = loaderOpts?.preload ? loaderOpts?.maxAge : undefined
-
-        await routeMatch.fetch({ maxAge })
-      }
-    },
-    fetch: async (opts) => {
-      const loadId = '' + Date.now() + Math.random()
-      latestId = loadId
-      const checkLatest = async () => {
-        if (loadId !== latestId) {
-          // warning(true, 'Data loader is out of date!')
-          return new Promise(() => {})
-        }
+      try {
+        await Promise.all([componentsPromise, dataPromise.catch(() => {})])
+        after()
+      } catch {
+        after()
       }
+    })
 
-      batch(() => {
-        // If the match was in an error state, set it
-        // to a loading state again. Otherwise, keep it
-        // as loading or resolved
-        if (store.status === 'idle') {
-          setStore((s) => (s.status = 'loading'))
-        }
+    return this.__loadPromise
+  }
+  invalidate = async () => {
+    this.store.setState((s) => (s.invalid = true))
+    if (this.router.store.state.currentMatches.find((d) => d.id === this.id)) {
+      await this.load()
+    }
+  }
+  __hasLoaders = () => {
+    return !!(
+      this.route.options.loader ||
+      componentTypes.some((d) => this.route.options[d]?.preload)
+    )
+  }
+  getIsInvalid = () => {
+    const now = Date.now()
+    return this.store.state.invalid || this.store.state.invalidAt < now
+  }
 
-        // We started loading the route, so it's no longer invalid
-        setStore((s) => (s.invalid = false))
+  #updateLoaderData = () => {
+    this.store.setState((s) => {
+      s.loaderData = replaceEqualDeep(s.loaderData, {
+        ...this.parentMatch?.store.state.loaderData,
+        ...s.routeLoaderData,
+      }) as TRouteInfo['loaderData']
+    })
+    this.onLoaderDataListeners.forEach((listener) => listener())
+  }
+
+  __setParentMatch = (parentMatch?: RouteMatch) => {
+    if (!this.parentMatch && parentMatch) {
+      this.parentMatch = parentMatch
+      this.parentMatch.__onLoaderData(() => {
+        this.#updateLoaderData()
       })
+    }
+  }
 
-      routeMatch.__.loadPromise = new Promise(async (r) => {
-        // We are now fetching, even if it's in the background of a
-        // resolved state
-        setStore((s) => (s.isFetching = true))
-        resolve = r as () => void
-
-        componentsPromise = (async () => {
-          // then run all component and data loaders in parallel
-          // For each component type, potentially load it asynchronously
-
-          await Promise.all(
-            componentTypes.map(async (type) => {
-              const component = routeMatch.options[type]
-
-              if (routeMatch.__[type]?.preload) {
-                routeMatch.__[type] = await router.options.loadComponent!(
-                  component,
-                )
-              }
-            }),
-          )
-        })()
-
-        dataPromise = Promise.resolve().then(async () => {
-          try {
-            if (routeMatch.options.loader) {
-              const data = await router.loadMatchData(routeMatch)
-              await checkLatest()
-
-              setLoaderData(data)
-            }
+  __onLoaderData = (listener: () => void) => {
+    this.onLoaderDataListeners.add(listener)
+    // return () => this.onLoaderDataListeners.delete(listener)
+  }
 
-            setStore((s) => {
-              s.error = undefined
-              s.status = 'success'
-              s.updatedAt = Date.now()
-              s.invalidAt =
-                s.updatedAt +
-                (opts?.maxAge ??
-                  routeMatch.options.loaderMaxAge ??
-                  router.options.defaultLoaderMaxAge ??
-                  0)
-            })
-
-            return store.routeLoaderData
-          } catch (err) {
-            await checkLatest()
-
-            if (process.env.NODE_ENV !== 'production') {
-              console.error(err)
-            }
+  __validate = () => {
+    // Validate the search params and stabilize them
+    const parentSearch =
+      this.parentMatch?.store.state.search ??
+      this.router.store.state.latestLocation.search
 
-            setStore((s) => {
-              s.error = err
-              s.status = 'error'
-              s.updatedAt = Date.now()
-            })
+    try {
+      const prevSearch = this.store.state.routeSearch
 
-            throw err
-          }
-        })
+      const validator =
+        typeof this.route.options.validateSearch === 'object'
+          ? this.route.options.validateSearch.parse
+          : this.route.options.validateSearch
+
+      let nextSearch = validator?.(parentSearch) ?? {}
 
-        const after = async () => {
-          await checkLatest()
-          setStore((s) => (s.isFetching = false))
-          delete routeMatch.__.loadPromise
-          resolve()
+      batch(() => {
+        // Invalidate route matches when search param stability changes
+        if (prevSearch !== nextSearch) {
+          this.store.setState((s) => (s.invalid = true))
         }
 
-        try {
-          await Promise.all([componentsPromise, dataPromise.catch(() => {})])
-          after()
-        } catch {
-          after()
+        this.store.setState((s) => {
+          s.routeSearch = nextSearch
+          s.search = {
+            ...parentSearch,
+            ...nextSearch,
+          } as any
+        })
+      })
+
+      componentTypes.map(async (type) => {
+        const component = this.route.options[type]
+
+        if (typeof this[type] !== 'function') {
+          this[type] = component
         }
       })
+    } catch (err: any) {
+      console.error(err)
+      const error = new (Error as any)('Invalid search params found', {
+        cause: err,
+      })
+      error.code = 'INVALID_SEARCH_PARAMS'
 
-      await routeMatch.__.loadPromise
-      await checkLatest()
-    },
-  }
+      this.store.setState((s) => {
+        s.status = 'error'
+        s.error = error
+      })
 
-  if (!routeMatch.hasLoaders()) {
-    setStore((s) => (s.status = 'success'))
+      // Do not proceed with loading the route
+      return
+    }
   }
-
-  return routeMatch
 }