@wsxjs/wsx-router 0.0.17 → 0.0.18

package/src/WsxView.wsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @wsxjs/wsx-core */
-import { LightComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import { LightComponent, autoRegister } from "@wsxjs/wsx-core";
+import { createLogger } from "@wsxjs/wsx-logger";
 import styles from "./WsxView.css?inline";
 
 const logger = createLogger("WsxView");
@@ -24,6 +25,7 @@ export default class WsxView extends LightComponent {
     private component: string | null = null;
     private params: Record<string, string> = {};
     private componentInstance: HTMLElement | null = null;
+    private isLoading: boolean = false; // 防止重复加载的标志
 
     constructor() {
         super({
@@ -41,58 +43,129 @@ export default class WsxView extends LightComponent {
     }
 
     protected onConnected() {
-        // Check if component attribute is already set and load it
-        const componentName = this.getAttribute("component");
-        if (componentName && !this.componentInstance) {
-            this.loadComponent(componentName);
-        }
+        // 延迟加载，避免在 connectedCallback 中同步执行
+        requestAnimationFrame(() => {
+            // 重新检查，防止在延迟期间已经加载
+            if (!this.connected || this.isLoading || this.componentInstance) {
+                return;
+            }
+
+            const componentName = this.getAttribute("component");
+            if (componentName) {
+                this.loadComponent(componentName);
+            }
+        });
     }
 
     protected onAttributeChanged(name: string, _oldValue: string, newValue: string) {
-        if (name === "component" && newValue && !this.componentInstance) {
-            this.loadComponent(newValue);
+        // 只在组件已连接时处理属性变化
+        if (!this.connected) {
+            return;
+        }
+
+        if (name === "component" && newValue && !this.componentInstance && !this.isLoading) {
+            // 延迟加载，避免在 attributeChangedCallback 中同步执行
+            requestAnimationFrame(() => {
+                if (this.connected && !this.componentInstance && !this.isLoading) {
+                    this.loadComponent(newValue);
+                }
+            });
         } else if (name === "params" && this.componentInstance) {
             // 更新组件参数
             try {
                 this.params = JSON.parse(newValue);
+                logger.debug(
+                    `WsxView: params attribute changed, setting on component:`,
+                    this.params
+                );
                 Object.entries(this.params).forEach(([key, value]) => {
                     this.componentInstance!.setAttribute(key, value);
                 });
+                logger.debug(`WsxView: params set on component ${this.componentInstance.tagName}`);
             } catch (e) {
-                logger.error("Failed to parse params:", e);
+                logger.warn("Failed to parse params:", e);
             }
         }
     }
 
     private async loadComponent(componentName: string) {
-        // 清理旧组件
-        if (this.componentInstance) {
-            this.componentInstance.remove();
-            this.componentInstance = null;
+        // 防止重复加载
+        if (!this.connected || this.isLoading || this.componentInstance) {
+            logger.debug(
+                `Skipping loadComponent for ${componentName}: connected=${this.connected}, isLoading=${this.isLoading}, hasInstance=${!!this.componentInstance}`
+            );
+            return;
         }
 
-        // 检查组件是否已注册
-        const elementClass = customElements.get(componentName);
+        logger.debug(`WsxView: Loading component ${componentName}`);
+        this.isLoading = true; // 设置标志
 
-        if (!elementClass) {
-            logger.warn(`Component ${componentName} not found in customElements registry`);
-            return;
-        }
+        try {
+            // 清理旧组件（虽然理论上不应该有，但为了安全起见）
+            const instance = this.componentInstance;
+            if (instance) {
+                (instance as HTMLElement).remove();
+                this.componentInstance = null;
+            }
 
-        this.componentInstance = document.createElement(componentName);
+            // 检查组件是否已注册
+            const elementClass = customElements.get(componentName);
 
-        // 传递初始参数
-        if (Object.keys(this.params).length > 0) {
-            Object.entries(this.params).forEach(([key, value]) => {
-                this.componentInstance!.setAttribute(key, value);
-            });
-        }
+            if (!elementClass) {
+                logger.warn(`Component ${componentName} not found in customElements registry`);
+                this.isLoading = false; // 重置标志
+                return;
+            }
+
+            logger.warn(`WsxView: Creating instance of ${componentName}`);
+            this.componentInstance = document.createElement(componentName); // 立即设置实例，防止重复创建
 
-        const container = this.querySelector(".route-view");
-        if (container) {
-            container.appendChild(this.componentInstance);
-        } else {
-            logger.error("Route view container not found");
+            // 传递初始参数
+            if (Object.keys(this.params).length > 0) {
+                logger.warn(`WsxView: Setting initial params on ${componentName}:`, this.params);
+                Object.entries(this.params).forEach(([key, value]) => {
+                    this.componentInstance!.setAttribute(key, value);
+                });
+            }
+
+            const container = this.querySelector(".route-view");
+            if (container) {
+                logger.warn(`WsxView: Appending ${componentName} to container`);
+                // 在追加之前，确保组件已注册
+                if (!customElements.get(componentName)) {
+                    logger.error(
+                        `WsxView: Component ${componentName} is not registered in customElements registry!`
+                    );
+                    this.isLoading = false;
+                    this.componentInstance = null;
+                    return;
+                }
+                container.appendChild(this.componentInstance); // 这会触发新组件的 connectedCallback
+                logger.warn(
+                    `WsxView: Component ${componentName} appended successfully, waiting for connectedCallback...`
+                );
+                // 使用 setTimeout 验证组件是否真的连接了
+                setTimeout(() => {
+                    if (this.componentInstance && this.componentInstance.isConnected) {
+                        logger.warn(`WsxView: Component ${componentName} is now connected to DOM`);
+                    } else {
+                        logger.error(
+                            `WsxView: Component ${componentName} was not connected to DOM!`
+                        );
+                    }
+                }, 0);
+            } else {
+                logger.error("WsxView: Route view container not found");
+                this.componentInstance = null; // 清除实例
+            }
+        } catch (error) {
+            logger.warn(`Error loading component ${componentName}:`, error);
+            this.componentInstance = null; // 清除实例
+        } finally {
+            this.isLoading = false; // 重置标志
+            logger.warn(
+                `WsxView: loadComponent for ${componentName} completed, isLoading=${this.isLoading}`
+            );
         }
     }
 

package/src/index.ts

@@ -1,5 +1,5 @@
 /**
- * WSX Router - Native History API-based routing for WSX Framework
+ * WSX Router - Native History API-based routing for WSXJS
  *
  * 提供基于原生 History API 的路由功能：
  * - 零依赖路由器组件

package/src/types/wsx.d.ts

@@ -1,6 +1,7 @@
 // Type declaration for .wsx files
 declare module "*.wsx" {
     import { WebComponent, LightComponent } from "@wsxjs/wsx-core";
-    const component: new (...args: unknown[]) => WebComponent | LightComponent;
-    export default component;
+    // Allow any class that extends WebComponent or LightComponent
+    const Component: new (...args: unknown[]) => WebComponent | LightComponent;
+    export default Component;
 }