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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1-beta.21",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -34,13 +34,14 @@
     "build/**",
     "src"
   ],
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-beta.2",
+    "@tanstack/router-core": "0.0.1-beta.21",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -6,7 +6,7 @@ import {
   AnyRoute,
   CheckId,
   rootRouteId,
-  Router,
+  Route,
   RouterState,
   ToIdOption,
 } from '@tanstack/router-core'
@@ -31,15 +31,119 @@ import {
   NoInfer,
   ToOptions,
   invariant,
+  Router,
 } from '@tanstack/router-core'
 
 export * from '@tanstack/router-core'
 
+export interface RegisterRouter {
+  // router: Router
+}
+
+export type RegisteredRouter = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo>
+}
+  ? Router<TRouteConfig, TAllRouteInfo>
+  : Router
+
+export type RegisteredAllRouteInfo = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo>
+}
+  ? TAllRouteInfo
+  : AnyAllRouteInfo
+
+export type SyncRouteComponent = (props?: {}) => JSX.Element | React.ReactNode
+
+export type RouteComponent = SyncRouteComponent & {
+  preload?: () => Promise<SyncRouteComponent>
+}
+
+export function lazy(
+  importer: () => Promise<{ default: SyncRouteComponent }>,
+): RouteComponent {
+  const lazyComp = React.lazy(importer as any)
+  let promise: Promise<SyncRouteComponent>
+  let resolvedComp: SyncRouteComponent
+
+  const forwardedComp = React.forwardRef((props, ref) => {
+    const resolvedCompRef = React.useRef(resolvedComp || lazyComp)
+    return React.createElement(
+      resolvedCompRef.current as any,
+      { ...(ref ? { ref } : {}), ...props } as any,
+    )
+  })
+
+  const finalComp = forwardedComp as unknown as RouteComponent
+
+  finalComp.preload = () => {
+    if (!promise) {
+      promise = importer().then((module) => {
+        resolvedComp = module.default
+        return resolvedComp
+      })
+    }
+
+    return promise
+  }
+
+  return finalComp
+}
+
+type LinkPropsOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
+  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  activeProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
+  inactiveProps?:
+    | React.AnchorHTMLAttributes<HTMLAnchorElement>
+    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
+}
+
+type MakeMatchRouteOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = ToOptions<TAllRouteInfo, TFrom, TTo> &
+  MatchRouteOptions & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | React.ReactNode
+      | ((
+          params: RouteInfoByPath<
+            TAllRouteInfo,
+            ResolveRelativePath<TFrom, NoInfer<TTo>>
+          >['allParams'],
+        ) => React.ReactNode)
+  }
+
+type MakeLinkPropsOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkPropsOptions<TAllRouteInfo, TFrom, TTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+type MakeLinkOptions<
+  TAllRouteInfo extends AnyAllRouteInfo,
+  TFrom extends ValidFromPath<TAllRouteInfo>,
+  TTo extends string,
+> = LinkPropsOptions<TAllRouteInfo, TFrom, TTo> &
+  React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+    // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
+    children?:
+      | React.ReactNode
+      | ((state: { isActive: boolean }) => React.ReactNode)
+  }
+
 declare module '@tanstack/router-core' {
   interface FrameworkGenerics {
-    Element: React.ReactNode
-    // Any is required here so import() will work without having to do import().then(d => d.default)
-    SyncOrAsyncElement: React.ReactNode | (() => Promise<any>)
+    Component: RouteComponent
   }
 
   interface Router<
@@ -50,36 +154,26 @@ declare module '@tanstack/router-core' {
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+    useNearestMatch: () => RouteMatch<TAllRouteInfo, RouteInfo>
+    useMatch: <
+      TId extends keyof TAllRouteInfo['routeInfoById'],
+      TStrict extends boolean = true,
+    >(
       routeId: TId,
-    ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      opts?: { strict?: TStrict },
+    ) => TStrict extends true
+      ? RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+      :
+          | RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
+          | undefined
     linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+      props: MakeLinkPropsOptions<TAllRouteInfo, '/', TTo>,
     ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
     Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((state: { isActive: boolean }) => React.ReactNode)
-        },
+      props: MakeLinkOptions<TAllRouteInfo, '/', TTo>,
     ) => JSX.Element
     MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, '/', TTo> &
-        MatchRouteOptions & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<'/', NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
+      props: MakeMatchRouteOptions<TAllRouteInfo, '/', TTo>,
     ) => JSX.Element
   }
 
@@ -99,53 +193,20 @@ declare module '@tanstack/router-core' {
         TResolved,
         ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
       >,
+      opts?: { strict?: boolean },
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+      props: MakeLinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => React.AnchorHTMLAttributes<HTMLAnchorElement>
     Link: <TTo extends string = '.'>(
-      props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        React.AnchorHTMLAttributes<HTMLAnchorElement> &
-        Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((state: { isActive: boolean }) => React.ReactNode)
-        },
+      props: MakeLinkOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => JSX.Element
     MatchRoute: <TTo extends string = '.'>(
-      props: ToOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
-        MatchRouteOptions & {
-          // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
-          children?:
-            | React.ReactNode
-            | ((
-                params: RouteInfoByPath<
-                  TAllRouteInfo,
-                  ResolveRelativePath<TRouteInfo['fullPath'], NoInfer<TTo>>
-                >['allParams'],
-              ) => React.ReactNode)
-        },
+      props: MakeMatchRouteOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo>,
     ) => JSX.Element
   }
 }
 
-type LinkPropsOptions<
-  TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
-  TFrom extends ValidFromPath<TAllRouteInfo> = '/',
-  TTo extends string = '.',
-> = LinkOptions<TAllRouteInfo, TFrom, TTo> & {
-  // A function that returns additional props for the `active` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  activeProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-  // A function that returns additional props for the `inactive` state of this link. These props override other props passed to the link (`style`'s are merged, `className`'s are concatenated)
-  inactiveProps?:
-    | React.AnchorHTMLAttributes<HTMLAnchorElement>
-    | (() => React.AnchorHTMLAttributes<HTMLAnchorElement>)
-}
-
 export type PromptProps = {
   message: string
   when?: boolean | any
@@ -154,18 +215,18 @@ export type PromptProps = {
 
 //
 
-const matchesContext = React.createContext<RouteMatch[]>(null!)
-const routerContext = React.createContext<{ router: Router<any, any> }>(null!)
+export function Link<TTo extends string = '.'>(
+  props: MakeLinkOptions<RegisteredAllRouteInfo, '/', TTo>,
+): JSX.Element {
+  const router = useRouter()
+  return <router.Link {...(props as any)} />
+}
 
-// Detect if we're in the DOM
-const isDOM = Boolean(
-  typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement,
+export const matchesContext = React.createContext<RouteMatch[]>(null!)
+export const routerContext = React.createContext<{ router: RegisteredRouter }>(
+  null!,
 )
 
-const useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect
-
 export type MatchesProviderProps = {
   value: RouteMatch[]
   children: React.ReactNode
@@ -237,7 +298,7 @@ export function createReactRouter<
           ...rest
         } = options
 
-        const linkInfo = route.buildLink(options)
+        const linkInfo = route.buildLink(options as any)
 
         if (linkInfo.type === 'external') {
           const { href } = linkInfo
@@ -253,6 +314,12 @@ export function createReactRouter<
           next,
         } = linkInfo
 
+        const reactHandleClick = (e: Event) => {
+          React.startTransition(() => {
+            handleClick(e)
+          })
+        }
+
         const composeHandlers =
           (handlers: (undefined | ((e: any) => void))[]) =>
           (e: React.SyntheticEvent) => {
@@ -275,7 +342,7 @@ export function createReactRouter<
           ...resolvedInactiveProps,
           ...rest,
           href: disabled ? undefined : next.href,
-          onClick: composeHandlers([handleClick, onClick]),
+          onClick: composeHandlers([reactHandleClick, onClick]),
           onFocus: composeHandlers([handleFocus, onFocus]),
           onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
           onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
@@ -349,7 +416,7 @@ export function createReactRouter<
           useRouterSubscription(router)
           return router.state
         },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -357,32 +424,30 @@ export function createReactRouter<
             `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
           )
 
-          const runtimeMatch = useMatch()
+          const runtimeMatch = useMatches()?.[0]!
           const match = router.state.matches.find((d) => d.routeId === routeId)
 
-          invariant(
-            match,
-            `Could not find a match for route "${
-              routeId as string
-            }" being rendered in this component!`,
-          )
-
-          invariant(
-            runtimeMatch.routeId == match?.routeId,
-            `useMatch('${
-              match?.routeId as string
-            }') is being called in a component that is meant to render the '${
-              runtimeMatch.routeId
-            }' route. Did you mean to 'useRoute(${
-              match?.routeId as string
-            })' instead?`,
-          )
-
-          if (!match) {
-            invariant('Match not found!')
+          if (opts?.strict ?? true) {
+            invariant(
+              match,
+              `Could not find an active match for "${routeId as string}"!`,
+            )
+
+            invariant(
+              runtimeMatch.routeId == match?.routeId,
+              `useMatch("${
+                match?.routeId as string
+              }") is being called in a component that is meant to render the '${
+                runtimeMatch.routeId
+              }' route. Did you mean to 'useMatch("${
+                match?.routeId as string
+              }", { strict: false })' or 'useRoute("${
+                match?.routeId as string
+              }")' instead?`,
+            )
           }
 
-          return match
+          return match as any
         },
       }
 
@@ -395,19 +460,13 @@ export function createReactRouter<
 
       Object.assign(route, routeExt)
     },
-    createElement: async (element) => {
-      if (typeof element === 'function') {
-        const res = (await element()) as any
-
-        // Support direct import() calls
-        if (typeof res === 'object' && res.default) {
-          return React.createElement(res.default)
-        } else {
-          return res
-        }
+    loadComponent: async (component) => {
+      if (component.preload && typeof document !== 'undefined') {
+        component.preload()
+        // return await component.preload()
       }
 
-      return element
+      return component as any
     },
   })
 
@@ -430,13 +489,13 @@ export function RouterProvider<
   router.update(rest)
 
   useRouterSubscription(router)
-
-  useLayoutEffect(() => {
+  React.useEffect(() => {
+    console.log('hello')
     return router.mount()
   }, [router])
 
   return (
-    <routerContext.Provider value={{ router }}>
+    <routerContext.Provider value={{ router: router as any }}>
       <MatchesProvider value={router.state.matches}>
         {children ?? <Outlet />}
       </MatchesProvider>
@@ -444,93 +503,123 @@ export function RouterProvider<
   )
 }
 
-function useRouter(): Router {
+export function useRouter(): RegisteredRouter {
   const value = React.useContext(routerContext)
   warning(!value, 'useRouter must be used inside a <Router> component!')
 
   useRouterSubscription(value.router)
 
-  return value.router as Router
+  return value.router
 }
 
-function useMatches(): RouteMatch[] {
+export function useMatches(): RouteMatch[] {
   return React.useContext(matchesContext)
 }
 
-// function useParentMatches(): RouteMatch[] {
-//   const router = useRouter()
-//   const match = useMatch()
-//   const matches = router.state.matches
-//   return matches.slice(
-//     0,
-//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-//   )
-// }
-
-function useMatch<T>(): RouteMatch {
-  return useMatches()?.[0] as RouteMatch
+export function useMatch<
+  TId extends keyof RegisteredAllRouteInfo['routeInfoById'],
+  TStrict extends boolean = true,
+>(
+  routeId: TId,
+  opts?: { strict?: TStrict },
+): TStrict extends true
+  ? RouteMatch<
+      RegisteredAllRouteInfo,
+      RegisteredAllRouteInfo['routeInfoById'][TId]
+    >
+  :
+      | RouteMatch<
+          RegisteredAllRouteInfo,
+          RegisteredAllRouteInfo['routeInfoById'][TId]
+        >
+      | undefined {
+  const router = useRouter()
+  return router.useMatch(routeId as any, opts) as any
 }
 
-export function Outlet() {
-  const router = useRouter()
-  const [, ...matches] = useMatches()
+export function useNearestMatch(): RouteMatch<
+  RegisteredAllRouteInfo,
+  RouteInfo
+> {
+  const runtimeMatch = useMatches()?.[0]!
 
-  const childMatch = matches[0]
+  invariant(runtimeMatch, `Could not find a nearest match!`)
 
-  if (!childMatch) return null
+  return runtimeMatch as any
+}
 
-  const element = ((): React.ReactNode => {
-    if (!childMatch) {
-      return null
-    }
+export function useRoute<
+  TId extends keyof RegisteredAllRouteInfo['routeInfoById'],
+>(
+  routeId: TId,
+): Route<RegisteredAllRouteInfo, RegisteredAllRouteInfo['routeInfoById'][TId]> {
+  const router = useRouter()
+  return router.useRoute(routeId as any) as any
+}
 
-    const errorElement =
-      childMatch.__.errorElement ?? router.options.defaultErrorElement
+export function linkProps<TTo extends string = '.'>(
+  props: MakeLinkPropsOptions<RegisteredAllRouteInfo, '/', TTo>,
+): React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  const router = useRouter()
+  return router.linkProps(props as any)
+}
 
-    if (childMatch.status === 'error') {
-      if (errorElement) {
-        return errorElement as any
-      }
+export function MatchRoute<TTo extends string = '.'>(
+  props: MakeMatchRouteOptions<RegisteredAllRouteInfo, '/', TTo>,
+): JSX.Element {
+  const router = useRouter()
+  return React.createElement(router.MatchRoute, props as any)
+}
 
-      if (
-        childMatch.options.useErrorBoundary ||
-        router.options.useErrorBoundary
-      ) {
-        throw childMatch.error
-      }
+export function Outlet() {
+  const router = useRouter()
+  const matches = useMatches().slice(1)
+  const match = matches[0]
 
-      return <DefaultErrorBoundary error={childMatch.error} />
-    }
+  const defaultPending = React.useCallback(() => null, [])
 
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
-        const pendingElement =
-          childMatch.__.pendingElement ?? router.options.defaultPendingElement
+  if (!match) {
+    return null
+  }
 
-        if (childMatch.options.pendingMs || pendingElement) {
-          return (pendingElement as any) ?? null
-        }
-      }
+  const PendingComponent = (match.__.pendingComponent ??
+    router.options.defaultPendingComponent ??
+    defaultPending) as any
 
-      return null
-    }
+  const errorComponent =
+    match.__.errorComponent ?? router.options.defaultErrorComponent
 
-    return (childMatch.__.element as any) ?? router.options.defaultElement
-  })() as JSX.Element
+  return (
+    <MatchesProvider value={matches}>
+      <React.Suspense fallback={<PendingComponent />}>
+        <CatchBoundary errorComponent={errorComponent}>
+          {
+            ((): React.ReactNode => {
+              if (match.status === 'error') {
+                throw match.error
+              }
 
-  const catchElement =
-    childMatch?.options.catchElement ?? router.options.defaultCatchElement
+              if (match.status === 'success') {
+                return React.createElement(
+                  (match.__.component as any) ??
+                    router.options.defaultComponent ??
+                    Outlet,
+                )
+              }
 
-  return (
-    <MatchesProvider value={matches} key={childMatch.matchId}>
-      <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
+              console.log(match.matchId, 'suspend')
+              throw match.__.loadPromise
+            })() as JSX.Element
+          }
+        </CatchBoundary>
+      </React.Suspense>
     </MatchesProvider>
   )
 }
 
 class CatchBoundary extends React.Component<{
   children: any
-  catchElement: any
+  errorComponent: any
 }> {
   state = {
     error: false,
@@ -543,19 +632,11 @@ class CatchBoundary extends React.Component<{
       info,
     })
   }
-  reset = () => {
-    this.setState({
-      error: false,
-      info: false,
-    })
-  }
   render() {
-    const catchElement = this.props.catchElement ?? DefaultErrorBoundary
+    const errorComponent = this.props.errorComponent ?? DefaultErrorBoundary
 
     if (this.state.error) {
-      return typeof catchElement === 'function'
-        ? catchElement(this.state)
-        : catchElement
+      return React.createElement(errorComponent, this.state)
     }
 
     return this.props.children
@@ -584,19 +665,6 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
           ) : null}
         </pre>
       </div>
-      <div style={{ height: '1rem' }} />
-      <div
-        style={{
-          fontSize: '.8em',
-          borderLeft: '3px solid rgba(127, 127, 127, 1)',
-          paddingLeft: '.5rem',
-          opacity: 0.5,
-        }}
-      >
-        If you are the owner of this website, it's highly recommended that you
-        configure your own custom Catch/Error boundaries for the router. You can
-        optionally configure a boundary for each route.
-      </div>
     </div>
   )
 }