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

package/build/stats-react.json

@@ -7,7 +7,7 @@
         "name": "index.production.js",
         "children": [
           {
-            "uid": "5d99-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": "5d99-111"
+                "uid": "9710-111"
               },
               {
                 "name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
-                "uid": "5d99-113"
+                "uid": "9710-113"
               }
             ]
           },
@@ -28,19 +28,19 @@
             "children": [
               {
                 "name": "store/build/esm/index.js",
-                "uid": "5d99-115"
+                "uid": "9710-115"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "5d99-117"
+                "uid": "9710-117"
               },
               {
                 "name": "react-store/build/esm/index.js",
-                "uid": "5d99-119"
+                "uid": "9710-119"
               },
               {
                 "name": "react-router/src/index.tsx",
-                "uid": "5d99-121"
+                "uid": "9710-121"
               }
             ]
           }
@@ -50,176 +50,176 @@
     "isRoot": true
   },
   "nodeParts": {
-    "5d99-109": {
+    "9710-109": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "5d99-108"
+      "mainUid": "9710-108"
     },
-    "5d99-111": {
+    "9710-111": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "5d99-110"
+      "mainUid": "9710-110"
     },
-    "5d99-113": {
+    "9710-113": {
       "renderedLength": 44,
       "gzipLength": 62,
       "brotliLength": 0,
-      "mainUid": "5d99-112"
+      "mainUid": "9710-112"
     },
-    "5d99-115": {
+    "9710-115": {
       "renderedLength": 1288,
       "gzipLength": 497,
       "brotliLength": 0,
-      "mainUid": "5d99-114"
+      "mainUid": "9710-114"
     },
-    "5d99-117": {
-      "renderedLength": 48257,
-      "gzipLength": 11461,
+    "9710-117": {
+      "renderedLength": 49433,
+      "gzipLength": 11720,
       "brotliLength": 0,
-      "mainUid": "5d99-116"
+      "mainUid": "9710-116"
     },
-    "5d99-119": {
+    "9710-119": {
       "renderedLength": 1571,
       "gzipLength": 594,
       "brotliLength": 0,
-      "mainUid": "5d99-118"
+      "mainUid": "9710-118"
     },
-    "5d99-121": {
-      "renderedLength": 12591,
-      "gzipLength": 3262,
+    "9710-121": {
+      "renderedLength": 12277,
+      "gzipLength": 3110,
       "brotliLength": 0,
-      "mainUid": "5d99-120"
+      "mainUid": "9710-120"
     }
   },
   "nodeMetas": {
-    "5d99-108": {
+    "9710-108": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "5d99-109"
+        "index.production.js": "9710-109"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "5d99-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": "5d99-111"
+        "index.production.js": "9710-111"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "5d99-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": "5d99-113"
+        "index.production.js": "9710-113"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "5d99-114": {
+    "9710-114": {
       "id": "/packages/store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5d99-115"
+        "index.production.js": "9710-115"
       },
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-116"
+          "uid": "9710-116"
         }
       ]
     },
-    "5d99-116": {
+    "9710-116": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5d99-117"
+        "index.production.js": "9710-117"
       },
       "imported": [
         {
-          "uid": "5d99-110"
+          "uid": "9710-110"
         },
         {
-          "uid": "5d99-112"
+          "uid": "9710-112"
         },
         {
-          "uid": "5d99-114"
+          "uid": "9710-114"
         }
       ],
       "importedBy": [
         {
-          "uid": "5d99-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "5d99-118": {
+    "9710-118": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "5d99-119"
+        "index.production.js": "9710-119"
       },
       "imported": [
         {
-          "uid": "5d99-123"
+          "uid": "9710-123"
         }
       ],
       "importedBy": [
         {
-          "uid": "5d99-120"
+          "uid": "9710-120"
         }
       ]
     },
-    "5d99-120": {
+    "9710-120": {
       "id": "/packages/react-router/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "5d99-121"
+        "index.production.js": "9710-121"
       },
       "imported": [
         {
-          "uid": "5d99-108"
+          "uid": "9710-108"
         },
         {
-          "uid": "5d99-122"
+          "uid": "9710-122"
         },
         {
-          "uid": "5d99-116"
+          "uid": "9710-116"
         },
         {
-          "uid": "5d99-118"
+          "uid": "9710-118"
         }
       ],
       "importedBy": [],
       "isEntry": true
     },
-    "5d99-122": {
+    "9710-122": {
       "id": "react",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-120"
+          "uid": "9710-120"
         }
       ],
       "isExternal": true
     },
-    "5d99-123": {
+    "9710-123": {
       "id": "use-sync-external-store/shim/with-selector",
       "moduleParts": {},
       "imported": [],
       "importedBy": [
         {
-          "uid": "5d99-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) {
@@ -2136,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;
@@ -2208,6 +2254,7 @@
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useBlocker = useBlocker;
   exports.useLinkProps = useLinkProps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;