@wsxjs/wsx-core 0.0.12 → 0.0.14

package/dist/index.js

@@ -1206,17 +1206,177 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
-function state(target, propertyKey) {
+function state(targetOrContext, propertyKey) {
+  let propertyName;
+  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();
+    } 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 = "unknown";
+    }
+  }
+  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;
-  } 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
@@ -1232,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

@@ -973,17 +973,177 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
-function state(target, propertyKey) {
+function state(targetOrContext, propertyKey) {
+  let propertyName;
+  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();
+    } 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 = "unknown";
+    }
+  }
+  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;
-  } 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
@@ -999,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.12",
+  "version": "0.0.14",
   "description": "Core WSX Framework - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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
-): void | DecoratorContext {
+    // 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));
 }