@tanstack/react-router 0.0.1-beta.56 → 0.0.1-beta.58

package/build/umd/index.development.js

@@ -88,6 +88,7 @@
     setState = updater => {
       const previous = this.state;
       this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
+      if (this.state === previous) return;
       this.queue.push(() => {
         this.listeners.forEach(listener => listener(this.state, previous));
         this.options?.onUpdate?.(this.state, previous);
@@ -564,62 +565,110 @@
     return out;
   }
 
+  const rootRouteId = '__root__';
   class Route {
-    constructor(routeConfig, options, originalIndex, parent, router) {
-      Object.assign(this, {
-        ...routeConfig,
-        originalIndex,
-        options,
-        getRouter: () => router,
-        childRoutes: undefined,
-        getParentRoute: () => parent
-      });
-      router.options.createRoute?.({
-        router,
-        route: this
-      });
-    }
-  }
+    // Set up in this.init()
 
-  const rootRouteId = '__root__';
-  const createRouteConfig = (options = {}, children = [], isRoot = true, parentId, parentPath) => {
-    if (isRoot) {
-      options.path = rootRouteId;
-    }
+    // customId!: TCustomId
 
-    // Strip the root from parentIds
-    if (parentId === rootRouteId) {
-      parentId = '';
-    }
-    let path = isRoot ? rootRouteId : options.path;
+    // Optional
 
-    // If the path is anything other than an index path, trim it up
-    if (path && path !== '/') {
-      path = trimPath(path);
-    }
-    const routeId = path || options.id;
-    let id = joinPaths([parentId, routeId]);
-    if (path === rootRouteId) {
-      path = '/';
-    }
-    if (id !== rootRouteId) {
-      id = joinPaths(['/', id]);
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
     }
-    const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parentPath, path]));
-    return {
-      id: id,
-      routeId: routeId,
-      path: path,
-      fullPath: fullPath,
-      options: options,
-      children,
-      addChildren: children => createRouteConfig(options, children, false, parentId, parentPath),
-      createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath),
-      generate: () => {
-        invariant(false, `routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `);
+    init = () => {
+      const allOptions = this.options;
+      const isRoot = !allOptions?.path && !allOptions?.id;
+      const parent = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
+      } else {
+        invariant(parent, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+      }
+      let path = isRoot ? rootRouteId : allOptions.path;
+
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
+      }
+      const customId = allOptions?.id || path;
+
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([parent.id === rootRouteId ? '' : parent.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
+      }
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
       }
+      const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parent.fullPath, path]));
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
     };
-  };
+    addChildren = children => {
+      this.children = children;
+      return this;
+    };
+
+    // generate: () => {
+    //   invariant(
+    //     false,
+    //     `routeConfig.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `,
+    //   )
+    // },
+  }
+
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
+    }
+  }
+
+  // const rootRoute = new RootRoute({
+  //   validateSearch: () => null as unknown as { root?: boolean },
+  // })
+
+  // const aRoute = new Route({
+  //   getParentRoute: () => rootRoute,
+  //   path: 'a',
+  //   validateSearch: () => null as unknown as { a?: string },
+  // })
+
+  // const bRoute = new Route({
+  //   getParentRoute: () => aRoute,
+  //   path: 'b',
+  // })
+
+  // const rootIsRoot = rootRoute.isRoot
+  // //    ^?
+  // const aIsRoot = aRoute.isRoot
+  // //    ^?
+
+  // const rId = rootRoute.id
+  // //    ^?
+  // const aId = aRoute.id
+  // //    ^?
+  // const bId = bRoute.id
+  // //    ^?
+
+  // const rPath = rootRoute.fullPath
+  // //    ^?
+  // const aPath = aRoute.fullPath
+  // //    ^?
+  // const bPath = bRoute.fullPath
+  // //    ^?
+
+  // const rSearch = rootRoute.__types.fullSearchSchema
+  // //    ^?
+  // const aSearch = aRoute.__types.fullSearchSchema
+  // //    ^?
+  // const bSearch = bRoute.__types.fullSearchSchema
+  // //    ^?
+
+  // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
+  // //    ^?
 
   //
 
@@ -651,14 +700,14 @@
     cancel = () => {
       this.abortController?.abort();
     };
-    load = async () => {
+    load = async opts => {
       // If the match is invalid, errored or idle, trigger it to load
       if (this.store.state.status !== 'pending') {
-        await this.fetch();
+        await this.fetch(opts);
       }
     };
     #latestId = '';
-    fetch = async () => {
+    fetch = async opts => {
       this.__loadPromise = Promise.resolve().then(async () => {
         const loadId = '' + Date.now() + Math.random();
         this.#latestId = loadId;
@@ -693,7 +742,8 @@
             return this.route.options.onLoad({
               params: this.params,
               search: this.store.state.search,
-              signal: this.abortController.signal
+              signal: this.abortController.signal,
+              preload: !!opts?.preload
             });
           }
           return;
@@ -907,12 +957,12 @@
       }
       const {
         basepath,
-        routeConfig
+        routeTree
       } = this.options;
       this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
-      if (routeConfig) {
+      if (routeTree) {
         this.routesById = {};
-        this.routeTree = this.#buildRouteTree(routeConfig);
+        this.routeTree = this.#buildRouteTree(routeTree);
       }
       return this;
     };
@@ -1055,17 +1105,18 @@
         return matches;
       }
       const existingMatches = [...this.store.state.currentMatches, ...(this.store.state.pendingMatches ?? [])];
-      const recurse = async routes => {
+      const findInRouteTree = async routes => {
         const parentMatch = last(matches);
         let params = parentMatch?.params ?? {};
         const filteredRoutes = this.options.filterRoutes?.(routes) ?? routes;
-        let foundRoutes = [];
+        let matchingRoutes = [];
         const findMatchInRoutes = (parentRoutes, routes) => {
           routes.some(route => {
-            if (!route.path && route.childRoutes?.length) {
-              return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
+            const children = route.children;
+            if (!route.path && children?.length) {
+              return findMatchInRoutes([...matchingRoutes, route], children);
             }
-            const fuzzy = !!(route.path !== '/' || route.childRoutes?.length);
+            const fuzzy = route.path === '/' ? false : !!children?.length;
             const matchParams = matchPathname(this.basepath, pathname, {
               to: route.fullPath,
               fuzzy,
@@ -1086,17 +1137,17 @@
               };
             }
             if (!!matchParams) {
-              foundRoutes = [...parentRoutes, route];
+              matchingRoutes = [...parentRoutes, route];
             }
-            return !!foundRoutes.length;
+            return !!matchingRoutes.length;
           });
-          return !!foundRoutes.length;
+          return !!matchingRoutes.length;
         };
         findMatchInRoutes([], filteredRoutes);
-        if (!foundRoutes.length) {
+        if (!matchingRoutes.length) {
           return;
         }
-        foundRoutes.forEach(foundRoute => {
+        matchingRoutes.forEach(foundRoute => {
           const interpolatedPath = interpolatePath(foundRoute.path, params);
           const matchId = interpolatePath(foundRoute.id, params, true);
           const match = existingMatches.find(d => d.id === matchId) ||
@@ -1108,12 +1159,13 @@
           });
           matches.push(match);
         });
-        const foundRoute = last(foundRoutes);
-        if (foundRoute.childRoutes?.length) {
-          recurse(foundRoute.childRoutes);
+        const foundRoute = last(matchingRoutes);
+        const foundChildren = foundRoute.children;
+        if (foundChildren?.length) {
+          findInRouteTree(foundChildren);
         }
       };
-      recurse([this.routeTree]);
+      findInRouteTree([this.routeTree]);
       linkMatches(matches);
       return matches;
     };
@@ -1144,7 +1196,9 @@
         if (search.__data?.matchId && search.__data.matchId !== match.id) {
           return;
         }
-        match.load();
+        match.load({
+          preload: loaderOpts?.preload
+        });
         if (match.store.state.status !== 'success' && match.__loadPromise) {
           // Wait for the first sign of activity from the match
           await match.__loadPromise;
@@ -1358,11 +1412,12 @@
         };
       });
     };
-    #buildRouteTree = rootRouteConfig => {
-      const recurseRoutes = (routeConfigs, parent) => {
-        return routeConfigs.map((routeConfig, i) => {
-          const routeOptions = routeConfig.options;
-          const route = new Route(routeConfig, routeOptions, i, parent, this);
+    #buildRouteTree = routeTree => {
+      const recurseRoutes = routes => {
+        routes.forEach((route, i) => {
+          route.init();
+          route.originalIndex = i;
+          route.router = this;
           const existingRoute = this.routesById[route.id];
           if (existingRoute) {
             {
@@ -1371,13 +1426,12 @@
             throw new Error();
           }
           this.routesById[route.id] = route;
-          const children = routeConfig.children;
-          route.childRoutes = children.length ? recurseRoutes(children, route) : undefined;
-          return route;
+          const children = route.children;
+          if (children?.length) recurseRoutes(children);
         });
       };
-      const routes = recurseRoutes([rootRouteConfig]);
-      return routes[0];
+      recurseRoutes([routeTree]);
+      return routeTree;
     };
     #parseLocation = previousLocation => {
       let {
@@ -1838,6 +1892,11 @@
       match: match
     }))));
   }
+
+  // This is the messiest thing ever... I'm either seriously tired (likely) or
+  // there has to be a better way to reset error boundaries when the
+  // router's location key changes.
+
   class CatchBoundary extends React__namespace.Component {
     state = {
       error: false,
@@ -1858,10 +1917,6 @@
       }));
     }
   }
-
-  // This is the messiest thing ever... I'm either seriously tired (likely) or
-  // there has to be a better way to reset error boundaries when the
-  // router's location key changes.
   function CatchBoundaryInner(props) {
     const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
     const router = useRouter();
@@ -1945,6 +2000,7 @@
   exports.MatchRoute = MatchRoute;
   exports.Outlet = Outlet;
   exports.ReactRouter = ReactRouter;
+  exports.RootRoute = RootRoute;
   exports.Route = Route;
   exports.RouteMatch = RouteMatch;
   exports.Router = Router;
@@ -1953,7 +2009,6 @@
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
   exports.createMemoryHistory = createMemoryHistory;
-  exports.createRouteConfig = createRouteConfig;
   exports.decode = decode;
   exports.defaultFetchServerDataFn = defaultFetchServerDataFn;
   exports.defaultParseSearch = defaultParseSearch;