@tanstack/router-core 0.0.1-beta.11 → 0.0.1-beta.14

package/build/types/index.d.ts

@@ -16,47 +16,6 @@ interface FrameworkGenerics {
 }
 declare type GetFrameworkGeneric<U> = U extends keyof FrameworkGenerics ? FrameworkGenerics[U] : any;
 
-declare type NoInfer<T> = [T][T extends any ? 0 : never];
-declare type IsAny<T, Y, N> = 1 extends 0 & T ? Y : N;
-declare type IsAnyBoolean<T> = 1 extends 0 & T ? true : false;
-declare type IsKnown<T, Y, N> = unknown extends T ? N : Y;
-declare type PickAsRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
-declare type PickAsPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-declare type PickUnsafe<T, K> = K extends keyof T ? Pick<T, K> : never;
-declare type PickExtra<T, K> = Expand<{
-    [TKey in keyof K as string extends TKey ? never : TKey extends keyof T ? never : TKey]: K[TKey];
-}>;
-declare type PickRequired<T> = {
-    [K in keyof T as undefined extends T[K] ? never : K]: T[K];
-};
-declare type Expand<T> = T extends object ? T extends infer O ? {
-    [K in keyof O]: O[K];
-} : never : T;
-declare type Values<O> = O[ValueKeys<O>];
-declare type ValueKeys<O> = Extract<keyof O, PropertyKey>;
-declare type DeepAwaited<T> = T extends Promise<infer A> ? DeepAwaited<A> : T extends Record<infer A, Promise<infer B>> ? {
-    [K in A]: DeepAwaited<B>;
-} : T;
-declare type PathParamMask<TRoutePath extends string> = TRoutePath extends `${infer L}/:${infer C}/${infer R}` ? PathParamMask<`${L}/${string}/${R}`> : TRoutePath extends `${infer L}/:${infer C}` ? PathParamMask<`${L}/${string}`> : TRoutePath;
-declare type Timeout = ReturnType<typeof setTimeout>;
-declare type Updater<TPrevious, TResult = TPrevious> = TResult | ((prev?: TPrevious) => TResult);
-declare type PickExtract<T, U> = {
-    [K in keyof T as T[K] extends U ? K : never]: T[K];
-};
-declare type PickExclude<T, U> = {
-    [K in keyof T as T[K] extends U ? never : K]: T[K];
-};
-/**
- * This function returns `a` if `b` is deeply equal.
- * If not, it will replace any deeply equal children of `b` with those of `a`.
- * This can be used for structural sharing between JSON values for example.
- */
-declare function replaceEqualDeep(prev: any, next: any): any;
-declare function last<T>(arr: T[]): T | undefined;
-declare function warning(cond: any, message: string): cond is true;
-declare function functionalUpdate<TResult>(updater: Updater<TResult>, previous: TResult): TResult;
-declare function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K>;
-
 interface RouteMatch<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo, TRouteInfo extends AnyRouteInfo = RouteInfo> extends Route<TAllRouteInfo, TRouteInfo> {
     matchId: string;
     pathname: string;
@@ -73,20 +32,14 @@ interface RouteMatch<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo
     loaderData: TRouteInfo['loaderData'];
     routeLoaderData: TRouteInfo['routeLoaderData'];
     isFetching: boolean;
-    isPending: boolean;
     invalidAt: number;
     __: {
-        element?: GetFrameworkGeneric<'Element'>;
-        errorElement?: GetFrameworkGeneric<'Element'>;
-        catchElement?: GetFrameworkGeneric<'Element'>;
-        pendingElement?: GetFrameworkGeneric<'Element'>;
+        component?: GetFrameworkGeneric<'Component'>;
+        errorComponent?: GetFrameworkGeneric<'Component'>;
+        pendingComponent?: GetFrameworkGeneric<'Component'>;
         loadPromise?: Promise<void>;
-        loaderDataPromise?: Promise<void>;
-        elementsPromise?: Promise<void>;
+        componentsPromise?: Promise<void>;
         dataPromise?: Promise<void>;
-        pendingTimeout?: Timeout;
-        pendingMinTimeout?: Timeout;
-        pendingMinPromise?: Promise<void>;
         onExit?: void | ((matchContext: {
             params: TRouteInfo['allParams'];
             search: TRouteInfo['fullSearchSchema'];
@@ -94,15 +47,11 @@ interface RouteMatch<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo
         abortController: AbortController;
         latestId: string;
         validate: () => void;
-        startPending: () => void;
-        cancelPending: () => void;
         notify: () => void;
         resolve: () => void;
     };
     cancel: () => void;
     load: (loaderOpts?: {
-        withPending?: boolean;
-    } & ({
         preload: true;
         maxAge: number;
         gcMaxAge: number;
@@ -110,7 +59,7 @@ interface RouteMatch<TAllRouteInfo extends AnyAllRouteInfo = DefaultAllRouteInfo
         preload?: false;
         maxAge?: never;
         gcMaxAge?: never;
-    })) => Promise<TRouteInfo['routeLoaderData']>;
+    }) => Promise<TRouteInfo['routeLoaderData']>;
     fetch: (opts?: {
         maxAge?: number;
     }) => Promise<TRouteInfo['routeLoaderData']>;
@@ -123,6 +72,47 @@ declare function createRouteMatch<TAllRouteInfo extends AnyAllRouteInfo = Defaul
     pathname: string;
 }): RouteMatch<TAllRouteInfo, TRouteInfo>;
 
+declare type NoInfer<T> = [T][T extends any ? 0 : never];
+declare type IsAny<T, Y, N> = 1 extends 0 & T ? Y : N;
+declare type IsAnyBoolean<T> = 1 extends 0 & T ? true : false;
+declare type IsKnown<T, Y, N> = unknown extends T ? N : Y;
+declare type PickAsRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+declare type PickAsPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+declare type PickUnsafe<T, K> = K extends keyof T ? Pick<T, K> : never;
+declare type PickExtra<T, K> = Expand<{
+    [TKey in keyof K as string extends TKey ? never : TKey extends keyof T ? never : TKey]: K[TKey];
+}>;
+declare type PickRequired<T> = {
+    [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+};
+declare type Expand<T> = T extends object ? T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never : T;
+declare type Values<O> = O[ValueKeys<O>];
+declare type ValueKeys<O> = Extract<keyof O, PropertyKey>;
+declare type DeepAwaited<T> = T extends Promise<infer A> ? DeepAwaited<A> : T extends Record<infer A, Promise<infer B>> ? {
+    [K in A]: DeepAwaited<B>;
+} : T;
+declare type PathParamMask<TRoutePath extends string> = TRoutePath extends `${infer L}/:${infer C}/${infer R}` ? PathParamMask<`${L}/${string}/${R}`> : TRoutePath extends `${infer L}/:${infer C}` ? PathParamMask<`${L}/${string}`> : TRoutePath;
+declare type Timeout = ReturnType<typeof setTimeout>;
+declare type Updater<TPrevious, TResult = TPrevious> = TResult | ((prev?: TPrevious) => TResult);
+declare type PickExtract<T, U> = {
+    [K in keyof T as T[K] extends U ? K : never]: T[K];
+};
+declare type PickExclude<T, U> = {
+    [K in keyof T as T[K] extends U ? never : K]: T[K];
+};
+/**
+ * This function returns `a` if `b` is deeply equal.
+ * If not, it will replace any deeply equal children of `b` with those of `a`.
+ * This can be used for structural sharing between JSON values for example.
+ */
+declare function replaceEqualDeep(prev: any, next: any): any;
+declare function last<T>(arr: T[]): T | undefined;
+declare function warning(cond: any, message: string): cond is true;
+declare function functionalUpdate<TResult>(updater: Updater<TResult>, previous: TResult): TResult;
+declare function pick<T, K extends keyof T>(parent: T, keys: K[]): Pick<T, K>;
+
 interface LocationState {
 }
 interface Location<TSearchObj extends AnySearchSchema = {}, TState extends LocationState = LocationState> {
@@ -153,12 +143,9 @@ interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
     defaultPreloadGcMaxAge?: number;
     defaultPreloadDelay?: number;
     useErrorBoundary?: boolean;
-    defaultElement?: GetFrameworkGeneric<'Element'>;
-    defaultErrorElement?: GetFrameworkGeneric<'Element'>;
-    defaultCatchElement?: GetFrameworkGeneric<'Element'>;
-    defaultPendingElement?: GetFrameworkGeneric<'Element'>;
-    defaultPendingMs?: number;
-    defaultPendingMinMs?: number;
+    defaultComponent?: GetFrameworkGeneric<'Component'>;
+    defaultErrorComponent?: GetFrameworkGeneric<'Component'>;
+    defaultPendingComponent?: GetFrameworkGeneric<'Component'>;
     defaultLoaderMaxAge?: number;
     defaultLoaderGcMaxAge?: number;
     caseSensitive?: boolean;
@@ -169,7 +156,7 @@ interface RouterOptions<TRouteConfig extends AnyRouteConfig> {
         route: AnyRoute;
         router: Router<any, any>;
     }) => void;
-    createElement?: (element: GetFrameworkGeneric<'SyncOrAsyncElement'>) => Promise<GetFrameworkGeneric<'Element'>>;
+    loadComponent?: (component: GetFrameworkGeneric<'Component'>) => Promise<GetFrameworkGeneric<'Component'>>;
 }
 interface Action<TPayload = unknown, TResponse = unknown> {
     submit: (submission?: TPayload, actionOpts?: {
@@ -295,8 +282,6 @@ interface Router<TRouteConfig extends AnyRouteConfig = RouteConfig, TAllRouteInf
         strictParseParams?: boolean;
     }) => RouteMatch[];
     loadMatches: (resolvedMatches: RouteMatch[], loaderOpts?: {
-        withPending?: boolean;
-    } & ({
         preload: true;
         maxAge: number;
         gcMaxAge: number;
@@ -304,7 +289,7 @@ interface Router<TRouteConfig extends AnyRouteConfig = RouteConfig, TAllRouteInf
         preload?: false;
         maxAge?: never;
         gcMaxAge?: never;
-    })) => Promise<void>;
+    }) => Promise<void>;
     invalidateRoute: (opts: MatchLocation) => void;
     reload: () => Promise<void>;
     resolvePath: (from: string, path: string) => string;
@@ -442,12 +427,9 @@ declare type RouteOptions<TRouteId extends string = string, TPath extends string
     validateSearch?: SearchSchemaValidator<TSearchSchema, TParentSearchSchema>;
     preSearchFilters?: SearchFilter<TFullSearchSchema>[];
     postSearchFilters?: SearchFilter<TFullSearchSchema>[];
-    pendingMs?: number;
-    pendingMinMs?: number;
-    element?: GetFrameworkGeneric<'SyncOrAsyncElement'>;
-    errorElement?: GetFrameworkGeneric<'SyncOrAsyncElement'>;
-    catchElement?: GetFrameworkGeneric<'SyncOrAsyncElement'>;
-    pendingElement?: GetFrameworkGeneric<'SyncOrAsyncElement'>;
+    component?: GetFrameworkGeneric<'Component'>;
+    errorComponent?: GetFrameworkGeneric<'Component'>;
+    pendingComponent?: GetFrameworkGeneric<'Component'>;
     loader?: LoaderFn<TRouteLoaderData, TFullSearchSchema, TAllParams>;
     loaderMaxAge?: number;
     loaderGcMaxAge?: number;

package/build/umd/index.development.js

@@ -1382,7 +1382,7 @@
     };
   };
 
-  const elementTypes = ['element', 'errorElement', 'catchElement', 'pendingElement'];
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
   function createRouteMatch(router, route, opts) {
     const routeMatch = _extends({}, route, opts, {
       router,
@@ -1392,7 +1392,6 @@
       status: 'idle',
       routeLoaderData: {},
       loaderData: {},
-      isPending: false,
       isFetching: false,
       isInvalid: false,
       invalidAt: Infinity,
@@ -1410,32 +1409,6 @@
 
           routeMatch.router.notify();
         },
-        startPending: () => {
-          var _routeMatch$options$p, _routeMatch$options$p2;
-
-          const pendingMs = (_routeMatch$options$p = routeMatch.options.pendingMs) != null ? _routeMatch$options$p : router.options.defaultPendingMs;
-          const pendingMinMs = (_routeMatch$options$p2 = routeMatch.options.pendingMinMs) != null ? _routeMatch$options$p2 : router.options.defaultPendingMinMs;
-
-          if (routeMatch.__.pendingTimeout || routeMatch.status !== 'loading' || typeof pendingMs === 'undefined') {
-            return;
-          }
-
-          routeMatch.__.pendingTimeout = setTimeout(() => {
-            routeMatch.isPending = true;
-
-            routeMatch.__.resolve();
-
-            if (typeof pendingMinMs !== 'undefined') {
-              routeMatch.__.pendingMinPromise = new Promise(r => routeMatch.__.pendingMinTimeout = setTimeout(r, pendingMinMs));
-            }
-          }, pendingMs);
-        },
-        cancelPending: () => {
-          routeMatch.isPending = false;
-          clearTimeout(routeMatch.__.pendingTimeout);
-          clearTimeout(routeMatch.__.pendingMinTimeout);
-          delete routeMatch.__.pendingMinPromise;
-        },
         validate: () => {
           var _routeMatch$parentMat, _routeMatch$parentMat2;
 
@@ -1455,11 +1428,11 @@
 
             routeMatch.routeSearch = nextSearch;
             routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
-            elementTypes.map(async type => {
-              const routeElement = routeMatch.options[type];
+            componentTypes.map(async type => {
+              const component = routeMatch.options[type];
 
               if (typeof routeMatch.__[type] !== 'function') {
-                routeMatch.__[type] = routeElement;
+                routeMatch.__[type] = component;
               }
             });
           } catch (err) {
@@ -1479,14 +1452,16 @@
         var _routeMatch$__$abortC;
 
         (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-
-        routeMatch.__.cancelPending();
       },
       invalidate: () => {
         routeMatch.isInvalid = true;
       },
       hasLoaders: () => {
-        return !!(route.options.loader || elementTypes.some(d => typeof route.options[d] === 'function'));
+        return !!(route.options.loader || componentTypes.some(d => {
+          var _route$options$d;
+
+          return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
+        }));
       },
       load: async loaderOpts => {
         const now = Date.now();
@@ -1530,91 +1505,79 @@
           routeMatch.isFetching = true;
           routeMatch.__.resolve = resolve;
 
-          routeMatch.__.loaderDataPromise = (async () => {
-            // Load the elements and data in parallel
-            routeMatch.__.elementsPromise = (async () => {
-              // then run all element and data loaders in parallel
-              // For each element type, potentially load it asynchronously
-              await Promise.all(elementTypes.map(async type => {
-                const routeElement = routeMatch.options[type];
+          routeMatch.__.componentsPromise = (async () => {
+            // then run all component and data loaders in parallel
+            // For each component type, potentially load it asynchronously
+            await Promise.all(componentTypes.map(async type => {
+              var _routeMatch$__$type;
 
-                if (typeof routeMatch.__[type] === 'function') {
-                  routeMatch.__[type] = await router.options.createElement(routeElement);
-                }
-              }));
-            })();
-
-            routeMatch.__.dataPromise = Promise.resolve().then(async () => {
-              try {
-                var _ref, _ref2, _opts$maxAge;
-
-                if (routeMatch.options.loader) {
-                  const data = await routeMatch.options.loader({
-                    params: routeMatch.params,
-                    search: routeMatch.routeSearch,
-                    signal: routeMatch.__.abortController.signal
-                  });
-
-                  if (id !== routeMatch.__.latestId) {
-                    return routeMatch.__.loadPromise;
-                  }
+              const component = routeMatch.options[type];
 
-                  routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-                }
+              if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
+                routeMatch.__[type] = await router.options.loadComponent(component);
+              }
+            }));
+          })();
+
+          routeMatch.__.dataPromise = Promise.resolve().then(async () => {
+            try {
+              var _ref, _ref2, _opts$maxAge;
+
+              if (routeMatch.options.loader) {
+                const data = await routeMatch.options.loader({
+                  params: routeMatch.params,
+                  search: routeMatch.routeSearch,
+                  signal: routeMatch.__.abortController.signal
+                });
 
-                routeMatch.error = undefined;
-                routeMatch.status = 'success';
-                routeMatch.updatedAt = Date.now();
-                routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
-              } catch (err) {
                 if (id !== routeMatch.__.latestId) {
                   return routeMatch.__.loadPromise;
                 }
 
-                {
-                  console.error(err);
-                }
-
-                routeMatch.error = err;
-                routeMatch.status = 'error';
-                routeMatch.updatedAt = Date.now();
+                routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
               }
-            });
-
-            try {
-              await Promise.all([routeMatch.__.elementsPromise, routeMatch.__.dataPromise]);
 
+              routeMatch.error = undefined;
+              routeMatch.status = 'success';
+              routeMatch.updatedAt = Date.now();
+              routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
+            } catch (err) {
               if (id !== routeMatch.__.latestId) {
                 return routeMatch.__.loadPromise;
               }
 
-              if (routeMatch.__.pendingMinPromise) {
-                await routeMatch.__.pendingMinPromise;
-                delete routeMatch.__.pendingMinPromise;
-              }
-            } finally {
-              if (id !== routeMatch.__.latestId) {
-                return routeMatch.__.loadPromise;
+              {
+                console.error(err);
               }
 
-              routeMatch.__.cancelPending();
+              routeMatch.error = err;
+              routeMatch.status = 'error';
+              routeMatch.updatedAt = Date.now();
+            }
+          });
 
-              routeMatch.isPending = false;
-              routeMatch.isFetching = false;
+          try {
+            await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise]);
 
-              routeMatch.__.notify();
+            if (id !== routeMatch.__.latestId) {
+              return routeMatch.__.loadPromise;
+            }
+          } finally {
+            if (id !== routeMatch.__.latestId) {
+              return routeMatch.__.loadPromise;
             }
-          })();
 
-          await routeMatch.__.loaderDataPromise;
+            routeMatch.isFetching = false;
 
-          if (id !== routeMatch.__.latestId) {
-            return routeMatch.__.loadPromise;
+            routeMatch.__.notify();
           }
-
-          delete routeMatch.__.loaderDataPromise;
         });
         await routeMatch.__.loadPromise;
+
+        if (id !== routeMatch.__.latestId) {
+          return routeMatch.__.loadPromise;
+        }
+
         delete routeMatch.__.loadPromise;
       }
     });
@@ -1738,10 +1701,16 @@
         return router.routesById[id];
       },
       notify: () => {
-        router.state = _extends({}, router.state, {
-          isFetching: router.state.status === 'loading' || router.state.matches.some(d => d.isFetching),
-          isPreloading: Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId))
-        });
+        const isFetching = router.state.status === 'loading' || router.state.matches.some(d => d.isFetching);
+        const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId));
+
+        if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
+          router.state = _extends({}, router.state, {
+            isFetching,
+            isPreloading
+          });
+        }
+
         cascadeLoaderData(router.state.matches);
         router.listeners.forEach(listener => listener(router));
       },
@@ -1760,7 +1729,7 @@
           invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
           Object.assign(match, dehydratedMatch);
         });
-        router.loadMatches(matches);
+        matches.forEach(match => match.__.validate());
         router.state = _extends({}, router.state, dehydratedState, {
           matches
         });
@@ -1776,8 +1745,11 @@
 
         if (next.href !== router.location.href) {
           router.__.commitLocation(next, true);
-        } // router.load()
+        }
 
+        if (!router.state.matches.length) {
+          router.load();
+        }
 
         const unsub = router.history.listen(event => {
           router.load(router.__.parseLocation(event.location, router.location));
@@ -1850,18 +1822,26 @@
         const matches = router.matchRoutes(router.location.pathname, {
           strictParseParams: true
         });
-        router.state = _extends({}, router.state, {
-          pending: {
+
+        if (typeof document !== 'undefined') {
+          router.state = _extends({}, router.state, {
+            pending: {
+              matches: matches,
+              location: router.location
+            },
+            status: 'loading'
+          });
+        } else {
+          router.state = _extends({}, router.state, {
             matches: matches,
-            location: router.location
-          },
-          status: 'loading'
-        });
+            location: router.location,
+            status: 'loading'
+          });
+        }
+
         router.notify(); // Load the matches
 
-        await router.loadMatches(matches, {
-          withPending: true
-        });
+        await router.loadMatches(matches);
 
         if (router.startedLoadingAt !== id) {
           // Ignore side-effects of match loading
@@ -2083,14 +2063,8 @@
 
           match.load(loaderOpts);
 
-          if (match.status === 'loading') {
-            // If requested, start the pending timers
-            if (loaderOpts != null && loaderOpts.withPending) match.__.startPending();
-          }
-
           if (match.__.loadPromise) {
             // Wait for the first sign of activity from the match
-            // This might be completion, error, or a pending state
             await match.__.loadPromise;
           }
         });