@wcstack/router 1.8.5 → 1.9.0

package/README.ja.md

@@ -115,7 +115,7 @@
 
 ### Router(wcs-router)
 
-子要素のtemplateタグ内にルーティング・レイアウトスロット定義する。ドキュメント内で1つのみ存在可能。直下にtemplateタグが必要。定義に従って、`<wcs-outlet>`へ出力する
+子要素のtemplateタグ内にルーティング・レイアウトスロット定義する。直下にtemplateタグが必要。定義に従って、`<wcs-outlet>`へ出力する。`basename` が異なれば、同一ドキュメント内に複数の Router を共存可能
 
 | 属性 | 説明 |
 |------|------|

package/README.md

@@ -115,7 +115,7 @@ That's what `<wcs-router>`, `<wcs-route>`, and friends explore. One CDN import,
 
 ### Router (wcs-router)
 
-Define routes and layout slots inside a child template tag. Only one can exist in a document. A direct child template tag is required. Outputs according to definitions to `<wcs-outlet>`.
+Define routes and layout slots inside a child template tag. A direct child template tag is required. Outputs according to definitions to `<wcs-outlet>`. Multiple routers can coexist in the same document when each has a distinct `basename`.
 
 | Attribute | Description |
 |------|------|

package/dist/index.d.ts

@@ -121,7 +121,6 @@ interface IOutlet {
  */
 declare class Router extends HTMLElement implements IRouter {
     static wcBindable: IWcBindable;
-    private static _instance;
     private _outlet;
     private _template;
     private _routeChildNodes;
@@ -150,8 +149,6 @@ declare class Router extends HTMLElement implements IRouter {
     private _joinInternalPath;
     private _notifyLocationChange;
     private _getBasename;
-    static get instance(): IRouter;
-    static navigate(path: string): void;
     get basename(): string;
     private _getOutlet;
     private _getTemplate;
@@ -171,6 +168,11 @@ declare class Router extends HTMLElement implements IRouter {
     get navigateUrl(): string | null;
     set navigateUrl(value: string | null);
     navigate(path: string): Promise<void>;
+    /**
+     * basename 配下の URL かどうかを判定する。
+     * basename が空の場合はすべての URL にマッチする。
+     */
+    private _isOwnPath;
     private _onNavigateFunc;
     private _onNavigate;
     private _onPopState;

package/dist/index.esm.js

@@ -1307,7 +1307,6 @@ class Router extends HTMLElement {
             { name: "path", event: "wcs-router:path-changed" },
         ],
     };
-    static _instance = null;
     _outlet = null;
     _template = null;
     _routeChildNodes = [];
@@ -1319,10 +1318,6 @@ class Router extends HTMLElement {
     _navigateUrl = null;
     constructor() {
         super();
-        if (Router._instance) {
-            raiseError(`${config.tagNames.router} can only be instantiated once.`);
-        }
-        Router._instance = this;
     }
     /**
      * Normalize a URL pathname to a route path.
@@ -1396,22 +1391,21 @@ class Router extends HTMLElement {
         }
         return this._normalizeBasename(path);
     }
-    static get instance() {
-        if (!Router._instance) {
-            raiseError(`${config.tagNames.router} has not been instantiated.`);
-        }
-        return Router._instance;
-    }
-    static navigate(path) {
-        Router.instance.navigate(path);
-    }
     get basename() {
         return this._basename;
     }
     _getOutlet() {
-        let outlet = document.querySelector(config.tagNames.outlet);
-        if (!outlet) {
-            outlet = createOutlet();
+        // 自身を起点に兄弟・子孫から Outlet を探す（マルチ Router 対応）
+        const next = this.nextElementSibling;
+        if (next && next.matches(config.tagNames.outlet)) {
+            return next;
+        }
+        // なければ新規作成して自身の直後に挿入
+        const outlet = createOutlet();
+        if (this.parentNode) {
+            this.parentNode.insertBefore(outlet, this.nextSibling);
+        }
+        else {
             document.body.appendChild(outlet);
         }
         return outlet;
@@ -1487,17 +1481,29 @@ class Router extends HTMLElement {
             this._notifyLocationChange();
         }
     }
+    /**
+     * basename 配下の URL かどうかを判定する。
+     * basename が空の場合はすべての URL にマッチする。
+     */
+    _isOwnPath(fullPath) {
+        if (this._basename === "")
+            return true;
+        return fullPath === this._basename || fullPath.startsWith(this._basename + "/");
+    }
     _onNavigateFunc(navEvent) {
         if (!navEvent.canIntercept ||
             navEvent.hashChange ||
             navEvent.downloadRequest !== null) {
             return;
         }
+        const url = new URL(navEvent.destination.url);
+        const fullPath = this._normalizePathname(url.pathname);
+        // basename 配下でない URL は無視（マルチ Router 対応）
+        if (!this._isOwnPath(fullPath))
+            return;
         const routesNode = this;
         navEvent.intercept({
             handler: async () => {
-                const url = new URL(navEvent.destination.url);
-                const fullPath = routesNode._normalizePathname(url.pathname);
                 await applyRoute(routesNode, routesNode.outlet, fullPath, routesNode.path);
             },
         });
@@ -1506,6 +1512,9 @@ class Router extends HTMLElement {
     _onPopState = async () => {
         // back/forward for environments without Navigation API
         const fullPath = this._normalizePathname(window.location.pathname);
+        // basename 配下でない URL は無視（マルチ Router 対応）
+        if (!this._isOwnPath(fullPath))
+            return;
         await applyRoute(this, this.outlet, fullPath, this._path);
         this._notifyLocationChange();
     };
@@ -1549,9 +1558,6 @@ class Router extends HTMLElement {
             window.removeEventListener("popstate", this._onPopState);
             this._listeningPopState = false;
         }
-        if (Router._instance === this) {
-            Router._instance = null;
-        }
     }
 }
 
@@ -1576,9 +1582,16 @@ class Link extends HTMLElement {
         if (this._router) {
             return this._router;
         }
-        const router = document.querySelector(config.tagNames.router);
-        if (router) {
-            return (this._router = router);
+        // DOM 祖先走査で最寄りの Router を探す（マルチ Router 対応）
+        const ancestor = this.closest(config.tagNames.router);
+        if (ancestor) {
+            return (this._router = ancestor);
+        }
+        // 祖先にない場合は ownerDocument 内の Router を探す
+        const root = this.getRootNode();
+        const found = root.querySelector?.(config.tagNames.router);
+        if (found) {
+            return (this._router = found);
         }
         raiseError(`${config.tagNames.link} is not connected to a router.`);
     }