bobe-router 0.0.67 → 0.0.69

package/dist/bobe-router.esm.js

@@ -1,4 +1,11 @@
-import { Store, StoreIgnoreKeys } from 'aoye';
+import { Store, StoreIgnoreKeys, effect } from 'aoye';
+
+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 = [];
@@ -36,7 +43,11 @@ function compileRoutes(map) {
   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;
@@ -46,19 +57,113 @@ function match(path, map) {
     }
     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,
@@ -70,260 +175,931 @@ function createRouteRecord(opts = {}) {
   };
 }
 class Router extends Store {
-  static [StoreIgnoreKeys] = ['routes', 'menus', 'stack', 'ready'];
+  static [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 = 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';
+  }
 }
 
-export { Router, createRouteRecord, match };
+export { Router, createRouteRecord };
 //# sourceMappingURL=bobe-router.esm.js.map