@tanstack/router-core 0.0.1-beta.159 → 0.0.1-beta.160

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-core",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.159",
+  "version": "0.0.1-beta.160",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -43,7 +43,7 @@
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
     "@gisatcz/cross-package-react-context": "^0.2.0",
-    "@tanstack/react-store": "0.0.1-beta.159"
+    "@tanstack/react-store": "0.0.1-beta.160"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js",

package/src/route.ts

@@ -90,7 +90,7 @@ export type RouteLoaderFromRoute<TRoute extends AnyRoute> = LoaderFn<
 >
 
 export type RouteProps<
-  TLoader = unknown,
+  TLoader extends any = unknown,
   TFullSearchSchema extends AnySearchSchema = AnySearchSchema,
   TAllParams extends AnyPathParams = AnyPathParams,
   TRouteContext extends AnyContext = AnyContext,
@@ -173,10 +173,6 @@ type Prefix<T extends string, U extends string> = U extends `${T}${infer _}`
   ? U
   : never
 
-type PrefixOrExact<T extends string, U extends string> = U extends T
-  ? U
-  : Prefix<T, U>
-
 export type BaseRouteOptions<
   TParentRoute extends AnyRoute = AnyRoute,
   TCustomId extends string = string,
@@ -185,7 +181,7 @@ export type BaseRouteOptions<
   TParentSearchSchema extends AnySearchSchema = {},
   TSearchSchema extends AnySearchSchema = {},
   TFullSearchSchema extends AnySearchSchema = TSearchSchema,
-  TParams = unknown,
+  TParams extends AnyPathParams = {},
   TAllParams = ParamsFallback<TPath, TParams>,
   TParentContext extends AnyContext = AnyContext,
   TAllParentContext extends AnyContext = AnyContext,
@@ -194,7 +190,7 @@ export type BaseRouteOptions<
 > = RoutePathOptions<TCustomId, TPath> & {
   layoutLimit?: string
   getParentRoute: () => TParentRoute
-  validateSearch?: SearchSchemaValidator<TSearchSchema, TParentSearchSchema>
+  validateSearch?: SearchSchemaValidator<TSearchSchema>
   loader?: LoaderFn<
     TLoader,
     TSearchSchema,
@@ -203,7 +199,12 @@ export type BaseRouteOptions<
     NoInfer<TRouteContext>,
     TAllContext
   >
-} & (
+} & ([TLoader] extends [never]
+    ? {
+        loader: 'Loaders must return a type other than never. If you are throwing a redirect() and not returning anything, return a redirect() instead.'
+      }
+    : {}) &
+  (
     | {
         // Both or none
         parseParams?: (
@@ -211,17 +212,6 @@ export type BaseRouteOptions<
         ) => TParams extends Record<ParsePathParams<TPath>, any>
           ? TParams
           : 'parseParams must return an object'
-        // | {
-        //     parse: (
-        //       rawParams: IsAny<
-        //         TPath,
-        //         any,
-        //         Record<ParsePathParams<TPath>, string>
-        //       >,
-        //     ) => TParams extends Record<ParsePathParams<TPath>, any>
-        //       ? TParams
-        //       : 'parseParams must return an object'
-        //   }
         stringifyParams?: (
           params: NoInfer<ParamsFallback<TPath, TParams>>,
         ) => Record<ParsePathParams<TPath>, string>
@@ -364,7 +354,6 @@ export type ParseParamsOption<TPath extends string, TParams> = ParseParamsFn<
   TPath,
   TParams
 >
-// | ParseParamsObj<TPath, TParams>
 
 export type ParseParamsFn<TPath extends string, TParams> = (
   rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>,
@@ -377,24 +366,17 @@ export type ParseParamsObj<TPath extends string, TParams> = {
 }
 
 // The parse type here allows a zod schema to be passed directly to the validator
-export type SearchSchemaValidator<TReturn, TParentSchema> =
-  | SearchSchemaValidatorObj<TReturn, TParentSchema>
-  | SearchSchemaValidatorFn<TReturn, TParentSchema>
+export type SearchSchemaValidator<TReturn> =
+  | SearchSchemaValidatorObj<TReturn>
+  | SearchSchemaValidatorFn<TReturn>
 
-export type SearchSchemaValidatorObj<TReturn, TParentSchema> = {
-  parse?: SearchSchemaValidatorFn<TReturn, TParentSchema>
+export type SearchSchemaValidatorObj<TReturn> = {
+  parse?: SearchSchemaValidatorFn<TReturn>
 }
 
-export type SearchSchemaValidatorFn<TReturn, TParentSchema> = (
+export type SearchSchemaValidatorFn<TReturn> = (
   searchObj: Record<string, unknown>,
-) => {} extends TParentSchema
-  ? TReturn
-  : keyof TReturn extends keyof TParentSchema
-  ? {
-      error: 'Top level search params cannot be redefined by child routes!'
-      keys: keyof TReturn & keyof TParentSchema
-    }
-  : TReturn
+) => TReturn
 
 export type DefinedPathParamWarning =
   'Path params cannot be redefined by child routes!'
@@ -805,10 +787,8 @@ export class RouterContext<TRouterContext extends {}> {
       | 'parseParams'
       | 'stringifyParams'
     >,
-  ) => {
-    return new RootRoute<TLoader, TSearchSchema, TRouteContext, TRouterContext>(
-      options as any,
-    )
+  ): RootRoute<TLoader, TSearchSchema, TRouteContext, TRouterContext> => {
+    return new RootRoute(options) as any
   }
 }
 

package/src/router.ts

@@ -107,8 +107,8 @@ export type HydrationCtx = {
 }
 
 export interface RouteMatch<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
-  TRoute extends AnyRoute = Route,
+  TRouteTree extends AnyRoute = AnyRoute,
+  TRoute extends AnyRoute = AnyRoute,
 > {
   id: string
   key?: string
@@ -182,7 +182,7 @@ export interface RouterOptions<
 }
 
 export interface RouterState<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouteTree extends AnyRoute = AnyRoute,
   // TState extends LocationState = LocationState,
 > {
   status: 'idle' | 'pending'
@@ -250,7 +250,7 @@ export const componentTypes = [
 ] as const
 
 export class Router<
-  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  TRouteTree extends AnyRoute = AnyRoute,
   TDehydrated extends Record<string, any> = Record<string, any>,
 > {
   types!: {
@@ -290,40 +290,43 @@ export class Router<
       onUpdate: () => {
         const prev = this.state
 
-        this.state = this.__store.state
+        const next = this.__store.state
+
+        console.log(
+          Object.values(next.matchesById).find((d) => d.status === 'error'),
+        )
 
-        const matchesByIdChanged = prev.matchesById !== this.state.matchesById
+        const matchesByIdChanged = prev.matchesById !== next.matchesById
         let matchesChanged
         let pendingMatchesChanged
 
         if (!matchesByIdChanged) {
           matchesChanged =
-            prev.matchIds.length !== this.state.matchIds.length ||
-            prev.matchIds.some((d, i) => d !== this.state.matchIds[i])
+            prev.matchIds.length !== next.matchIds.length ||
+            prev.matchIds.some((d, i) => d !== next.matchIds[i])
 
           pendingMatchesChanged =
-            prev.pendingMatchIds.length !== this.state.pendingMatchIds.length ||
-            prev.pendingMatchIds.some(
-              (d, i) => d !== this.state.pendingMatchIds[i],
-            )
+            prev.pendingMatchIds.length !== next.pendingMatchIds.length ||
+            prev.pendingMatchIds.some((d, i) => d !== next.pendingMatchIds[i])
         }
 
         if (matchesByIdChanged || matchesChanged) {
-          this.state.matches = this.state.matchIds.map((id) => {
-            return this.state.matchesById[id] as any
+          next.matches = next.matchIds.map((id) => {
+            return next.matchesById[id] as any
           })
         }
 
         if (matchesByIdChanged || pendingMatchesChanged) {
-          this.state.pendingMatches = this.state.pendingMatchIds.map((id) => {
-            return this.state.matchesById[id] as any
+          next.pendingMatches = next.pendingMatchIds.map((id) => {
+            return next.matchesById[id] as any
           })
         }
 
-        this.state.isFetching = [
-          ...this.state.matches,
-          ...this.state.pendingMatches,
-        ].some((d) => d.isFetching)
+        next.isFetching = [...next.matches, ...next.pendingMatches].some(
+          (d) => d.isFetching,
+        )
+
+        this.state = next
       },
       defaultPriority: 'low',
     })
@@ -424,11 +427,12 @@ export class Router<
     this.getRouteMatch(id)?.abortController?.abort()
   }
 
-  safeLoad = (opts?: { next?: ParsedLocation }) => {
-    return this.load(opts).catch((err) => {
-      // console.warn(err)
-      // invariant(false, 'Encountered an error during router.load()! ☝️.')
-    })
+  safeLoad = async (opts?: { next?: ParsedLocation }) => {
+    try {
+      return this.load(opts)
+    } catch (err) {
+      // Don't do anything
+    }
   }
 
   latestLoadPromise: Promise<void> = Promise.resolve()
@@ -477,11 +481,16 @@ export class Router<
 
       try {
         // Load the matches
-        await this.loadMatches(pendingMatches)
+        try {
+          await this.loadMatches(pendingMatches)
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
 
         // Only apply the latest transition
         if ((latestPromise = checkLatest())) {
-          return await latestPromise
+          return latestPromise
         }
 
         const prevLocation = this.state.resolvedLocation
@@ -502,7 +511,7 @@ export class Router<
       } catch (err) {
         // Only apply the latest transition
         if ((latestPromise = checkLatest())) {
-          return await latestPromise
+          return latestPromise
         }
 
         reject(err)
@@ -519,7 +528,7 @@ export class Router<
       string,
       RouteMatch<TRouteTree, ParseRoute<TRouteTree>>
     >,
-    nextMatches: RouteMatch[],
+    nextMatches: AnyRouteMatch[],
   ): Record<string, RouteMatch<TRouteTree, ParseRoute<TRouteTree>>> => {
     const nextMatchesById: any = {
       ...prevMatchesById,
@@ -697,7 +706,7 @@ export class Router<
         componentTypes.some((d) => (route.options[d] as any)?.preload)
       )
 
-      const routeMatch: RouteMatch = {
+      const routeMatch: AnyRouteMatch = {
         id: matchId,
         key: stringifiedKey,
         routeId: route.id,
@@ -860,6 +869,7 @@ export class Router<
             }
           }
 
+          console.log('set error')
           this.setRouteMatch(match.id, (s) => ({
             ...s,
             error: err,
@@ -926,25 +936,9 @@ export class Router<
               : undefined
           }
 
-          const loadPromise = (async () => {
+          const load = async () => {
             let latestPromise
 
-            const componentsPromise = Promise.all(
-              componentTypes.map(async (type) => {
-                const component = route.options[type]
-
-                if ((component as any)?.preload) {
-                  await (component as any).preload()
-                }
-              }),
-            )
-
-            const loaderPromise = route.options.loader?.({
-              ...match,
-              preload: !!opts?.preload,
-              parentMatchPromise,
-            })
-
             const handleError = (err: any) => {
               if (isRedirect(err)) {
                 if (!opts?.preload) {
@@ -957,6 +951,22 @@ export class Router<
             }
 
             try {
+              const componentsPromise = Promise.all(
+                componentTypes.map(async (type) => {
+                  const component = route.options[type]
+
+                  if ((component as any)?.preload) {
+                    await (component as any).preload()
+                  }
+                }),
+              )
+
+              const loaderPromise = route.options.loader?.({
+                ...match,
+                preload: !!opts?.preload,
+                parentMatchPromise,
+              })
+
               const [_, loader] = await Promise.all([
                 componentsPromise,
                 loaderPromise,
@@ -964,37 +974,36 @@ export class Router<
               if ((latestPromise = checkLatest())) return await latestPromise
 
               this.setRouteMatchData(match.id, () => loader, opts)
-            } catch (err) {
+            } catch (loaderError) {
               if ((latestPromise = checkLatest())) return await latestPromise
+              handleError(loaderError)
 
-              if (handleError(err)) {
-                return
-              }
-
-              const errorHandler =
-                route.options.onLoadError ?? route.options.onError
-
-              let caughtError = err
+              let error = loaderError
 
               try {
-                errorHandler?.(err)
-              } catch (errorHandlerErr) {
-                caughtError = errorHandlerErr
-
-                if (handleError(errorHandlerErr)) {
-                  return
+                if (route.options.onLoadError) {
+                  route.options.onLoadError?.(loaderError)
+                } else {
+                  route.options.onError?.(loaderError)
                 }
+              } catch (errorHandlerErr) {
+                error = errorHandlerErr
+                handleError(error)
               }
 
+              console.log('set error')
               this.setRouteMatch(match.id, (s) => ({
                 ...s,
-                error: caughtError,
+                error: error,
                 status: 'error',
                 isFetching: false,
                 updatedAt: Date.now(),
               }))
+              console.log(this.getRouteMatch(match.id)?.status)
             }
-          })()
+          }
+
+          const loadPromise = load()
 
           this.setRouteMatch(match.id, (s) => ({
             ...s,
@@ -1602,13 +1611,19 @@ export class Router<
       prev: RouteMatch<TRouteTree, AnyRoute>,
     ) => RouteMatch<TRouteTree, AnyRoute>,
   ) => {
-    this.__store.setState((prev) => ({
-      ...prev,
-      matchesById: {
-        ...prev.matchesById,
-        [id]: updater(prev.matchesById[id] as any),
-      },
-    }))
+    this.__store.setState((prev) => {
+      if (!prev.matchesById[id]) {
+        console.warn(`No match found with id: ${id}`)
+      }
+
+      return {
+        ...prev,
+        matchesById: {
+          ...prev.matchesById,
+          [id]: updater(prev.matchesById[id] as any),
+        },
+      }
+    })
   }
 
   setRouteMatchData = (
@@ -1640,6 +1655,7 @@ export class Router<
         this.options.defaultMaxAge ??
         Infinity)
 
+    console.log('set success')
     this.setRouteMatch(id, (s) => ({
       ...s,
       error: undefined,