@tanstack/react-router 1.20.1 → 1.20.3-alpha.1

package/src/index.tsx

@@ -1,33 +1,371 @@
-//
-export * from '@tanstack/history'
 export { default as invariant } from 'tiny-invariant'
 export { default as warning } from 'tiny-warning'
-export * from './awaited'
-export * from './defer'
-export * from './CatchBoundary'
-export * from './fileRoute'
+
+export {
+  defer,
+  TSR_DEFERRED_PROMISE,
+  isMatch,
+  joinPaths,
+  cleanPath,
+  trimPathLeft,
+  trimPathRight,
+  trimPath,
+  resolvePath,
+  parsePathname,
+  interpolatePath,
+  matchPathname,
+  removeBasepath,
+  matchByPath,
+  encode,
+  decode,
+  rootRouteId,
+  defaultSerializeError,
+  defaultParseSearch,
+  defaultStringifySearch,
+  parseSearchWith,
+  stringifySearchWith,
+  escapeJSON, // SSR
+  pick,
+  functionalUpdate,
+  replaceEqualDeep,
+  isPlainObject,
+  isPlainArray,
+  deepEqual,
+  shallow,
+  createControlledPromise,
+  retainSearchParams,
+  stripSearchParams,
+} from '@tanstack/router-core'
+
+export type {
+  AnyRoute,
+  StartSerializer,
+  Serializable,
+  SerializerParse,
+  SerializerParseBy,
+  SerializerStringify,
+  SerializerStringifyBy,
+  DeferredPromiseState,
+  DeferredPromise,
+  ParsedLocation,
+  ParsePathParams,
+  RemoveTrailingSlashes,
+  RemoveLeadingSlashes,
+  ActiveOptions,
+  Segment,
+  ResolveRelativePath,
+  RootRouteId,
+  AnyPathParams,
+  ResolveParams,
+  SearchSchemaInput,
+  AnyContext,
+  RouteContext,
+  PreloadableObj,
+  RoutePathOptions,
+  StaticDataRouteOption,
+  RoutePathOptionsIntersection,
+  UpdatableStaticRouteOption,
+  MetaDescriptor,
+  RouteLinkEntry,
+  ParseParamsFn,
+  SearchFilter,
+  ResolveId,
+  InferFullSearchSchema,
+  InferFullSearchSchemaInput,
+  ErrorRouteProps,
+  ErrorComponentProps,
+  NotFoundRouteProps,
+  TrimPath,
+  TrimPathLeft,
+  TrimPathRight,
+  ParseSplatParams,
+  SplatParams,
+  StringifyParamsFn,
+  ParamsOptions,
+  InferAllParams,
+  InferAllContext,
+  LooseReturnType,
+  LooseAsyncReturnType,
+  ContextReturnType,
+  ContextAsyncReturnType,
+  ResolveLoaderData,
+  ResolveRouteContext,
+  SearchSerializer,
+  SearchParser,
+  TrailingSlashOption,
+  ExtractedEntry,
+  ExtractedStream,
+  ExtractedPromise,
+  StreamState,
+  Manifest,
+  RouterManagedTag,
+  ControlledPromise,
+  Constrain,
+  Expand,
+  MergeAll,
+  Assign,
+  IntersectAssign,
+  ResolveValidatorInput,
+  ResolveValidatorOutput,
+  Register,
+  AnyValidator,
+  DefaultValidator,
+  ValidatorFn,
+  AnySchema,
+  AnyValidatorAdapter,
+  AnyValidatorFn,
+  AnyValidatorObj,
+  ResolveValidatorInputFn,
+  ResolveValidatorOutputFn,
+  ResolveSearchValidatorInput,
+  ResolveSearchValidatorInputFn,
+  Validator,
+  ValidatorAdapter,
+  ValidatorObj,
+  FileRoutesByPath,
+  RouteById,
+  RootRouteOptions,
+  SerializerExtensions,
+  CreateFileRoute,
+} from '@tanstack/router-core'
+
+export type * from './serializer'
+
+export {
+  createHistory,
+  createBrowserHistory,
+  createHashHistory,
+  createMemoryHistory,
+} from '@tanstack/history'
+
+export type {
+  BlockerFn,
+  HistoryLocation,
+  RouterHistory,
+  ParsedPath,
+  HistoryState,
+} from '@tanstack/history'
+
+export { useAwaited, Await } from './awaited'
+export type { AwaitOptions } from './awaited'
+
+export { CatchBoundary, ErrorComponent } from './CatchBoundary'
+export { ClientOnly } from './ClientOnly'
+
+export {
+  FileRoute,
+  createFileRoute,
+  FileRouteLoader,
+  LazyRoute,
+  createLazyRoute,
+  createLazyFileRoute,
+} from './fileRoute'
+
 export * from './history'
-export * from './lazyRouteComponent'
-export * from './link'
-export * from './location'
-export * from './Matches'
-export * from './path'
-export * from './qss'
-export * from './redirects'
-export * from './route'
-export * from './routeInfo'
-export * from './router'
-export * from './RouterProvider'
-export * from './scroll-restoration'
-export * from './searchParams'
-export * from './useBlocker'
-export * from './useNavigate'
-export * from './useParams'
-export * from './useSearch'
-export * from './routerContext'
-export * from './useRouteContext'
-export * from './useRouter'
-export * from './useRouterState'
-export * from './utils'
-export * from './not-found'
-export * from './createServerFn'
+
+export { lazyRouteComponent } from './lazyRouteComponent'
+
+export { useLinkProps, createLink, Link, linkOptions } from './link'
+export type {
+  InferDescendantToPaths,
+  RelativeToPath,
+  RelativeToParentPath,
+  RelativeToCurrentPath,
+  AbsoluteToPath,
+  RelativeToPathAutoComplete,
+  NavigateOptions,
+  ToOptions,
+  ToMaskOptions,
+  ToSubOptions,
+  ResolveRoute,
+  SearchParamOptions,
+  PathParamOptions,
+  ToPathOption,
+  LinkOptions,
+  MakeOptionalPathParams,
+  FileRouteTypes,
+  RouteContextParameter,
+  BeforeLoadContextParameter,
+  ResolveAllContext,
+  ResolveAllParamsFromParent,
+  ResolveFullSearchSchema,
+  ResolveFullSearchSchemaInput,
+  RouteIds,
+  NavigateFn,
+  BuildLocationFn,
+  FullSearchSchemaOption,
+  MakeRemountDepsOptionsUnion,
+  RemountDepsOptions,
+  ResolveFullPath,
+  AnyRouteWithContext,
+  AnyRouterWithContext,
+  CommitLocationOptions,
+  MatchLocation,
+  UseNavigateResult,
+  AnyRedirect,
+  Redirect,
+  ResolvedRedirect,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RouteMatch,
+  AnyRouteMatch,
+  RouteContextFn,
+  RouteContextOptions,
+  BeforeLoadFn,
+  BeforeLoadContextOptions,
+  ContextOptions,
+  RouteOptions,
+  FileBaseRouteOptions,
+  BaseRouteOptions,
+  UpdatableRouteOptions,
+  RouteLoaderFn,
+  LoaderFnContext,
+  LazyRouteOptions,
+  AnyRouter,
+  RegisteredRouter,
+  RouterContextOptions,
+  ControllablePromise,
+  InjectedHtmlEntry,
+  RouterOptions,
+  RouterErrorSerializer,
+  RouterState,
+  ListenerFn,
+  BuildNextOptions,
+  RouterConstructorOptions,
+  RouterEvents,
+  RouterEvent,
+  RouterListener,
+  RouteConstraints,
+  RouteMask,
+  MatchRouteOptions,
+  CreateLazyFileRoute,
+} from '@tanstack/router-core'
+export type {
+  UseLinkPropsOptions,
+  ActiveLinkOptions,
+  LinkProps,
+  LinkComponent,
+  LinkComponentProps,
+  CreateLinkProps,
+} from './link'
+
+export {
+  Matches,
+  useMatchRoute,
+  MatchRoute,
+  useMatches,
+  useParentMatches,
+  useChildMatches,
+} from './Matches'
+
+export type { UseMatchRouteOptions, MakeMatchRouteOptions } from './Matches'
+
+export { matchContext } from './matchContext'
+export { Match, Outlet } from './Match'
+
+export { useMatch } from './useMatch'
+export { useLoaderDeps } from './useLoaderDeps'
+export { useLoaderData } from './useLoaderData'
+
+export { redirect, isRedirect } from '@tanstack/router-core'
+
+export {
+  RouteApi,
+  getRouteApi,
+  Route,
+  createRoute,
+  RootRoute,
+  rootRouteWithContext,
+  createRootRoute,
+  createRootRouteWithContext,
+  createRouteMask,
+  NotFoundRoute,
+} from './route'
+export type {
+  AnyRootRoute,
+  ReactNode,
+  SyncRouteComponent,
+  AsyncRouteComponent,
+  RouteComponent,
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+} from './route'
+
+export { createRouter, Router } from './router'
+
+export {
+  componentTypes,
+  lazyFn,
+  SearchParamError,
+  PathParamError,
+  getInitialRouterState,
+} from '@tanstack/router-core'
+
+export { RouterProvider, RouterContextProvider } from './RouterProvider'
+export type { RouterProps } from './RouterProvider'
+
+export {
+  useElementScrollRestoration,
+  ScrollRestoration,
+} from './ScrollRestoration'
+
+export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker'
+export { useBlocker, Block } from './useBlocker'
+
+export { useNavigate, Navigate } from './useNavigate'
+
+export { useParams } from './useParams'
+export { useSearch } from './useSearch'
+
+export {
+  getRouterContext, // SSR
+} from './routerContext'
+
+export { useRouteContext } from './useRouteContext'
+export { useRouter } from './useRouter'
+export { useRouterState } from './useRouterState'
+export { useLocation } from './useLocation'
+export { useCanGoBack } from './useCanGoBack'
+
+export {
+  useLayoutEffect, // SSR
+  useStableCallback,
+} from './utils'
+
+export { CatchNotFound, DefaultGlobalNotFound } from './not-found'
+export { notFound, isNotFound } from '@tanstack/router-core'
+export type { NotFoundError } from '@tanstack/router-core'
+
+export type {
+  ValidateLinkOptions,
+  InferStructuralSharing,
+  ValidateUseSearchOptions,
+  ValidateUseParamsOptions,
+  ValidateLinkOptionsArray,
+} from './typePrimitives'
+
+export type {
+  ValidateFromPath,
+  ValidateToPath,
+  ValidateSearch,
+  ValidateParams,
+  InferFrom,
+  InferTo,
+  InferMaskTo,
+  InferMaskFrom,
+  ValidateNavigateOptions,
+  ValidateNavigateOptionsArray,
+  ValidateRedirectOptions,
+  ValidateRedirectOptionsArray,
+  ValidateId,
+  InferStrict,
+  InferShouldThrow,
+  InferSelected,
+  ValidateUseSearchResult,
+  ValidateUseParamsResult,
+} from '@tanstack/router-core'
+
+export { ScriptOnce } from './ScriptOnce'
+export { Asset } from './Asset'
+export { HeadContent } from './HeadContent'
+export { Scripts } from './Scripts'

package/src/lazyRouteComponent.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { AsyncRouteComponent } from './route'
+import { Outlet } from './Match'
+import { ClientOnly } from './ClientOnly'
+import type { AsyncRouteComponent } from './route'
 
 // If the load fails due to module not found, it may mean a new version of
 // the build was deployed and the user's browser is still using an old version.
@@ -7,9 +9,14 @@ import { AsyncRouteComponent } from './route'
 // URL to the lazy module.
 // In that case, we want to attempt one window refresh to get the latest.
 function isModuleNotFoundError(error: any): boolean {
+  // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
+  // safari: "Importing a module script failed."
+  if (typeof error?.message !== 'string') return false
   return (
-    typeof error?.message === 'string' &&
-    /Failed to fetch dynamically imported module/.test(error.message)
+    error.message.startsWith('Failed to fetch dynamically imported module') ||
+    error.message.startsWith('error loading dynamically imported module') ||
+    error.message.startsWith('Importing a module script failed')
   )
 }
 
@@ -19,73 +26,80 @@ export function lazyRouteComponent<
 >(
   importer: () => Promise<T>,
   exportName?: TKey,
+  ssr?: () => boolean,
 ): T[TKey] extends (props: infer TProps) => any
   ? AsyncRouteComponent<TProps>
   : never {
-  let loadPromise: Promise<any> & {
-    moduleNotFoundError?: Error
-  }
+  let loadPromise: Promise<any> | undefined
+  let comp: T[TKey] | T['default']
+  let error: any
+  let reload: boolean
 
   const load = () => {
+    if (typeof document === 'undefined' && ssr?.() === false) {
+      comp = (() => null) as any
+      return Promise.resolve()
+    }
     if (!loadPromise) {
-      loadPromise = importer().catch((error) => {
-        if (isModuleNotFoundError(error)) {
+      loadPromise = importer()
+        .then((res) => {
+          loadPromise = undefined
+          comp = res[exportName ?? 'default']
+        })
+        .catch((err) => {
           // We don't want an error thrown from preload in this case, because
           // there's nothing we want to do about module not found during preload.
-          // Record the error, recover the promise with a null return,
-          // and we will attempt module not found resolution during the render path.
-
-          loadPromise.moduleNotFoundError = error
-
-          return null
-        }
-        throw error
-      })
+          // Record the error, the rest is handled during the render path.
+          error = err
+          if (isModuleNotFoundError(error)) {
+            if (
+              error instanceof Error &&
+              typeof window !== 'undefined' &&
+              typeof sessionStorage !== 'undefined'
+            ) {
+              // Again, we want to reload one time on module not found error and not enter
+              // a reload loop if there is some other issue besides an old deploy.
+              // That's why we store our reload attempt in sessionStorage.
+              // Use error.message as key because it contains the module path that failed.
+              const storageKey = `tanstack_router_reload:${error.message}`
+              if (!sessionStorage.getItem(storageKey)) {
+                sessionStorage.setItem(storageKey, '1')
+                reload = true
+              }
+            }
+          }
+        })
     }
 
     return loadPromise
   }
 
-  const lazyComp = React.lazy(async () => {
-    try {
-      const promise = load()
-
-      // Now that we're out of preload and into actual render path,
-      // throw the error if it was a module not found error during preload
-      if (promise.moduleNotFoundError) {
-        throw promise.moduleNotFoundError
-      }
-      const moduleExports = await promise
+  const lazyComp = function Lazy(props: any) {
+    // Now that we're out of preload and into actual render path,
+    if (reload) {
+      // If it was a module loading error,
+      // throw eternal suspense while we wait for window to reload
+      window.location.reload()
+      throw new Promise(() => {})
+    }
+    if (error) {
+      // Otherwise, just throw the error
+      throw error
+    }
 
-      const comp = moduleExports[exportName ?? 'default']
-      return {
-        default: comp,
-      }
-    } catch (error) {
-      if (
-        error instanceof Error &&
-        isModuleNotFoundError(error) &&
-        typeof window !== 'undefined' &&
-        typeof sessionStorage !== 'undefined'
-      ) {
-        // Again, we want to reload one time on module not found error and not enter
-        // a reload loop if there is some other issue besides an old deploy.
-        // That's why we store our reload attempt in sessionStorage.
-        // Use error.message as key because it contains the module path that failed.
-        const storageKey = `tanstack_router_reload:${error.message}`
-        if (!sessionStorage.getItem(storageKey)) {
-          sessionStorage.setItem(storageKey, '1')
-          window.location.reload()
+    if (!comp) {
+      throw load()
+    }
 
-          // Return empty component while we wait for window to reload
-          return {
-            default: () => null,
-          }
-        }
-      }
-      throw error
+    if (ssr?.() === false) {
+      return (
+        <ClientOnly fallback={<Outlet />}>
+          {React.createElement(comp, props)}
+        </ClientOnly>
+      )
     }
-  })
+    return React.createElement(comp, props)
+  }
 
   ;(lazyComp as any).preload = load