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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.11",
   "license": "MIT",
   "repository": "tanstack/router",
-  "homepage": "https://react-router.tanstack.com/",
+  "homepage": "https://tanstack.com/router/",
   "description": "",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -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.1",
+    "@tanstack/router-core": "0.0.1-beta.11",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {

package/src/index.tsx

@@ -50,9 +50,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 +107,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> &
@@ -179,6 +188,7 @@ const useRouterSubscription = (router: Router<any, any>) => {
   useSyncExternalStore(
     (cb) => router.subscribe(() => cb()),
     () => router.state,
+    () => router.state,
   )
 }
 
@@ -348,7 +358,7 @@ export function createReactRouter<
           useRouterSubscription(router)
           return router.state
         },
-        useMatch: (routeId) => {
+        useMatch: (routeId, opts) => {
           useRouterSubscription(router)
 
           invariant(
@@ -356,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
         },
       }
 
@@ -429,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 (
@@ -456,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 matches = useMatches().slice(1)
+  const match = matches[0]
 
-  const childMatch = 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
         }
       }
@@ -514,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>
   )
@@ -542,12 +537,6 @@ class CatchBoundary extends React.Component<{
       info,
     })
   }
-  reset = () => {
-    this.setState({
-      error: false,
-      info: false,
-    })
-  }
   render() {
     const catchElement = this.props.catchElement ?? DefaultErrorBoundary
 
@@ -583,7 +572,7 @@ export function DefaultErrorBoundary({ error }: { error: any }) {
           ) : null}
         </pre>
       </div>
-      <div style={{ height: '1rem' }} />
+      {/* <div style={{ height: '1rem' }} />
       <div
         style={{
           fontSize: '.8em',
@@ -595,7 +584,7 @@ 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>
   )
 }

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
-}