@wsxjs/wsx-core 0.0.15 → 0.0.16

package/dist/index.js

@@ -898,6 +898,12 @@ var WebComponent = class extends BaseComponent {
   }
   /**
    * Web Component生命周期：连接到DOM
+   *
+   * 渲染策略：
+   * 1. 检查 Shadow DOM 中是否已有实际内容（排除样式和 slot）
+   * 2. 如果有内容，先清空再渲染（避免重复元素）
+   * 3. 如果没有内容，直接渲染
+   * 4. Slot 元素会被重新添加，浏览器会自动将 Light DOM 中的内容分配到 slot
    */
   connectedCallback() {
     this.connected = true;
@@ -907,8 +913,23 @@ var WebComponent = class extends BaseComponent {
         const styleName = this.config.styleName || this.constructor.name;
         StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
       }
-      const content = this.render();
-      this.shadowRoot.appendChild(content);
+      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) {
+      } else {
+        this.shadowRoot.innerHTML = "";
+        if (stylesToApply) {
+          const styleName = this.config.styleName || this.constructor.name;
+          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+        }
+        const content = this.render();
+        this.shadowRoot.appendChild(content);
+      }
       this.initializeEventListeners();
       this.onConnected?.();
     } catch (error) {
@@ -1021,17 +1042,45 @@ var LightComponent = class extends BaseComponent {
   }
   /**
    * Web Component生命周期：连接到DOM
+   *
+   * 渲染策略：
+   * 1. 检查组件中是否已有实际内容（排除样式元素）
+   * 2. 如果有内容且完整，跳过渲染（避免重复元素和性能优化）
+   * 3. 如果没有内容或不完整，清空后重新渲染
+   * 4. 样式元素需要保留
    */
   connectedCallback() {
     this.connected = true;
     try {
       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);
       }
-      const content = this.render();
-      this.appendChild(content);
+      const styleElement = this.querySelector(
+        `style[data-wsx-light-component="${styleName}"]`
+      );
+      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());
+        const content = this.render();
+        this.appendChild(content);
+        if (styleElement && styleElement !== this.firstChild) {
+          this.insertBefore(styleElement, this.firstChild);
+        }
+      }
       this.initializeEventListeners();
       this.onConnected?.();
     } catch (error) {
@@ -1206,230 +1255,76 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
+function createBabelPluginError(propertyName) {
+  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. 
+
+The @state decorator cannot work without the Babel plugin. 
+
+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.`;
+}
 function state(targetOrContext, propertyKey) {
-  let propertyName;
+  let propertyName = "unknown";
   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;
-    if (context.name) {
-      propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    if (hasStage3Indicators && targetOrContext && typeof targetOrContext === "object") {
+      const context = targetOrContext;
+      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";
+      const keyObj = propertyKey;
+      const targetObj = targetOrContext;
+      const nameValue = targetObj?.name || keyObj.name || keyObj.key;
+      if (nameValue) {
+        propertyName = typeof nameValue === "string" ? nameValue : nameValue.toString();
       } 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;
+    if (targetIsObject && "kind" in targetOrContext) {
+      const 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}"`
+        );
       }
-    } else {
-      propertyName = "unknown";
     }
+    throw new Error(createBabelPluginError(propertyName));
   }
-  console.warn(
-    `[WSX] @state decorator is using runtime fallback. Property "${propertyName}" will work but with reduced performance. 
-
-To fix this and enable compile-time processing, 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.`
-  );
-  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) {
-      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(
-            `@state decorator runtime fallback: Component does not extend WebComponent or LightComponent. Property "${propertyName}" cannot be made reactive. 
-
-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.`
-          );
-        }
-        let initialValue = void 0;
-        if (context.access?.get) {
-          try {
-            initialValue = context.access.get();
-          } catch {
-            initialValue = this[propertyName];
-          }
-        } else {
-          initialValue = this[propertyName];
-        }
-        const isObject = initialValue !== null && initialValue !== void 0 && (typeof initialValue === "object" || Array.isArray(initialValue));
-        if (isObject) {
-          let reactiveValue = this.reactive(initialValue);
-          Object.defineProperty(this, propertyName, {
-            get: () => reactiveValue,
-            set: (newValue) => {
-              if (newValue !== null && newValue !== void 0 && (typeof newValue === "object" || Array.isArray(newValue))) {
-                reactiveValue = this.reactive(newValue);
-                this.scheduleRerender();
-              } else {
-                reactiveValue = newValue;
-                this.scheduleRerender();
-              }
-            },
-            enumerable: true,
-            configurable: true
-          });
-        } else {
-          const [getState, setState] = this.useState(propertyName, initialValue);
-          Object.defineProperty(this, propertyName, {
-            get: getState,
-            set: setState,
-            enumerable: true,
-            configurable: true
-          });
-        }
-      });
-    }
-    return context;
-  }
-  const target = targetOrContext;
-  let normalizedPropertyKey;
   if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
-    normalizedPropertyKey = propertyKey;
+    propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
   } 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.`
-          );
+          propertyName = typeof context.name === "string" ? context.name : context.name.toString();
         }
       }
-      throw new Error(
-        `@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. 
-
-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.`
-      );
+    } else {
+      propertyName = propertyKeyStr;
     }
-    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();
-    throw new Error(
-      `@state decorator: Cannot access property "${propertyKeyStr}". Target is ${target === null ? "null" : "undefined"}.
-
-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
-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.`
-    );
-  }
-  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.`
-    );
-  }
-  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}"`
-    );
   }
+  throw new Error(createBabelPluginError(propertyName));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -665,6 +665,12 @@ var WebComponent = class extends BaseComponent {
   }
   /**
    * Web Component生命周期：连接到DOM
+   *
+   * 渲染策略：
+   * 1. 检查 Shadow DOM 中是否已有实际内容（排除样式和 slot）
+   * 2. 如果有内容，先清空再渲染（避免重复元素）
+   * 3. 如果没有内容，直接渲染
+   * 4. Slot 元素会被重新添加，浏览器会自动将 Light DOM 中的内容分配到 slot
    */
   connectedCallback() {
     this.connected = true;
@@ -674,8 +680,23 @@ var WebComponent = class extends BaseComponent {
         const styleName = this.config.styleName || this.constructor.name;
         StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
       }
-      const content = this.render();
-      this.shadowRoot.appendChild(content);
+      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) {
+      } else {
+        this.shadowRoot.innerHTML = "";
+        if (stylesToApply) {
+          const styleName = this.config.styleName || this.constructor.name;
+          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+        }
+        const content = this.render();
+        this.shadowRoot.appendChild(content);
+      }
       this.initializeEventListeners();
       this.onConnected?.();
     } catch (error) {
@@ -788,17 +809,45 @@ var LightComponent = class extends BaseComponent {
   }
   /**
    * Web Component生命周期：连接到DOM
+   *
+   * 渲染策略：
+   * 1. 检查组件中是否已有实际内容（排除样式元素）
+   * 2. 如果有内容且完整，跳过渲染（避免重复元素和性能优化）
+   * 3. 如果没有内容或不完整，清空后重新渲染
+   * 4. 样式元素需要保留
    */
   connectedCallback() {
     this.connected = true;
     try {
       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);
       }
-      const content = this.render();
-      this.appendChild(content);
+      const styleElement = this.querySelector(
+        `style[data-wsx-light-component="${styleName}"]`
+      );
+      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());
+        const content = this.render();
+        this.appendChild(content);
+        if (styleElement && styleElement !== this.firstChild) {
+          this.insertBefore(styleElement, this.firstChild);
+        }
+      }
       this.initializeEventListeners();
       this.onConnected?.();
     } catch (error) {
@@ -973,230 +1022,76 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
+function createBabelPluginError(propertyName) {
+  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. 
+
+The @state decorator cannot work without the Babel plugin. 
+
+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.`;
+}
 function state(targetOrContext, propertyKey) {
-  let propertyName;
+  let propertyName = "unknown";
   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;
-    if (context.name) {
-      propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+    if (hasStage3Indicators && targetOrContext && typeof targetOrContext === "object") {
+      const context = targetOrContext;
+      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";
+      const keyObj = propertyKey;
+      const targetObj = targetOrContext;
+      const nameValue = targetObj?.name || keyObj.name || keyObj.key;
+      if (nameValue) {
+        propertyName = typeof nameValue === "string" ? nameValue : nameValue.toString();
       } 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;
+    if (targetIsObject && "kind" in targetOrContext) {
+      const 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}"`
+        );
       }
-    } else {
-      propertyName = "unknown";
     }
+    throw new Error(createBabelPluginError(propertyName));
   }
-  console.warn(
-    `[WSX] @state decorator is using runtime fallback. Property "${propertyName}" will work but with reduced performance. 
-
-To fix this and enable compile-time processing, 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.`
-  );
-  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) {
-      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(
-            `@state decorator runtime fallback: Component does not extend WebComponent or LightComponent. Property "${propertyName}" cannot be made reactive. 
-
-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.`
-          );
-        }
-        let initialValue = void 0;
-        if (context.access?.get) {
-          try {
-            initialValue = context.access.get();
-          } catch {
-            initialValue = this[propertyName];
-          }
-        } else {
-          initialValue = this[propertyName];
-        }
-        const isObject = initialValue !== null && initialValue !== void 0 && (typeof initialValue === "object" || Array.isArray(initialValue));
-        if (isObject) {
-          let reactiveValue = this.reactive(initialValue);
-          Object.defineProperty(this, propertyName, {
-            get: () => reactiveValue,
-            set: (newValue) => {
-              if (newValue !== null && newValue !== void 0 && (typeof newValue === "object" || Array.isArray(newValue))) {
-                reactiveValue = this.reactive(newValue);
-                this.scheduleRerender();
-              } else {
-                reactiveValue = newValue;
-                this.scheduleRerender();
-              }
-            },
-            enumerable: true,
-            configurable: true
-          });
-        } else {
-          const [getState, setState] = this.useState(propertyName, initialValue);
-          Object.defineProperty(this, propertyName, {
-            get: getState,
-            set: setState,
-            enumerable: true,
-            configurable: true
-          });
-        }
-      });
-    }
-    return context;
-  }
-  const target = targetOrContext;
-  let normalizedPropertyKey;
   if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
-    normalizedPropertyKey = propertyKey;
+    propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
   } 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.`
-          );
+          propertyName = typeof context.name === "string" ? context.name : context.name.toString();
         }
       }
-      throw new Error(
-        `@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. 
-
-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.`
-      );
+    } else {
+      propertyName = propertyKeyStr;
     }
-    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();
-    throw new Error(
-      `@state decorator: Cannot access property "${propertyKeyStr}". Target is ${target === null ? "null" : "undefined"}.
-
-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
-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.`
-    );
-  }
-  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.`
-    );
-  }
-  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}"`
-    );
   }
+  throw new Error(createBabelPluginError(propertyName));
 }
 export {
   Fragment,

package/package.json

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

package/src/utils/reactive.ts

@@ -101,7 +101,7 @@ function unwrapProxy(value: unknown): unknown {
         // 直接访问原始对象的属性，不通过 Proxy
         for (const key in original) {
             if (Object.prototype.hasOwnProperty.call(original, key)) {
-                const propValue = original[key];
+                const propValue = (original as Record<string, unknown>)[key];
                 // 如果属性值是 Proxy，先获取原始对象再递归
                 if (
                     propValue != null &&

package/dist/chunk-BV2V6BVN.mjs

@@ -1,221 +0,0 @@
-// src/utils/svg-utils.ts
-var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-var SVG_ONLY_ELEMENTS = /* @__PURE__ */ new Set([
-  // 结构元素 (Structural elements)
-  "svg",
-  "defs",
-  "g",
-  "symbol",
-  "use",
-  // 图形元素 (Graphics elements)
-  "circle",
-  "ellipse",
-  "line",
-  "path",
-  "polygon",
-  "polyline",
-  "rect",
-  // 文本元素 (Text elements)
-  "textPath",
-  "tspan",
-  // 渐变和模式 (Gradients and patterns)
-  "linearGradient",
-  "radialGradient",
-  "stop",
-  "pattern",
-  // 滤镜 (Filter elements)
-  "filter",
-  "feBlend",
-  "feColorMatrix",
-  "feComponentTransfer",
-  "feComposite",
-  "feConvolveMatrix",
-  "feDiffuseLighting",
-  "feDisplacementMap",
-  "feDistantLight",
-  "feDropShadow",
-  "feFlood",
-  "feFuncA",
-  "feFuncB",
-  "feFuncG",
-  "feFuncR",
-  "feGaussianBlur",
-  "feImage",
-  "feMerge",
-  "feMergeNode",
-  "feMorphology",
-  "feOffset",
-  "fePointLight",
-  "feSpecularLighting",
-  "feSpotLight",
-  "feTile",
-  "feTurbulence",
-  // 动画元素 (Animation elements)
-  "animate",
-  "animateMotion",
-  "animateTransform",
-  "set",
-  // 其他元素 (Other elements)
-  "clipPath",
-  "foreignObject",
-  "marker",
-  "mask",
-  "metadata",
-  "switch",
-  "desc"
-]);
-var DUAL_ELEMENTS = /* @__PURE__ */ new Set(["image", "style", "title", "text"]);
-var FORCE_HTML_ELEMENTS = /* @__PURE__ */ new Set(["a"]);
-var SVG_ELEMENTS = /* @__PURE__ */ new Set([
-  ...SVG_ONLY_ELEMENTS,
-  ...DUAL_ELEMENTS,
-  ...FORCE_HTML_ELEMENTS
-]);
-var svgContext = false;
-function isSVGOnlyElement(tagName) {
-  return SVG_ONLY_ELEMENTS.has(tagName);
-}
-function isDualElement(tagName) {
-  return DUAL_ELEMENTS.has(tagName);
-}
-function isForceHTMLElement(tagName) {
-  return FORCE_HTML_ELEMENTS.has(tagName);
-}
-function setSVGContext(inSVG) {
-  svgContext = inSVG;
-}
-function createElement(tagName) {
-  if (isForceHTMLElement(tagName)) {
-    return document.createElement(tagName);
-  }
-  if (isSVGOnlyElement(tagName)) {
-    setSVGContext(true);
-    return document.createElementNS(SVG_NAMESPACE, tagName);
-  }
-  if (isDualElement(tagName)) {
-    if (svgContext) {
-      return document.createElementNS(SVG_NAMESPACE, tagName);
-    }
-  }
-  return document.createElement(tagName);
-}
-function shouldUseSVGNamespace(tagName) {
-  return isSVGOnlyElement(tagName) || isDualElement(tagName) && svgContext;
-}
-var SVG_ATTRIBUTE_MAP = /* @__PURE__ */ new Map([
-  ["className", "class"],
-  ["htmlFor", "for"]
-]);
-function getSVGAttributeName(attributeName) {
-  return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
-}
-
-// src/jsx-factory.ts
-function h(tag, props = {}, ...children) {
-  if (typeof tag === "function") {
-    return tag(props, children);
-  }
-  const element = createElement(tag);
-  if (props) {
-    const isSVG = shouldUseSVGNamespace(tag);
-    Object.entries(props).forEach(([key, value]) => {
-      if (value === null || value === void 0 || value === false) {
-        return;
-      }
-      if (key === "ref" && typeof value === "function") {
-        value(element);
-      } else if (key === "className" || key === "class") {
-        if (isSVG) {
-          element.setAttribute("class", value);
-        } else {
-          element.className = value;
-        }
-      } else if (key === "style" && typeof value === "string") {
-        element.setAttribute("style", value);
-      } else if (key.startsWith("on") && typeof value === "function") {
-        const eventName = key.slice(2).toLowerCase();
-        element.addEventListener(eventName, value);
-      } else if (typeof value === "boolean") {
-        if (value) {
-          element.setAttribute(key, "");
-        }
-      } else {
-        const attributeName = isSVG ? getSVGAttributeName(key) : key;
-        element.setAttribute(attributeName, String(value));
-      }
-    });
-  }
-  const flatChildren = flattenChildren(children);
-  flatChildren.forEach((child) => {
-    if (child === null || child === void 0 || child === false) {
-      return;
-    }
-    if (typeof child === "string" || typeof child === "number") {
-      element.appendChild(document.createTextNode(String(child)));
-    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
-      element.appendChild(child);
-    } else if (child instanceof DocumentFragment) {
-      element.appendChild(child);
-    }
-  });
-  return element;
-}
-function flattenChildren(children) {
-  const result = [];
-  for (const child of children) {
-    if (child === null || child === void 0 || child === false) {
-      continue;
-    } else if (Array.isArray(child)) {
-      result.push(...flattenChildren(child));
-    } else {
-      result.push(child);
-    }
-  }
-  return result;
-}
-function Fragment(_props, children) {
-  const fragment = document.createDocumentFragment();
-  const flatChildren = flattenChildren(children);
-  flatChildren.forEach((child) => {
-    if (child === null || child === void 0 || child === false) {
-      return;
-    }
-    if (typeof child === "string" || typeof child === "number") {
-      fragment.appendChild(document.createTextNode(String(child)));
-    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
-      fragment.appendChild(child);
-    } else if (child instanceof DocumentFragment) {
-      fragment.appendChild(child);
-    }
-  });
-  return fragment;
-}
-function jsx(tag, props) {
-  if (!props) {
-    return h(tag, null);
-  }
-  const { children, ...restProps } = props;
-  if (children !== void 0) {
-    return h(tag, restProps, children);
-  }
-  return h(tag, restProps);
-}
-function jsxs(tag, props) {
-  if (!props) {
-    return h(tag, null);
-  }
-  const { children, ...restProps } = props;
-  if (Array.isArray(children)) {
-    return h(tag, restProps, ...children);
-  } else if (children !== void 0) {
-    return h(tag, restProps, children);
-  }
-  return h(tag, restProps);
-}
-
-export {
-  h,
-  Fragment,
-  jsx,
-  jsxs
-};

package/dist/chunk-VZQT7HU5.mjs

@@ -1,222 +0,0 @@
-// src/utils/svg-utils.ts
-var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-var SVG_ONLY_ELEMENTS = /* @__PURE__ */ new Set([
-  // 结构元素 (Structural elements)
-  "svg",
-  "defs",
-  "g",
-  "symbol",
-  "use",
-  // 图形元素 (Graphics elements)
-  "circle",
-  "ellipse",
-  "line",
-  "path",
-  "polygon",
-  "polyline",
-  "rect",
-  // 文本元素 (Text elements)
-  "textPath",
-  "tspan",
-  // 渐变和模式 (Gradients and patterns)
-  "linearGradient",
-  "radialGradient",
-  "stop",
-  "pattern",
-  // 滤镜 (Filter elements)
-  "filter",
-  "feBlend",
-  "feColorMatrix",
-  "feComponentTransfer",
-  "feComposite",
-  "feConvolveMatrix",
-  "feDiffuseLighting",
-  "feDisplacementMap",
-  "feDistantLight",
-  "feDropShadow",
-  "feFlood",
-  "feFuncA",
-  "feFuncB",
-  "feFuncG",
-  "feFuncR",
-  "feGaussianBlur",
-  "feImage",
-  "feMerge",
-  "feMergeNode",
-  "feMorphology",
-  "feOffset",
-  "fePointLight",
-  "feSpecularLighting",
-  "feSpotLight",
-  "feTile",
-  "feTurbulence",
-  // 动画元素 (Animation elements)
-  "animate",
-  "animateMotion",
-  "animateTransform",
-  "set",
-  // 其他元素 (Other elements)
-  "clipPath",
-  "foreignObject",
-  "marker",
-  "mask",
-  "metadata",
-  "switch",
-  "desc"
-]);
-var DUAL_ELEMENTS = /* @__PURE__ */ new Set(["image", "style", "title", "text"]);
-var FORCE_HTML_ELEMENTS = /* @__PURE__ */ new Set(["a"]);
-var SVG_ELEMENTS = /* @__PURE__ */ new Set([
-  ...SVG_ONLY_ELEMENTS,
-  ...DUAL_ELEMENTS,
-  ...FORCE_HTML_ELEMENTS
-]);
-var svgContext = false;
-function isSVGOnlyElement(tagName) {
-  return SVG_ONLY_ELEMENTS.has(tagName);
-}
-function isDualElement(tagName) {
-  return DUAL_ELEMENTS.has(tagName);
-}
-function isForceHTMLElement(tagName) {
-  return FORCE_HTML_ELEMENTS.has(tagName);
-}
-function setSVGContext(inSVG) {
-  svgContext = inSVG;
-}
-function createElement(tagName) {
-  if (isForceHTMLElement(tagName)) {
-    return document.createElement(tagName);
-  }
-  if (isSVGOnlyElement(tagName)) {
-    setSVGContext(true);
-    return document.createElementNS(SVG_NAMESPACE, tagName);
-  }
-  if (isDualElement(tagName)) {
-    if (svgContext) {
-      return document.createElementNS(SVG_NAMESPACE, tagName);
-    }
-  }
-  return document.createElement(tagName);
-}
-function shouldUseSVGNamespace(tagName) {
-  return isSVGOnlyElement(tagName) || isDualElement(tagName) && svgContext;
-}
-var SVG_ATTRIBUTE_MAP = /* @__PURE__ */ new Map([
-  ["className", "class"],
-  ["htmlFor", "for"]
-]);
-function getSVGAttributeName(attributeName) {
-  return SVG_ATTRIBUTE_MAP.get(attributeName) || attributeName;
-}
-
-// src/jsx-factory.ts
-function h(tag, props = {}, ...children) {
-  if (typeof tag === "function") {
-    return tag(props, children);
-  }
-  const element = createElement(tag);
-  if (props) {
-    const isSVG = shouldUseSVGNamespace(tag);
-    Object.entries(props).forEach(([key, value]) => {
-      if (value === null || value === void 0 || value === false) {
-        return;
-      }
-      if (key === "ref" && typeof value === "function") {
-        value(element);
-      } else if (key === "className" || key === "class") {
-        if (isSVG) {
-          element.setAttribute("class", value);
-        } else {
-          element.className = value;
-        }
-      } else if (key === "style" && typeof value === "string") {
-        element.setAttribute("style", value);
-      } else if (key.startsWith("on") && typeof value === "function") {
-        const eventName = key.slice(2).toLowerCase();
-        element.addEventListener(eventName, value);
-      } else if (typeof value === "boolean") {
-        if (value) {
-          element.setAttribute(key, "");
-        }
-      } else {
-        const attributeName = isSVG ? getSVGAttributeName(key) : key;
-        element.setAttribute(attributeName, String(value));
-      }
-    });
-  }
-  const flatChildren = flattenChildren(children);
-  flatChildren.forEach((child) => {
-    if (child === null || child === void 0 || child === false) {
-      return;
-    }
-    if (typeof child === "string" || typeof child === "number") {
-      element.appendChild(document.createTextNode(String(child)));
-    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
-      element.appendChild(child);
-    } else if (child instanceof DocumentFragment) {
-      element.appendChild(child);
-    }
-  });
-  return element;
-}
-function flattenChildren(children) {
-  const result = [];
-  for (const child of children) {
-    if (child === null || child === void 0 || child === false) {
-      continue;
-    } else if (Array.isArray(child)) {
-      result.push(...flattenChildren(child));
-    } else {
-      result.push(child);
-    }
-  }
-  return result;
-}
-function Fragment(_props, children) {
-  const fragment = document.createDocumentFragment();
-  const flatChildren = flattenChildren(children);
-  flatChildren.forEach((child) => {
-    if (child === null || child === void 0 || child === false) {
-      return;
-    }
-    if (typeof child === "string" || typeof child === "number") {
-      fragment.appendChild(document.createTextNode(String(child)));
-    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
-      fragment.appendChild(child);
-    } else if (child instanceof DocumentFragment) {
-      fragment.appendChild(child);
-    }
-  });
-  return fragment;
-}
-function jsx(tag, props) {
-  if (!props) {
-    return h(tag, null);
-  }
-  const { children, ...restProps } = props;
-  if (children !== void 0 && children !== null) {
-    const childrenArray = Array.isArray(children) ? children : [children];
-    return h(tag, restProps, ...childrenArray);
-  }
-  return h(tag, restProps);
-}
-function jsxs(tag, props) {
-  if (!props) {
-    return h(tag, null);
-  }
-  const { children, ...restProps } = props;
-  if (Array.isArray(children)) {
-    return h(tag, restProps, ...children);
-  } else if (children !== void 0 && children !== null) {
-    return h(tag, restProps, children);
-  }
-  return h(tag, restProps);
-}
-
-export {
-  h,
-  Fragment,
-  jsx,
-  jsxs
-};