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

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.20",
   "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.19",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -6,7 +6,6 @@ import {
   AnyRoute,
   CheckId,
   rootRouteId,
-  Router,
   RouterState,
   ToIdOption,
 } from '@tanstack/router-core'
@@ -31,15 +30,67 @@ import {
   NoInfer,
   ToOptions,
   invariant,
+  Router,
 } from '@tanstack/router-core'
 
 export * from '@tanstack/router-core'
 
+export interface RegisterRouter {
+  // router: Router
+}
+
+export type ResolvedRouter = RegisterRouter extends {
+  router: Router<infer TRouteConfig, infer TAllRouteInfo>
+}
+  ? Router<TRouteConfig, TAllRouteInfo>
+  : Router
+
+export type ResolvedAllRouteInfo = 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
+}
+
 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,9 +101,17 @@ declare module '@tanstack/router-core' {
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
+    useMatch: <
+      TId extends keyof TAllRouteInfo['routeInfoById'],
+      TStrict extends true | false = 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>,
@@ -99,6 +158,7 @@ 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> &
@@ -154,18 +214,24 @@ 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: LinkPropsOptions<ResolvedAllRouteInfo, '/', TTo> &
+    React.AnchorHTMLAttributes<HTMLAnchorElement> &
+    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & {
+      children?:
+        | React.ReactNode
+        | ((state: { isActive: boolean }) => React.ReactNode)
+    },
+): 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: ResolvedRouter }>(
+  null!,
 )
 
-const useLayoutEffect = isDOM ? React.useLayoutEffect : React.useEffect
-
 export type MatchesProviderProps = {
   value: RouteMatch[]
   children: React.ReactNode
@@ -253,6 +319,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 +347,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 +421,7 @@ export function createReactRouter<
           useRouterSubscription(router)
           return router.state
         },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -357,32 +429,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 +465,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 +494,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 +508,86 @@ export function RouterProvider<
   )
 }
 
-function useRouter(): Router {
+export function useRouter(): ResolvedRouter {
   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 ResolvedAllRouteInfo['routeInfoById'],
+  TStrict extends true | false = true,
+>(
+  routeId: TId,
+  opts?: { strict?: TStrict },
+): TStrict extends true
+  ? RouteMatch<ResolvedAllRouteInfo, ResolvedAllRouteInfo['routeInfoById'][TId]>
+  :
+      | RouteMatch<
+          ResolvedAllRouteInfo,
+          ResolvedAllRouteInfo['routeInfoById'][TId]
+        >
+      | undefined {
+  const router = useRouter()
+  return router.useMatch(routeId as any, opts) as any
 }
 
 export function Outlet() {
   const router = useRouter()
-  const [, ...matches] = useMatches()
-
-  const childMatch = matches[0]
-
-  if (!childMatch) return null
-
-  const element = ((): React.ReactNode => {
-    if (!childMatch) {
-      return null
-    }
-
-    const errorElement =
-      childMatch.__.errorElement ?? router.options.defaultErrorElement
-
-    if (childMatch.status === 'error') {
-      if (errorElement) {
-        return errorElement as any
-      }
-
-      if (
-        childMatch.options.useErrorBoundary ||
-        router.options.useErrorBoundary
-      ) {
-        throw childMatch.error
-      }
+  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 +600,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 +633,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>
   )
 }