@tanstack/react-router 0.0.1-beta.245 → 0.0.1-beta.247

package/build/types/fileRoute.d.ts

@@ -29,7 +29,6 @@ export declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParent
         onEnter?: ((match: import("./Matches").AnyRouteMatch) => void) | undefined;
         onTransition?: ((match: import("./Matches").AnyRouteMatch) => void) | undefined;
         onLeave?: ((match: import("./Matches").AnyRouteMatch) => void) | undefined;
-        reloadOnWindowFocus?: boolean | undefined;
     }) | undefined) => Route<TParentRoute, TPath, TFullPath, TFilePath, TId, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TContext, TRouterContext, TLoaderData, TChildren, TRouteTree>;
 }
 export {};

package/build/types/path.d.ts

@@ -13,4 +13,5 @@ export declare function resolvePath(basepath: string, base: string, to: string):
 export declare function parsePathname(pathname?: string): Segment[];
 export declare function interpolatePath(path: string | undefined, params: any, leaveWildcards?: boolean): string;
 export declare function matchPathname(basepath: string, currentPathname: string, matchLocation: Pick<MatchLocation, 'to' | 'fuzzy' | 'caseSensitive'>): AnyPathParams | undefined;
+export declare function removeBasepath(basepath: string, pathname: string): string;
 export declare function matchByPath(basepath: string, from: string, matchLocation: Pick<MatchLocation, 'to' | 'caseSensitive' | 'fuzzy'>): Record<string, string> | undefined;

package/build/types/route.d.ts

@@ -77,7 +77,6 @@ export type UpdatableRouteOptions<TFullSearchSchema extends Record<string, any>,
     onEnter?: (match: AnyRouteMatch) => void;
     onTransition?: (match: AnyRouteMatch) => void;
     onLeave?: (match: AnyRouteMatch) => void;
-    reloadOnWindowFocus?: boolean;
 };
 export type ParseParamsOption<TPath extends string, TParams> = ParseParamsFn<TPath, TParams>;
 export type ParseParamsFn<TPath extends string, TParams> = (rawParams: IsAny<TPath, any, Record<ParsePathParams<TPath>, string>>) => TParams extends Record<ParsePathParams<TPath>, any> ? TParams : 'parseParams must return an object';
@@ -179,7 +178,6 @@ export declare class Route<TParentRoute extends RouteConstraints['TParentRoute']
     }) => void;
     addChildren: <TNewChildren extends AnyRoute[]>(children: TNewChildren) => Route<TParentRoute, TPath, TFullPath, TCustomId, TId, TSearchSchema, TFullSearchSchema, TParams, TAllParams, TRouteContext, TAllContext, TRouterContext, TNewChildren, TRouteTree, AnyRoute>;
     update: (options: UpdatableRouteOptions<TFullSearchSchema, TAllParams, Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>>, TLoaderData>) => this;
-    static __onInit: (route: any) => void;
     useMatch: <TSelected = TAllContext>(opts?: {
         select?: ((search: TAllContext) => TSelected) | undefined;
     } | undefined) => TSelected;
@@ -275,4 +273,7 @@ export type ErrorRouteComponent<TFullSearchSchema extends Record<string, any>, T
 export type PendingRouteComponent<TFullSearchSchema extends Record<string, any>, TAllParams extends AnyPathParams, TAllContext extends Record<string, any>> = AsyncRouteComponent<PendingRouteProps<TFullSearchSchema, TAllParams, TAllContext>>;
 export type AnyRouteComponent = RouteComponent<any, any, any, any>;
 export type ComponentPropsFromRoute<TRoute> = TRoute extends (() => infer T extends AnyRoute) ? ComponentPropsFromRoute<T> : TRoute extends Route<infer TParentRoute, infer TPath, infer TFullPath, infer TCustomId, infer TId, infer TSearchSchema, infer TFullSearchSchema, infer TParams, infer TAllParams, infer TRouteContext, infer TAllContext, infer TRouterContext, infer TLoaderData, infer TChildren> ? RouteProps<TFullSearchSchema, TAllParams, TAllContext, TLoaderData> : {};
+export declare class NotFoundRoute<TParentRoute extends AnyRootRoute, TSearchSchema extends RouteConstraints['TSearchSchema'] = {}, TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<TParentRoute, TSearchSchema>, TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext, TAllContext extends Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>> = Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>>, TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext, TLoaderData extends any = unknown, TChildren extends RouteConstraints['TChildren'] = unknown, TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute> extends Route<TParentRoute, '/404', '/404', '404', '404', TSearchSchema, TFullSearchSchema, {}, {}, TRouteContext, TAllContext, TRouterContext, TLoaderData, TChildren, TRouteTree> {
+    constructor(options: Omit<RouteOptions<TParentRoute, string, string, TSearchSchema, TFullSearchSchema, {}, {}, TRouteContext, TAllContext, TLoaderData>, 'caseSensitive' | 'parseParams' | 'stringifyParams' | 'path' | 'id'>);
+}
 export {};

package/build/types/router.d.ts

@@ -54,6 +54,7 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     Wrap?: (props: {
         children: any;
     }) => JSX.Element;
+    notFoundRoute?: AnyRoute;
 }
 export interface RouterState<TRouteTree extends AnyRoute = AnyRoute> {
     status: 'pending' | 'idle';
@@ -165,7 +166,7 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     load: (opts?: {
         invalidate?: boolean;
     }) => Promise<void>;
-    preloadRoute: (navigateOpts?: BuildNextOptions) => Promise<readonly [RouteMatch<AnyRoute, any>, RouteMatch<AnyRoute, any>[]]>;
+    preloadRoute: (navigateOpts?: BuildNextOptions) => Promise<RouteMatch<AnyRoute, any>[]>;
     buildLink: BuildLinkFn<TRouteTree>;
     matchRoute: MatchRouteFn<TRouteTree>;
     injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;

package/build/umd/index.development.js

@@ -64,26 +64,20 @@
     let location = opts.getLocation();
     let subscribers = new Set();
     let blockers = [];
-    let queue = [];
     const onUpdate = () => {
       location = opts.getLocation();
       subscribers.forEach(subscriber => subscriber());
     };
-    const tryUnblock = () => {
+    const tryNavigation = task => {
       if (blockers.length) {
-        blockers[0]?.(tryUnblock, () => {
-          blockers = [];
-          stopBlocking();
-        });
-        return;
-      }
-      while (queue.length) {
-        queue.shift()?.();
+        for (let blocker of blockers) {
+          if (!window.confirm(blocker.message)) {
+            opts.onBlocked?.(onUpdate);
+            return;
+          }
+        }
       }
-    };
-    const queueTask = task => {
-      queue.push(task);
-      tryUnblock();
+      task();
     };
     return {
       get location() {
@@ -97,41 +91,44 @@
       },
       push: (path, state) => {
         state = assignKey(state);
-        queueTask(() => {
+        tryNavigation(() => {
           opts.pushState(path, state, onUpdate);
         });
       },
       replace: (path, state) => {
         state = assignKey(state);
-        queueTask(() => {
+        tryNavigation(() => {
           opts.replaceState(path, state, onUpdate);
         });
       },
       go: index => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.go(index);
         });
       },
       back: () => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.back();
         });
       },
       forward: () => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.forward();
         });
       },
       createHref: str => opts.createHref(str),
-      block: cb => {
-        blockers.push(cb);
+      block: message => {
+        const payload = {
+          message
+        };
+        blockers.push(payload);
         if (blockers.length === 1) {
           addEventListener(beforeUnloadEvent, beforeUnloadListener, {
             capture: true
           });
         }
         return () => {
-          blockers = blockers.filter(b => b !== cb);
+          blockers = blockers.filter(b => b !== payload);
           if (!blockers.length) {
             stopBlocking();
           }
@@ -172,6 +169,7 @@
     const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.search}${window.location.hash}`);
     const createHref = opts?.createHref ?? (path => path);
     let currentLocation = parseLocation(getHref(), window.history.state);
+    let rollbackLocation;
     const getLocation = () => currentLocation;
     let next;
 
@@ -202,12 +200,16 @@
         // Reset the nextIsPush flag and clear the scheduled update
         next = undefined;
         scheduled = undefined;
+        rollbackLocation = undefined;
       });
     };
 
     // This function queues up a call to update the browser history
     const queueHistoryAction = (type, path, state, onUpdate) => {
       const href = createHref(path);
+      if (!scheduled) {
+        rollbackLocation = currentLocation;
+      }
 
       // Update the location in memory
       currentLocation = parseLocation(href, state);
@@ -218,6 +220,7 @@
         state,
         isPush: next?.isPush || type === 'push'
       };
+
       // Notify subscribers
       onUpdate();
       if (!scheduled) {
@@ -245,6 +248,15 @@
         window.history.replaceState = originalReplaceState;
         window.removeEventListener(pushStateEvent, onPushPop);
         window.removeEventListener(popStateEvent, onPushPop);
+      },
+      onBlocked: onUpdate => {
+        // If a navigation is blocked, we need to rollback the location
+        // that we optimistically updated in memory.
+        if (rollbackLocation && currentLocation !== rollbackLocation) {
+          currentLocation = rollbackLocation;
+          // Notify subscribers
+          onUpdate();
+        }
       }
     });
     window.addEventListener(pushStateEvent, onPushPop);
@@ -1005,9 +1017,12 @@
     }
     return pathParams ?? {};
   }
+  function removeBasepath(basepath, pathname) {
+    return basepath != '/' ? pathname.substring(basepath.length) : pathname;
+  }
   function matchByPath(basepath, from, matchLocation) {
     // Remove the base path from the pathname
-    from = basepath != '/' ? from.substring(basepath.length) : from;
+    from = removeBasepath(basepath, from);
     // Default to to $ (wildcard)
     const to = `${matchLocation.to ?? '$'}`;
     // Parse the from and to
@@ -1067,7 +1082,8 @@
           }
         }
         if (!isLastBaseSegment && isLastRouteSegment) {
-          return !!matchLocation.fuzzy;
+          params['**'] = joinPaths(baseSegments.slice(i + 1).map(d => d.value));
+          return !!matchLocation.fuzzy && routeSegment?.value !== '/';
         }
       }
       return true;
@@ -1107,7 +1123,6 @@
     constructor(options) {
       this.options = options || {};
       this.isRoot = !options?.getParentRoute;
-      Route.__onInit(this);
       this.$$typeof = Symbol.for('react.memo');
     }
     init = opts => {
@@ -1151,10 +1166,6 @@
       Object.assign(this.options, options);
       return this;
     };
-    static __onInit = route => {
-      // This is a dummy static method that should get
-      // replaced by a framework specific implementation if necessary
-    };
     useMatch = opts => {
       return useMatch({
         ...opts,
@@ -1203,6 +1214,15 @@
 
   //
 
+  class NotFoundRoute extends Route {
+    constructor(options) {
+      super({
+        ...options,
+        id: '404'
+      });
+    }
+  }
+
   const matchContext = /*#__PURE__*/React__namespace.createContext(undefined);
   function Matches() {
     const router = useRouter();
@@ -1900,11 +1920,15 @@
     buildRouteTree = () => {
       this.routesById = {};
       this.routesByPath = {};
+      const notFoundRoute = this.options.notFoundRoute;
+      if (notFoundRoute) {
+        notFoundRoute.init({
+          originalIndex: 99999999999
+        });
+        this.routesById[notFoundRoute.id] = notFoundRoute;
+      }
       const recurseRoutes = childRoutes => {
         childRoutes.forEach((childRoute, i) => {
-          // if (typeof childRoute === 'function') {
-          //   childRoute = (childRoute as any)()
-          // }
           childRoute.init({
             originalIndex: i
           });
@@ -1924,8 +1948,12 @@
         });
       };
       recurseRoutes([this.routeTree]);
-      this.flatRoutes = Object.values(this.routesByPath).map((d, i) => {
-        const trimmed = trimPath(d.fullPath);
+      const scoredRoutes = [];
+      Object.values(this.routesById).forEach((d, i) => {
+        if (d.isRoot || !d.path) {
+          return;
+        }
+        const trimmed = trimPathLeft(d.fullPath);
         const parsed = parsePathname(trimmed);
         while (parsed.length > 1 && parsed[0]?.value === '/') {
           parsed.shift();
@@ -1939,14 +1967,15 @@
           }
           return 1;
         });
-        return {
+        scoredRoutes.push({
           child: d,
           trimmed,
           parsed,
           index: i,
           score
-        };
-      }).sort((a, b) => {
+        });
+      });
+      this.flatRoutes = scoredRoutes.sort((a, b) => {
         let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
         if (isIndex !== 0) return isIndex;
         const length = Math.min(a.score.length, b.score.length);
@@ -2048,7 +2077,7 @@
         const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
           to: route.fullPath,
           caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
-          fuzzy: false
+          fuzzy: true
         });
         if (matchedParams) {
           routeParams = matchedParams;
@@ -2058,7 +2087,17 @@
       });
       let routeCursor = foundRoute || this.routesById['__root__'];
       let matchedRoutes = [routeCursor];
-      // let includingLayouts = true
+
+      // Check to see if the route needs a 404 entry
+      if (
+      // If we found a route, and it's not an index route and we have left over path
+      (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
+      // Or if we didn't find a route and we have left over path
+      trimPathRight(pathname)) &&
+      // And we have a 404 route configured
+      this.options.notFoundRoute) {
+        matchedRoutes.push(this.options.notFoundRoute);
+      }
       while (routeCursor?.parentRoute) {
         routeCursor = routeCursor.parentRoute;
         if (routeCursor) matchedRoutes.unshift(routeCursor);
@@ -2682,12 +2721,12 @@
       let matches = this.matchRoutes(next.pathname, next.search, {
         throwOnError: true
       });
-      await this.loadMatches({
+      matches = await this.loadMatches({
         matches,
         preload: true,
         checkLatest: () => undefined
       });
-      return [last(matches), matches];
+      return matches;
     };
     buildLink = dest => {
       // If this link simply reloads the current route,
@@ -3089,13 +3128,7 @@
     } = useRouter();
     React__namespace.useEffect(() => {
       if (!condition) return;
-      let unblock = history.block((retry, cancel) => {
-        if (window.confirm(message)) {
-          unblock();
-          retry();
-        }
-      });
-      return unblock;
+      return history.block(message);
     });
   }
   function Block({
@@ -3154,6 +3187,7 @@
   exports.MatchRoute = MatchRoute;
   exports.Matches = Matches;
   exports.Navigate = Navigate;
+  exports.NotFoundRoute = NotFoundRoute;
   exports.Outlet = Outlet;
   exports.PathParamError = PathParamError;
   exports.RootRoute = RootRoute;
@@ -3195,6 +3229,7 @@
   exports.parseSearchWith = parseSearchWith;
   exports.pick = pick;
   exports.redirect = redirect;
+  exports.removeBasepath = removeBasepath;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;