@wsxjs/wsx-core 0.0.13 → 0.0.15

package/dist/index.js

@@ -1208,14 +1208,45 @@ function deriveTagName(className, prefix) {
 // src/reactive-decorator.ts
 function state(targetOrContext, propertyKey) {
   let propertyName;
-  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+  const propertyKeyIsObject = typeof propertyKey === "object" && propertyKey !== null;
+  const targetIsObject = typeof targetOrContext === "object" && targetOrContext !== null;
+  const hasStage3Indicators = targetIsObject && ("kind" in targetOrContext || "addInitializer" in targetOrContext || "access" in targetOrContext);
+  const hasName = hasStage3Indicators && "name" in targetOrContext;
+  const isStage3Decorator = propertyKeyIsObject || hasName || hasStage3Indicators && (propertyKey === void 0 || propertyKey === null) || targetIsObject && "addInitializer" in targetOrContext;
+  if (isStage3Decorator) {
     const context = targetOrContext;
-    propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    if (context.name) {
+      propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    } else if (propertyKeyIsObject) {
+      if ("name" in propertyKey) {
+        const keyObj = propertyKey;
+        propertyName = keyObj.name ? typeof keyObj.name === "string" ? keyObj.name : keyObj.name.toString() : "unknown";
+      } else if ("key" in propertyKey) {
+        const keyObj = propertyKey;
+        propertyName = keyObj.key ? typeof keyObj.key === "string" ? keyObj.key : keyObj.key.toString() : "unknown";
+      } else {
+        const keyStr = String(propertyKey);
+        if (keyStr !== "[object Object]") {
+          propertyName = keyStr;
+        } else {
+          propertyName = "unknown";
+        }
+      }
+    } else {
+      propertyName = "unknown";
+    }
   } else {
     if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
       propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
+    } else if (propertyKey != null) {
+      const propertyKeyStr = String(propertyKey);
+      if (propertyKeyStr === "[object Object]") {
+        propertyName = "unknown";
+      } else {
+        propertyName = propertyKeyStr;
+      }
     } else {
-      propertyName = String(propertyKey);
+      propertyName = "unknown";
     }
   }
   console.warn(
@@ -1233,15 +1264,34 @@ To fix this and enable compile-time processing, please:
 
 See: https://github.com/wsxjs/wsxjs#setup for more details.`
   );
-  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
-    const context = targetOrContext;
-    if (context.kind !== "field") {
+  if (isStage3Decorator) {
+    let context;
+    if (hasStage3Indicators) {
+      context = targetOrContext;
+    } else if (propertyKeyIsObject) {
+      const keyObj = propertyKey;
+      const targetObj = targetOrContext;
+      const nameValue = targetObj.name || keyObj.name || keyObj.key || "unknown";
+      context = {
+        kind: targetObj.kind || "field",
+        name: nameValue,
+        addInitializer: targetObj.addInitializer || keyObj.addInitializer,
+        access: targetObj.access || keyObj.access
+      };
+    } else {
+      context = targetOrContext;
+    }
+    if (context.kind && context.kind !== "field") {
       const nameStr = typeof context.name === "string" ? context.name : context.name.toString();
       throw new Error(
         `@state decorator can only be used on class fields, not ${context.kind}. Property: "${nameStr}"`
       );
     }
-    if (context.addInitializer) {
+    if (!context.addInitializer) {
+      console.warn(
+        `[WSX] @state decorator: addInitializer not available for property "${propertyName}". The property will not be reactive. This usually means the decorator system is not properly configured.`
+      );
+    } else {
       context.addInitializer(function() {
         if (!this || typeof this.reactive !== "function" || typeof this.useState !== "function") {
           throw new Error(
@@ -1294,13 +1344,39 @@ The @state decorator can only be used in classes that extend WebComponent or Lig
   let normalizedPropertyKey;
   if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
     normalizedPropertyKey = propertyKey;
-  } else {
+  } else if (propertyKey != null) {
     const propertyKeyStr = String(propertyKey);
     if (propertyKeyStr === "[object Object]") {
+      if (typeof targetOrContext === "object" && targetOrContext !== null && ("kind" in targetOrContext || "addInitializer" in targetOrContext)) {
+        console.warn(
+          `[WSX] @state decorator: Detected potential Stage 3 decorator format but with unexpected propertyKey. This might be a compatibility issue. The decorator will attempt to work in runtime fallback mode.`
+        );
+        const context = targetOrContext;
+        if (context.name) {
+          const name = typeof context.name === "string" ? context.name : context.name.toString();
+          throw new Error(
+            `@state decorator: Detected Stage 3 decorator format but with invalid propertyKey. Property name: "${name}". 
+
+This usually means the decorator is being called in an unexpected format. Please ensure you have configured the Babel plugin correctly. 
+
+To fix this, please:
+1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
+2. Configure it in vite.config.ts:
+   import { wsx } from '@wsxjs/wsx-vite-plugin';
+   export default defineConfig({ plugins: [wsx()] });
+3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):
+   npm install --save-dev @wsxjs/wsx-tsconfig
+   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }
+   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }
+
+See: https://github.com/wsxjs/wsxjs#setup for more details.`
+          );
+        }
+      }
       throw new Error(
-        `@state decorator: Invalid propertyKey detected. 
+        `@state decorator: Invalid propertyKey detected (received object instead of string/symbol). 
 
-The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup.
+The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup. 
 
 To fix this, please:
 1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
@@ -1316,6 +1392,10 @@ See: https://github.com/wsxjs/wsxjs#setup for more details.`
       );
     }
     normalizedPropertyKey = propertyKeyStr;
+  } else {
+    throw new Error(
+      `@state decorator: propertyKey is missing. This usually means the decorator is not being called correctly. Please ensure you're using @state on a class field, not a method or other construct.`
+    );
   }
   if (target == null) {
     const propertyKeyStr = typeof normalizedPropertyKey === "string" ? normalizedPropertyKey : normalizedPropertyKey.toString();

package/dist/index.mjs

@@ -975,14 +975,45 @@ function deriveTagName(className, prefix) {
 // src/reactive-decorator.ts
 function state(targetOrContext, propertyKey) {
   let propertyName;
-  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+  const propertyKeyIsObject = typeof propertyKey === "object" && propertyKey !== null;
+  const targetIsObject = typeof targetOrContext === "object" && targetOrContext !== null;
+  const hasStage3Indicators = targetIsObject && ("kind" in targetOrContext || "addInitializer" in targetOrContext || "access" in targetOrContext);
+  const hasName = hasStage3Indicators && "name" in targetOrContext;
+  const isStage3Decorator = propertyKeyIsObject || hasName || hasStage3Indicators && (propertyKey === void 0 || propertyKey === null) || targetIsObject && "addInitializer" in targetOrContext;
+  if (isStage3Decorator) {
     const context = targetOrContext;
-    propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    if (context.name) {
+      propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    } else if (propertyKeyIsObject) {
+      if ("name" in propertyKey) {
+        const keyObj = propertyKey;
+        propertyName = keyObj.name ? typeof keyObj.name === "string" ? keyObj.name : keyObj.name.toString() : "unknown";
+      } else if ("key" in propertyKey) {
+        const keyObj = propertyKey;
+        propertyName = keyObj.key ? typeof keyObj.key === "string" ? keyObj.key : keyObj.key.toString() : "unknown";
+      } else {
+        const keyStr = String(propertyKey);
+        if (keyStr !== "[object Object]") {
+          propertyName = keyStr;
+        } else {
+          propertyName = "unknown";
+        }
+      }
+    } else {
+      propertyName = "unknown";
+    }
   } else {
     if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
       propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
+    } else if (propertyKey != null) {
+      const propertyKeyStr = String(propertyKey);
+      if (propertyKeyStr === "[object Object]") {
+        propertyName = "unknown";
+      } else {
+        propertyName = propertyKeyStr;
+      }
     } else {
-      propertyName = String(propertyKey);
+      propertyName = "unknown";
     }
   }
   console.warn(
@@ -1000,15 +1031,34 @@ To fix this and enable compile-time processing, please:
 
 See: https://github.com/wsxjs/wsxjs#setup for more details.`
   );
-  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
-    const context = targetOrContext;
-    if (context.kind !== "field") {
+  if (isStage3Decorator) {
+    let context;
+    if (hasStage3Indicators) {
+      context = targetOrContext;
+    } else if (propertyKeyIsObject) {
+      const keyObj = propertyKey;
+      const targetObj = targetOrContext;
+      const nameValue = targetObj.name || keyObj.name || keyObj.key || "unknown";
+      context = {
+        kind: targetObj.kind || "field",
+        name: nameValue,
+        addInitializer: targetObj.addInitializer || keyObj.addInitializer,
+        access: targetObj.access || keyObj.access
+      };
+    } else {
+      context = targetOrContext;
+    }
+    if (context.kind && context.kind !== "field") {
       const nameStr = typeof context.name === "string" ? context.name : context.name.toString();
       throw new Error(
         `@state decorator can only be used on class fields, not ${context.kind}. Property: "${nameStr}"`
       );
     }
-    if (context.addInitializer) {
+    if (!context.addInitializer) {
+      console.warn(
+        `[WSX] @state decorator: addInitializer not available for property "${propertyName}". The property will not be reactive. This usually means the decorator system is not properly configured.`
+      );
+    } else {
       context.addInitializer(function() {
         if (!this || typeof this.reactive !== "function" || typeof this.useState !== "function") {
           throw new Error(
@@ -1061,13 +1111,39 @@ The @state decorator can only be used in classes that extend WebComponent or Lig
   let normalizedPropertyKey;
   if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
     normalizedPropertyKey = propertyKey;
-  } else {
+  } else if (propertyKey != null) {
     const propertyKeyStr = String(propertyKey);
     if (propertyKeyStr === "[object Object]") {
+      if (typeof targetOrContext === "object" && targetOrContext !== null && ("kind" in targetOrContext || "addInitializer" in targetOrContext)) {
+        console.warn(
+          `[WSX] @state decorator: Detected potential Stage 3 decorator format but with unexpected propertyKey. This might be a compatibility issue. The decorator will attempt to work in runtime fallback mode.`
+        );
+        const context = targetOrContext;
+        if (context.name) {
+          const name = typeof context.name === "string" ? context.name : context.name.toString();
+          throw new Error(
+            `@state decorator: Detected Stage 3 decorator format but with invalid propertyKey. Property name: "${name}". 
+
+This usually means the decorator is being called in an unexpected format. Please ensure you have configured the Babel plugin correctly. 
+
+To fix this, please:
+1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
+2. Configure it in vite.config.ts:
+   import { wsx } from '@wsxjs/wsx-vite-plugin';
+   export default defineConfig({ plugins: [wsx()] });
+3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):
+   npm install --save-dev @wsxjs/wsx-tsconfig
+   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }
+   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }
+
+See: https://github.com/wsxjs/wsxjs#setup for more details.`
+          );
+        }
+      }
       throw new Error(
-        `@state decorator: Invalid propertyKey detected. 
+        `@state decorator: Invalid propertyKey detected (received object instead of string/symbol). 
 
-The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup.
+The @state decorator MUST be processed by Babel plugin at compile time. It appears the Babel plugin is not configured in your build setup. 
 
 To fix this, please:
 1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin
@@ -1083,6 +1159,10 @@ See: https://github.com/wsxjs/wsxjs#setup for more details.`
       );
     }
     normalizedPropertyKey = propertyKeyStr;
+  } else {
+    throw new Error(
+      `@state decorator: propertyKey is missing. This usually means the decorator is not being called correctly. Please ensure you're using @state on a class field, not a method or other construct.`
+    );
   }
   if (target == null) {
     const propertyKeyStr = typeof normalizedPropertyKey === "string" ? normalizedPropertyKey : normalizedPropertyKey.toString();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-core",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Core WSX Framework - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/base-component.ts

@@ -119,7 +119,7 @@ export abstract class BaseComponent extends HTMLElement {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * 可选生命周期钩子：组件已连接

package/src/light-component.ts

@@ -34,10 +34,16 @@ export abstract class LightComponent extends BaseComponent {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * Web Component生命周期：连接到DOM
+     *
+     * 渲染策略：
+     * 1. 检查组件中是否已有实际内容（排除样式元素）
+     * 2. 如果有内容且完整，跳过渲染（避免重复元素和性能优化）
+     * 3. 如果没有内容或不完整，清空后重新渲染
+     * 4. 样式元素需要保留
      */
     connectedCallback(): void {
         this.connected = true;
@@ -48,19 +54,57 @@ export abstract class LightComponent extends BaseComponent {
             // So we need to check _autoStyles directly first, then fallback to config.styles getter
             // The getter will dynamically check _autoStyles when accessed
             const stylesToApply = this._autoStyles || this.config.styles;
+            const styleName = this.config.styleName || this.constructor.name;
             if (stylesToApply) {
-                const styleName = this.config.styleName || this.constructor.name;
                 this.applyScopedStyles(styleName, stylesToApply);
             }
 
-            // 渲染JSX内容到Light DOM
-            const content = this.render();
-            this.appendChild(content);
+            // 检查是否有实际内容（排除样式元素）
+            // 错误元素：如果存在错误信息，需要重新渲染以恢复正常
+            const styleElement = this.querySelector(
+                `style[data-wsx-light-component="${styleName}"]`
+            ) as HTMLStyleElement | null;
+            const hasErrorElement = Array.from(this.children).some(
+                (child) =>
+                    child instanceof HTMLElement &&
+                    child !== styleElement &&
+                    child.style.color === "red" &&
+                    child.textContent?.includes("Component Error")
+            );
+            const hasActualContent = Array.from(this.children).some(
+                (child) => child !== styleElement
+            );
+
+            // 如果有错误元素，需要重新渲染以恢复正常
+            // 如果有实际内容且没有错误，跳过渲染（避免重复元素）
+            if (hasActualContent && !hasErrorElement) {
+                // 已经有内容且没有错误，跳过渲染（避免重复元素）
+                // 但确保样式元素在正确位置
+                if (styleElement && styleElement !== this.firstChild) {
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            } else {
+                // 没有内容，需要渲染
+                // 清空旧内容（保留样式元素）
+                const childrenToRemove = Array.from(this.children).filter(
+                    (child) => child !== styleElement
+                );
+                childrenToRemove.forEach((child) => child.remove());
+
+                // 渲染JSX内容到Light DOM
+                const content = this.render();
+                this.appendChild(content);
+
+                // 确保样式元素在第一个位置（如果存在）
+                if (styleElement && styleElement !== this.firstChild) {
+                    this.insertBefore(styleElement, this.firstChild);
+                }
+            }
 
-            // 初始化事件监听器
+            // 初始化事件监听器（无论是否渲染，都需要重新初始化，因为 DOM 可能被移动）
             this.initializeEventListeners();
 
-            // 调用子类的初始化钩子
+            // 调用子类的初始化钩子（无论是否渲染，都需要调用，因为组件已连接）
             this.onConnected?.();
         } catch (error) {
             logger.error(`[${this.constructor.name}] Error in connectedCallback:`, error);

package/src/reactive-decorator.ts

@@ -48,241 +48,136 @@ interface DecoratorContext {
     addInitializer?(initializer: () => void): void;
 }
 
+/**
+ * Helper function to create error message for missing Babel plugin
+ */
+function createBabelPluginError(propertyName: string): string {
+    return (
+        `@state decorator on property "${propertyName}" MUST be processed by Babel plugin at compile time. ` +
+        `It appears the Babel plugin is not configured in your build setup. ` +
+        `\n\n` +
+        `The @state decorator cannot work without the Babel plugin. ` +
+        `\n\n` +
+        `To fix this, please:` +
+        `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
+        `\n2. Configure it in vite.config.ts:` +
+        `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
+        `\n   export default defineConfig({ plugins: [wsx()] });` +
+        `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
+        `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
+        `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
+        `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
+        `\n\n` +
+        `See: https://github.com/wsxjs/wsxjs#setup for more details.`
+    );
+}
+
 export function state(
     targetOrContext: unknown | DecoratorContext,
     propertyKey?: string | symbol | unknown
-): unknown {
+    // Compatibility with Babel plugin which is required for this decorator to work properly
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any {
     /**
-     * @state decorator supports both:
-     * 1. Compile-time processing by Babel plugin (preferred) - decorator is removed at compile time
-     * 2. Runtime fallback when Babel plugin is not configured - decorator executes at runtime
-     *
+     * @state decorator MUST be processed by Babel plugin at compile time.
      * If this function is executed at runtime, it means Babel plugin did not process it.
-     * We should warn the user and provide fallback functionality.
+     * We MUST throw an error - no fallback is allowed.
      */
 
-    // Determine property name for warning message
-    let propertyName: string;
-    if (
-        typeof targetOrContext === "object" &&
-        targetOrContext !== null &&
-        "kind" in targetOrContext &&
-        "name" in targetOrContext
-    ) {
-        // Stage 3 decorator format
-        const context = targetOrContext as DecoratorContext;
-        propertyName = typeof context.name === "string" ? context.name : context.name.toString();
-    } else {
-        // Legacy decorator format
-        if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
-            propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
-        } else {
-            propertyName = String(propertyKey);
-        }
-    }
-
-    // Show warning immediately when decorator is executed at runtime
-    // This means Babel plugin did not process it
-    console.warn(
-        `[WSX] @state decorator is using runtime fallback. ` +
-            `Property "${propertyName}" will work but with reduced performance. ` +
-            `\n\n` +
-            `To fix this and enable compile-time processing, please:` +
-            `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
-            `\n2. Configure it in vite.config.ts:` +
-            `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
-            `\n   export default defineConfig({ plugins: [wsx()] });` +
-            `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
-            `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
-            `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
-            `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
-            `\n\n` +
-            `See: https://github.com/wsxjs/wsxjs#setup for more details.`
-    );
+    // Determine property name for error message
+    let propertyName: string = "unknown";
 
     // Check if this is a Stage 3 decorator (context object)
-    if (
-        typeof targetOrContext === "object" &&
-        targetOrContext !== null &&
-        "kind" in targetOrContext &&
-        "name" in targetOrContext
-    ) {
-        const context = targetOrContext as DecoratorContext;
-
-        // Only support field decorators
-        if (context.kind !== "field") {
-            const nameStr =
-                typeof context.name === "string" ? context.name : context.name.toString();
-            throw new Error(
-                `@state decorator can only be used on class fields, not ${context.kind}. Property: "${nameStr}"`
-            );
-        }
-
-        // Runtime fallback: Use addInitializer to set up reactive state
-        if (context.addInitializer) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            context.addInitializer(function (this: any) {
-                // 'this' refers to the component instance
-                if (
-                    !this ||
-                    typeof this.reactive !== "function" ||
-                    typeof this.useState !== "function"
-                ) {
-                    throw new Error(
-                        `@state decorator runtime fallback: Component does not extend WebComponent or LightComponent. ` +
-                            `Property "${propertyName}" cannot be made reactive. ` +
-                            `\n\n` +
-                            `The @state decorator can only be used in classes that extend WebComponent or LightComponent. ` +
-                            `Please ensure your component class extends one of these base classes.`
-                    );
+    const propertyKeyIsObject = typeof propertyKey === "object" && propertyKey !== null;
+    const targetIsObject = typeof targetOrContext === "object" && targetOrContext !== null;
+
+    const hasStage3Indicators =
+        targetIsObject &&
+        ("kind" in targetOrContext ||
+            "addInitializer" in targetOrContext ||
+            "access" in targetOrContext);
+
+    const hasName = hasStage3Indicators && "name" in targetOrContext;
+
+    const isStage3Decorator =
+        propertyKeyIsObject ||
+        hasName ||
+        (hasStage3Indicators && (propertyKey === undefined || propertyKey === null)) ||
+        (targetIsObject && "addInitializer" in targetOrContext);
+
+    if (isStage3Decorator) {
+        // Stage 3 decorator format - determine property name safely
+        if (hasStage3Indicators && targetOrContext && typeof targetOrContext === "object") {
+            const context = targetOrContext as DecoratorContext;
+            if (context.name) {
+                propertyName =
+                    typeof context.name === "string" ? context.name : context.name.toString();
+            }
+        } else if (propertyKeyIsObject) {
+            // If propertyKey is an object, try to extract name from it
+            const keyObj = propertyKey as Record<string, unknown>;
+            const targetObj = targetOrContext as Record<string, unknown> | null;
+
+            // Try to get name from multiple sources
+            const nameValue =
+                (targetObj?.name as string | symbol | undefined) ||
+                (keyObj.name as string | symbol | undefined) ||
+                (keyObj.key as string | symbol | undefined);
+
+            if (nameValue) {
+                propertyName = typeof nameValue === "string" ? nameValue : nameValue.toString();
+            } else {
+                const keyStr = String(propertyKey);
+                if (keyStr !== "[object Object]") {
+                    propertyName = keyStr;
                 }
+            }
+        }
 
-                // Get initial value - try from access.get() first, then from property
-                let initialValue: unknown = undefined;
-                if (context.access?.get) {
-                    try {
-                        initialValue = context.access.get();
-                    } catch {
-                        // Access might not be available yet, try property directly
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        initialValue = (this as any)[propertyName];
-                    }
-                } else {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    initialValue = (this as any)[propertyName];
-                }
-
-                // Determine if it's an object/array
-                const isObject =
-                    initialValue !== null &&
-                    initialValue !== undefined &&
-                    (typeof initialValue === "object" || Array.isArray(initialValue));
-
-                if (isObject) {
-                    // For objects/arrays: use reactive()
-                    let reactiveValue = this.reactive(initialValue);
-                    Object.defineProperty(this, propertyName, {
-                        get: () => reactiveValue,
-                        set: (newValue: unknown) => {
-                            // Auto-wrap new values in reactive if they're objects/arrays
-                            if (
-                                newValue !== null &&
-                                newValue !== undefined &&
-                                (typeof newValue === "object" || Array.isArray(newValue))
-                            ) {
-                                // Create new reactive value
-                                reactiveValue = this.reactive(newValue);
-                                this.scheduleRerender();
-                            } else {
-                                // For primitives, just assign (but this shouldn't happen for object properties)
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                reactiveValue = newValue as any;
-                                this.scheduleRerender();
-                            }
-                        },
-                        enumerable: true,
-                        configurable: true,
-                    });
-                } else {
-                    // For primitives: use useState
-                    const [getState, setState] = this.useState(propertyName, initialValue);
-                    Object.defineProperty(this, propertyName, {
-                        get: getState,
-                        set: setState,
-                        enumerable: true,
-                        configurable: true,
-                    });
-                }
-            });
+        // Only support field decorators (if kind is specified)
+        if (targetIsObject && "kind" in targetOrContext) {
+            const context = targetOrContext as DecoratorContext;
+            if (context.kind && context.kind !== "field") {
+                const nameStr =
+                    typeof context.name === "string" ? context.name : context.name.toString();
+                throw new Error(
+                    `@state decorator can only be used on class fields, not ${context.kind}. Property: "${nameStr}"`
+                );
+            }
         }
 
-        // Return context for Stage 3 decorators
-        return context;
+        // If we reach here, the decorator is being executed at runtime
+        // This means Babel plugin did not process it - throw error immediately
+        throw new Error(createBabelPluginError(propertyName));
     }
 
     // Legacy decorator format (experimentalDecorators: true)
     // This should ideally be removed by Babel plugin
-    const target = targetOrContext;
-    let normalizedPropertyKey: string | symbol;
     if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
-        normalizedPropertyKey = propertyKey;
-    } else {
+        propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
+    } else if (propertyKey != null) {
         const propertyKeyStr = String(propertyKey);
         if (propertyKeyStr === "[object Object]") {
-            // Invalid propertyKey - Babel plugin was not configured
-            throw new Error(
-                `@state decorator: Invalid propertyKey detected. ` +
-                    `\n\n` +
-                    `The @state decorator MUST be processed by Babel plugin at compile time. ` +
-                    `It appears the Babel plugin is not configured in your build setup.` +
-                    `\n\n` +
-                    `To fix this, please:` +
-                    `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
-                    `\n2. Configure it in vite.config.ts:` +
-                    `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
-                    `\n   export default defineConfig({ plugins: [wsx()] });` +
-                    `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
-                    `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
-                    `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
-                    `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
-                    `\n\n` +
-                    `See: https://github.com/wsxjs/wsxjs#setup for more details.`
-            );
+            // Invalid propertyKey - this might happen if decorator is called in unexpected format
+            // Check if targetOrContext might actually be a Stage 3 context that we missed
+            if (
+                typeof targetOrContext === "object" &&
+                targetOrContext !== null &&
+                ("kind" in targetOrContext || "addInitializer" in targetOrContext)
+            ) {
+                // This looks like it might be a Stage 3 decorator that we didn't detect properly
+                const context = targetOrContext as Partial<DecoratorContext>;
+                if (context.name) {
+                    propertyName =
+                        typeof context.name === "string" ? context.name : context.name.toString();
+                }
+            }
+        } else {
+            propertyName = propertyKeyStr;
         }
-        normalizedPropertyKey = propertyKeyStr;
-    }
-
-    // Basic validation: ensure target is valid
-    if (target == null) {
-        const propertyKeyStr =
-            typeof normalizedPropertyKey === "string"
-                ? normalizedPropertyKey
-                : normalizedPropertyKey.toString();
-        throw new Error(
-            `@state decorator: Cannot access property "${propertyKeyStr}". ` +
-                `Target is ${target === null ? "null" : "undefined"}.` +
-                `\n\n` +
-                `The @state decorator MUST be processed by Babel plugin at compile time. ` +
-                `It appears the Babel plugin is not configured in your build setup.` +
-                `\n\n` +
-                `To fix this, please:` +
-                `\n1. Install @wsxjs/wsx-vite-plugin: npm install @wsxjs/wsx-vite-plugin` +
-                `\n2. Configure it in vite.config.ts:` +
-                `\n   import { wsx } from '@wsxjs/wsx-vite-plugin';` +
-                `\n   export default defineConfig({ plugins: [wsx()] });` +
-                `\n3. Configure TypeScript (recommended: use @wsxjs/wsx-tsconfig):` +
-                `\n   npm install --save-dev @wsxjs/wsx-tsconfig` +
-                `\n   Then in tsconfig.json: { "extends": "@wsxjs/wsx-tsconfig/tsconfig.base.json" }` +
-                `\n   Or manually: { "compilerOptions": { "experimentalDecorators": true, "useDefineForClassFields": false } }` +
-                `\n\n` +
-                `See: https://github.com/wsxjs/wsxjs#setup for more details.`
-        );
-    }
-
-    if (typeof target !== "object") {
-        const propertyKeyStr =
-            typeof normalizedPropertyKey === "string"
-                ? normalizedPropertyKey
-                : normalizedPropertyKey.toString();
-        throw new Error(
-            `@state decorator: Cannot be used on "${propertyKeyStr}". ` +
-                `@state is for properties only, not methods.`
-        );
-    }
-
-    // Validate that property has an initial value
-    const descriptor = Object.getOwnPropertyDescriptor(target, normalizedPropertyKey);
-    if (descriptor?.get) {
-        const propertyKeyStr =
-            typeof normalizedPropertyKey === "string"
-                ? normalizedPropertyKey
-                : normalizedPropertyKey.toString();
-        throw new Error(
-            `@state decorator cannot be used with getter properties. Property: "${propertyKeyStr}"`
-        );
     }
 
-    // Note: We don't store metadata or remove the property here.
-    // Babel plugin handles everything at compile time.
-    // If this function is called at runtime, it means Babel plugin didn't process the decorator.
+    // If we reach here, the decorator is being executed at runtime
+    // This means Babel plugin did not process it - throw error immediately
+    throw new Error(createBabelPluginError(propertyName));
 }

package/src/web-component.ts

@@ -40,25 +40,66 @@ export abstract class WebComponent extends BaseComponent {
      *
      * @returns JSX元素
      */
-    abstract render(): HTMLElement;
+    abstract render(): HTMLElement | SVGElement;
 
     /**
      * Web Component生命周期：连接到DOM
+     *
+     * 渲染策略：
+     * 1. 检查 Shadow DOM 中是否已有实际内容（排除样式和 slot）
+     * 2. 如果有内容，先清空再渲染（避免重复元素）
+     * 3. 如果没有内容，直接渲染
+     * 4. Slot 元素会被重新添加，浏览器会自动将 Light DOM 中的内容分配到 slot
      */
     connectedCallback(): void {
         this.connected = true;
         try {
-            // 应用CSS样式到Shadow DOM
-            // Check both _autoStyles getter and config.styles getter
+            // 应用CSS样式到Shadow DOM（先应用，因为样式可能使用 fallback 添加 style 元素）
             const stylesToApply = this._autoStyles || this.config.styles;
             if (stylesToApply) {
                 const styleName = this.config.styleName || this.constructor.name;
                 StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
             }
 
-            // 渲染JSX内容到Shadow DOM
-            const content = this.render();
-            this.shadowRoot.appendChild(content);
+            // 检查是否有实际内容（排除样式和 slot）
+            // 样式元素：可能由 StyleManager fallback 添加
+            // Slot 元素：不算"内容"，因为 slot 的内容在 Light DOM 中
+            // 错误元素：如果存在错误信息，需要重新渲染以恢复正常
+            const allChildren = Array.from(this.shadowRoot.children);
+            const styleElements = allChildren.filter((child) => child instanceof HTMLStyleElement);
+            const slotElements = allChildren.filter((child) => child instanceof HTMLSlotElement);
+            const hasErrorElement = allChildren.some(
+                (child) =>
+                    child instanceof HTMLElement &&
+                    child.style.color === "red" &&
+                    child.textContent?.includes("Component Error")
+            );
+            const hasActualContent =
+                allChildren.length > styleElements.length + slotElements.length;
+
+            // 如果有错误元素，需要重新渲染以恢复正常
+            // 如果有实际内容且没有错误，跳过渲染（避免重复元素）
+            if (hasActualContent && !hasErrorElement) {
+                // 已经有内容且没有错误，跳过渲染（避免重复元素）
+                // 样式已在上方应用（StyleManager.applyStyles 是幂等的）
+                // Slot 元素已存在，浏览器会自动将 Light DOM 中的内容分配到 slot
+            } else {
+                // 没有内容，需要渲染
+                // 清空 Shadow DOM（包括可能的旧内容）
+                this.shadowRoot.innerHTML = "";
+
+                // 重新应用样式（因为上面清空了）
+                if (stylesToApply) {
+                    const styleName = this.config.styleName || this.constructor.name;
+                    StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+                }
+
+                // 渲染JSX内容到Shadow DOM
+                // render() 应该返回包含 slot 元素的内容（如果需要）
+                // 浏览器会自动将 Light DOM 中的内容分配到 slot
+                const content = this.render();
+                this.shadowRoot.appendChild(content);
+            }
 
             // 初始化事件监听器
             this.initializeEventListeners();