@tanstack/react-router 0.0.1-beta.22 → 0.0.1-beta.221

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,330 @@
+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<AnyRoute, 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: 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'
+    fromLocation: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+  }
+  onLoad: {
+    type: 'onLoad'
+    fromLocation: ParsedLocation
+    toLocation: ParsedLocation
+    pathChanged: boolean
+  }
+  onResolved: {
+    type: 'onResolved'
+    fromLocation: ParsedLocation
+    toLocation: 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,
+  //     }
+  //   })
+  // }
+
+  // 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)
+  // }
+}
+
+// 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,192 @@
+import * as React from 'react'
+
+const useLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+import { ParsedLocation } from './location'
+import { useRouter } from './RouterProvider'
+import { NonNullableUpdater, functionalUpdate } from './utils'
+
+const windowKey = 'window'
+const delimiter = '___'
+
+let weakScrolledElements = new WeakSet<any>()
+
+type CacheValue = Record<string, { scrollX: number; scrollY: number }>
+type CacheState = {
+  cached: CacheValue
+  next: CacheValue
+}
+
+type Cache = {
+  state: CacheState
+  set: (updater: NonNullableUpdater<CacheState>) => void
+}
+
+let cache: Cache
+
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage
+
+export type ScrollRestorationOptions = {
+  getKey?: (location: ParsedLocation) => string
+}
+
+const defaultGetKey = (location: ParsedLocation) => location.state.key!
+
+export function useScrollRestoration(options?: ScrollRestorationOptions) {
+  const { state, subscribe, resetNextScrollRef } = useRouter()
+
+  useLayoutEffect(() => {
+    const getKey = options?.getKey || defaultGetKey
+
+    if (sessionsStorage) {
+      if (!cache) {
+        cache = (() => {
+          const storageKey = 'tsr-scroll-restoration-v2'
+
+          const state: CacheState = JSON.parse(
+            window.sessionStorage.getItem(storageKey) || 'null',
+          ) || { cached: {}, next: {} }
+
+          return {
+            state,
+            set: (updater) => {
+              cache.state = functionalUpdate(updater, cache.state)
+              window.sessionStorage.setItem(
+                storageKey,
+                JSON.stringify(cache.state),
+              )
+            },
+          }
+        })()
+      }
+    }
+
+    const { history } = window
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual'
+    }
+
+    const onScroll = (event: Event) => {
+      if (weakScrolledElements.has(event.target)) return
+      weakScrolledElements.add(event.target)
+
+      const elementSelector =
+        event.target === document || event.target === window
+          ? windowKey
+          : getCssSelector(event.target)
+
+      if (!cache.state.next[elementSelector]) {
+        cache.set((c) => ({
+          ...c,
+          next: {
+            ...c.next,
+            [elementSelector]: {
+              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()
+    }
+
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true)
+    }
+
+    const unsubOnBeforeLoad = subscribe('onBeforeLoad', (event) => {
+      if (event.pathChanged) {
+        const restoreKey = getKey(event.fromLocation)
+        for (const elementSelector in cache.state.next) {
+          const entry = cache.state.next[elementSelector]!
+          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((c) => {
+            const next = { ...c.next }
+            delete next[elementSelector]
+
+            return {
+              ...c,
+              next,
+              cached: {
+                ...c.cached,
+                [[restoreKey, elementSelector].join(delimiter)]: entry,
+              },
+            }
+          })
+        }
+      }
+    })
+
+    const unsubOnResolved = subscribe('onResolved', (event) => {
+      if (event.pathChanged) {
+        if (!resetNextScrollRef.current) {
+          return
+        }
+
+        resetNextScrollRef.current = true
+
+        const getKey = options?.getKey || defaultGetKey
+
+        const restoreKey = getKey(event.toLocation)
+        let windowRestored = false
+
+        for (const cacheKey in cache.state.cached) {
+          const entry = cache.state.cached[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)
+        }
+
+        cache.set((c) => ({ ...c, next: {} }))
+        weakScrolledElements = new WeakSet<any>()
+      }
+    })
+
+    return () => {
+      document.removeEventListener('scroll', onScroll)
+      unsubOnBeforeLoad()
+      unsubOnResolved()
+    }
+  }, [])
+}
+
+export function ScrollRestoration(props: ScrollRestorationOptions) {
+  useScrollRestoration(props)
+  return null
+}

package/src/searchParams.ts

@@ -0,0 +1,79 @@
+import { decode, encode } from './qss'
+import { AnySearchSchema } from './route'
+
+export const defaultParseSearch = parseSearchWith(JSON.parse)
+export const defaultStringifySearch = stringifySearchWith(
+  JSON.stringify,
+  JSON.parse,
+)
+
+export function parseSearchWith(parser: (str: string) => any) {
+  return (searchStr: string): AnySearchSchema => {
+    if (searchStr.substring(0, 1) === '?') {
+      searchStr = searchStr.substring(1)
+    }
+
+    let query: Record<string, unknown> = decode(searchStr)
+
+    // Try to parse any query params that might be json
+    for (let key in query) {
+      const value = query[key]
+      if (typeof value === 'string') {
+        try {
+          query[key] = parser(value)
+        } catch (err) {
+          //
+        }
+      }
+    }
+
+    return query
+  }
+}
+
+export function stringifySearchWith(
+  stringify: (search: any) => string,
+  parser?: (str: string) => any,
+) {
+  function stringifyValue(val: any) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val)
+      } catch (err) {
+        // silent
+      }
+    } else if (typeof val === 'string' && typeof parser === 'function') {
+      try {
+        // Check if it's a valid parseable string.
+        // If it is, then stringify it again.
+        parser(val)
+        return stringify(val)
+      } catch (err) {
+        // silent
+      }
+    }
+    return val
+  }
+
+  return (search: Record<string, any>) => {
+    search = { ...search }
+
+    if (search) {
+      Object.keys(search).forEach((key) => {
+        const val = search[key]
+        if (typeof val === 'undefined' || val === undefined) {
+          delete search[key]
+        } else {
+          search[key] = stringifyValue(val)
+        }
+      })
+    }
+
+    const searchStr = encode(search as Record<string, string>).toString()
+
+    return searchStr ? `?${searchStr}` : ''
+  }
+}
+
+export type SearchSerializer = (searchObj: Record<string, any>) => string
+export type SearchParser = (searchStr: string) => Record<string, any>

package/src/useBlocker.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { ReactNode } from './route'
+import { useRouter } from './RouterProvider'
+
+export function useBlocker(
+  message: string,
+  condition: boolean | any = true,
+): void {
+  const { history } = useRouter()
+
+  React.useEffect(() => {
+    if (!condition) return
+
+    let unblock = history.block((retry, cancel) => {
+      if (window.confirm(message)) {
+        unblock()
+        retry()
+      }
+    })
+
+    return unblock
+  })
+}
+
+export function Block({ message, condition, children }: PromptProps) {
+  useBlocker(message, condition)
+  return (children ?? null) as ReactNode
+}
+
+export type PromptProps = {
+  message: string
+  condition?: boolean | any
+  children?: ReactNode
+}