@tanstack/react-router 0.0.1-beta.12 → 0.0.1-beta.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.14",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-beta.11",
+    "@tanstack/router-core": "0.0.1-beta.14",
+    "react-lazy-with-preload": "^2.2.1",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -35,11 +35,19 @@ import {
 
 export * from '@tanstack/router-core'
 
+export { lazyWithPreload as lazy } from 'react-lazy-with-preload/lib/index'
+export type { PreloadableComponent as LazyComponent } from 'react-lazy-with-preload'
+
+type SyncRouteComponent = (props?: {}) => React.ReactNode
+export type RouteComponent = SyncRouteComponent & {
+  preload?: () => Promise<{
+    default: SyncRouteComponent
+  }>
+}
+
 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<
@@ -262,6 +270,12 @@ export function createReactRouter<
           next,
         } = linkInfo
 
+        const reactHandleClick = (e: Event) => {
+          React.startTransition(() => {
+            handleClick(e)
+          })
+        }
+
         const composeHandlers =
           (handlers: (undefined | ((e: any) => void))[]) =>
           (e: React.SyntheticEvent) => {
@@ -284,7 +298,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]),
@@ -402,19 +416,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
     },
   })
 
@@ -437,10 +445,8 @@ export function RouterProvider<
   router.update(rest)
 
   useRouterSubscription(router)
-  useLayoutEffect(() => {
-    const unsub = router.mount()
-    router.load()
-    return unsub
+  React.useEffect(() => {
+    return router.mount()
   }, [router])
 
   return (
@@ -470,61 +476,54 @@ export function Outlet() {
   const matches = useMatches().slice(1)
   const match = matches[0]
 
+  const defaultPending = React.useCallback(() => null, [])
+
   if (!match) {
     return null
   }
 
-  const element = ((): React.ReactNode => {
-    if (!match) {
-      return null
-    }
-
-    const errorElement =
-      match.__.errorElement ?? router.options.defaultErrorElement
-
-    if (match.status === 'error') {
-      if (errorElement) {
-        return errorElement as any
-      }
+  const PendingComponent = (match.__.pendingComponent ??
+    router.options.defaultPendingComponent ??
+    defaultPending) as any
 
-      if (match.options.useErrorBoundary || router.options.useErrorBoundary) {
-        throw match.error
-      }
-
-      return <DefaultErrorBoundary error={match.error} />
-    }
+  const errorComponent =
+    match.__.errorComponent ?? router.options.defaultErrorComponent
 
-    if (match.status === 'loading' || match.status === 'idle') {
-      if (match.isPending) {
-        const pendingElement =
-          match.__.pendingElement ?? router.options.defaultPendingElement
-
-        if (match.options.pendingMs || pendingElement) {
-          return (pendingElement as any) ?? null
-        }
-      }
-
-      return null
-    }
+  return (
+    <MatchesProvider value={matches}>
+      <React.Suspense fallback={<PendingComponent />}>
+        <CatchBoundary errorComponent={errorComponent}>
+          {
+            ((): React.ReactNode => {
+              if (match.status === 'error') {
+                throw match.error
+              }
 
-    return (
-      (match.__.element as any) ?? router.options.defaultElement ?? <Outlet />
-    )
-  })() as JSX.Element
+              if (match.status === 'success') {
+                return React.createElement(
+                  (match.__.component as any) ??
+                    router.options.defaultComponent ??
+                    Outlet,
+                )
+              }
 
-  const catchElement =
-    match?.options.catchElement ?? router.options.defaultCatchElement
+              if (match.__.loadPromise) {
+                console.log(match.matchId, 'suspend')
+                throw match.__.loadPromise
+              }
 
-  return (
-    <MatchesProvider value={matches}>
-      <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
+              invariant(false, 'This should never happen!')
+            })() as JSX.Element
+          }
+        </CatchBoundary>
+      </React.Suspense>
     </MatchesProvider>
   )
 }
 
 class CatchBoundary extends React.Component<{
   children: any
-  catchElement: any
+  errorComponent: any
 }> {
   state = {
     error: false,
@@ -538,12 +537,10 @@ class CatchBoundary extends React.Component<{
     })
   }
   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
@@ -572,19 +569,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>
   )
 }