@tanstack/react-router 0.0.1-beta.76 → 0.0.1-beta.79

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "f796-109",
+            "uid": "9710-109",
             "name": "\u0000rollupPluginBabelHelpers.js"
           },
           {
@@ -15,11 +15,11 @@
             "children": [
               {
                 "name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-                "uid": "f796-111"
+                "uid": "9710-111"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "f796-113"
+                "uid": "9710-113"
               }
             ]
           },
@@ -28,19 +28,19 @@
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "f796-115"
+                "uid": "9710-115"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "f796-117"
+                "uid": "9710-117"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "f796-119"
+                "uid": "9710-119"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "f796-121"
+                "uid": "9710-121"
               }
             ]
           }
@@ -50,176 +50,176 @@
     "isRoot": true
   },
   "nodeParts": {
-    "f796-109": {
+    "9710-109": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "f796-108"
+      "mainUid": "9710-108"
     },
-    "f796-111": {
+    "9710-111": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "f796-110"
+      "mainUid": "9710-110"
     },
-    "f796-113": {
+    "9710-113": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "f796-112"
+      "mainUid": "9710-112"
     },
-    "f796-115": {
+    "9710-115": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "f796-114"
+      "mainUid": "9710-114"
     },
-    "f796-117": {
-      "renderedLength": 46874,
-      "gzipLength": 11076,
+    "9710-117": {
+      "renderedLength": 49433,
+      "gzipLength": 11720,
       "brotliLength": 0,
-      "mainUid": "f796-116"
+      "mainUid": "9710-116"
     },
-    "f796-119": {
+    "9710-119": {
       "renderedLength": 1571,
       "gzipLength": 594,
       "brotliLength": 0,
-      "mainUid": "f796-118"
+      "mainUid": "9710-118"
     },
-    "f796-121": {
-      "renderedLength": 12591,
-      "gzipLength": 3262,
+    "9710-121": {
+      "renderedLength": 12277,
+      "gzipLength": 3110,
       "brotliLength": 0,
-      "mainUid": "f796-120"
+      "mainUid": "9710-120"
     }
   },
   "nodeMetas": {
-    "f796-108": {
+    "9710-108": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "f796-109"
+        "index.production.js": "9710-109"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "f796-110": {
+    "9710-110": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "f796-111"
+        "index.production.js": "9710-111"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "f796-112": {
+    "9710-112": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
       "moduleParts": {
-        "index.production.js": "f796-113"
+        "index.production.js": "9710-113"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "f796-114": {
+    "9710-114": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "f796-115"
+        "index.production.js": "9710-115"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "f796-116": {
+    "9710-116": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "f796-117"
+        "index.production.js": "9710-117"
       },
       "imported": [
         {
-          "uid": "f796-110"
+          "uid": "9710-110"
         },
         {
-          "uid": "f796-112"
+          "uid": "9710-112"
         },
         {
-          "uid": "f796-114"
+          "uid": "9710-114"
         }
       ],
       "importedBy": [
         {
-          "uid": "f796-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "f796-118": {
+    "9710-118": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "f796-119"
+        "index.production.js": "9710-119"
       },
       "imported": [
         {
-          "uid": "f796-123"
+          "uid": "9710-123"
         }
       ],
       "importedBy": [
         {
-          "uid": "f796-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "f796-120": {
+    "9710-120": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "f796-121"
+        "index.production.js": "9710-121"
       },
       "imported": [
         {
-          "uid": "f796-108"
+          "uid": "9710-108"
         },
         {
-          "uid": "f796-122"
+          "uid": "9710-122"
         },
         {
-          "uid": "f796-116"
+          "uid": "9710-116"
         },
         {
-          "uid": "f796-118"
+          "uid": "9710-118"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "f796-122": {
+    "9710-122": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-120"
+          "uid": "9710-120"
         }
       ],
       "isExternal": true
     },
-    "f796-123": {
+    "9710-123": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "f796-118"
+          "uid": "9710-118"
         }
       ],
       "isExternal": true

package/build/types/index.d.ts

@@ -106,5 +106,7 @@ declare function Outlet(): JSX.Element | null;
 declare function ErrorComponent({ error }: {
     error: any;
 }): JSX.Element;
+declare function useBlocker(message: string, when?: boolean | any): void;
+declare function Block({ message, when, children }: PromptProps): any;
 
-export { ErrorComponent, Link, LinkFn, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, MatchesProviderProps, Navigate, Outlet, PromptProps, ReactRouter, RouteComponent, RouterProps, RouterProvider, SyncRouteComponent, lazy, matchesContext, routerContext, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterContext, useSearch };
+export { Block, ErrorComponent, Link, LinkFn, LinkPropsOptions, MakeLinkOptions, MakeLinkPropsOptions, MakeMatchRouteOptions, MakeUseMatchRouteOptions, MatchRoute, MatchesProviderProps, Navigate, Outlet, PromptProps, ReactRouter, RouteComponent, RouterProps, RouterProvider, SyncRouteComponent, lazy, matchesContext, routerContext, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterContext, useSearch };

package/build/umd/index.development.js

@@ -142,10 +142,40 @@
   // making assumptions about the way TanStack Router works
 
   const popStateEvent = 'popstate';
+  const beforeUnloadEvent = 'beforeunload';
+  const beforeUnloadListener = event => {
+    event.preventDefault();
+    // @ts-ignore
+    return event.returnValue = '';
+  };
+  const stopBlocking = () => {
+    removeEventListener(beforeUnloadEvent, beforeUnloadListener, {
+      capture: true
+    });
+  };
   function createHistory(opts) {
     let currentLocation = opts.getLocation();
     let unsub = () => {};
     let listeners = new Set();
+    let blockers = [];
+    let queue = [];
+    const tryFlush = () => {
+      if (blockers.length) {
+        blockers[0]?.(tryFlush, () => {
+          blockers = [];
+          stopBlocking();
+        });
+        return;
+      }
+      while (queue.length) {
+        queue.shift()?.();
+      }
+      onUpdate();
+    };
+    const queueTask = task => {
+      queue.push(task);
+      tryFlush();
+    };
     const onUpdate = () => {
       currentLocation = opts.getLocation();
       listeners.forEach(listener => listener());
@@ -167,26 +197,45 @@
         };
       },
       push: (path, state) => {
-        opts.pushState(path, state);
-        onUpdate();
+        queueTask(() => {
+          opts.pushState(path, state);
+        });
       },
       replace: (path, state) => {
-        opts.replaceState(path, state);
-        onUpdate();
+        queueTask(() => {
+          opts.replaceState(path, state);
+        });
       },
       go: index => {
-        opts.go(index);
-        onUpdate();
+        queueTask(() => {
+          opts.go(index);
+        });
       },
       back: () => {
-        opts.back();
-        onUpdate();
+        queueTask(() => {
+          opts.back();
+        });
       },
       forward: () => {
-        opts.forward();
-        onUpdate();
+        queueTask(() => {
+          opts.forward();
+        });
       },
-      createHref: str => opts.createHref(str)
+      createHref: str => opts.createHref(str),
+      block: cb => {
+        blockers.push(cb);
+        if (blockers.length === 1) {
+          addEventListener(beforeUnloadEvent, beforeUnloadListener, {
+            capture: true
+          });
+        }
+        return () => {
+          blockers = blockers.filter(b => b !== cb);
+          if (!blockers.length) {
+            stopBlocking();
+          }
+        };
+      }
     };
   }
   function createBrowserHistory(opts) {
@@ -612,11 +661,11 @@
       this.router = opts.router;
       const allOptions = this.options;
       const isRoot = !allOptions?.path && !allOptions?.id;
-      const parent = this.options?.getParentRoute?.();
+      this.parentRoute = 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.`);
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
       }
       let path = isRoot ? rootRouteId : allOptions.path;
 
@@ -627,14 +676,14 @@
       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]);
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
       if (path === rootRouteId) {
         path = '/';
       }
       if (id !== rootRouteId) {
         id = joinPaths(['/', id]);
       }
-      const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parent.fullPath, path]));
+      const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([this.parentRoute.fullPath, path]));
       this.path = path;
       this.id = id;
       // this.customId = customId as TCustomId
@@ -644,10 +693,34 @@
       this.children = children;
       return this;
     };
-    generate = options => {
-      invariant(false, `route.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `);
-    };
+
+    // generate = (
+    //   options: Omit<
+    //     RouteOptions<
+    //       TParentRoute,
+    //       TCustomId,
+    //       TPath,
+    //       InferFullSearchSchema<TParentRoute>,
+    //       TSearchSchema,
+    //       TFullSearchSchema,
+    //       TParentRoute['__types']['allParams'],
+    //       TParams,
+    //       TAllParams,
+    //       TParentContext,
+    //       TAllParentContext,
+    //       TRouteContext,
+    //       TContext
+    //     >,
+    //     'path'
+    //   >,
+    // ) => {
+    //   invariant(
+    //     false,
+    //     `route.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);
@@ -1291,19 +1364,14 @@
       });
     };
     #buildRouteTree = routeTree => {
-      const recurseRoutes = routes => {
+      const recurseRoutes = (routes, parentRoute) => {
         routes.forEach((route, i) => {
           route.init({
             originalIndex: i,
             router: this
           });
           const existingRoute = this.routesById[route.id];
-          if (existingRoute) {
-            {
-              console.warn(`Duplicate routes found with id: ${String(route.id)}`, this.routesById, route);
-            }
-            throw new Error();
-          }
+          invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
           this.routesById[route.id] = route;
           const children = route.children;
           if (children?.length) {
@@ -1343,6 +1411,19 @@
         });
       };
       recurseRoutes([routeTree]);
+      const recurceCheckRoutes = (routes, parentRoute) => {
+        routes.forEach(route => {
+          if (route.isRoot) {
+            invariant(!parentRoute, 'Root routes can only be used as the root of a route tree.');
+          } else {
+            invariant(parentRoute ? route.parentRoute === parentRoute : true, `Expected a route with path "${route.path}" to be passed to its parent route "${route.parentRoute?.id}" in an addChildren() call, but was instead passed as a child of the "${parentRoute?.id}" route.`);
+          }
+          if (route.children) {
+            recurceCheckRoutes(route.children, route);
+          }
+        });
+      };
+      recurceCheckRoutes([routeTree], undefined);
       return routeTree;
     };
     #parseLocation = previousLocation => {
@@ -2104,34 +2185,31 @@
       }
     }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)));
   }
+  function useBlocker(message, when = true) {
+    const router = useRouter();
+    React__namespace.useEffect(() => {
+      if (!when) return;
+      let unblock = router.history.block((retry, cancel) => {
+        if (window.confirm(message)) {
+          unblock();
+          retry();
+        } else {
+          cancel();
+        }
+      });
+      return unblock;
+    });
+  }
+  function Block({
+    message,
+    when,
+    children
+  }) {
+    useBlocker(message, when);
+    return children ?? null;
+  }
 
-  // TODO: While we migrate away from the history package, these need to be disabled
-  // export function usePrompt(message: string, when: boolean | any): void {
-  //   const router = useRouter()
-
-  //   React.useEffect(() => {
-  //     if (!when) return
-
-  //     let unblock = router.getHistory().block((transition) => {
-  //       if (window.confirm(message)) {
-  //         unblock()
-  //         transition.retry()
-  //       } else {
-  //         router.setStore((s) => {
-  //           s.currentLocation.pathname = window.location.pathname
-  //         })
-  //       }
-  //     })
-
-  //     return unblock
-  //   }, [when, message])
-  // }
-
-  // export function Prompt({ message, when, children }: PromptProps) {
-  //   usePrompt(message, when ?? true)
-  //   return (children ?? null) as ReactNode
-  // }
-
+  exports.Block = Block;
   exports.ErrorComponent = ErrorComponent;
   exports.Link = Link;
   exports.MatchRoute = MatchRoute;
@@ -2176,6 +2254,7 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useBlocker = useBlocker;
   exports.useLinkProps = useLinkProps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;