@wcstack/router 1.7.1 → 1.8.1

package/README.ja.md

@@ -141,7 +141,30 @@
 | `guardHandler` | ガード判定関数を設定 |
 
 ガード判定関数の型：
-function (toPath: string, fromPath: string): boolean | Promise<boolean>
+`(toPath: string, fromPath: string) => boolean | Promise<boolean>`
+
+#### GuardHandler(wcs-guard-handler)
+
+`<wcs-route>` の子要素として配置し、ガード判定関数を宣言的に定義します。`<script type="module">` の `default export` で判定関数を返してください。`<wcs-guard-handler>` 要素自体はパース後にDOMから除去されます。
+
+```html
+<wcs-route path="/dashboard" guard="/login">
+  <wcs-guard-handler>
+    <script type="module">
+      export default function(toPath, fromPath) {
+        return document.cookie.includes('session=');
+      }
+    </script>
+  </wcs-guard-handler>
+  <dashboard-page></dashboard-page>
+</wcs-route>
+```
+
+- `guard` 属性の値はガードがキャンセルされた場合のリダイレクト先パス
+- 判定関数が `false` を返すとナビゲーションがキャンセルされ、`guard` 属性のパスへ遷移
+- 判定関数は `Promise<boolean>` を返すことも可能（非同期チェック対応）
+- `<wcs-route>` の外に配置された `<wcs-guard-handler>` は無視される
+- `<script type="module">` がない場合、`guardHandler` は設定されない
 
 #### 型付きパラメータ
 

package/README.md

@@ -141,7 +141,30 @@ Displays children when the route path matches. Match priority is static paths ov
 | `guardHandler` | Sets the guard decision function. |
 
 Guard decision function type:
-function (toPath: string, fromPath: string): boolean | Promise<boolean>
+`(toPath: string, fromPath: string) => boolean | Promise<boolean>`
+
+#### GuardHandler (wcs-guard-handler)
+
+Place as a child of `<wcs-route>` to declaratively define a guard decision function. Export the function as the `default export` from a `<script type="module">`. The `<wcs-guard-handler>` element itself is removed from the DOM after parsing.
+
+```html
+<wcs-route path="/dashboard" guard="/login">
+  <wcs-guard-handler>
+    <script type="module">
+      export default function(toPath, fromPath) {
+        return document.cookie.includes('session=');
+      }
+    </script>
+  </wcs-guard-handler>
+  <dashboard-page></dashboard-page>
+</wcs-route>
+```
+
+- The `guard` attribute value is the redirect path when the guard cancels navigation
+- If the function returns `false`, navigation is cancelled and the user is redirected to the `guard` path
+- The function can return `Promise<boolean>` for async checks
+- `<wcs-guard-handler>` placed outside a `<wcs-route>` is ignored
+- If no `<script type="module">` is present, `guardHandler` is not set
 
 #### Typed Parameters
 

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface ITagNames {
     readonly layoutOutlet: string;
     readonly link: string;
     readonly head: string;
+    readonly guardHandler: string;
 }
 interface IWritableTagNames {
     route?: string;
@@ -15,6 +16,7 @@ interface IWritableTagNames {
     layoutOutlet?: string;
     link?: string;
     head?: string;
+    guardHandler?: string;
 }
 interface IConfig {
     readonly tagNames: ITagNames;
@@ -112,6 +114,116 @@ interface IOutlet {
     lastRoutes: IRoute[];
 }
 
+/**
+ * AppRoutes - Root component for @wcstack/router
+ *
+ * Container element that manages route definitions and navigation.
+ */
+declare class Router extends HTMLElement implements IRouter {
+    static wcBindable: IWcBindable;
+    private static _instance;
+    private _outlet;
+    private _template;
+    private _routeChildNodes;
+    private _basename;
+    private _path;
+    private _initialized;
+    private _fallbackRoute;
+    private _listeningPopState;
+    private _navigateUrl;
+    constructor();
+    /**
+     * Normalize a URL pathname to a route path.
+     * - ensure leading slash
+     * - collapse multiple slashes
+     * - treat trailing file extensions (e.g. .html) as directory root
+     * - remove trailing slash except root "/"
+     */
+    private _normalizePathname;
+    /**
+     * Normalize basename.
+     * - "" or "/" -> ""
+     * - "/app/" -> "/app"
+     * - "/app/index.html" -> "/app"
+     */
+    private _normalizeBasename;
+    private _joinInternalPath;
+    private _notifyLocationChange;
+    private _getBasename;
+    static get instance(): IRouter;
+    static navigate(path: string): void;
+    get basename(): string;
+    private _getOutlet;
+    private _getTemplate;
+    get outlet(): IOutlet;
+    get template(): HTMLTemplateElement;
+    get routeChildNodes(): IRoute[];
+    get path(): string;
+    /**
+     * applyRoute 内で設定される値です。
+     */
+    set path(value: string);
+    get fallbackRoute(): IRoute | null;
+    /**
+     * Routeのfallback属性がある場合にそのルートを設定します。
+     */
+    set fallbackRoute(value: IRoute | null);
+    get navigateUrl(): string | null;
+    set navigateUrl(value: string | null);
+    navigate(path: string): Promise<void>;
+    private _onNavigateFunc;
+    private _onNavigate;
+    private _onPopState;
+    private _initialize;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+}
+
+declare class Route extends HTMLElement implements IRoute {
+    static wcBindable: IWcBindable;
+    private _core;
+    private _routeParentNode;
+    private _routeChildNodes;
+    private _routerNode;
+    private _uuid;
+    private _placeHolder;
+    private _childNodeArray;
+    private _childIndex;
+    private _initialized;
+    constructor();
+    get routeParentNode(): IRoute | null;
+    get routeChildNodes(): IRoute[];
+    get routerNode(): IRouter;
+    get uuid(): string;
+    get placeHolder(): Comment;
+    get childNodeArray(): Node[];
+    get routes(): IRoute[];
+    get childIndex(): number;
+    get path(): string;
+    get name(): string;
+    get isRelative(): boolean;
+    get absolutePath(): string;
+    get segmentInfos(): ISegmentInfo[];
+    get absoluteSegmentInfos(): ISegmentInfo[];
+    get params(): Record<string, string>;
+    get typedParams(): Record<string, any>;
+    get paramNames(): string[];
+    get absoluteParamNames(): string[];
+    get weight(): number;
+    get absoluteWeight(): number;
+    get segmentCount(): number;
+    get absoluteSegmentCount(): number;
+    get fullpath(): string;
+    get guardHandler(): GuardHandler;
+    set guardHandler(value: GuardHandler);
+    setParams(params: Record<string, string>, typedParams: Record<string, any>): void;
+    clearParams(): void;
+    shouldChange(newParams: Record<string, string>): boolean;
+    guardCheck(matchResult: IRouteMatchResult): Promise<void>;
+    testAncestorNode(ancestorNode: IRoute): boolean;
+    initialize(routerNode: IRouter, routeParentNode: IRoute | null): void;
+}
+
 interface RouteParseOptions {
     isIndex?: boolean;
     isFallback?: boolean;
@@ -170,5 +282,5 @@ declare class RouteCore extends EventTarget {
     guardCheck(matchResult: IRouteMatchResult): Promise<void>;
 }
 
-export { RouteCore, bootstrapRouter, getConfig };
+export { Route, RouteCore, Router, bootstrapRouter, getConfig };
 export type { IWritableConfig, IWritableTagNames, RouteParseOptions };

package/dist/index.esm.js

@@ -6,7 +6,8 @@ const _config = {
         layout: "wcs-layout",
         layoutOutlet: "wcs-layout-outlet",
         link: "wcs-link",
-        head: "wcs-head"
+        head: "wcs-head",
+        guardHandler: "wcs-guard-handler"
     },
     enableShadowRoot: false,
     basenameFileExtensions: [".html"]
@@ -909,6 +910,41 @@ function createLayoutOutlet() {
     return document.createElement(config.tagNames.layoutOutlet);
 }
 
+async function importModule(script) {
+    let scriptModule = null;
+    const sourceComment = `\n//# sourceURL=wcs-guard-handler\n`;
+    const scriptText = script.text + sourceComment;
+    if (typeof URL.createObjectURL === 'function') {
+        const blob = new Blob([scriptText], { type: "application/javascript" });
+        const url = URL.createObjectURL(blob);
+        try {
+            scriptModule = await import(url);
+        }
+        catch {
+            // Blob URL import failed (e.g. happy-dom), fall through to data: URL
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+    if (!scriptModule) {
+        // Fallback: Base64 data: URL (for test environments)
+        const b64 = btoa(String.fromCodePoint(...new TextEncoder().encode(scriptText)));
+        scriptModule = await import(`data:application/javascript;base64,${b64}`);
+    }
+    if (scriptModule && typeof scriptModule.default === 'function') {
+        return scriptModule.default;
+    }
+    return null;
+}
+function loadGuardHandler(script, route) {
+    importModule(script).then(handler => {
+        if (handler) {
+            route.guardHandler = handler;
+        }
+    });
+}
+
 function _duplicateCheck(routesByPath, route) {
     let routes = routesByPath.get(route.absolutePath);
     if (!routes) {
@@ -951,6 +987,16 @@ async function _parseNode(routerNode, node, routes, map, routesByPath) {
                 appendNode = route.placeHolder;
                 element = route;
             }
+            else if (tagName === config.tagNames.guardHandler) {
+                if (routes.length > 0) {
+                    const route = routes[routes.length - 1];
+                    const script = element.querySelector('script[type="module"]');
+                    if (script) {
+                        loadGuardHandler(script, route);
+                    }
+                }
+                continue;
+            }
             else if (tagName === config.tagNames.layout) {
                 const childFragment = document.createDocumentFragment();
                 // Move child nodes to fragment to avoid duplication of
@@ -1253,6 +1299,14 @@ function getNavigation() {
  * Container element that manages route definitions and navigation.
  */
 class Router extends HTMLElement {
+    static wcBindable = {
+        protocol: "wc-bindable",
+        version: 1,
+        properties: [
+            { name: "navigateUrl", event: "wcs-router:navigate-url-changed" },
+            { name: "path", event: "wcs-router:path-changed" },
+        ],
+    };
     static _instance = null;
     _outlet = null;
     _template = null;
@@ -1262,6 +1316,7 @@ class Router extends HTMLElement {
     _initialized = false;
     _fallbackRoute = null;
     _listeningPopState = false;
+    _navigateUrl = null;
     constructor() {
         super();
         if (Router._instance) {
@@ -1387,7 +1442,14 @@ class Router extends HTMLElement {
      * applyRoute 内で設定される値です。
      */
     set path(value) {
+        const changed = this._path !== value;
         this._path = value;
+        if (changed) {
+            this.dispatchEvent(new CustomEvent("wcs-router:path-changed", {
+                detail: value,
+                bubbles: true,
+            }));
+        }
     }
     get fallbackRoute() {
         return this._fallbackRoute;
@@ -1398,6 +1460,21 @@ class Router extends HTMLElement {
     set fallbackRoute(value) {
         this._fallbackRoute = value;
     }
+    get navigateUrl() {
+        return this._navigateUrl;
+    }
+    set navigateUrl(value) {
+        if (value === null || value === undefined || value === "")
+            return;
+        this._navigateUrl = value;
+        this.navigate(value).then(() => {
+            this._navigateUrl = null;
+            this.dispatchEvent(new CustomEvent("wcs-router:navigate-url-changed", {
+                detail: null,
+                bubbles: true,
+            }));
+        });
+    }
     async navigate(path) {
         const fullPath = this._joinInternalPath(this._basename, path);
         const navigation = getNavigation();
@@ -1832,5 +1909,5 @@ function bootstrapRouter(config) {
     registerComponents();
 }
 
-export { RouteCore, bootstrapRouter, getConfig };
+export { Route, RouteCore, Router, bootstrapRouter, getConfig };
 //# sourceMappingURL=index.esm.js.map