bobe-router 0.0.67 → 0.0.68

package/dist/index.umd.js

@@ -4,6 +4,13 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BobeRouter = {}, global.Aoye));
 })(this, (function (exports, aoye) { 'use strict';
 
+  let GlobalKey = function (GlobalKey) {
+    GlobalKey["Routes"] = "__BOBE_INIT_ROUTES__";
+    GlobalKey["Menus"] = "__BOBE_INIT_MENUS__";
+    GlobalKey["Path"] = "__BOBE_INIT_PATH__";
+    return GlobalKey;
+  }({});
+
   function compilePattern(pattern) {
     const paramNames = [];
     const regexStr = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&').replace(/:([a-zA-Z_]\w*)/g, (_, name) => {
@@ -40,7 +47,11 @@
     return compiledCache;
   }
   function match(path, map) {
-    const normalized = path.startsWith('/') ? path : `/${path}`;
+    const parsed = new URL(path, 'http://localhost');
+    let normalized = parsed.pathname;
+    if (normalized.length > 1 && normalized.endsWith('/')) {
+      normalized = normalized.slice(0, -1);
+    }
     for (const compiled of compileRoutes(map)) {
       const m = normalized.match(compiled.regex);
       if (!m) continue;
@@ -50,19 +61,113 @@
       }
       return {
         path: compiled.pattern,
-        params
+        params,
+        url: normalized
       };
     }
     return null;
   }
 
-  let GlobalKey = function (GlobalKey) {
-    GlobalKey["Routes"] = "__BOBE_INIT_ROUTES__";
-    GlobalKey["Menus"] = "__BOBE_INIT_MENUS__";
-    GlobalKey["Path"] = "__BOBE_INIT_PATH__";
-    return GlobalKey;
-  }({});
+  class NavigationTransactionRunner {
+    #nextTokenId = 0;
+    #currentTokenId = 0;
+    createToken(request) {
+      const token = {
+        id: ++this.#nextTokenId,
+        request,
+        cancelled: false
+      };
+      this.#currentTokenId = token.id;
+      return token;
+    }
+    isTokenValid(ctx) {
+      return !ctx.token.cancelled && ctx.token.id === this.#currentTokenId;
+    }
+    isTokenIdCurrent(tokenId) {
+      return tokenId === this.#currentTokenId;
+    }
+    cancelCurrent() {
+      this.#currentTokenId = ++this.#nextTokenId;
+    }
+    async run(router, handlers, request) {
+      const ctx = {
+        router,
+        request,
+        token: this.createToken(request),
+        status: 'running',
+        rollbackStack: []
+      };
+      let queue = [...handlers];
+      while (queue.length > 0) {
+        const handler = queue.shift();
+        let result;
+        try {
+          result = await handler(ctx);
+        } catch (error) {
+          ctx.error = error;
+          ctx.status = 'error';
+          await this.#rollback(ctx);
+          return {
+            status: ctx.status,
+            ctx,
+            error
+          };
+        }
+        if (!this.isTokenValid(ctx)) {
+          ctx.status = 'cancelled';
+          return {
+            status: ctx.status,
+            ctx
+          };
+        }
+        if (!result) continue;
+        if (result.type === 'stop') {
+          ctx.status = result.status ?? ctx.status;
+          return {
+            status: ctx.status,
+            ctx
+          };
+        }
+        if (result.type === 'prepend') {
+          queue.unshift(...result.handlers);
+          continue;
+        }
+        if (result.type === 'replace') {
+          queue = [...result.handlers];
+        }
+      }
+      if (ctx.status === 'running') ctx.status = 'completed';
+      return {
+        status: ctx.status,
+        ctx
+      };
+    }
+    stop(status = 'completed') {
+      return {
+        type: 'stop',
+        status
+      };
+    }
+    replace(handlers) {
+      return {
+        type: 'replace',
+        handlers
+      };
+    }
+    prepend(handlers) {
+      return {
+        type: 'prepend',
+        handlers
+      };
+    }
+    async #rollback(ctx) {
+      for (let i = ctx.rollbackStack.length - 1; i >= 0; i--) {
+        await ctx.rollbackStack[i](ctx);
+      }
+    }
+  }
 
+  const DEFAULT_HISTORY_KEY = '__bobe_router_runtime__';
   function createRouteRecord(opts = {}) {
     return {
       import: opts.import,
@@ -74,264 +179,934 @@
     };
   }
   class Router extends aoye.Store {
-    static [aoye.StoreIgnoreKeys] = ['routes', 'menus', 'stack', 'ready'];
+    static [aoye.StoreIgnoreKeys] = ['routes', 'menus', 'stack', 'ready', 'scrollRootId', 'historyKey', 'maxPreload', 'onError', 'loadTimeout', 'onTimeout'];
     active = null;
     routes = {};
     menus = [];
-    stack = [];
-    stackIndex = 0;
-    idleSet = new Set();
     maxPreload = 3;
-    loadingCount = 0;
+    historyKey = DEFAULT_HISTORY_KEY;
+    #stack = [];
+    #stackIndex = 0;
+    #ready = false;
+    #readyQueue = [];
+    #idleSet = new Set();
+    #loadingCount = 0;
+    #pendingHistoryDelta = null;
+    #initialHistoryState = null;
+    #transaction = new NavigationTransactionRunner();
+    #entryId = 0;
+    constructor(opt) {
+      super();
+      this.routes = opt?.routes || globalThis[GlobalKey.Routes] || {};
+      this.menus = globalThis[GlobalKey.Menus] || [];
+      this.enterGuard = opt?.enterGuard;
+      this.leaveGuard = opt?.leaveGuard;
+      this.onError = opt?.onError;
+      this.loadTimeout = opt?.loadTimeout;
+      this.onTimeout = opt?.onTimeout;
+      this.scrollRootId = opt?.scrollRootId;
+      this.maxPreload = opt?.maxPreload ?? this.maxPreload;
+      this.historyKey = opt?.historyKey || DEFAULT_HISTORY_KEY;
+      this.#initialHistoryState = this.#hasBrowser() ? this.#readHistoryState(history.state) : null;
+      const initialUrl = opt?.initialPath || globalThis[GlobalKey.Path] || (this.#hasBrowser() ? location.pathname + location.search + location.hash : '/');
+      this.#initIdleSet();
+      void this.#init(initialUrl);
+    }
     ready(cb) {
       if (cb) {
-        if (this.#inited) {
-          cb();
-        } else {
-          this.#readyQueue.push(cb);
-        }
+        if (this.#ready) cb();else this.#readyQueue.push(cb);
         return;
       }
       return new Promise(resolve => this.ready(resolve));
     }
-    #inited = false;
-    #readyQueue = [];
-    constructor(opt) {
-      super();
-      const routes = opt?.routes;
-      const initialPath = opt?.initialPath;
-      this.routes = routes || globalThis[GlobalKey.Routes] || {};
-      const injectedMenus = globalThis[GlobalKey.Menus];
-      if (injectedMenus) this.menus = injectedMenus;
-      const path = initialPath || globalThis[GlobalKey.Path] || (typeof location !== 'undefined' ? location.pathname : '/');
-      this.#init(path);
-    }
-    async #init(path) {
-      this.#initIdleSet();
-      const result = match(path, this.routes);
-      if (result) {
-        const route = this.routes[result.path];
-        if (route?.component) {
-          route.status = 'loaded';
-        } else {
-          await this.#loadComponent(result.path);
-        }
-        this.active = {
-          path,
-          params: result.params,
-          component: route?.component,
-          meta: route?.meta,
-          layout: route?.layout
+    async pushState(url) {
+      const request = {
+        source: 'api',
+        url,
+        historyMode: 'push',
+        runGuards: true,
+        restoreScroll: false
+      };
+      return this.#runNavigation(request, [this.#handleCreateUrlContext(request), this.#handleBuildRouteEntry, this.#handleSaveCurrentScroll, this.#handleRunGuards, this.#handleLoadComponent, this.#handleBuildCommitPlan('push', 'append', () => this.#stackIndex + 1), this.#handleCommitHistory, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload]);
+    }
+    async replaceState(url) {
+      const request = {
+        source: 'api',
+        url,
+        historyMode: 'replace',
+        runGuards: true,
+        restoreScroll: false
+      };
+      return this.#runNavigation(request, this.#replaceHandlers(request));
+    }
+    async back() {
+      return this.#goByDelta(-1);
+    }
+    async forward() {
+      return this.#goByDelta(1);
+    }
+    async go(delta) {
+      const request = {
+        source: 'api',
+        historyMode: 'browser-delta',
+        delta,
+        runGuards: true,
+        restoreScroll: true
+      };
+      if (delta === 0) {
+        return {
+          status: 'ignored',
+          ctx: {
+            router: this,
+            request,
+            token: {
+              id: 0,
+              request,
+              cancelled: false
+            },
+            status: 'ignored',
+            rollbackStack: []
+          }
         };
       }
-      this.stack = [{
-        path,
-        params: this.active?.params ?? {}
-      }];
-      this.stackIndex = 0;
+      return this.#goByDelta(delta, request);
+    }
+    async #init(url) {
+      const request = {
+        source: 'init',
+        url,
+        historyMode: 'replace',
+        runGuards: true,
+        restoreScroll: false
+      };
+      await this.#runNavigation(request, [this.#handleCreateUrlContext(request), this.#handleBuildRouteEntry, this.#handleRunGuards, this.#handleLoadComponent, this.#handleBuildCommitPlan('replace', 'replace-current', ctx => {
+        const existingState = this.#initialHistoryState;
+        if (existingState && ctx.to) ctx.to.id = existingState.entryId;
+        return existingState?.index ?? 0;
+      }), this.#handleCommitHistory, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload]);
       this.#initBrowser();
-      this.#inited = true;
-      const q = this.#readyQueue;
+      this.#ready = true;
+      const queue = this.#readyQueue;
       this.#readyQueue = [];
-      for (const cb of q) cb();
+      for (const cb of queue) cb();
     }
-    #initBrowser() {
-      if (typeof window === 'undefined') return;
-      document.addEventListener('click', this.#onClick);
-      window.addEventListener('popstate', this.#onPopstate);
+    async #goByDelta(delta, request) {
+      const currentRequest = request || {
+        source: 'api',
+        historyMode: 'browser-delta',
+        delta,
+        runGuards: true,
+        restoreScroll: true
+      };
+      if (!this.#hasBrowser()) {
+        return {
+          status: 'ignored',
+          ctx: {
+            router: this,
+            request: currentRequest,
+            token: {
+              id: 0,
+              request: currentRequest,
+              cancelled: false
+            },
+            status: 'ignored',
+            rollbackStack: []
+          }
+        };
+      }
+      return this.#runNavigation(currentRequest, [ctx => {
+        ctx.historyDelta = {
+          delta
+        };
+        ctx.from = this.active;
+      }, this.#handleResolveHistoryDeltaTarget, this.#handleBuildRouteEntryFromStack, this.#handleSaveCurrentScroll, this.#handleRunGuards, this.#handleLoadComponent, this.#handleSetPendingHistoryDelta, ctx => {
+        const delta = ctx.historyDelta?.delta;
+        if (!this.#hasBrowser() || typeof delta !== 'number') return;
+        history.go(delta);
+      }]);
     }
-    #initIdleSet() {
-      for (const path of Object.keys(this.routes)) {
-        if (this.routes[path].status === 'idle') {
-          this.idleSet.add(path);
-        }
+    async #runNavigation(request, handlers) {
+      const result = await this.#transaction.run(this, handlers, request);
+      if (result.status === 'error') {
+        await this.#notifyNavigationError(result.error, result.ctx);
       }
-      if (this.active) {
-        this.idleSet.delete(this.active.path);
+      return result;
+    }
+    async #notifyNavigationError(error, ctx) {
+      if (!this.onError) {
+        console.error(error);
+        return;
+      }
+      try {
+        await this.onError(error, ctx);
+      } catch (notifyError) {
+        console.error(notifyError);
       }
     }
-    async pushState(url) {
-      const result = match(url, this.routes);
-      if (!result) return;
-      const target = {
-        path: url,
-        params: result.params
-      };
-      this.stack.length = this.stackIndex + 1;
-      this.stack.push(target);
-      this.stackIndex = this.stack.length - 1;
-      await this.#navigate(target);
+    #replaceHandlers(request) {
+      return [this.#handleCreateUrlContext(request), this.#handleBuildRouteEntry, this.#handleRunGuards, this.#handleLoadComponent, this.#handleBuildCommitPlan('replace', 'replace-current', () => this.#stackIndex), this.#handleCommitHistory, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload];
     }
-    async replaceState(url) {
-      const result = match(url, this.routes);
-      if (!result) return;
-      const target = {
-        path: url,
-        params: result.params
-      };
-      this.stack[this.stackIndex] = target;
-      await this.#navigate(target, {
-        replace: true
-      });
+    #hashOnlyScrollHandlers(url) {
+      return [ctx => {
+        ctx.url = url;
+        ctx.from = this.active;
+        ctx.to = this.active ?? undefined;
+        ctx.scrollIntent = this.#createScrollIntentFromUrl(url, undefined, false);
+        ctx.commitPlan = {
+          historyAction: 'none',
+          stackAction: 'none',
+          scrollIntent: ctx.scrollIntent
+        };
+        if (this.active) {
+          const parsed = this.#parseUrl(url);
+          this.active.url = url;
+          this.active.hash = parsed.hash;
+          if (this.#stack[this.#stackIndex]?.id === this.active.id) {
+            this.#stack[this.#stackIndex].url = url;
+            this.#stack[this.#stackIndex].hash = parsed.hash;
+          }
+        }
+      }, this.#handlePrepareScrollWaiter, this.#handleScroll];
     }
-    async back() {
-      if (this.stackIndex <= 0) return;
-      if (!(await this.#checkGuard(this.active, 'leave'))) return;
-      const target = this.stack[this.stackIndex - 1];
-      if (!(await this.#checkGuard(target, 'enter'))) return;
-      history.back();
+    #handleCreateUrlContext(request) {
+      return ctx => {
+        ctx.request = request;
+        ctx.url = request.url;
+        ctx.from = this.active;
+      };
     }
-    async forward() {
-      if (this.stackIndex >= this.stack.length - 1) return;
-      if (!(await this.#checkGuard(this.active, 'leave'))) return;
-      const target = this.stack[this.stackIndex + 1];
-      if (!(await this.#checkGuard(target, 'enter'))) return;
-      history.forward();
+    #handleBuildRouteEntry = ctx => {
+      if (!ctx.url) return this.#transaction.stop('ignored');
+      const routeMatch = this.#matchUrl(ctx.url);
+      if (!routeMatch) return this.#transaction.stop('ignored');
+      ctx.match = routeMatch;
+      ctx.to = this.#createRouteEntry(routeMatch);
+      ctx.scrollIntent = this.#createScrollIntentFromUrl(ctx.to.url);
+    };
+    #handleBuildRouteEntryFromStack = ctx => {
+      const target = ctx.historyDelta?.targetEntry;
+      if (!target) {
+        this.#allowExternalHistoryDelta(ctx);
+        return this.#transaction.stop('completed');
+      }
+      ctx.to = target;
+      ctx.url = target.url;
+      const routeMatch = this.#matchUrl(target.url);
+      if (routeMatch) ctx.match = routeMatch;
+      ctx.scrollIntent = target.scroll ? this.#createRestoreScrollIntent(target.scroll) : this.#createScrollIntentFromUrl(target.url);
+    };
+    #handleBuildRouteEntryFromHistoryState(state) {
+      return ctx => {
+        const entry = this.#stack[state.index];
+        ctx.historyDelta = {
+          delta: state.index - this.#stackIndex,
+          targetState: state,
+          targetEntry: entry
+        };
+        if (entry && entry.id === state.entryId) {
+          ctx.to = entry;
+          ctx.url = entry.url;
+          const routeMatch = this.#matchUrl(entry.url);
+          if (routeMatch) ctx.match = routeMatch;
+          ctx.scrollIntent = entry.scroll ? this.#createRestoreScrollIntent(entry.scroll) : this.#createScrollIntentFromUrl(entry.url);
+          return;
+        }
+        const routeMatch = this.#matchUrl(ctx.url || state.url);
+        if (!routeMatch) return this.#transaction.stop('ignored');
+        ctx.match = routeMatch;
+        ctx.to = this.#createRouteEntry(routeMatch, state.entryId);
+        ctx.historyDelta.targetEntry = ctx.to;
+        ctx.scrollIntent = this.#createScrollIntentFromUrl(ctx.to.url);
+      };
     }
-    async go(delta) {
-      if (delta === 0) return;
-      const newIdx = this.stackIndex + delta;
-      if (newIdx < 0 || newIdx >= this.stack.length) return;
-      if (!(await this.#checkGuard(this.active, 'leave'))) return;
-      if (!(await this.#checkGuard(this.stack[newIdx], 'enter'))) return;
-      history.go(delta);
+    #handleResolveHistoryDeltaTarget = ctx => {
+      const delta = ctx.historyDelta?.delta ?? 0;
+      const nextIndex = this.#stackIndex + delta;
+      if (nextIndex < 0 || nextIndex >= this.#stack.length || !this.#stack[nextIndex]) {
+        this.#allowExternalHistoryDelta(ctx);
+        return this.#transaction.stop('completed');
+      }
+      ctx.historyDelta = {
+        delta,
+        targetEntry: this.#stack[nextIndex],
+        targetState: this.#createHistoryState(this.#stack[nextIndex], nextIndex)
+      };
+    };
+    #handleRunGuards = async ctx => {
+      if (ctx.request && !ctx.request.runGuards) {
+        ctx.guard = {
+          type: 'allowed'
+        };
+        return;
+      }
+      if (!ctx.to) return this.#transaction.stop('ignored');
+      const decision = await this.#runGuardsOnce(ctx.from ?? null, ctx.to);
+      if (!this.#transaction.isTokenValid(ctx)) return this.#transaction.stop('cancelled');
+      ctx.guard = decision;
+      if (decision.type === 'allowed') return;
+      if (decision.type === 'blocked') {
+        this.#rollbackBrowserHistoryIfNeeded(ctx);
+        return this.#transaction.stop('blocked');
+      }
+      return this.#transaction.replace(this.#replaceHandlers({
+        source: 'redirect',
+        url: decision.to,
+        historyMode: 'replace',
+        runGuards: true,
+        restoreScroll: false
+      }));
+    };
+    #handleLoadComponent = async ctx => {
+      if (!ctx.to) return this.#transaction.stop('ignored');
+      const pattern = ctx.match?.pattern || this.#matchUrl(ctx.to.url)?.pattern || ctx.to.path;
+      await this.#loadComponentWithTimeout(pattern, ctx);
+      if (!this.#transaction.isTokenValid(ctx)) return this.#transaction.stop('cancelled');
+      this.#syncRouteRecordToEntry(ctx.to, pattern);
+    };
+    #handleSaveCurrentScroll = () => {
+      this.#saveScroll(this.#stackIndex);
+    };
+    #handleBuildCommitPlan(historyAction, stackAction, getNextStackIndex) {
+      return ctx => {
+        if (!ctx.to) return this.#transaction.stop('ignored');
+        const nextStackIndex = getNextStackIndex(ctx);
+        ctx.commitPlan = {
+          historyState: this.#createHistoryState(ctx.to, nextStackIndex),
+          historyAction,
+          stackAction,
+          nextStackIndex,
+          scrollIntent: ctx.scrollIntent
+        };
+      };
     }
-    navId = 0;
-    async #navigate(target, opts = {}) {
-      const id = ++this.navId;
-      if (!(await this.#checkGuard(this.active, 'leave'))) return;
-      if (id !== this.navId) return;
-      if (!(await this.#checkGuard(target, 'enter'))) return;
-      if (id !== this.navId) return;
-      if (this.active && this.stack[this.stackIndex]) {
-        this.stack[this.stackIndex].scroll = window.scrollY;
-      }
-      if (!opts.replace) {
-        history.pushState(null, '', target.path);
+    #handleBuildPopstateMoveCommitPlan(state) {
+      return ctx => {
+        if (!ctx.to) return this.#transaction.stop('ignored');
+        const hasMemoryEntry = !!this.#stack[state.index] && this.#stack[state.index].id === state.entryId;
+        ctx.commitPlan = {
+          historyState: hasMemoryEntry ? state : this.#createHistoryState(ctx.to, 0),
+          historyAction: hasMemoryEntry ? 'none' : 'replace',
+          stackAction: hasMemoryEntry ? 'move-index' : 'reset',
+          nextStackIndex: hasMemoryEntry ? state.index : 0,
+          scrollIntent: ctx.scrollIntent
+        };
+      };
+    }
+    #handleCommitHistory = ctx => {
+      const action = ctx.commitPlan?.historyAction;
+      if (!action || action === 'none') return;
+      if (!this.#hasBrowser() || !ctx.to || !ctx.commitPlan?.historyState) return;
+      const previousState = history.state;
+      const previousUrl = this.#toUrlString(location);
+      if (action === 'push') {
+        history.pushState(ctx.commitPlan.historyState, '', ctx.to.url);
+        ctx.rollbackStack.push(() => {
+          if (this.#hasBrowser()) history.go(-1);
+        });
       } else {
-        history.replaceState(null, '', target.path);
-      }
-      await this.#loadComponent(target.path);
-      if (id !== this.navId) return;
-      const route = this.routes[target.path];
-      target.component = route?.component;
-      target.meta = route?.meta;
-      target.layout = route?.layout;
-      this.active = target;
-      const hash = new URL(target.path, location.origin).hash;
-      if (hash) {
-        const el = document.querySelector(decodeURIComponent(hash));
-        if (el) el.scrollIntoView({
-          behavior: 'smooth'
+        history.replaceState(ctx.commitPlan.historyState, '', ctx.to.url);
+        ctx.rollbackStack.push(() => {
+          if (this.#hasBrowser()) history.replaceState(previousState, '', previousUrl);
         });
       }
+    };
+    #handleCommitStack = ctx => {
+      const action = ctx.commitPlan?.stackAction;
+      if (!action || action === 'none') return;
+      const previousStack = this.#stack.slice();
+      const previousStackIndex = this.#stackIndex;
+      const rollbackStack = () => {
+        this.#stack = previousStack;
+        this.#stackIndex = previousStackIndex;
+      };
+      if (action === 'move-index') {
+        const nextIndex = ctx.commitPlan?.nextStackIndex;
+        if (typeof nextIndex !== 'number' || !this.#stack[nextIndex]) {
+          return this.#transaction.stop('ignored');
+        }
+        this.#stackIndex = nextIndex;
+        ctx.to = ctx.to || this.#stack[nextIndex];
+        ctx.rollbackStack.push(rollbackStack);
+        return;
+      }
+      if (!ctx.to) return this.#transaction.stop('ignored');
+      if (action === 'append') {
+        this.#stack.length = this.#stackIndex + 1;
+        this.#stack.push(ctx.to);
+        this.#stackIndex = this.#stack.length - 1;
+        ctx.rollbackStack.push(rollbackStack);
+        return;
+      }
+      if (action === 'replace-current') {
+        const nextIndex = ctx.commitPlan?.nextStackIndex ?? this.#stackIndex;
+        this.#stack[nextIndex] = ctx.to;
+        this.#stackIndex = nextIndex;
+        ctx.rollbackStack.push(rollbackStack);
+        return;
+      }
+      if (action === 'reset') {
+        this.#stack = [ctx.to];
+        this.#stackIndex = 0;
+        ctx.rollbackStack.push(rollbackStack);
+      }
+    };
+    #handleSetActive = ctx => {
+      if (!ctx.to) return this.#transaction.stop('ignored');
+      const previousActive = this.active;
+      this.active = ctx.to;
+      ctx.rollbackStack.push(() => {
+        this.active = previousActive;
+      });
+    };
+    #handleRegisterPopstateRollback = ctx => {
+      if (!this.#hasBrowser()) return;
+      if (ctx.request?.source === 'popstate') {
+        const delta = ctx.historyDelta?.delta;
+        if (typeof delta === 'number' && delta !== 0) {
+          ctx.rollbackStack.push(() => {
+            if (this.#hasBrowser()) history.go(-delta);
+          });
+        }
+        return;
+      }
+      if (ctx.request?.source === 'external-popstate' && ctx.from) {
+        const previousEntry = ctx.from;
+        const previousState = this.#createHistoryState(previousEntry, this.#stackIndex);
+        ctx.rollbackStack.push(() => {
+          if (this.#hasBrowser()) history.replaceState(previousState, '', previousEntry.url);
+        });
+      }
+    };
+    #handleSetPendingHistoryDelta = ctx => {
+      const delta = ctx.historyDelta?.delta;
+      const target = ctx.historyDelta?.targetEntry;
+      if (typeof delta !== 'number' || !target) {
+        return this.#transaction.stop('ignored');
+      }
+      const toIndex = this.#stackIndex + delta;
+      this.#pendingHistoryDelta = {
+        tokenId: ctx.token.id,
+        delta,
+        fromIndex: this.#stackIndex,
+        toIndex,
+        targetEntryId: target.id,
+        targetUrl: target.url,
+        consumed: false
+      };
+    };
+    #handlePrepareScrollWaiter = ctx => {
+      const scrollIntent = ctx.scrollIntent || ctx.commitPlan?.scrollIntent;
+      if (!scrollIntent) return;
+      const needsActiveRender = ctx.commitPlan?.stackAction !== 'none';
+      const renderWaiter = needsActiveRender ? this.#createPostEffectWaiter() : this.#createFallbackWaiter(scrollIntent.retry.wait);
+      ctx.renderWaiter = renderWaiter;
+      if (ctx.commitPlan) ctx.commitPlan.renderWaiter = renderWaiter;
+      ctx.rollbackStack.push(() => renderWaiter.dispose?.());
+    };
+    #handleScroll = async ctx => {
+      const scrollIntent = ctx.scrollIntent || ctx.commitPlan?.scrollIntent;
+      if (!scrollIntent) return;
+      const waiter = ctx.renderWaiter || ctx.commitPlan?.renderWaiter || this.#createFallbackWaiter(scrollIntent.retry.wait);
+      await waiter.promise;
+      waiter.dispose?.();
+      if (!this.#transaction.isTokenValid(ctx)) return this.#transaction.stop('cancelled');
+      await this.#applyScrollIntent(ctx, scrollIntent);
+    };
+    #handleStartIdlePreload = () => {
       this.#preloadNext();
+    };
+    #initBrowser() {
+      if (!this.#hasBrowser()) return;
+      if ('scrollRestoration' in history) {
+        history.scrollRestoration = 'manual';
+      }
+      document.addEventListener('click', this.#onClick);
+      window.addEventListener('popstate', this.#onPopstate);
+    }
+    #onClick = event => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const link = target.closest('a');
+      if (!link) return;
+      const href = link.getAttribute('href');
+      if (!href) return;
+      try {
+        const url = new URL(href, location.origin);
+        if (url.origin !== location.origin) return;
+        if (link.target === '_blank' || link.hasAttribute('download')) return;
+        if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+        const nextUrl = this.#toUrlString(url);
+        if (href.startsWith('#') && !this.#isHashOnlyForActive(nextUrl)) return;
+        event.preventDefault();
+        if (this.active && this.#isSameRouteBase(nextUrl, this.active.url) && this.#toUrlString(location) !== nextUrl) {
+          void this.#runNavigation(undefined, this.#hashOnlyScrollHandlers(nextUrl));
+          this.active.url = nextUrl;
+          this.active.hash = url.hash;
+          if (this.#stack[this.#stackIndex]) {
+            this.#stack[this.#stackIndex].url = nextUrl;
+            this.#stack[this.#stackIndex].hash = url.hash;
+          }
+          history.pushState({
+            ...this.#createHistoryState(this.active, this.#stackIndex),
+            url: nextUrl
+          }, '', nextUrl);
+          return;
+        }
+        void this.pushState(nextUrl);
+      } catch {}
+    };
+    #onPopstate = event => {
+      void this.#handlePopstate(event).catch(error => {
+        console.error(error);
+      });
+    };
+    async #handlePopstate(event) {
+      const url = this.#toUrlString(location);
+      const state = this.#readHistoryState(event.state);
+      if (state && this.#isValidPendingHistoryDelta(state, url)) {
+        const entry = this.#stack[state.index];
+        const scrollIntent = entry.scroll ? this.#createRestoreScrollIntent(entry.scroll) : this.#createScrollIntentFromUrl(entry.url);
+        await this.#runNavigation(undefined, [ctx => {
+          if (!this.#pendingHistoryDelta) return this.#transaction.stop('ignored');
+          this.#pendingHistoryDelta.consumed = true;
+          this.#pendingHistoryDelta = null;
+        }, ctx => {
+          ctx.to = entry;
+          ctx.url = entry.url;
+          ctx.scrollIntent = scrollIntent;
+          ctx.commitPlan = {
+            historyState: state,
+            historyAction: 'none',
+            stackAction: 'move-index',
+            nextStackIndex: state.index,
+            scrollIntent
+          };
+        }, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload]);
+        return;
+      }
+      if (this.#isHashOnlyForActive(url) && (!state || state.index === this.#stackIndex)) {
+        await this.#runNavigation(undefined, this.#hashOnlyScrollHandlers(url));
+        return;
+      }
+      if (!state) {
+        const request = {
+          source: 'external-popstate',
+          url,
+          historyMode: 'replace',
+          runGuards: true,
+          restoreScroll: false
+        };
+        await this.#runNavigation(undefined, [this.#handleCreateUrlContext(request), this.#handleBuildRouteEntry, this.#handleSaveCurrentScroll, this.#handleRegisterPopstateRollback, this.#handleRunGuards, this.#handleLoadComponent, this.#handleBuildCommitPlan('replace', 'reset', () => 0), this.#handleCommitHistory, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload]);
+        return;
+      }
+      const request = {
+        source: 'popstate',
+        url,
+        historyMode: 'none',
+        runGuards: true,
+        restoreScroll: true
+      };
+      await this.#runNavigation(undefined, [this.#handleCreateUrlContext(request), this.#handleBuildRouteEntryFromHistoryState(state), this.#handleSaveCurrentScroll, this.#handleRegisterPopstateRollback, this.#handleRunGuards, this.#handleLoadComponent, this.#handleBuildPopstateMoveCommitPlan(state), this.#handleCommitHistory, this.#handleCommitStack, this.#handlePrepareScrollWaiter, this.#handleSetActive, this.#handleScroll, this.#handleStartIdlePreload]);
     }
-    async #checkGuard(entry, type) {
-      if (type === 'enter' && this.enterGuard) {
-        const result = await this.enterGuard(entry);
-        if (result === false) return false;
-        if (typeof result === 'object' && !result.ok) return false;
+    async #runGuardsOnce(from, to) {
+      if (from && this.leaveGuard) {
+        const result = await this.leaveGuard(from);
+        const decision = this.#toGuardDecision(result);
+        if (decision.type !== 'allowed') return decision;
       }
-      if (type === 'leave' && this.leaveGuard) {
-        const result = await this.leaveGuard(entry);
-        if (result === false) return false;
-        if (typeof result === 'object' && !result.ok) return false;
+      if (this.enterGuard) {
+        const result = await this.enterGuard(to);
+        return this.#toGuardDecision(result);
       }
-      return true;
+      return {
+        type: 'allowed'
+      };
     }
-    async #loadComponent(path) {
-      const route = this.routes[path];
-      if (!route) return undefined;
+    #toGuardDecision(result) {
+      if (result === false) return {
+        type: 'blocked',
+        result
+      };
+      if (result === true) return {
+        type: 'allowed'
+      };
+      if (result && typeof result === 'object') {
+        if (result.redirect) return {
+          type: 'redirect',
+          to: result.redirect,
+          result
+        };
+        if (!result.ok) return {
+          type: 'blocked',
+          result
+        };
+        return {
+          type: 'allowed'
+        };
+      }
+      return {
+        type: 'allowed'
+      };
+    }
+    async #loadComponent(pattern, counted = false) {
+      const route = this.routes[pattern];
+      if (!route) {
+        if (counted) this.#loadingCount--;
+        return undefined;
+      }
       switch (route.status) {
         case 'loaded':
+          if (counted) this.#loadingCount--;
           return route.component;
         case 'loading':
+          if (counted) this.#loadingCount--;
           return route.promise;
       }
       if (!route.import) {
-        throw new Error(`Route "${path}" has no import function`);
+        if (route.component) {
+          route.status = 'loaded';
+          if (counted) this.#loadingCount--;
+          return route.component;
+        }
+        if (counted) this.#loadingCount--;
+        throw new Error(`Route "${pattern}" has no import function`);
       }
-      this.idleSet.delete(path);
+      this.#idleSet.delete(pattern);
       route.status = 'loading';
+      if (!counted) this.#loadingCount++;
       route.promise = route.import().then(mod => {
-        const Comp = mod.default || mod;
+        const record = mod;
+        const component = typeof mod === 'function' ? mod : record.default || mod;
         route.status = 'loaded';
-        route.component = Comp;
-        if (!route.meta && mod.routeMeta) {
-          route.meta = mod.routeMeta;
-        }
-        if (!route.layout && mod.layout) {
-          route.layout = mod.layout;
-        }
+        route.component = component;
+        if (!route.meta && record.routeMeta) route.meta = record.routeMeta;
+        if (!route.layout && record.layout) route.layout = record.layout;
         return route.component;
-      }).catch(err => {
+      }).catch(error => {
         route.status = 'error';
-        throw err;
+        throw error;
       }).finally(() => {
-        this.loadingCount--;
+        this.#loadingCount--;
         this.#preloadNext();
       });
       return route.promise;
     }
+    async #loadComponentWithTimeout(pattern, ctx) {
+      const promise = this.#loadComponent(pattern);
+      const timeout = this.loadTimeout;
+      if (!timeout || timeout <= 0) {
+        return promise;
+      }
+      let timeoutId;
+      const timeoutPromise = new Promise(resolve => {
+        timeoutId = setTimeout(() => resolve('timeout'), timeout);
+      });
+      let result;
+      try {
+        result = await Promise.race([promise, timeoutPromise]);
+      } finally {
+        if (timeoutId) clearTimeout(timeoutId);
+      }
+      if (result !== 'timeout') {
+        return result;
+      }
+      const decision = this.onTimeout ? await this.onTimeout(ctx) : 'continue';
+      if (decision === 'cancel') {
+        throw new Error(`Route "${pattern}" import timed out after ${timeout}ms`);
+      }
+      return promise;
+    }
     #preloadNext() {
-      while (this.loadingCount < this.maxPreload && this.idleSet.size > 0) {
-        const path = this.idleSet.values().next().value;
-        this.loadingCount++;
+      if (!this.#hasBrowser()) return;
+      while (this.#loadingCount < this.maxPreload && this.#idleSet.size > 0) {
+        const path = this.#idleSet.values().next().value;
+        if (!path) return;
+        this.#idleSet.delete(path);
+        this.#loadingCount++;
+        const task = {
+          path};
         const scheduler = typeof requestIdleCallback !== 'undefined' ? requestIdleCallback : fn => setTimeout(fn, 0);
         scheduler(() => {
-          this.#loadComponent(path);
+          this.#loadComponent(task.path, true).catch(error => {
+            const route = this.routes[task.path];
+            if (route) route.status = 'error';
+            console.error(error);
+          });
         });
       }
     }
-    #onClick = e => {
-      const link = e.target.closest('a');
-      if (!link) return;
-      const href = link.getAttribute('href');
-      if (!href) return;
-      if (href.startsWith('#')) return;
-      try {
-        const url = new URL(href, location.origin);
-        if (url.origin !== location.origin) return;
-        if (link.target === '_blank') return;
-        if (link.hasAttribute('download')) return;
-        if (e.ctrlKey || e.metaKey || e.shiftKey) return;
-        e.preventDefault();
-        this.pushState(url.pathname + url.search + url.hash);
-      } catch {}
-    };
-    #onPopstate = () => {
-      const current = location.pathname + location.search;
-      const idx = this.stack.findLastIndex(r => r.path === current);
-      if (idx !== -1) {
-        if (idx === this.stackIndex) return;
-        this.stackIndex = idx;
-        const entry = this.stack[idx];
-        this.#navigate(entry, {
-          replace: true
-        });
-        if (entry.scroll != null) {
-          window.scrollTo(0, entry.scroll);
+    async #applyScrollIntent(ctx, intent) {
+      const retry = {
+        ...intent.retry
+      };
+      while (true) {
+        if (!this.#transaction.isTokenValid(ctx)) return;
+        if (intent.type === 'hash') {
+          const el = this.#queryHashElement(intent.hash);
+          if (el) {
+            el.scrollIntoView({
+              behavior: intent.behavior ?? 'smooth'
+            });
+            return;
+          }
+        } else if (intent.type === 'restore') {
+          const target = this.#getScrollTarget();
+          if (target) {
+            this.#setScroll(target.root, intent.top, intent.left);
+            return;
+          }
+        } else {
+          const target = this.#getScrollTarget();
+          if (target) {
+            this.#setScroll(target.root, 0, 0);
+            return;
+          }
         }
-      } else {
-        const result = match(current, this.routes);
-        const route = result ? this.routes[result.path] : undefined;
-        const entry = {
-          path: current,
-          params: result?.params ?? {},
-          meta: route?.meta,
-          layout: route?.layout
+        if (retry.attempts >= retry.maxAttempts) return;
+        retry.attempts++;
+        await this.#createFallbackWaiter('raf').promise;
+      }
+    }
+    #createPostEffectWaiter() {
+      if (!this.#hasBrowser()) return this.#createFallbackWaiter('resolved');
+      let dispose;
+      const promise = new Promise(resolve => {
+        const watcher = aoye.effect(() => {
+          resolve();
+          queueMicrotask(() => dispose?.());
+        }, [() => this.active], {
+          type: 'post',
+          immediate: false
+        });
+        dispose = () => watcher.dispose();
+      });
+      return {
+        promise: promise.finally(() => dispose?.()),
+        source: 'post-effect',
+        dispose: () => dispose?.()
+      };
+    }
+    #createFallbackWaiter(wait) {
+      if (wait === 'raf' && typeof requestAnimationFrame !== 'undefined') {
+        return {
+          promise: new Promise(resolve => requestAnimationFrame(() => resolve())),
+          source: 'raf'
         };
-        this.stack = [entry];
-        this.stackIndex = 0;
-        this.active = entry;
       }
-    };
+      return {
+        promise: Promise.resolve(),
+        source: 'resolved'
+      };
+    }
+    #createScrollIntentFromUrl(url, snapshot, renderDependent = true) {
+      const parsed = this.#parseUrl(url);
+      const retry = this.#createRetry(renderDependent ? 'post-effect' : 'raf');
+      if (parsed.hash) {
+        return {
+          type: 'hash',
+          hash: parsed.hash,
+          retry,
+          behavior: 'smooth'
+        };
+      }
+      if (snapshot) {
+        return {
+          type: 'restore',
+          top: snapshot.top,
+          left: snapshot.left,
+          retry
+        };
+      }
+      return {
+        type: 'top',
+        retry
+      };
+    }
+    #createRestoreScrollIntent(snapshot) {
+      return {
+        type: 'restore',
+        top: snapshot.top,
+        left: snapshot.left,
+        retry: this.#createRetry('post-effect')
+      };
+    }
+    #createRetry(wait) {
+      return {
+        attempts: 0,
+        maxAttempts: 8,
+        wait
+      };
+    }
+    #saveScroll(index) {
+      const entry = this.#stack[index];
+      if (!entry || !this.#hasBrowser()) return;
+      entry.scroll = this.#getScrollSnapshot();
+    }
+    #getScrollSnapshot() {
+      const target = this.#getScrollTarget();
+      if (!target) return {
+        top: 0,
+        left: 0
+      };
+      if (target.root === window) {
+        return {
+          top: window.scrollY,
+          left: window.scrollX
+        };
+      }
+      return {
+        top: target.root.scrollTop,
+        left: target.root.scrollLeft
+      };
+    }
+    #getScrollTarget() {
+      if (!this.#hasBrowser()) return null;
+      if (this.scrollRootId) {
+        const el = document.getElementById(this.scrollRootId);
+        if (el) return {
+          root: el,
+          scrollRootId: this.scrollRootId
+        };
+      }
+      return {
+        root: window,
+        scrollRootId: this.scrollRootId
+      };
+    }
+    #setScroll(root, top, left) {
+      if (root === window) {
+        window.scrollTo(left, top);
+        return;
+      }
+      const el = root;
+      el.scrollTop = top;
+      el.scrollLeft = left;
+    }
+    #queryHashElement(hash) {
+      if (typeof document === 'undefined' || !hash) return null;
+      try {
+        return document.querySelector(decodeURIComponent(hash));
+      } catch {
+        return null;
+      }
+    }
+    #allowExternalHistoryDelta(ctx) {
+      const delta = ctx.historyDelta?.delta;
+      if (!this.#hasBrowser() || typeof delta !== 'number') return;
+      history.go(delta);
+    }
+    #rollbackBrowserHistoryIfNeeded(ctx) {
+      const delta = ctx.historyDelta?.delta;
+      if (ctx.request?.source !== 'popstate') return;
+      if (!this.#hasBrowser() || typeof delta !== 'number') return;
+      history.go(-delta);
+    }
+    #isValidPendingHistoryDelta(state, url) {
+      const pending = this.#pendingHistoryDelta;
+      if (!pending || pending.consumed) return false;
+      if (!this.#transaction.isTokenIdCurrent(pending.tokenId)) return false;
+      if (state.historyKey !== this.historyKey) return false;
+      if (state.index !== pending.toIndex) return false;
+      if (state.entryId !== pending.targetEntryId) return false;
+      if (this.#normalizeUrl(url) !== this.#normalizeUrl(pending.targetUrl)) return false;
+      return true;
+    }
+    #readHistoryState(state) {
+      if (!state || typeof state !== 'object') return null;
+      const value = state;
+      if (!value.__bobeRouter || value.historyKey !== this.historyKey) return null;
+      if (typeof value.entryId !== 'string' || typeof value.index !== 'number') return null;
+      return value;
+    }
+    #createHistoryState(entry, index) {
+      return {
+        __bobeRouter: true,
+        historyKey: this.historyKey,
+        entryId: entry.id,
+        index,
+        url: entry.url
+      };
+    }
+    #createRouteEntry(routeMatch, id = this.#createEntryId()) {
+      return {
+        id,
+        path: routeMatch.url,
+        url: this.#buildUrl(routeMatch.url, routeMatch.search, routeMatch.hash),
+        hash: routeMatch.hash,
+        params: routeMatch.params,
+        component: routeMatch.record.component,
+        meta: routeMatch.record.meta,
+        layout: routeMatch.record.layout
+      };
+    }
+    #syncRouteRecordToEntry(entry, pattern) {
+      const route = this.routes[pattern];
+      if (!route) return;
+      entry.component = route.component;
+      entry.meta = route.meta;
+      entry.layout = route.layout;
+    }
+    #matchUrl(url) {
+      const result = match(url, this.routes);
+      if (!result) return null;
+      const parsed = this.#parseUrl(url);
+      const record = this.routes[result.path];
+      if (!record) return null;
+      return {
+        pattern: result.path,
+        path: result.path,
+        url: result.url,
+        search: parsed.search,
+        hash: parsed.hash,
+        params: result.params,
+        record
+      };
+    }
+    #parseUrl(url) {
+      const base = this.#hasBrowser() ? location.origin : 'http://localhost';
+      return new URL(url, base);
+    }
+    #buildUrl(path, search = '', hash = '') {
+      return `${path}${search}${hash}`;
+    }
+    #normalizePath(path) {
+      const result = match(path, this.routes);
+      return result?.url || path;
+    }
+    #normalizeUrl(url) {
+      const parsed = this.#parseUrl(url);
+      return this.#buildUrl(this.#normalizePath(parsed.pathname), parsed.search, parsed.hash);
+    }
+    #isSameRouteBase(left, right) {
+      const a = this.#parseUrl(left);
+      const b = this.#parseUrl(right);
+      return this.#normalizePath(a.pathname) === this.#normalizePath(b.pathname) && a.search === b.search;
+    }
+    #toUrlString(url) {
+      return `${url.pathname}${url.search}${url.hash}`;
+    }
+    #isHashOnlyForActive(url) {
+      if (!this.active) return false;
+      return this.#isSameRouteBase(url, this.active.url);
+    }
+    #createEntryId() {
+      this.#entryId++;
+      return `${this.historyKey}:${this.#entryId}`;
+    }
+    #initIdleSet() {
+      for (const path of Object.keys(this.routes)) {
+        if (this.routes[path].status === 'idle') {
+          this.#idleSet.add(path);
+        }
+      }
+    }
+    #hasBrowser() {
+      return typeof window !== 'undefined' && typeof document !== 'undefined' && typeof history !== 'undefined';
+    }
   }
 
   exports.Router = Router;
   exports.createRouteRecord = createRouteRecord;
-  exports.match = match;
 
 }));
 //# sourceMappingURL=index.umd.js.map