@wcstack/router 1.3.19 → 1.4.0

package/dist/index.esm.js

@@ -132,73 +132,81 @@ const weights = {
     'param': 1,
     'catch-all': 0
 };
-class Route extends HTMLElement {
-    _name = '';
+class RouteCore extends EventTarget {
+    static wcBindable = {
+        protocol: "wc-bindable",
+        version: 1,
+        properties: [
+            { name: "params", event: "wcs-route:params-changed" },
+            { name: "typedParams", event: "wcs-route:params-changed", getter: (e) => e.detail.typedParams },
+            { name: "active", event: "wcs-route:active-changed" },
+        ],
+    };
+    _target;
+    _parentCore = null;
     _path = '';
-    _routeParentNode = null;
-    _routeChildNodes = [];
-    _routerNode = null;
-    _uuid = getUUID();
-    _placeHolder = document.createComment(`@@route:${this._uuid}`);
-    _childNodeArray;
+    _name = '';
+    _isFallbackRoute = false;
+    _segmentInfos = [];
+    _absoluteSegmentInfos;
     _paramNames;
     _absoluteParamNames;
-    _params = {};
-    _typedParams = {};
     _weight;
     _absoluteWeight;
-    _childIndex = 0;
+    _segmentCount;
+    _params = {};
+    _typedParams = {};
+    _active = false;
+    // Guard
     _hasGuard = false;
     _guardHandler = null;
+    _guardFallbackPath = '';
     _waitForSetGuardHandler = null;
     _resolveSetGuardHandler = null;
-    _guardFallbackPath = '';
-    _initialized = false;
-    _isFallbackRoute = false;
-    _segmentCount;
-    _segmentInfos = [];
-    _absoluteSegmentInfos;
-    constructor() {
+    constructor(target) {
         super();
+        this._target = target ?? this;
     }
-    get routeParentNode() {
-        return this._routeParentNode;
+    get parentCore() {
+        return this._parentCore;
     }
-    get routeChildNodes() {
-        return this._routeChildNodes;
-    }
-    get routerNode() {
-        if (!this._routerNode) {
-            raiseError(`${config.tagNames.route} has no routerNode.`);
-        }
-        return this._routerNode;
+    set parentCore(value) {
+        this._parentCore = value;
     }
     get path() {
         return this._path;
     }
+    get name() {
+        return this._name;
+    }
+    get isFallbackRoute() {
+        return this._isFallbackRoute;
+    }
     get isRelative() {
         return !this._path.startsWith('/');
     }
-    _checkParentNode(hasParentCallback, noParentCallback) {
-        // fallbackはルーター直下のみ許可されるため、相対パスチェックはスキップ
+    get segmentInfos() {
+        return this._segmentInfos;
+    }
+    _checkParentCore(hasParentCallback, noParentCallback) {
         if (!this._isFallbackRoute) {
-            if (this.isRelative && !this._routeParentNode) {
+            if (this.isRelative && !this._parentCore) {
                 raiseError(`${config.tagNames.route} is relative but has no parent route.`);
             }
-            if (!this.isRelative && this._routeParentNode) {
+            if (!this.isRelative && this._parentCore) {
                 raiseError(`${config.tagNames.route} is absolute but has a parent route.`);
             }
         }
-        if (this.isRelative && this._routeParentNode) {
-            return hasParentCallback(this._routeParentNode);
+        if (this.isRelative && this._parentCore) {
+            return hasParentCallback(this._parentCore);
         }
         else {
             return noParentCallback();
         }
     }
     get absolutePath() {
-        return this._checkParentNode((routeParentNode) => {
-            const parentPath = routeParentNode.absolutePath;
+        return this._checkParentCore((parentCore) => {
+            const parentPath = parentCore.absolutePath;
             return parentPath.endsWith('/')
                 ? parentPath + this._path
                 : parentPath + '/' + this._path;
@@ -206,35 +214,11 @@ class Route extends HTMLElement {
             return this._path;
         });
     }
-    get uuid() {
-        return this._uuid;
-    }
-    get placeHolder() {
-        return this._placeHolder;
-    }
-    get childNodeArray() {
-        if (typeof this._childNodeArray === 'undefined') {
-            this._childNodeArray = Array.from(this.childNodes);
-        }
-        return this._childNodeArray;
-    }
-    get routes() {
-        if (this.routeParentNode) {
-            return this.routeParentNode.routes.concat(this);
-        }
-        else {
-            return [this];
-        }
-    }
-    get segmentInfos() {
-        return this._segmentInfos;
-    }
-    // indexの場合、{ type: 'static', segmentText: '' }となる、indexが複数連続する場合もある
     get absoluteSegmentInfos() {
         if (typeof this._absoluteSegmentInfos === 'undefined') {
-            this._absoluteSegmentInfos = this._checkParentNode((routeParentNode) => {
+            this._absoluteSegmentInfos = this._checkParentCore((parentCore) => {
                 return [
-                    ...routeParentNode.absoluteSegmentInfos,
+                    ...parentCore.absoluteSegmentInfos,
                     ...this._segmentInfos
                 ];
             }, () => {
@@ -249,6 +233,9 @@ class Route extends HTMLElement {
     get typedParams() {
         return this._typedParams;
     }
+    get active() {
+        return this._active;
+    }
     get paramNames() {
         if (typeof this._paramNames === 'undefined') {
             const names = [];
@@ -263,9 +250,9 @@ class Route extends HTMLElement {
     }
     get absoluteParamNames() {
         if (typeof this._absoluteParamNames === 'undefined') {
-            this._absoluteParamNames = this._checkParentNode((routeParentNode) => {
+            this._absoluteParamNames = this._checkParentCore((parentCore) => {
                 return [
-                    ...routeParentNode.absoluteParamNames,
+                    ...parentCore.absoluteParamNames,
                     ...this.paramNames
                 ];
             }, () => {
@@ -286,87 +273,38 @@ class Route extends HTMLElement {
     }
     get absoluteWeight() {
         if (typeof this._absoluteWeight === 'undefined') {
-            this._absoluteWeight = this._checkParentNode((routeParentNode) => {
-                return routeParentNode.absoluteWeight + this.weight;
+            this._absoluteWeight = this._checkParentCore((parentCore) => {
+                return parentCore.absoluteWeight + this.weight;
             }, () => {
                 return this.weight;
             });
         }
         return this._absoluteWeight;
     }
-    get childIndex() {
-        return this._childIndex;
-    }
-    get name() {
-        return this._name;
-    }
-    async guardCheck(matchResult) {
-        if (this._hasGuard && this._waitForSetGuardHandler) {
-            await this._waitForSetGuardHandler;
-        }
-        if (this._guardHandler) {
-            const toPath = matchResult.path;
-            const fromPath = matchResult.lastPath;
-            const allowed = await this._guardHandler(toPath, fromPath);
-            if (!allowed) {
-                throw new GuardCancel('Navigation cancelled by guard.', this._guardFallbackPath);
-            }
-        }
-    }
-    shouldChange(newParams) {
-        for (const key of this.paramNames) {
-            if (this.params[key] !== newParams[key]) {
-                return true;
+    get segmentCount() {
+        if (typeof this._segmentCount === 'undefined') {
+            let count = 0;
+            for (const info of this._segmentInfos) {
+                if (info.type !== 'catch-all') {
+                    count++;
+                }
             }
+            this._segmentCount = this._path === "" ? 0 : count;
         }
-        return false;
-    }
-    get guardHandler() {
-        if (!this._guardHandler) {
-            raiseError(`${config.tagNames.route} has no guardHandler.`);
-        }
-        return this._guardHandler;
+        return this._segmentCount;
     }
-    set guardHandler(value) {
-        this._resolveSetGuardHandler?.();
-        this._guardHandler = value;
+    get absoluteSegmentCount() {
+        return this._checkParentCore((parentCore) => {
+            return parentCore.absoluteSegmentCount + this.segmentCount;
+        }, () => {
+            return this.segmentCount;
+        });
     }
-    initialize(routerNode, routeParentNode) {
-        if (this._initialized) {
-            return;
-        }
-        this._initialized = true;
-        // 単独で影響のないものから設定していく
-        if (this.hasAttribute('path')) {
-            this._path = this.getAttribute('path') || '';
-        }
-        else if (this.hasAttribute('index')) {
-            this._path = '';
-        }
-        else if (this.hasAttribute('fallback')) {
-            this._path = '';
-            this._isFallbackRoute = true;
-        }
-        else {
-            raiseError(`${config.tagNames.route} should have a "path" or "index" attribute.`);
-        }
-        this._name = this.getAttribute('name') || '';
-        this._routerNode = routerNode;
-        this._routeParentNode = routeParentNode;
-        const routeChildContainer = routeParentNode || routerNode;
-        routeChildContainer.routeChildNodes.push(this);
-        this._childIndex = routeChildContainer.routeChildNodes.length - 1;
-        if (this._isFallbackRoute) {
-            if (routeParentNode) {
-                raiseError(`${config.tagNames.route} with fallback attribute must be a direct child of ${config.tagNames.router}.`);
-            }
-            if (routerNode.fallbackRoute) {
-                raiseError(`${config.tagNames.router} can have only one fallback route.`);
-            }
-            routerNode.fallbackRoute = this;
-        }
-        // index属性の場合は特別扱い（セグメントを消費しない）
-        if (this.hasAttribute('index')) {
+    parsePath(path, options = {}) {
+        this._path = path;
+        this._name = options.name || '';
+        this._isFallbackRoute = options.isFallback || false;
+        if (options.isIndex) {
             this._segmentInfos.push({
                 type: 'static',
                 segmentText: '',
@@ -375,7 +313,7 @@ class Route extends HTMLElement {
                 isIndex: true
             });
         }
-        const segments = this._path.split('/');
+        const segments = path.split('/');
         for (let idx = 0; idx < segments.length; idx++) {
             const segment = segments[idx];
             // 末尾の空セグメントはスキップ（/parent/ のような場合）
@@ -413,7 +351,7 @@ class Route extends HTMLElement {
                     paramType: typeName
                 });
             }
-            else if (segment !== '' || !this.hasAttribute('index')) {
+            else if (segment !== '' || !options.isIndex) {
                 // 空セグメントはindex以外の場合のみ追加（絶対パスの先頭 '' など）
                 this._segmentInfos.push({
                     type: 'static',
@@ -423,36 +361,175 @@ class Route extends HTMLElement {
                 });
             }
         }
-        this._hasGuard = this.hasAttribute('guard');
+        this._hasGuard = options.hasGuard || false;
         if (this._hasGuard) {
-            this._guardFallbackPath = this.getAttribute('guard') || '/';
+            this._guardFallbackPath = options.guardFallback || '/';
             this._waitForSetGuardHandler = new Promise((resolve) => {
                 this._resolveSetGuardHandler = resolve;
             });
         }
-        this.setAttribute('fullpath', this.absolutePath);
     }
-    get fullpath() {
-        return this.absolutePath;
+    setParams(params, typedParams) {
+        this._params = params;
+        this._typedParams = typedParams;
+        this._active = true;
+        this._target.dispatchEvent(new CustomEvent("wcs-route:params-changed", {
+            detail: { params, typedParams },
+            bubbles: true,
+        }));
     }
-    get segmentCount() {
-        if (typeof this._segmentCount === 'undefined') {
-            let count = 0;
-            for (const info of this._segmentInfos) {
-                if (info.type !== 'catch-all') {
-                    count++;
-                }
+    clearParams() {
+        this._params = {};
+        this._typedParams = {};
+        this._active = false;
+    }
+    shouldChange(newParams) {
+        for (const key of this.paramNames) {
+            if (this._params[key] !== newParams[key]) {
+                return true;
             }
-            this._segmentCount = this._path === "" ? 0 : count;
         }
-        return this._segmentCount;
+        return false;
+    }
+    get guardHandler() {
+        if (!this._guardHandler) {
+            raiseError(`${config.tagNames.route} has no guardHandler.`);
+        }
+        return this._guardHandler;
+    }
+    set guardHandler(value) {
+        this._resolveSetGuardHandler?.();
+        this._guardHandler = value;
+    }
+    async guardCheck(matchResult) {
+        if (this._hasGuard && this._waitForSetGuardHandler) {
+            await this._waitForSetGuardHandler;
+        }
+        if (this._guardHandler) {
+            const toPath = matchResult.path;
+            const fromPath = matchResult.lastPath;
+            const allowed = await this._guardHandler(toPath, fromPath);
+            if (!allowed) {
+                throw new GuardCancel('Navigation cancelled by guard.', this._guardFallbackPath);
+            }
+        }
+    }
+}
+
+class Route extends HTMLElement {
+    static wcBindable = RouteCore.wcBindable;
+    _core;
+    _routeParentNode = null;
+    _routeChildNodes = [];
+    _routerNode = null;
+    _uuid = getUUID();
+    _placeHolder = document.createComment(`@@route:${this._uuid}`);
+    _childNodeArray;
+    _childIndex = 0;
+    _initialized = false;
+    constructor() {
+        super();
+        this._core = new RouteCore(this);
+    }
+    // Shell-only properties
+    get routeParentNode() {
+        return this._routeParentNode;
+    }
+    get routeChildNodes() {
+        return this._routeChildNodes;
+    }
+    get routerNode() {
+        if (!this._routerNode) {
+            raiseError(`${config.tagNames.route} has no routerNode.`);
+        }
+        return this._routerNode;
+    }
+    get uuid() {
+        return this._uuid;
+    }
+    get placeHolder() {
+        return this._placeHolder;
+    }
+    get childNodeArray() {
+        if (typeof this._childNodeArray === 'undefined') {
+            this._childNodeArray = Array.from(this.childNodes);
+        }
+        return this._childNodeArray;
+    }
+    get routes() {
+        if (this.routeParentNode) {
+            return this.routeParentNode.routes.concat(this);
+        }
+        else {
+            return [this];
+        }
+    }
+    get childIndex() {
+        return this._childIndex;
+    }
+    // Core delegates
+    get path() {
+        return this._core.path;
+    }
+    get name() {
+        return this._core.name;
+    }
+    get isRelative() {
+        return this._core.isRelative;
+    }
+    get absolutePath() {
+        return this._core.absolutePath;
+    }
+    get segmentInfos() {
+        return this._core.segmentInfos;
+    }
+    get absoluteSegmentInfos() {
+        return this._core.absoluteSegmentInfos;
+    }
+    get params() {
+        return this._core.params;
+    }
+    get typedParams() {
+        return this._core.typedParams;
+    }
+    get paramNames() {
+        return this._core.paramNames;
+    }
+    get absoluteParamNames() {
+        return this._core.absoluteParamNames;
+    }
+    get weight() {
+        return this._core.weight;
+    }
+    get absoluteWeight() {
+        return this._core.absoluteWeight;
+    }
+    get segmentCount() {
+        return this._core.segmentCount;
     }
     get absoluteSegmentCount() {
-        return this._checkParentNode((routeParentNode) => {
-            return routeParentNode.absoluteSegmentCount + this.segmentCount;
-        }, () => {
-            return this.segmentCount;
-        });
+        return this._core.absoluteSegmentCount;
+    }
+    get fullpath() {
+        return this.absolutePath;
+    }
+    get guardHandler() {
+        return this._core.guardHandler;
+    }
+    set guardHandler(value) {
+        this._core.guardHandler = value;
+    }
+    setParams(params, typedParams) {
+        this._core.setParams(params, typedParams);
+    }
+    clearParams() {
+        this._core.clearParams();
+    }
+    shouldChange(newParams) {
+        return this._core.shouldChange(newParams);
+    }
+    async guardCheck(matchResult) {
+        return this._core.guardCheck(matchResult);
     }
     testAncestorNode(ancestorNode) {
         let currentNode = this._routeParentNode;
@@ -464,9 +541,58 @@ class Route extends HTMLElement {
         }
         return false;
     }
-    clearParams() {
-        this._params = {};
-        this._typedParams = {};
+    initialize(routerNode, routeParentNode) {
+        if (this._initialized) {
+            return;
+        }
+        this._initialized = true;
+        // 属性からパス情報を読み取り
+        let path;
+        let isIndex = false;
+        let isFallback = false;
+        if (this.hasAttribute('path')) {
+            path = this.getAttribute('path') || '';
+        }
+        else if (this.hasAttribute('index')) {
+            path = '';
+            isIndex = true;
+        }
+        else if (this.hasAttribute('fallback')) {
+            path = '';
+            isFallback = true;
+        }
+        else {
+            raiseError(`${config.tagNames.route} should have a "path" or "index" attribute.`);
+        }
+        // ルートツリーの構築
+        this._routerNode = routerNode;
+        this._routeParentNode = routeParentNode;
+        const routeChildContainer = routeParentNode || routerNode;
+        routeChildContainer.routeChildNodes.push(this);
+        this._childIndex = routeChildContainer.routeChildNodes.length - 1;
+        // Fallback検証
+        if (isFallback) {
+            if (routeParentNode) {
+                raiseError(`${config.tagNames.route} with fallback attribute must be a direct child of ${config.tagNames.router}.`);
+            }
+            if (routerNode.fallbackRoute) {
+                raiseError(`${config.tagNames.router} can have only one fallback route.`);
+            }
+            routerNode.fallbackRoute = this;
+        }
+        // 親CoreをCoreに設定
+        if (routeParentNode) {
+            this._core.parentCore = routeParentNode._core;
+        }
+        // Coreでパス解析
+        this._core.parsePath(path, {
+            isIndex,
+            isFallback,
+            hasGuard: this.hasAttribute('guard'),
+            guardFallback: this.getAttribute('guard'),
+            name: this.getAttribute('name') || '',
+        });
+        this.setAttribute('fullpath', this.absolutePath);
     }
 }
 
@@ -975,11 +1101,13 @@ function hideRoute(route) {
 }
 
 function showRoute(route, matchResult) {
-    route.clearParams();
+    const params = {};
+    const typedParams = {};
     for (const key of route.paramNames) {
-        route.params[key] = matchResult.params[key];
-        route.typedParams[key] = matchResult.typedParams[key];
+        params[key] = matchResult.params[key];
+        typedParams[key] = matchResult.typedParams[key];
     }
+    route.setParams(params, typedParams);
     const parentNode = route.placeHolder.parentNode;
     const nextSibling = route.placeHolder.nextSibling;
     for (const node of route.childNodeArray) {
@@ -1678,5 +1806,5 @@ function bootstrapRouter(config) {
     registerComponents();
 }
 
-export { bootstrapRouter };
+export { RouteCore, bootstrapRouter };
 //# sourceMappingURL=index.esm.js.map