@tanstack/react-router 0.0.1-alpha.1 → 0.0.1-alpha.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.11",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://react-router.tanstack.com/",
@@ -31,7 +31,7 @@
     "node": ">=12"
   },
   "files": [
-    "build",
+    "build/**",
     "src"
   ],
   "peerDependencies": {
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-alpha.1",
+    "@tanstack/router-core": "0.0.1-alpha.11",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -4,10 +4,15 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import {
   AnyRoute,
+  CheckId,
+  CheckPath,
+  Expand,
+  resolvePath,
   RootRouteId,
   rootRouteId,
-  Route,
   Router,
+  RouterState,
+  ToIdOption,
 } from '@tanstack/router-core'
 import {
   warning,
@@ -29,6 +34,7 @@ import {
   ResolveRelativePath,
   NoInfer,
   ToOptions,
+  invariant,
 } from '@tanstack/router-core'
 
 export * from '@tanstack/router-core'
@@ -36,59 +42,68 @@ export * from '@tanstack/router-core'
 declare module '@tanstack/router-core' {
   interface FrameworkGenerics {
     Element: React.ReactNode
-    AsyncElement: (opts: {
-      params: Record<string, string>
-    }) => Promise<React.ReactNode>
-    SyncOrAsyncElement: React.ReactNode | FrameworkGenerics['AsyncElement']
+    // Any is required here so import() will work without having to do import().then(d => d.default)
+    SyncOrAsyncElement: React.ReactNode | (() => Promise<any>)
   }
 
   interface Router<
     TRouteConfig extends AnyRouteConfig = RouteConfig,
     TAllRouteInfo extends AnyAllRouteInfo = AllRouteInfo<TRouteConfig>,
-  > extends Pick<
-      Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][RootRouteId]>,
-      'linkProps' | 'Link' | 'MatchRoute'
-    > {
+  > {
+    useState: () => RouterState
     useRoute: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
     useMatch: <TId extends keyof TAllRouteInfo['routeInfoById']>(
       routeId: TId,
     ) => RouteMatch<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TId]>
-    // linkProps: <TTo extends string = '.'>(
-    //   props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
-    //     React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    // ) => 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)
-    //     },
-    // ) => 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)
-    //     },
-    // ) => JSX.Element
+    linkProps: <TTo extends string = '.'>(
+      props: LinkPropsOptions<TAllRouteInfo, '/', TTo> &
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    ) => 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)
+        },
+    ) => 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)
+        },
+    ) => JSX.Element
   }
 
   interface Route<
     TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo,
     TRouteInfo extends AnyRouteInfo = RouteInfo,
   > {
+    useRoute: <
+      TTo extends string = '.',
+      TResolved extends string = ResolveRelativePath<
+        TRouteInfo['id'],
+        NoInfer<TTo>
+      >,
+    >(
+      routeId: CheckId<
+        TAllRouteInfo,
+        TResolved,
+        ToIdOption<TAllRouteInfo, TRouteInfo['id'], TTo>
+      >,
+    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
       props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
         React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -174,203 +189,228 @@ const useRouterSubscription = (router: Router<any, any>) => {
 export function createReactRouter<
   TRouteConfig extends AnyRouteConfig = RouteConfig,
 >(opts: RouterOptions<TRouteConfig>): Router<TRouteConfig> {
+  const makeRouteExt = (
+    route: AnyRoute,
+    router: Router<any, any>,
+  ): Pick<AnyRoute, 'useRoute' | 'linkProps' | 'Link' | 'MatchRoute'> => {
+    return {
+      useRoute: (subRouteId = '.' as any) => {
+        const resolvedRouteId = router.resolvePath(
+          route.routeId,
+          subRouteId as string,
+        )
+        const resolvedRoute = router.getRoute(resolvedRouteId)
+        useRouterSubscription(router)
+        invariant(
+          resolvedRoute,
+          `Could not find a route for route "${
+            resolvedRouteId as string
+          }"! Did you forget to add it to your route config?`,
+        )
+        return resolvedRoute
+      },
+      linkProps: (options) => {
+        const {
+          // custom props
+          type,
+          children,
+          target,
+          activeProps = () => ({ className: 'active' }),
+          inactiveProps = () => ({}),
+          activeOptions,
+          disabled,
+          // fromCurrent,
+          hash,
+          search,
+          params,
+          to,
+          preload,
+          preloadDelay,
+          preloadMaxAge,
+          replace,
+          // element props
+          style,
+          className,
+          onClick,
+          onFocus,
+          onMouseEnter,
+          onMouseLeave,
+          onTouchStart,
+          onTouchEnd,
+          ...rest
+        } = options
+
+        const linkInfo = route.buildLink(options)
+
+        if (linkInfo.type === 'external') {
+          const { href } = linkInfo
+          return { href }
+        }
+
+        const {
+          handleClick,
+          handleFocus,
+          handleEnter,
+          handleLeave,
+          isActive,
+          next,
+        } = linkInfo
+
+        const composeHandlers =
+          (handlers: (undefined | ((e: any) => void))[]) =>
+          (e: React.SyntheticEvent) => {
+            e.persist()
+            handlers.forEach((handler) => {
+              if (handler) handler(e)
+            })
+          }
+
+        // Get the active props
+        const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+          isActive ? functionalUpdate(activeProps, {}) ?? {} : {}
+
+        // Get the inactive props
+        const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
+          isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {}
+
+        return {
+          ...resolvedActiveProps,
+          ...resolvedInactiveProps,
+          ...rest,
+          href: disabled ? undefined : next.href,
+          onClick: composeHandlers([handleClick, onClick]),
+          onFocus: composeHandlers([handleFocus, onFocus]),
+          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
+          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
+          target,
+          style: {
+            ...style,
+            ...resolvedActiveProps.style,
+            ...resolvedInactiveProps.style,
+          },
+          className:
+            [
+              className,
+              resolvedActiveProps.className,
+              resolvedInactiveProps.className,
+            ]
+              .filter(Boolean)
+              .join(' ') || undefined,
+          ...(disabled
+            ? {
+                role: 'link',
+                'aria-disabled': true,
+              }
+            : undefined),
+          ['data-status']: isActive ? 'active' : undefined,
+        }
+      },
+      Link: React.forwardRef((props: any, ref) => {
+        const linkProps = route.linkProps(props)
+
+        useRouterSubscription(router)
+
+        return (
+          <a
+            {...{
+              ref: ref as any,
+              ...linkProps,
+              children:
+                typeof props.children === 'function'
+                  ? props.children({
+                      isActive: (linkProps as any)['data-status'] === 'active',
+                    })
+                  : props.children,
+            }}
+          />
+        )
+      }) as any,
+      MatchRoute: (opts) => {
+        const { pending, caseSensitive, children, ...rest } = opts
+
+        const params = route.matchRoute(rest as any, {
+          pending,
+          caseSensitive,
+        })
+
+        if (!params) {
+          return null
+        }
+
+        return typeof opts.children === 'function'
+          ? opts.children(params as any)
+          : (opts.children as any)
+      },
+    }
+  }
+
   const coreRouter = createRouter<TRouteConfig>({
     ...opts,
     createRouter: (router) => {
-      const routerExt: Pick<Router<any, any>, 'useRoute' | 'useMatch'> = {
-        useRoute: (routeId) => {
-          const route = router.getRoute(routeId)
+      const routerExt: Pick<Router<any, any>, 'useMatch' | 'useState'> = {
+        useState: () => {
           useRouterSubscription(router)
-          if (!route) {
-            throw new Error(
-              `Could not find a route for route "${
-                routeId as string
-              }"! Did you forget to add it to your route config?`,
-            )
-          }
-          return route
+          return router.state
         },
         useMatch: (routeId) => {
-          if (routeId === rootRouteId) {
-            throw new Error(
-              `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
-            )
-          }
+          useRouterSubscription(router)
+
+          invariant(
+            routeId !== rootRouteId,
+            `"${rootRouteId}" cannot be used with useMatch! Did you mean to useRoute("${rootRouteId}")?`,
+          )
+
           const runtimeMatch = useMatch()
           const match = router.state.matches.find((d) => d.routeId === routeId)
 
-          if (!match) {
-            throw new Error(
-              `Could not find a match for route "${
-                routeId as string
-              }" being rendered in this component!`,
-            )
-          }
-
-          if (runtimeMatch.routeId !== match?.routeId) {
-            throw new Error(
-              `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?`,
-            )
-          }
+          invariant(
+            match,
+            `Could not find a match for route "${
+              routeId as string
+            }" being rendered in this component!`,
+          )
 
-          useRouterSubscription(router)
+          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) {
-            throw new Error('Match not found!')
+            invariant('Match not found!')
           }
 
           return match
         },
       }
 
-      Object.assign(router, routerExt)
+      const routeExt = makeRouteExt(router.getRoute('/'), router)
+
+      Object.assign(router, routerExt, routeExt)
     },
     createRoute: ({ router, route }) => {
-      const routeExt: Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> = {
-        linkProps: (options) => {
-          const {
-            // custom props
-            type,
-            children,
-            target,
-            activeProps = () => ({ className: 'active' }),
-            inactiveProps = () => ({}),
-            activeOptions,
-            disabled,
-            // fromCurrent,
-            hash,
-            search,
-            params,
-            to,
-            preload,
-            preloadDelay,
-            preloadMaxAge,
-            replace,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave,
-            onTouchStart,
-            onTouchEnd,
-            ...rest
-          } = options
-
-          const linkInfo = route.buildLink(options)
-
-          if (linkInfo.type === 'external') {
-            const { href } = linkInfo
-            return { href }
-          }
+      const routeExt = makeRouteExt(route, router)
 
-          const {
-            handleClick,
-            handleFocus,
-            handleEnter,
-            handleLeave,
-            isActive,
-            next,
-          } = linkInfo
-
-          const composeHandlers =
-            (handlers: (undefined | ((e: any) => void))[]) =>
-            (e: React.SyntheticEvent) => {
-              e.persist()
-              handlers.forEach((handler) => {
-                if (handler) handler(e)
-              })
-            }
-
-          // Get the active props
-          const resolvedActiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-            isActive ? functionalUpdate(activeProps) ?? {} : {}
-
-          // Get the inactive props
-          const resolvedInactiveProps: React.HTMLAttributes<HTMLAnchorElement> =
-            isActive ? {} : functionalUpdate(inactiveProps) ?? {}
-
-          return {
-            ...resolvedActiveProps,
-            ...resolvedInactiveProps,
-            ...rest,
-            href: disabled ? undefined : next.href,
-            onClick: composeHandlers([handleClick, onClick]),
-            onFocus: composeHandlers([handleFocus, onFocus]),
-            onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-            onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-            target,
-            style: {
-              ...style,
-              ...resolvedActiveProps.style,
-              ...resolvedInactiveProps.style,
-            },
-            className:
-              [
-                className,
-                resolvedActiveProps.className,
-                resolvedInactiveProps.className,
-              ]
-                .filter(Boolean)
-                .join(' ') || undefined,
-            ...(disabled
-              ? {
-                  role: 'link',
-                  'aria-disabled': true,
-                }
-              : undefined),
-            ['data-status']: isActive ? 'active' : undefined,
-          }
-        },
-        Link: React.forwardRef((props: any, ref) => {
-          const linkProps = route.linkProps(props)
-
-          useRouterSubscription(router)
-
-          return (
-            <a
-              {...{
-                ref: ref as any,
-                ...linkProps,
-                children:
-                  typeof props.children === 'function'
-                    ? props.children({
-                        isActive:
-                          (linkProps as any)['data-status'] === 'active',
-                      })
-                    : props.children,
-              }}
-            />
-          )
-        }) as any,
-        MatchRoute: (opts) => {
-          const { pending, caseSensitive, children, ...rest } = opts
-
-          const params = route.matchRoute(rest as any, {
-            pending,
-            caseSensitive,
-          })
-
-          // useRouterSubscription(router)
-
-          if (!params) {
-            return null
-          }
-
-          return typeof opts.children === 'function'
-            ? opts.children(params as any)
-            : (opts.children as any)
-        },
+      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
+        }
       }
 
-      Object.assign(route, routeExt)
+      return element
     },
   })
 
@@ -392,14 +432,11 @@ export function RouterProvider<
 >({ children, router, ...rest }: RouterProps<TRouteConfig, TAllRouteInfo>) {
   router.update(rest)
 
-  useSyncExternalStore(
-    (cb) => router.subscribe(() => cb()),
-    () => router.state,
-  )
+  useRouterSubscription(router)
 
   useLayoutEffect(() => {
-    router.mount()
-  }, [])
+    return router.mount()
+  }, [router])
 
   return (
     <routerContext.Provider value={{ router }}>
@@ -410,7 +447,7 @@ export function RouterProvider<
   )
 }
 
-export function useRouter(): Router {
+function useRouter(): Router {
   const value = React.useContext(routerContext)
   warning(!value, 'useRouter must be used inside a <Router> component!')
 
@@ -419,21 +456,21 @@ export function useRouter(): Router {
   return value.router as Router
 }
 
-export function useMatches(): RouteMatch[] {
+function useMatches(): RouteMatch[] {
   return React.useContext(matchesContext)
 }
 
-export 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,
-  )
-}
-
-export function useMatch<T>(): RouteMatch {
+// 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
 }
 
@@ -445,7 +482,7 @@ export function Outlet() {
 
   if (!childMatch) return null
 
-  const element = (((): React.ReactNode => {
+  const element = ((): React.ReactNode => {
     if (!childMatch) {
       return null
     }
@@ -465,7 +502,7 @@ export function Outlet() {
         throw childMatch.error
       }
 
-      return <DefaultCatchBoundary error={childMatch.error} />
+      return <DefaultErrorBoundary error={childMatch.error} />
     }
 
     if (childMatch.status === 'loading' || childMatch.status === 'idle') {
@@ -482,7 +519,7 @@ export function Outlet() {
     }
 
     return (childMatch.__.element as any) ?? router.options.defaultElement
-  })() as JSX.Element) ?? <Outlet />
+  })() as JSX.Element
 
   const catchElement =
     childMatch?.options.catchElement ?? router.options.defaultCatchElement
@@ -516,7 +553,7 @@ class CatchBoundary extends React.Component<{
     })
   }
   render() {
-    const catchElement = this.props.catchElement ?? DefaultCatchBoundary
+    const catchElement = this.props.catchElement ?? DefaultErrorBoundary
 
     if (this.state.error) {
       return typeof catchElement === 'function'
@@ -528,7 +565,7 @@ class CatchBoundary extends React.Component<{
   }
 }
 
-export function DefaultCatchBoundary({ error }: { error: any }) {
+export function DefaultErrorBoundary({ error }: { error: any }) {
   return (
     <div style={{ padding: '.5rem', maxWidth: '100%' }}>
       <strong style={{ fontSize: '1.2rem' }}>Something went wrong!</strong>
@@ -566,3 +603,27 @@ export function DefaultCatchBoundary({ error }: { error: any }) {
     </div>
   )
 }
+
+export function usePrompt(message: string, when: boolean | any): void {
+  const router = useRouter()
+
+  React.useEffect(() => {
+    if (!when) return
+
+    let unblock = router.history.block((transition) => {
+      if (window.confirm(message)) {
+        unblock()
+        transition.retry()
+      } else {
+        router.location.pathname = window.location.pathname
+      }
+    })
+
+    return unblock
+  }, [when, location, message])
+}
+
+export function Prompt({ message, when, children }: PromptProps) {
+  usePrompt(message, when ?? true)
+  return (children ?? null) as React.ReactNode
+}