@tanstack/react-router 0.0.1-beta.21 → 0.0.1-beta.211

package/src/routeInfo.ts

@@ -0,0 +1,68 @@
+import { AnyRoute, Route } from './route'
+import { Expand, UnionToIntersection } from './utils'
+
+export type ParseRoute<TRouteTree extends AnyRoute> =
+  | TRouteTree
+  | ParseRouteChildren<TRouteTree>
+
+export type ParseRouteChildren<TRouteTree extends AnyRoute> =
+  TRouteTree extends Route<
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    infer TChildren,
+    any
+  >
+    ? unknown extends TChildren
+      ? never
+      : TChildren extends AnyRoute[]
+      ? {
+          [TId in TChildren[number]['id'] as string]: ParseRoute<
+            TChildren[number]
+          >
+        }[string]
+      : never
+    : never
+
+export type RoutesById<TRouteTree extends AnyRoute> = {
+  [K in ParseRoute<TRouteTree> as K['id']]: K
+}
+
+export type RouteById<TRouteTree extends AnyRoute, TId> = Extract<
+  ParseRoute<TRouteTree>,
+  { id: TId }
+>
+
+export type RouteIds<TRouteTree extends AnyRoute> = ParseRoute<TRouteTree>['id']
+
+export type RoutesByPath<TRouteTree extends AnyRoute> = {
+  [K in ParseRoute<TRouteTree> as K['fullPath']]: K
+}
+
+export type RouteByPath<TRouteTree extends AnyRoute, TPath> = Extract<
+  ParseRoute<TRouteTree>,
+  { fullPath: TPath }
+>
+
+export type RoutePaths<TRouteTree extends AnyRoute> =
+  | ParseRoute<TRouteTree>['fullPath']
+  | '/'
+
+export type FullSearchSchema<TRouteTree extends AnyRoute> = Partial<
+  Expand<
+    UnionToIntersection<ParseRoute<TRouteTree>['types']['fullSearchSchema']>
+  >
+>
+
+export type AllParams<TRouteTree extends AnyRoute> = Expand<
+  UnionToIntersection<ParseRoute<TRouteTree>['types']['allParams']>
+>

package/src/router.ts

@@ -0,0 +1,374 @@
+import { RouterHistory } from '@tanstack/history'
+
+//
+
+import {
+  AnySearchSchema,
+  AnyRoute,
+  AnyContext,
+  AnyPathParams,
+  RouteMask,
+} from './route'
+import { FullSearchSchema } from './routeInfo'
+import { defaultParseSearch, defaultStringifySearch } from './searchParams'
+import { PickAsRequired, Updater, NonNullableUpdater } from './utils'
+import {
+  ErrorRouteComponent,
+  PendingRouteComponent,
+  RouteComponent,
+} from './route'
+import { RouteMatch } from './RouterProvider'
+import { ParsedLocation } from './location'
+import { LocationState } from './location'
+import { SearchSerializer, SearchParser } from './searchParams'
+import { RouterContext } from './RouterProvider'
+
+//
+
+declare global {
+  interface Window {
+    __TSR_DEHYDRATED__?: HydrationCtx
+    __TSR_ROUTER_CONTEXT__?: React.Context<RouterContext<any>>
+  }
+}
+
+export interface Register {
+  // router: Router
+}
+
+export type AnyRouter = Router<any, any>
+
+export type RegisteredRouter = Register extends {
+  router: infer TRouter extends AnyRouter
+}
+  ? TRouter
+  : AnyRouter
+
+export type HydrationCtx = {
+  router: DehydratedRouter
+  payload: Record<string, any>
+}
+
+export type RouterContextOptions<TRouteTree extends AnyRoute> =
+  AnyContext extends TRouteTree['types']['routerContext']
+    ? {
+        context?: TRouteTree['types']['routerContext']
+      }
+    : {
+        context: TRouteTree['types']['routerContext']
+      }
+
+export interface RouterOptions<
+  TRouteTree extends AnyRoute,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> {
+  history?: RouterHistory
+  stringifySearch?: SearchSerializer
+  parseSearch?: SearchParser
+  defaultPreload?: false | 'intent'
+  defaultPreloadDelay?: number
+  defaultComponent?: RouteComponent<AnySearchSchema, AnyPathParams, AnyContext>
+  defaultErrorComponent?: ErrorRouteComponent<
+    AnySearchSchema,
+    AnyPathParams,
+    AnyContext
+  >
+  defaultPendingComponent?: PendingRouteComponent<
+    AnySearchSchema,
+    AnyPathParams,
+    AnyContext
+  >
+  defaultMaxAge?: number
+  defaultGcMaxAge?: number
+  defaultPreloadMaxAge?: number
+  caseSensitive?: boolean
+  routeTree?: TRouteTree
+  basepath?: string
+  createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
+  context?: TRouteTree['types']['routerContext']
+  // dehydrate?: () => TDehydrated
+  // hydrate?: (dehydrated: TDehydrated) => void
+  routeMasks?: RouteMask<TRouteTree>[]
+  unmaskOnReload?: boolean
+}
+
+export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
+  status: 'pending' | 'idle'
+  matches: RouteMatch<TRouteTree>[]
+  pendingMatches: RouteMatch<TRouteTree>[]
+  location: ParsedLocation<FullSearchSchema<TRouteTree>>
+  resolvedLocation: undefined | ParsedLocation<FullSearchSchema<TRouteTree>>
+  lastUpdated: number
+}
+
+export type ListenerFn<TEvent extends RouterEvent> = (event: TEvent) => void
+
+export interface BuildNextOptions {
+  to?: string | number | null
+  params?: true | Updater<unknown>
+  search?: true | Updater<unknown>
+  hash?: true | Updater<string>
+  state?: true | NonNullableUpdater<LocationState>
+  mask?: {
+    to?: string | number | null
+    params?: true | Updater<unknown>
+    search?: true | Updater<unknown>
+    hash?: true | Updater<string>
+    state?: true | NonNullableUpdater<LocationState>
+    unmaskOnReload?: boolean
+  }
+  from?: string
+}
+
+export interface DehydratedRouterState {
+  dehydratedMatches: DehydratedRouteMatch[]
+}
+
+export type DehydratedRouteMatch = Pick<
+  RouteMatch,
+  'fetchedAt' | 'invalid' | 'id' | 'status' | 'updatedAt'
+>
+
+export interface DehydratedRouter {
+  state: DehydratedRouterState
+}
+
+export type RouterConstructorOptions<
+  TRouteTree extends AnyRoute,
+  TDehydrated extends Record<string, any>,
+> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> &
+  RouterContextOptions<TRouteTree>
+
+export const componentTypes = [
+  'component',
+  'errorComponent',
+  'pendingComponent',
+] as const
+
+export type RouterEvents = {
+  onBeforeLoad: {
+    type: 'onBeforeLoad'
+    from: undefined | ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+  onLoad: {
+    type: 'onLoad'
+    from: undefined | ParsedLocation
+    to: ParsedLocation
+    pathChanged: boolean
+  }
+}
+
+export type RouterEvent = RouterEvents[keyof RouterEvents]
+
+export type RouterListener<TRouterEvent extends RouterEvent> = {
+  eventType: TRouterEvent['type']
+  fn: ListenerFn<TRouterEvent>
+}
+
+export class Router<
+  TRouteTree extends AnyRoute = AnyRoute,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> {
+  options: PickAsRequired<
+    RouterOptions<TRouteTree, TDehydrated>,
+    'stringifySearch' | 'parseSearch' | 'context'
+  >
+  routeTree: TRouteTree
+  // dehydratedData?: TDehydrated
+  // resetNextScroll = false
+  // tempLocationKey = `${Math.round(Math.random() * 10000000)}`
+
+  constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>) {
+    this.options = {
+      defaultPreloadDelay: 50,
+      context: undefined!,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch,
+    }
+
+    this.routeTree = this.options.routeTree as TRouteTree
+  }
+
+  subscribers = new Set<RouterListener<RouterEvent>>()
+
+  subscribe = <TType extends keyof RouterEvents>(
+    eventType: TType,
+    fn: ListenerFn<RouterEvents[TType]>,
+  ) => {
+    const listener: RouterListener<any> = {
+      eventType,
+      fn,
+    }
+
+    this.subscribers.add(listener)
+
+    return () => {
+      this.subscribers.delete(listener)
+    }
+  }
+
+  emit = (routerEvent: RouterEvent) => {
+    this.subscribers.forEach((listener) => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent)
+      }
+    })
+  }
+
+  // dehydrate = (): DehydratedRouter => {
+  //   return {
+  //     state: {
+  //       dehydratedMatches: state.matches.map((d) =>
+  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+  //       ),
+  //     },
+  //   }
+  // }
+
+  // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+  //   let _ctx = __do_not_use_server_ctx
+  //   // Client hydrates from window
+  //   if (typeof document !== 'undefined') {
+  //     _ctx = window.__TSR_DEHYDRATED__
+  //   }
+
+  //   invariant(
+  //     _ctx,
+  //     'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?',
+  //   )
+
+  //   const ctx = _ctx
+  //   this.dehydratedData = ctx.payload as any
+  //   this.options.hydrate?.(ctx.payload as any)
+  //   const dehydratedState = ctx.router.state
+
+  //   let matches = this.matchRoutes(
+  //     state.location.pathname,
+  //     state.location.search,
+  //   ).map((match) => {
+  //     const dehydratedMatch = dehydratedState.dehydratedMatches.find(
+  //       (d) => d.id === match.id,
+  //     )
+
+  //     invariant(
+  //       dehydratedMatch,
+  //       `Could not find a client-side match for dehydrated match with id: ${match.id}!`,
+  //     )
+
+  //     if (dehydratedMatch) {
+  //       return {
+  //         ...match,
+  //         ...dehydratedMatch,
+  //       }
+  //     }
+  //     return match
+  //   })
+
+  //   this.setState((s) => {
+  //     return {
+  //       ...s,
+  //       matches: dehydratedState.dehydratedMatches as any,
+  //     }
+  //   })
+  // }
+
+  // TODO:
+  // injectedHtml: (string | (() => Promise<string> | string))[] = []
+
+  // TODO:
+  // injectHtml = async (html: string | (() => Promise<string> | string)) => {
+  //   this.injectedHtml.push(html)
+  // }
+
+  // TODO:
+  // dehydrateData = <T>(key: any, getData: T | (() => Promise<T> | T)) => {
+  //   if (typeof document === 'undefined') {
+  //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+  //     this.injectHtml(async () => {
+  //       const id = `__TSR_DEHYDRATED__${strKey}`
+  //       const data =
+  //         typeof getData === 'function' ? await (getData as any)() : getData
+  //       return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(
+  //         strKey,
+  //       )}"] = ${JSON.stringify(data)}
+  //       ;(() => {
+  //         var el = document.getElementById('${id}')
+  //         el.parentElement.removeChild(el)
+  //       })()
+  //       </script>`
+  //     })
+
+  //     return () => this.hydrateData<T>(key)
+  //   }
+
+  //   return () => undefined
+  // }
+
+  // hydrateData = <T = unknown>(key: any) => {
+  //   if (typeof document !== 'undefined') {
+  //     const strKey = typeof key === 'string' ? key : JSON.stringify(key)
+
+  //     return window[`__TSR_DEHYDRATED__${strKey}` as any] as T
+  //   }
+
+  //   return undefined
+  // }
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
+
+  // setRouteMatch = (
+  //   id: string,
+  //   pending: boolean,
+  //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+  // ) => {
+  //   const key = pending ? 'pendingMatches' : 'matches'
+
+  //   this.setState((prev) => {
+  //     return {
+  //       ...prev,
+  //       [key]: prev[key].map((d) => {
+  //         if (d.id === id) {
+  //           return functionalUpdate(updater, d)
+  //         }
+
+  //         return d
+  //       }),
+  //     }
+  //   })
+  // }
+
+  // setPendingRouteMatch = (
+  //   id: string,
+  //   updater: NonNullableUpdater<RouteMatch<TRouteTree>>,
+  // ) => {
+  //   this.setRouteMatch(id, true, updater)
+  // }
+}
+
+function escapeJSON(jsonString: string) {
+  return jsonString
+    .replace(/\\/g, '\\\\') // Escape backslashes
+    .replace(/'/g, "\\'") // Escape single quotes
+    .replace(/"/g, '\\"') // Escape double quotes
+}
+
+// A function that takes an import() argument which is a function and returns a new function that will
+// proxy arguments from the caller to the imported function, retaining all type
+// information along the way
+export function lazyFn<
+  T extends Record<string, (...args: any[]) => any>,
+  TKey extends keyof T = 'default',
+>(fn: () => Promise<T>, key?: TKey) {
+  return async (...args: Parameters<T[TKey]>): Promise<ReturnType<T[TKey]>> => {
+    const imported = await fn()
+    return imported[key || 'default'](...args)
+  }
+}

package/src/scroll-restoration.tsx

@@ -0,0 +1,205 @@
+// import * as React from 'react'
+// import { useRouter } from './react'
+
+// const useLayoutEffect =
+//   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+// import { AnyRouter, RouterState } from './router'
+// import { ParsedLocation } from './location'
+
+// const windowKey = 'window'
+// const delimiter = '___'
+
+// let weakScrolledElementsByRestoreKey: Record<string, WeakSet<any>> = {}
+
+// type CacheValue = Record<string, { scrollX: number; scrollY: number }>
+
+// type Cache = {
+//   current: CacheValue
+//   set: (key: string, value: any) => void
+// }
+
+// let cache: Cache
+
+// let pathDidChange = false
+
+// const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
+
+// export type ScrollRestorationOptions = {
+//   getKey?: (location: ParsedLocation) => string
+// }
+
+// const defaultGetKey = (location: ParsedLocation) => location.state.key!
+
+// export function watchScrollPositions(
+//   router: AnyRouter,
+//   state: RouterState,
+//   opts?: ScrollRestorationOptions,
+// ) {
+//   const getKey = opts?.getKey || defaultGetKey
+
+//   if (sessionsStorage) {
+//     if (!cache) {
+//       cache = (() => {
+//         const storageKey = 'tsr-scroll-restoration-v1'
+
+//         const current: CacheValue = JSON.parse(
+//           window.sessionStorage.getItem(storageKey) || '{}',
+//         )
+
+//         return {
+//           current,
+//           set: (key: string, value: any) => {
+//             current[key] = value
+//             window.sessionStorage.setItem(storageKey, JSON.stringify(cache))
+//           },
+//         }
+//       })()
+//     }
+//   }
+
+//   const { history } = window
+//   if (history.scrollRestoration) {
+//     history.scrollRestoration = 'manual'
+//   }
+
+//   const onScroll = (event: Event) => {
+//     const restoreKey = getKey(state.resolvedLocation)
+
+//     if (!weakScrolledElementsByRestoreKey[restoreKey]) {
+//       weakScrolledElementsByRestoreKey[restoreKey] = new WeakSet()
+//     }
+
+//     const set = weakScrolledElementsByRestoreKey[restoreKey]!
+
+//     if (set.has(event.target)) return
+//     set.add(event.target)
+
+//     const cacheKey = [
+//       restoreKey,
+//       event.target === document || event.target === window
+//         ? windowKey
+//         : getCssSelector(event.target),
+//     ].join(delimiter)
+
+//     if (!cache.current[cacheKey]) {
+//       cache.set(cacheKey, {
+//         scrollX: NaN,
+//         scrollY: NaN,
+//       })
+//     }
+//   }
+
+//   const getCssSelector = (el: any): string => {
+//     let path = [],
+//       parent
+//     while ((parent = el.parentNode)) {
+//       path.unshift(
+//         `${el.tagName}:nth-child(${
+//           ([].indexOf as any).call(parent.children, el) + 1
+//         })`,
+//       )
+//       el = parent
+//     }
+//     return `${path.join(' > ')}`.toLowerCase()
+//   }
+
+//   const onPathWillChange = (from: ParsedLocation) => {
+//     const restoreKey = getKey(from)
+//     for (const cacheKey in cache.current) {
+//       const entry = cache.current[cacheKey]!
+//       const [key, elementSelector] = cacheKey.split(delimiter)
+//       if (restoreKey === key) {
+//         if (elementSelector === windowKey) {
+//           entry.scrollX = window.scrollX || 0
+//           entry.scrollY = window.scrollY || 0
+//         } else if (elementSelector) {
+//           const element = document.querySelector(elementSelector)
+//           entry.scrollX = element?.scrollLeft || 0
+//           entry.scrollY = element?.scrollTop || 0
+//         }
+
+//         cache.set(cacheKey, entry)
+//       }
+//     }
+//   }
+
+//   const onPathChange = () => {
+//     pathDidChange = true
+//   }
+
+//   if (typeof document !== 'undefined') {
+//     document.addEventListener('scroll', onScroll, true)
+//   }
+
+//   const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', (event) => {
+//     if (event.pathChanged) onPathWillChange(event.from)
+//   })
+
+//   const unsubOnLoad = router.subscribe('onLoad', (event) => {
+//     if (event.pathChanged) onPathChange()
+//   })
+
+//   return () => {
+//     document.removeEventListener('scroll', onScroll)
+//     unsubOnBeforeLoad()
+//     unsubOnLoad()
+//   }
+// }
+
+// export function restoreScrollPositions(
+//   router: AnyRouter,
+//   state: RouterState,
+//   opts?: ScrollRestorationOptions,
+// ) {
+//   if (pathDidChange) {
+//     if (!router.resetNextScroll) {
+//       return
+//     }
+
+//     const getKey = opts?.getKey || defaultGetKey
+
+//     pathDidChange = false
+
+//     const restoreKey = getKey(state.location)
+//     let windowRestored = false
+
+//     for (const cacheKey in cache.current) {
+//       const entry = cache.current[cacheKey]!
+//       const [key, elementSelector] = cacheKey.split(delimiter)
+//       if (key === restoreKey) {
+//         if (elementSelector === windowKey) {
+//           windowRestored = true
+//           window.scrollTo(entry.scrollX, entry.scrollY)
+//         } else if (elementSelector) {
+//           const element = document.querySelector(elementSelector)
+//           if (element) {
+//             element.scrollLeft = entry.scrollX
+//             element.scrollTop = entry.scrollY
+//           }
+//         }
+//       }
+//     }
+
+//     if (!windowRestored) {
+//       window.scrollTo(0, 0)
+//     }
+//   }
+// }
+
+// export function useScrollRestoration(options?: ScrollRestorationOptions) {
+//   const { router, state } = useRouter()
+
+//   useLayoutEffect(() => {
+//     return watchScrollPositions(router, state, options)
+//   }, [])
+
+//   useLayoutEffect(() => {
+//     restoreScrollPositions(router, state, options)
+//   })
+// }
+
+// export function ScrollRestoration(props: ScrollRestorationOptions) {
+//   useScrollRestoration(props)
+//   return null
+// }