@tanstack/react-router 0.0.1-beta.23 → 0.0.1-beta.231

package/src/RouterProvider.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react'
+import warning from 'tiny-warning'
+import { Matches } from './Matches'
+import {
+  LinkInfo,
+  LinkOptions,
+  NavigateOptions,
+  ResolveRelativePath,
+  ToOptions,
+} from './link'
+import { ParsedLocation } from './location'
+import { AnyRoute } from './route'
+import { RouteById, RoutePaths } from './routeInfo'
+import {
+  BuildNextOptions,
+  RegisteredRouter,
+  Router,
+  RouterOptions,
+  RouterState,
+} from './router'
+import { NoInfer, PickAsRequired } from './utils'
+import { MatchRouteOptions } from './Matches'
+import { RouteMatch } from './Matches'
+
+export interface CommitLocationOptions {
+  replace?: boolean
+  resetScroll?: boolean
+  startTransition?: boolean
+}
+
+export interface MatchLocation {
+  to?: string | number | null
+  fuzzy?: boolean
+  caseSensitive?: boolean
+  from?: string
+}
+
+export type BuildLinkFn<TRouteTree extends AnyRoute> = <
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+>(
+  dest: LinkOptions<TRouteTree, TFrom, TTo>,
+) => LinkInfo
+
+export type NavigateFn<TRouteTree extends AnyRoute> = <
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TMaskFrom extends RoutePaths<TRouteTree> = TFrom,
+  TMaskTo extends string = '',
+>(
+  opts: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+) => Promise<void>
+
+export type MatchRouteFn<TRouteTree extends AnyRoute> = <
+  TFrom extends RoutePaths<TRouteTree> = '/',
+  TTo extends string = '',
+  TResolved = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+>(
+  location: ToOptions<TRouteTree, TFrom, TTo>,
+  opts?: MatchRouteOptions,
+) => false | RouteById<TRouteTree, TResolved>['types']['allParams']
+
+export type BuildLocationFn<TRouteTree extends AnyRoute> = (
+  opts: BuildNextOptions,
+) => ParsedLocation
+
+export type InjectedHtmlEntry = string | (() => Promise<string> | string)
+
+export const routerContext = React.createContext<Router<any>>(null!)
+
+if (typeof document !== 'undefined') {
+  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+}
+
+export class SearchParamError extends Error {}
+
+export class PathParamError extends Error {}
+
+export function getInitialRouterState(
+  location: ParsedLocation,
+): RouterState<any> {
+  return {
+    status: 'idle',
+    resolvedLocation: location,
+    location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now(),
+  }
+}
+
+export function RouterProvider<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router, ...rest }: RouterProps<TRouteTree, TDehydrated>) {
+  // Allow the router to update options on the router instance
+  router.updateOptions({
+    ...router.options,
+    ...rest,
+
+    context: {
+      ...router.options.context,
+      ...rest?.context,
+    },
+  } as PickAsRequired<
+    RouterOptions<TRouteTree, TDehydrated>,
+    'stringifySearch' | 'parseSearch' | 'context'
+  >)
+
+  const [preState, setState] = React.useState(() => router.state)
+  const [isTransitioning, startReactTransition] = React.useTransition()
+  const isAnyTransitioning =
+    isTransitioning || preState.matches.some((d) => d.status === 'pending')
+
+  const state = React.useMemo<RouterState<TRouteTree>>(
+    () => ({
+      ...preState,
+      status: isAnyTransitioning ? 'pending' : 'idle',
+      location: isTransitioning ? router.latestLocation : preState.location,
+      pendingMatches: router.pendingMatches,
+    }),
+    [preState, isTransitioning],
+  )
+
+  router.setState = setState
+  router.state = state
+  router.startReactTransition = startReactTransition
+
+  React.useLayoutEffect(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation)
+
+      if (state.location !== router.latestLocation) {
+        startReactTransition(() => {
+          try {
+            router.load()
+          } catch (err) {
+            console.error(err)
+          }
+        })
+      }
+    })
+
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+    })
+
+    if (state.location.href !== nextLocation.href) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    return () => {
+      unsub()
+    }
+  }, [router.history])
+
+  React.useLayoutEffect(() => {
+    if (!isTransitioning && state.resolvedLocation !== state.location) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: state.resolvedLocation,
+        toLocation: state.location,
+        pathChanged: state.location!.href !== state.resolvedLocation?.href,
+      })
+      router.pendingMatches = []
+
+      setState((s) => ({
+        ...s,
+        resolvedLocation: s.location,
+      }))
+    }
+  })
+
+  React.useLayoutEffect(() => {
+    startReactTransition(() => {
+      try {
+        router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    })
+  }, [])
+
+  return (
+    <routerContext.Provider value={router}>
+      <Matches />
+    </routerContext.Provider>
+  )
+}
+
+export function getRouteMatch<TRouteTree extends AnyRoute>(
+  state: RouterState<TRouteTree>,
+  id: string,
+): undefined | RouteMatch<TRouteTree> {
+  return [...state.pendingMatches, ...state.matches].find((d) => d.id === id)
+}
+
+export function useRouterState<
+  TSelected = RouterState<RegisteredRouter['routeTree']>,
+>(opts?: {
+  select: (state: RouterState<RegisteredRouter['routeTree']>) => TSelected
+}): TSelected {
+  const { state } = useRouter()
+  // return useStore(router.__store, opts?.select as any)
+  return opts?.select ? opts.select(state) : (state as any)
+}
+
+export type RouterProps<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<RouterOptions<TRouteTree, TDehydrated>, 'context'> & {
+  router: Router<TRouteTree>
+  context?: Partial<RouterOptions<TRouteTree, TDehydrated>['context']>
+}
+
+export function useRouter<
+  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+>(): Router<TRouteTree> {
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext
+  const value = React.useContext(resolvedContext)
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!')
+  return value as any
+}

package/src/awaited.tsx

@@ -0,0 +1,40 @@
+import { useRouter } from './RouterProvider'
+import { DeferredPromise, isDehydratedDeferred } from './defer'
+
+export type AwaitOptions<T> = {
+  promise: DeferredPromise<T>
+}
+
+export function useAwaited<T>({ promise }: AwaitOptions<T>): [T] {
+  const router = useRouter()
+
+  let state = promise.__deferredState
+  const key = `__TSR__DEFERRED__${state.uid}`
+
+  if (isDehydratedDeferred(promise)) {
+    state = router.hydrateData(key)!
+    promise = Promise.resolve(state.data) as DeferredPromise<any>
+    promise.__deferredState = state
+  }
+
+  if (state.status === 'pending') {
+    throw new Promise((r) => setTimeout(r, 1)).then(() => promise)
+  }
+
+  if (state.status === 'error') {
+    throw state.error
+  }
+
+  router.dehydrateData(key, state)
+
+  return [state.data]
+}
+
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    children: (result: T) => JSX.Element
+  },
+) {
+  const awaited = useAwaited(props)
+  return props.children(...awaited)
+}

package/src/defer.ts

@@ -0,0 +1,55 @@
+export type DeferredPromiseState<T> = { uid: string } & (
+  | {
+      status: 'pending'
+      data?: T
+      error?: unknown
+    }
+  | {
+      status: 'success'
+      data: T
+    }
+  | {
+      status: 'error'
+      data?: T
+      error: unknown
+    }
+)
+
+export type DeferredPromise<T> = Promise<T> & {
+  __deferredState: DeferredPromiseState<T>
+}
+
+export function defer<T>(_promise: Promise<T>) {
+  const promise = _promise as DeferredPromise<T>
+
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending',
+    }
+
+    const state = promise.__deferredState
+
+    promise
+      .then((data) => {
+        state.status = 'success' as any
+        state.data = data
+      })
+      .catch((error) => {
+        state.status = 'error' as any
+        state.error = error
+      })
+  }
+
+  return promise
+}
+
+export function isDehydratedDeferred(obj: any): boolean {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    !(obj instanceof Promise) &&
+    !obj.then &&
+    '__deferredState' in obj
+  )
+}

package/src/fileRoute.ts

@@ -0,0 +1,154 @@
+import { ParsePathParams } from './link'
+import {
+  AnyRoute,
+  ResolveFullPath,
+  ResolveFullSearchSchema,
+  MergeFromFromParent,
+  RouteContext,
+  AnyContext,
+  RouteOptions,
+  UpdatableRouteOptions,
+  Route,
+  AnyPathParams,
+  RootRouteId,
+  TrimPathLeft,
+  RouteConstraints,
+} from './route'
+import { Assign, Expand, IsAny } from './utils'
+
+export interface FileRoutesByPath {
+  // '/': {
+  //   parentRoute: typeof rootRoute
+  // }
+}
+
+type Replace<
+  S extends string,
+  From extends string,
+  To extends string,
+> = S extends `${infer Start}${From}${infer Rest}`
+  ? `${Start}${To}${Replace<Rest, From, To>}`
+  : S
+
+export type TrimLeft<
+  T extends string,
+  S extends string,
+> = T extends `${S}${infer U}` ? U : T
+
+export type TrimRight<
+  T extends string,
+  S extends string,
+> = T extends `${infer U}${S}` ? U : T
+
+export type Trim<T extends string, S extends string> = TrimLeft<
+  TrimRight<T, S>,
+  S
+>
+
+export type RemoveUnderScores<T extends string> = Replace<
+  Replace<TrimRight<TrimLeft<T, '/_'>, '_'>, '_/', '/'>,
+  '/_',
+  '/'
+>
+
+export type ResolveFilePath<
+  TParentRoute extends AnyRoute,
+  TFilePath extends string,
+> = TParentRoute['id'] extends RootRouteId
+  ? TrimPathLeft<TFilePath>
+  : Replace<
+      TrimPathLeft<TFilePath>,
+      TrimPathLeft<TParentRoute['types']['customId']>,
+      ''
+    >
+
+export type FileRoutePath<
+  TParentRoute extends AnyRoute,
+  TFilePath extends string,
+> = ResolveFilePath<TParentRoute, TFilePath> extends `_${infer _}`
+  ? string
+  : ResolveFilePath<TParentRoute, TFilePath>
+
+export class FileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'],
+  TId extends RouteConstraints['TId'] = TFilePath,
+  TPath extends RouteConstraints['TPath'] = FileRoutePath<
+    TParentRoute,
+    TFilePath
+  >,
+  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    RemoveUnderScores<TPath>
+  >,
+> {
+  constructor(public path: TFilePath) {}
+
+  createRoute = <
+    TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
+    TFullSearchSchema extends
+      RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
+      TParentRoute,
+      TSearchSchema
+    >,
+    TParams extends RouteConstraints['TParams'] = Expand<
+      Record<ParsePathParams<TPath>, string>
+    >,
+    TAllParams extends RouteConstraints['TAllParams'] = MergeFromFromParent<
+      TParentRoute['types']['allParams'],
+      TParams
+    >,
+    TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
+    TContext extends Expand<
+      Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+    > = Expand<
+      Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
+    >,
+    TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
+    TLoaderData extends any = unknown,
+    TChildren extends RouteConstraints['TChildren'] = unknown,
+    TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
+  >(
+    options?: Omit<
+      RouteOptions<
+        TParentRoute,
+        string,
+        TPath,
+        TSearchSchema,
+        TFullSearchSchema,
+        TParams,
+        TAllParams,
+        TRouteContext,
+        TContext,
+        TLoaderData
+      >,
+      'getParentRoute' | 'path' | 'id'
+    > &
+      UpdatableRouteOptions<
+        TFullSearchSchema,
+        TAllParams,
+        TContext,
+        TLoaderData
+      >,
+  ): Route<
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TFilePath,
+    TId,
+    TSearchSchema,
+    TFullSearchSchema,
+    TParams,
+    TAllParams,
+    TRouteContext,
+    TContext,
+    TRouterContext,
+    TLoaderData,
+    TChildren,
+    TRouteTree
+  > => {
+    const route = new Route(options as any)
+    ;(route as any).isRoot = false
+    return route as any
+  }
+}

package/src/history.ts

@@ -0,0 +1,8 @@
+import { HistoryLocation } from '@tanstack/history'
+
+declare module '@tanstack/history' {
+  interface HistoryState {
+    __tempLocation?: HistoryLocation
+    __tempKey?: string
+  }
+}