@tanstack/react-router 0.0.1-alpha.9 → 0.0.1-beta.10

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-beta.10",
   "license": "MIT",
   "repository": "tanstack/router",
-  "homepage": "https://react-router.tanstack.com/",
+  "homepage": "https://tanstack.com/router/",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "@tanstack/router-core": "0.0.1-alpha.9",
+    "@tanstack/router-core": "0.0.1-beta.10",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -4,10 +4,11 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import {
   AnyRoute,
-  RootRouteId,
+  CheckId,
   rootRouteId,
   Router,
   RouterState,
+  ToIdOption,
 } from '@tanstack/router-core'
 import {
   warning,
@@ -37,26 +38,29 @@ 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']>(
+    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>,
@@ -91,6 +95,20 @@ declare module '@tanstack/router-core' {
     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>
+      >,
+      opts?: { strict?: boolean },
+    ) => Route<TAllRouteInfo, TAllRouteInfo['routeInfoById'][TResolved]>
     linkProps: <TTo extends string = '.'>(
       props: LinkPropsOptions<TAllRouteInfo, TRouteInfo['fullPath'], TTo> &
         React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -170,6 +188,7 @@ const useRouterSubscription = (router: Router<any, any>) => {
   useSyncExternalStore(
     (cb) => router.subscribe(() => cb()),
     () => router.state,
+    () => router.state,
   )
 }
 
@@ -179,8 +198,23 @@ export function createReactRouter<
   const makeRouteExt = (
     route: AnyRoute,
     router: Router<any, any>,
-  ): Pick<AnyRoute, 'linkProps' | 'Link' | 'MatchRoute'> => {
+  ): 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
@@ -319,26 +353,12 @@ export function createReactRouter<
   const coreRouter = createRouter<TRouteConfig>({
     ...opts,
     createRouter: (router) => {
-      const routerExt: Pick<
-        Router<any, any>,
-        'useRoute' | 'useMatch' | 'useState'
-      > = {
+      const routerExt: Pick<Router<any, any>, 'useMatch' | 'useState'> = {
         useState: () => {
           useRouterSubscription(router)
           return router.state
         },
-        useRoute: (routeId) => {
-          const route = router.getRoute(routeId)
-          useRouterSubscription(router)
-          invariant(
-            route,
-            `Could not find a route for route "${
-              routeId as string
-            }"! Did you forget to add it to your route config?`,
-          )
-          return route
-        },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -346,32 +366,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
         },
       }
 
@@ -384,6 +402,20 @@ 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
+        }
+      }
+
+      return element
+    },
   })
 
   return coreRouter as any
@@ -405,9 +437,10 @@ export function RouterProvider<
   router.update(rest)
 
   useRouterSubscription(router)
-
   useLayoutEffect(() => {
-    return router.mount()
+    const unsub = router.mount()
+    router.load()
+    return unsub
   }, [router])
 
   return (
@@ -432,57 +465,41 @@ 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 Outlet() {
   const router = useRouter()
-  const [, ...matches] = useMatches()
-
-  const childMatch = matches[0]
+  const matches = useMatches().slice(1)
+  const match = matches[0]
 
-  if (!childMatch) return null
+  if (!match) {
+    return null
+  }
 
   const element = ((): React.ReactNode => {
-    if (!childMatch) {
+    if (!match) {
       return null
     }
 
     const errorElement =
-      childMatch.__.errorElement ?? router.options.defaultErrorElement
+      match.__.errorElement ?? router.options.defaultErrorElement
 
-    if (childMatch.status === 'error') {
+    if (match.status === 'error') {
       if (errorElement) {
         return errorElement as any
       }
 
-      if (
-        childMatch.options.useErrorBoundary ||
-        router.options.useErrorBoundary
-      ) {
-        throw childMatch.error
+      if (match.options.useErrorBoundary || router.options.useErrorBoundary) {
+        throw match.error
       }
 
-      return <DefaultErrorBoundary error={childMatch.error} />
+      return <DefaultErrorBoundary error={match.error} />
     }
 
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
+    if (match.status === 'loading' || match.status === 'idle') {
+      if (match.isPending) {
         const pendingElement =
-          childMatch.__.pendingElement ?? router.options.defaultPendingElement
+          match.__.pendingElement ?? router.options.defaultPendingElement
 
-        if (childMatch.options.pendingMs || pendingElement) {
+        if (match.options.pendingMs || pendingElement) {
           return (pendingElement as any) ?? null
         }
       }
@@ -490,14 +507,16 @@ export function Outlet() {
       return null
     }
 
-    return (childMatch.__.element as any) ?? router.options.defaultElement
+    return (
+      (match.__.element as any) ?? router.options.defaultElement ?? <Outlet />
+    )
   })() as JSX.Element
 
   const catchElement =
-    childMatch?.options.catchElement ?? router.options.defaultCatchElement
+    match?.options.catchElement ?? router.options.defaultCatchElement
 
   return (
-    <MatchesProvider value={matches} key={childMatch.matchId}>
+    <MatchesProvider value={matches}>
       <CatchBoundary catchElement={catchElement}>{element}</CatchBoundary>
     </MatchesProvider>
   )
@@ -518,12 +537,6 @@ class CatchBoundary extends React.Component<{
       info,
     })
   }
-  reset = () => {
-    this.setState({
-      error: false,
-      info: false,
-    })
-  }
   render() {
     const catchElement = this.props.catchElement ?? DefaultErrorBoundary
 
@@ -559,7 +572,7 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
           ) : null}
         </pre>
       </div>
-      <div style={{ height: '1rem' }} />
+      {/* <div style={{ height: '1rem' }} />
       <div
         style={{
           fontSize: '.8em',
@@ -571,9 +584,31 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
         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> */}
     </div>
   )
 }
 
-// TODO: Add prompt
+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
+}

package/src/qss.ts

@@ -1,53 +0,0 @@
-// @ts-nocheck
-
-// We're inlining qss here for compression's sake, but we've included it as a hard dependency for the MIT license it requires.
-
-export function encode(obj, pfx?: string) {
-  var k,
-    i,
-    tmp,
-    str = ''
-
-  for (k in obj) {
-    if ((tmp = obj[k]) !== void 0) {
-      if (Array.isArray(tmp)) {
-        for (i = 0; i < tmp.length; i++) {
-          str && (str += '&')
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i])
-        }
-      } else {
-        str && (str += '&')
-        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp)
-      }
-    }
-  }
-
-  return (pfx || '') + str
-}
-
-function toValue(mix) {
-  if (!mix) return ''
-  var str = decodeURIComponent(mix)
-  if (str === 'false') return false
-  if (str === 'true') return true
-  return +str * 0 === 0 ? +str : str
-}
-
-export function decode(str) {
-  var tmp,
-    k,
-    out = {},
-    arr = str.split('&')
-
-  while ((tmp = arr.shift())) {
-    tmp = tmp.split('=')
-    k = tmp.shift()
-    if (out[k] !== void 0) {
-      out[k] = [].concat(out[k], toValue(tmp.shift()))
-    } else {
-      out[k] = toValue(tmp.shift())
-    }
-  }
-
-  return out
-}