@tanstack/react-router 0.0.1-beta.9 → 1.0.1

package/src/RouterProvider.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react'
+import warning from 'tiny-warning'
+import { useStore } from '@tanstack/react-store'
+import { Matches } from './Matches'
+import { 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, pick, useLayoutEffect } 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 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: ToOptions<TRouteTree>,
+) => ParsedLocation
+
+export type InjectedHtmlEntry = string | (() => Promise<string> | string)
+
+export let routerContext = React.createContext<Router<any>>(null!)
+
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__
+  } else {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+  }
+}
+
+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.update({
+    ...router.options,
+    ...rest,
+    context: {
+      ...router.options.context,
+      ...rest?.context,
+    },
+  } as any)
+
+  const matches = router.options.InnerWrap ? (
+    <router.options.InnerWrap>
+      <Matches />
+    </router.options.InnerWrap>
+  ) : (
+    <Matches />
+  )
+
+  const provider = (
+    <routerContext.Provider value={router}>
+      {matches}
+      <Transitioner />
+    </routerContext.Provider>
+  )
+
+  if (router.options.Wrap) {
+    return <router.options.Wrap>{provider}</router.options.Wrap>
+  }
+
+  return provider
+}
+
+function Transitioner() {
+  const mountLoadCount = React.useRef(0)
+  const router = useRouter()
+  const routerState = useRouterState({
+    select: (s) =>
+      pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning']),
+  })
+
+  const [isTransitioning, startReactTransition] = React.useTransition()
+
+  router.startReactTransition = startReactTransition
+
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState((s) => ({
+        ...s,
+        isTransitioning,
+      }))
+    }
+  }, [isTransitioning])
+
+  const tryLoad = () => {
+    const apply = (cb: () => void) => {
+      if (!routerState.isTransitioning) {
+        startReactTransition(() => cb())
+      } else {
+        cb()
+      }
+    }
+
+    apply(() => {
+      try {
+        router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    })
+  }
+
+  useLayoutEffect(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation)
+      if (routerState.location !== router.latestLocation) {
+        tryLoad()
+      }
+    })
+
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+    })
+
+    if (routerState.location.href !== nextLocation.href) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    return () => {
+      unsub()
+    }
+  }, [router.history])
+
+  useLayoutEffect(() => {
+    if (
+      routerState.isTransitioning &&
+      !isTransitioning &&
+      !routerState.isLoading &&
+      routerState.resolvedLocation !== routerState.location
+    ) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: routerState.resolvedLocation,
+        toLocation: routerState.location,
+        pathChanged:
+          routerState.location!.href !== routerState.resolvedLocation?.href,
+      })
+
+      if ((document as any).querySelector) {
+        if (routerState.location.hash !== '') {
+          const el = document.getElementById(
+            routerState.location.hash,
+          ) as HTMLElement | null
+          if (el) {
+            el.scrollIntoView()
+          }
+        }
+      }
+
+      router.__store.setState((s) => ({
+        ...s,
+        isTransitioning: false,
+        resolvedLocation: s.location,
+      }))
+    }
+  }, [
+    routerState.isTransitioning,
+    isTransitioning,
+    routerState.isLoading,
+    routerState.resolvedLocation,
+    routerState.location,
+  ])
+
+  useLayoutEffect(() => {
+    if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
+      mountLoadCount.current++
+      tryLoad()
+    }
+  }, [])
+
+  return null
+}
+
+export function getRouteMatch<TRouteTree extends AnyRoute>(
+  state: RouterState<TRouteTree>,
+  id: string,
+): undefined | RouteMatch<TRouteTree> {
+  return [
+    ...state.cachedMatches,
+    ...(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 router = useRouter()
+  return useStore(router.__store, opts?.select 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 =
+    typeof document !== 'undefined'
+      ? window.__TSR_ROUTER_CONTEXT__ || routerContext
+      : 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,152 @@
+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,
+    TLoaderDeps extends Record<string, any> = {},
+    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,
+        TLoaderDeps,
+        TLoaderData
+      >,
+      'getParentRoute' | 'path' | 'id'
+    > &
+      UpdatableRouteOptions<TFullSearchSchema>,
+  ): Route<
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TFilePath,
+    TId,
+    TSearchSchema,
+    TFullSearchSchema,
+    TParams,
+    TAllParams,
+    TRouteContext,
+    TContext,
+    TRouterContext,
+    TLoaderDeps,
+    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
+  }
+}