@wavelengthusaf/client-router 0.0.6 → 0.0.8

package/dist/router/Router.js

@@ -1,19 +1,60 @@
+import { createMachine } from '../machine/index.js';
 import { compileRoute, matchRoute } from '../utils/index.js';
+const reducePreloadState = (state, event) => {
+    let nextStatus;
+    if (event.type === 'start') {
+        nextStatus = 'preloading';
+    }
+    else if (event.type === 'complete') {
+        nextStatus = 'ready';
+    }
+    else {
+        nextStatus = 'failed';
+    }
+    return { ...state, [event.path]: nextStatus };
+};
 export class Router {
+    static #focusWaitMs = 5000;
+    static #navigationRootOwners = new WeakMap();
     #compiledRoutes;
     #hashMode;
     #outlet;
     #beforeEach;
+    #eventTarget;
+    #navigationRoot;
+    #focusStrategy;
+    #onError;
+    #preloader;
+    #preloadMachine = createMachine(reducePreloadState, {});
     #currentComponent;
+    #currentRouteContext;
+    #focusObserver;
+    #focusTimeout;
     #window;
     #document;
     #isStarted = false;
+    #isDestroyed = false;
+    #isNavigationRootRegistered = false;
+    #navigationVersion = 0;
     constructor(routeDefinitions, routerOptions = {}, env = {}) {
         this.#compiledRoutes = routeDefinitions.map(compileRoute);
         this.#hashMode = routerOptions.hashMode ?? false;
         if (routerOptions.beforeEach !== undefined) {
             this.#beforeEach = routerOptions.beforeEach;
         }
+        if (routerOptions.eventTarget !== undefined) {
+            this.#eventTarget = routerOptions.eventTarget;
+        }
+        if (routerOptions.navigationRoot !== undefined) {
+            this.#navigationRoot = routerOptions.navigationRoot;
+        }
+        this.#focusStrategy = routerOptions.focusStrategy ?? 'none';
+        if (routerOptions.onError !== undefined) {
+            this.#onError = routerOptions.onError;
+        }
+        if (routerOptions.preload !== undefined) {
+            this.#preloader = routerOptions.preload;
+        }
         if (env.window !== undefined) {
             this.#window = env.window;
         }
@@ -21,90 +62,363 @@ export class Router {
             this.#document = env.document;
         }
         this.#outlet = routerOptions.outlet ?? this.#document?.body ?? undefined;
+        if (this.#eventTarget === undefined && this.#document !== undefined) {
+            this.#eventTarget = this.#document;
+        }
     }
     start() {
-        if (!this.#window?.addEventListener || !this.#document?.addEventListener) {
+        if (!this.#window?.addEventListener ||
+            !this.#eventTarget?.addEventListener) {
             throw new Error('[Router] Invalid environment: missing DOM APIs');
         }
         if (this.#isStarted)
             return;
-        this.#bindEvents();
-        this.#resolve();
-        this.#isStarted = true;
+        try {
+            this.#isDestroyed = false;
+            this.#registerNavigationRoot();
+            this.#bindEvents();
+            this.#isStarted = true;
+            this.#resolve();
+        }
+        catch (error) {
+            this.destroy();
+            throw error;
+        }
     }
     destroy() {
-        if (!this.#window || !this.#document)
+        this.#isDestroyed = true;
+        this.#unregisterNavigationRoot();
+        if (!this.#window || !this.#eventTarget)
             return;
-        this.#window.removeEventListener('popstate', this.#handlePopState);
-        this.#document.removeEventListener('click', this.#handleClick);
-        this.#currentComponent?.unmount?.();
+        this.#navigationVersion += 1;
+        this.#clearFocusWait();
+        this.#window.removeEventListener(this.#hashMode ? 'hashchange' : 'popstate', this.#handleLocationChange);
+        this.#eventTarget.removeEventListener('click', this.#handleClick);
+        this.#eventTarget.removeEventListener('pointerover', this.#handlePreloadIntent);
+        this.#eventTarget.removeEventListener('focusin', this.#handlePreloadIntent);
+        this.#eventTarget.removeEventListener('wavelength-navigate', this.#handleNavigation);
+        this.#eventTarget.removeEventListener('wavelength-focus-ready', this.#handleFocusReady);
+        const currentComponent = this.#currentComponent;
+        const currentRouteContext = this.#currentRouteContext;
+        this.#currentComponent = undefined;
+        this.#currentRouteContext = undefined;
+        this.#unmount(currentComponent, currentRouteContext);
         this.#isStarted = false;
     }
     navigate(path) {
-        if (!this.#window)
+        if (this.#isDestroyed)
+            return;
+        const navigationPath = this.#navigationPath(path);
+        if (!navigationPath || !this.#window)
             return;
         if (this.#hashMode) {
-            this.#window.location.hash = path;
-        }
-        else {
-            this.#window.history.pushState(null, '', path);
+            this.#window.location.hash = navigationPath;
+            return;
         }
+        this.#window.history.pushState(null, '', navigationPath);
         this.#resolve();
     }
     replace(path) {
-        if (!this.#window)
+        if (this.#isDestroyed)
+            return;
+        const navigationPath = this.#navigationPath(path);
+        if (!navigationPath || !this.#window)
             return;
         if (this.#hashMode) {
-            this.#window.location.replace('#' + path);
-        }
-        else {
-            this.#window.history.replaceState(null, '', path);
+            this.#window.location.replace('#' + navigationPath);
+            return;
         }
+        this.#window.history.replaceState(null, '', navigationPath);
         this.#resolve();
     }
     back() {
+        if (this.#isDestroyed)
+            return;
         this.#window?.history.back();
     }
+    preload(path) {
+        if (this.#isDestroyed)
+            return;
+        const navigationPath = this.#navigationPath(path);
+        if (!navigationPath)
+            return;
+        this.#preloadPath(navigationPath);
+    }
+    getPreloadStatus(path) {
+        const navigationPath = this.#navigationPath(path);
+        if (!navigationPath)
+            return 'idle';
+        return this.#preloadMachine.getState()[navigationPath] ?? 'idle';
+    }
     #bindEvents() {
-        this.#window.addEventListener('popstate', this.#handlePopState);
-        this.#document.addEventListener('click', this.#handleClick);
+        this.#window.addEventListener(this.#hashMode ? 'hashchange' : 'popstate', this.#handleLocationChange);
+        this.#eventTarget.addEventListener('click', this.#handleClick);
+        this.#eventTarget.addEventListener('pointerover', this.#handlePreloadIntent);
+        this.#eventTarget.addEventListener('focusin', this.#handlePreloadIntent);
+        this.#eventTarget.addEventListener('wavelength-navigate', this.#handleNavigation);
+        this.#eventTarget.addEventListener('wavelength-focus-ready', this.#handleFocusReady);
     }
-    #handlePopState = () => {
+    #handleLocationChange = () => {
+        if (this.#hashMode && !this.#isRouteHash())
+            return;
         this.#resolve();
     };
     #handleClick = (event) => {
+        if (event.defaultPrevented)
+            return;
+        const mouseEvent = event;
         const target = event.target;
-        const anchor = target?.closest?.('a');
+        const composedPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        const anchor = composedPath.find((pathTarget) => this.#isAnchorElement(pathTarget)) ?? this.#closestAnchor(target);
         if (!anchor)
             return;
-        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+        if (!this.#ownsNavigationEvent(event, composedPath))
+            return;
+        if (mouseEvent.button !== 0)
+            return;
+        if (mouseEvent.metaKey ||
+            mouseEvent.ctrlKey ||
+            mouseEvent.shiftKey ||
+            mouseEvent.altKey)
+            return;
+        if (anchor.hasAttribute('download'))
+            return;
+        if (anchor.target && anchor.target.toLowerCase() !== '_self')
+            return;
+        const href = anchor.getAttribute('href');
+        if (!href)
+            return;
+        const targetUrl = this.#resolveNavigationUrl(href);
+        if (!targetUrl)
             return;
-        if (anchor.target === '_blank')
+        if (!this.#hashMode && this.#isSameDocumentFragment(targetUrl))
+            return;
+        event.preventDefault();
+        this.navigate(this.#hashMode
+            ? this.#hashNavigationPath(targetUrl)
+            : `${targetUrl.pathname}${targetUrl.search}${targetUrl.hash}`);
+    };
+    #handlePreloadIntent = (event) => {
+        if (event.defaultPrevented || !this.#preloader)
+            return;
+        const target = event.target;
+        const composedPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        const anchor = composedPath.find((pathTarget) => this.#isAnchorElement(pathTarget)) ?? this.#closestAnchor(target);
+        if (!anchor || !this.#ownsNavigationEvent(event, composedPath))
+            return;
+        if (anchor.hasAttribute('download'))
+            return;
+        if (anchor.target && anchor.target.toLowerCase() !== '_self')
             return;
         const href = anchor.getAttribute('href');
         if (!href)
             return;
-        if (href.startsWith('http') ||
-            href.startsWith('//') ||
-            href.startsWith('mailto:') ||
-            href.startsWith('tel:')) {
+        const targetUrl = this.#resolveNavigationUrl(href);
+        if (!targetUrl)
+            return;
+        if (!this.#hashMode && this.#isSameDocumentFragment(targetUrl))
+            return;
+        this.#preloadPath(this.#hashMode
+            ? this.#hashNavigationPath(targetUrl)
+            : `${targetUrl.pathname}${targetUrl.search}${targetUrl.hash}`);
+    };
+    #resolveNavigationUrl(href) {
+        if (this.#hashMode && href.startsWith('#') && !href.startsWith('#/')) {
+            return null;
+        }
+        try {
+            const targetUrl = new URL(href, this.#window.location.href);
+            const currentUrl = new URL(this.#window.location.href);
+            if (targetUrl.origin !== currentUrl.origin ||
+                (targetUrl.protocol !== 'http:' && targetUrl.protocol !== 'https:')) {
+                return null;
+            }
+            return targetUrl;
+        }
+        catch {
+            return null;
+        }
+    }
+    #isSameDocumentFragment(targetUrl) {
+        if (!this.#window || !targetUrl.hash)
+            return false;
+        const currentUrl = new URL(this.#window.location.href);
+        return (targetUrl.pathname === currentUrl.pathname &&
+            targetUrl.search === currentUrl.search);
+    }
+    #hashNavigationPath(targetUrl) {
+        if (targetUrl.hash.startsWith('#/'))
+            return targetUrl.hash.slice(1);
+        return `${targetUrl.pathname}${targetUrl.search}`;
+    }
+    #navigationPath(path) {
+        if (!this.#window)
+            return null;
+        let targetUrl;
+        try {
+            targetUrl = new URL(path, this.#window.location.href);
+        }
+        catch {
+            return null;
+        }
+        const currentUrl = new URL(this.#window.location.href);
+        if (targetUrl.origin !== currentUrl.origin ||
+            (targetUrl.protocol !== 'http:' && targetUrl.protocol !== 'https:')) {
+            return null;
+        }
+        if (!this.#hashMode) {
+            return `${targetUrl.pathname}${targetUrl.search}${targetUrl.hash}`;
+        }
+        if (targetUrl.hash.startsWith('#/'))
+            return targetUrl.hash.slice(1);
+        if (path.startsWith('#'))
+            return null;
+        return `${targetUrl.pathname}${targetUrl.search}`;
+    }
+    #preloadPath(navigationPath) {
+        if (!this.#preloader)
+            return;
+        const status = this.#preloadMachine.getState()[navigationPath] ?? 'idle';
+        if (status === 'preloading' || status === 'ready')
+            return;
+        const targetUrl = new URL(navigationPath, this.#window.location.href);
+        const path = targetUrl.pathname;
+        const match = matchRoute(this.#compiledRoutes, path);
+        if (!match)
+            return;
+        const context = {
+            path,
+            routeParams: match.routeParams,
+            query: new URLSearchParams(targetUrl.search),
+        };
+        this.#preloadMachine.dispatch({ type: 'start', path: navigationPath });
+        try {
+            const preloadResult = this.#preloader(context);
+            if (this.#isPromiseLike(preloadResult)) {
+                void preloadResult
+                    .then(() => {
+                    this.#preloadMachine.dispatch({
+                        type: 'complete',
+                        path: navigationPath,
+                    });
+                })
+                    .catch(() => {
+                    this.#preloadMachine.dispatch({
+                        type: 'fail',
+                        path: navigationPath,
+                    });
+                });
+                return;
+            }
+            this.#preloadMachine.dispatch({ type: 'complete', path: navigationPath });
+        }
+        catch {
+            this.#preloadMachine.dispatch({ type: 'fail', path: navigationPath });
+        }
+    }
+    #isRouteHash() {
+        const hash = this.#window?.location.hash;
+        return hash === '' || hash?.startsWith('#/') === true;
+    }
+    #handleNavigation = (event) => {
+        if (event.defaultPrevented)
+            return;
+        const navigationEvent = event;
+        const detail = navigationEvent.detail;
+        const composedPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        if (!this.#ownsNavigationEvent(event, composedPath))
+            return;
+        if (typeof detail !== 'object' ||
+            detail === null ||
+            !('path' in detail) ||
+            typeof detail.path !== 'string') {
             return;
         }
         event.preventDefault();
-        this.navigate(href);
+        if ('replace' in detail && detail.replace === true) {
+            this.replace(detail.path);
+            return;
+        }
+        this.navigate(detail.path);
     };
+    #handleFocusReady = (event) => {
+        if (this.#focusStrategy !== 'heading' || !this.#outlet)
+            return;
+        const composedPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        if (!this.#ownsNavigationEvent(event, composedPath))
+            return;
+        const target = this.#focusReadyTarget(event);
+        if (!target || !this.#eventIsFromOutlet(target, composedPath))
+            return;
+        this.#clearFocusWait();
+        this.#focusElement(target);
+    };
+    #focusReadyTarget(event) {
+        const detail = event.detail;
+        if (typeof detail === 'object' &&
+            detail !== null &&
+            'target' in detail &&
+            this.#isFocusableElement(detail.target)) {
+            return detail.target;
+        }
+        return this.#isFocusableElement(event.target) ? event.target : null;
+    }
+    #eventIsFromOutlet(target, composedPath) {
+        const targetRoot = target.getRootNode();
+        const rootHost = 'host' in targetRoot ? targetRoot.host : undefined;
+        if (!composedPath.includes(target) &&
+            (rootHost === undefined || !composedPath.includes(rootHost))) {
+            return false;
+        }
+        return (composedPath.includes(this.#outlet) || this.#outlet.contains(target));
+    }
+    #ownsNavigationEvent(event, composedPath) {
+        if (!this.#navigationRoot)
+            return true;
+        const closestRouter = composedPath.find((pathTarget) => this.#isElement(pathTarget) &&
+            pathTarget.localName === 'wavelength-router');
+        if (closestRouter)
+            return closestRouter === this.#navigationRoot;
+        const closestNavigationRoot = composedPath.find((pathTarget) => this.#isActiveNavigationRoot(pathTarget));
+        if (closestNavigationRoot) {
+            return closestNavigationRoot.isSameNode(this.#navigationRoot);
+        }
+        return (composedPath.includes(this.#navigationRoot) ||
+            event.currentTarget === this.#navigationRoot);
+    }
+    #registerNavigationRoot() {
+        if (!this.#navigationRoot || this.#isNavigationRootRegistered)
+            return;
+        const owners = Router.#navigationRootOwners.get(this.#navigationRoot) ?? 0;
+        Router.#navigationRootOwners.set(this.#navigationRoot, owners + 1);
+        this.#isNavigationRootRegistered = true;
+    }
+    #unregisterNavigationRoot() {
+        if (!this.#navigationRoot || !this.#isNavigationRootRegistered)
+            return;
+        const owners = Router.#navigationRootOwners.get(this.#navigationRoot);
+        if (owners <= 1) {
+            Router.#navigationRootOwners.delete(this.#navigationRoot);
+        }
+        else {
+            Router.#navigationRootOwners.set(this.#navigationRoot, owners - 1);
+        }
+        this.#isNavigationRootRegistered = false;
+    }
+    #isActiveNavigationRoot(target) {
+        return (this.#isElement(target) &&
+            Router.#navigationRootOwners.has(target));
+    }
     #currentPath() {
-        if (!this.#window)
-            return '/';
         if (this.#hashMode) {
             const hash = this.#window.location.hash.slice(1);
-            return hash || '/';
+            const queryIndex = hash.indexOf('?');
+            const path = queryIndex >= 0 ? hash.slice(0, queryIndex) : hash;
+            return path || '/';
         }
         return this.#window.location.pathname || '/';
     }
     #currentQuery() {
-        if (!this.#window)
-            return new URLSearchParams();
         if (this.#hashMode) {
             const hash = this.#window.location.hash;
             const queryIndex = hash.indexOf('?');
@@ -115,20 +429,153 @@ export class Router {
         }
         return new URLSearchParams(this.#window.location.search);
     }
-    #mount(routeComponent, routeContext) {
+    #mount(routeComponent, routeContext, navigationVersion) {
         if (!this.#outlet)
             return;
-        this.#currentComponent?.unmount?.();
+        this.#clearFocusWait();
+        const currentComponent = this.#currentComponent;
+        const currentRouteContext = this.#currentRouteContext;
+        this.#currentComponent = undefined;
+        this.#currentRouteContext = undefined;
+        this.#unmount(currentComponent, currentRouteContext);
         this.#outlet.replaceChildren();
-        routeComponent.mount(this.#outlet, routeContext);
+        const mountResult = routeComponent.mount(this.#outlet, routeContext);
+        if (this.#isPromiseLike(mountResult)) {
+            return mountResult.then(() => {
+                this.#completeMount(routeComponent, routeContext, navigationVersion);
+            });
+        }
+        this.#completeMount(routeComponent, routeContext, navigationVersion);
+    }
+    #completeMount(routeComponent, routeContext, navigationVersion) {
+        if (navigationVersion !== this.#navigationVersion) {
+            this.#unmount(routeComponent, routeContext);
+            return;
+        }
         this.#currentComponent = routeComponent;
+        this.#currentRouteContext = routeContext;
+        this.#focusAfterNavigation(routeContext);
+    }
+    #unmount(routeComponent, context) {
+        try {
+            routeComponent?.unmount?.();
+        }
+        catch (error) {
+            this.#reportRouteError(error, 'unmount', context);
+        }
+    }
+    #isPromiseLike(value) {
+        return (typeof value === 'object' &&
+            'then' in value &&
+            typeof value.then === 'function');
+    }
+    #focusAfterNavigation(routeContext) {
+        if (this.#focusStrategy === 'none' || !this.#outlet)
+            return;
+        if (typeof this.#focusStrategy === 'function') {
+            this.#focusStrategy(this.#outlet, routeContext)?.focus({
+                preventScroll: true,
+            });
+            return;
+        }
+        if (this.#focusStrategy === 'outlet') {
+            this.#focusElement(this.#outlet);
+            return;
+        }
+        const heading = this.#findPrimaryHeading(this.#outlet);
+        if (heading) {
+            this.#focusElement(heading);
+            return;
+        }
+        this.#waitForPrimaryHeading();
+    }
+    #waitForPrimaryHeading() {
+        const MutationObserverConstructor = this.#window?.MutationObserver;
+        if (!MutationObserverConstructor)
+            return;
+        const observer = new MutationObserverConstructor(() => {
+            const heading = this.#outlet && this.#findPrimaryHeading(this.#outlet);
+            if (!heading)
+                return;
+            if (this.#focusObserver !== observer)
+                return;
+            this.#clearFocusWait();
+            this.#focusElement(heading);
+        });
+        this.#focusObserver = observer;
+        observer.observe(this.#outlet, { childList: true, subtree: true });
+        this.#focusTimeout = this.#window?.setTimeout?.(() => {
+            if (this.#focusObserver !== observer)
+                return;
+            observer.disconnect();
+            this.#focusObserver = undefined;
+            this.#focusTimeout = undefined;
+        }, Router.#focusWaitMs);
+    }
+    #clearFocusWait() {
+        this.#focusObserver?.disconnect();
+        this.#focusObserver = undefined;
+        if (this.#focusTimeout !== undefined) {
+            this.#window?.clearTimeout(this.#focusTimeout);
+            this.#focusTimeout = undefined;
+        }
+    }
+    #isElement(target) {
+        return (typeof target === 'object' &&
+            target !== null &&
+            'nodeType' in target &&
+            target.nodeType === 1);
+    }
+    #isAnchorElement(target) {
+        return this.#isElement(target) && target.localName === 'a';
+    }
+    #closestAnchor(target) {
+        if (typeof target !== 'object' ||
+            target === null ||
+            !('closest' in target) ||
+            typeof target.closest !== 'function') {
+            return null;
+        }
+        return target.closest('a');
+    }
+    #isFocusableElement(target) {
+        return (this.#isElement(target) &&
+            'focus' in target &&
+            typeof target.focus === 'function');
+    }
+    #findPrimaryHeading(root) {
+        const heading = Array.from(root.querySelectorAll('h1, [role="heading"][aria-level="1"]')).find((candidate) => this.#isOwnedHeading(candidate));
+        if (heading)
+            return heading;
+        for (const element of Array.from(root.querySelectorAll('*'))) {
+            if (element.localName === 'wavelength-router' || !element.shadowRoot) {
+                continue;
+            }
+            const shadowHeading = this.#findPrimaryHeading(element.shadowRoot);
+            if (shadowHeading)
+                return shadowHeading;
+        }
+        return null;
+    }
+    #isOwnedHeading(heading) {
+        const closestRouter = heading.closest('wavelength-router');
+        return (closestRouter === null ||
+            closestRouter.isSameNode(this.#navigationRoot ?? null));
+    }
+    #focusElement(element) {
+        if (!element.hasAttribute('tabindex'))
+            element.tabIndex = -1;
+        element.focus({ preventScroll: true });
     }
     #resolve() {
+        const navigationVersion = ++this.#navigationVersion;
         const pathname = this.#currentPath();
         const query = this.#currentQuery();
         const match = matchRoute(this.#compiledRoutes, pathname);
         if (!match) {
-            console.warn(`[Router] No route matched: ${pathname}`);
+            const error = new Error(`[Router] No route matched: ${pathname}`);
+            console.warn(error.message);
+            this.#reportRouteError(error, 'match');
             return;
         }
         const context = {
@@ -136,23 +583,92 @@ export class Router {
             routeParams: match.routeParams,
             query,
         };
+        this.#dispatchLifecycleEvent('wavelength-route-start', {
+            path: pathname,
+            context,
+        });
         if (!this.#beforeEach) {
-            this.#mount(match.routeDefinition.routeComponent, context);
+            this.#mountRoute(match.routeDefinition.routeComponent, context, navigationVersion);
             return;
         }
         let redirected = false;
         const next = (redirect) => {
-            if (redirected)
+            if (redirected || navigationVersion !== this.#navigationVersion)
                 return;
             redirected = true;
             if (redirect && redirect !== context.path) {
                 this.navigate(redirect);
             }
             else {
-                this.#mount(match.routeDefinition.routeComponent, context);
+                this.#mountRoute(match.routeDefinition.routeComponent, context, navigationVersion);
             }
         };
-        this.#beforeEach(context, next);
+        try {
+            this.#beforeEach(context, next);
+        }
+        catch (error) {
+            if (!this.#reportRouteError(error, 'guard', context))
+                throw error;
+        }
+    }
+    #mountRoute(routeComponent, context, navigationVersion) {
+        try {
+            const mountResult = this.#mount(routeComponent, context, navigationVersion);
+            if (this.#isPromiseLike(mountResult)) {
+                void mountResult
+                    .then(() => {
+                    if (navigationVersion !== this.#navigationVersion)
+                        return;
+                    this.#dispatchLifecycleEvent('wavelength-route-complete', {
+                        path: context.path,
+                        context,
+                    });
+                })
+                    .catch((error) => {
+                    if (navigationVersion !== this.#navigationVersion)
+                        return;
+                    this.#reportRouteError(error, 'mount', context);
+                });
+                return;
+            }
+            if (navigationVersion === this.#navigationVersion) {
+                this.#dispatchLifecycleEvent('wavelength-route-complete', {
+                    path: context.path,
+                    context,
+                });
+            }
+        }
+        catch (error) {
+            if (navigationVersion !== this.#navigationVersion)
+                return;
+            if (!this.#reportRouteError(error, 'mount', context))
+                throw error;
+        }
+    }
+    #reportRouteError(error, phase, context) {
+        const contextDetail = context
+            ? { context }
+            : {};
+        this.#dispatchLifecycleEvent('wavelength-route-error', {
+            path: context?.path ?? this.#currentPath(),
+            error,
+            phase,
+            ...contextDetail,
+        });
+        if (!this.#onError)
+            return false;
+        this.#onError({ error, phase, ...contextDetail });
+        return true;
+    }
+    #dispatchLifecycleEvent(type, detail) {
+        const CustomEventConstructor = this.#window?.CustomEvent;
+        if (!CustomEventConstructor || !this.#eventTarget?.dispatchEvent)
+            return;
+        this.#eventTarget.dispatchEvent(new CustomEventConstructor(type, {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
     }
 }
 //# sourceMappingURL=Router.js.map