@wsxjs/wsx-core 0.0.12 → 0.0.13

package/dist/index.js

@@ -1206,7 +1206,91 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
-function state(target, propertyKey) {
+function state(targetOrContext, propertyKey) {
+  let propertyName;
+  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+    const context = targetOrContext;
+    propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+  } else {
+    if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+      propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
+    } else {
+      propertyName = String(propertyKey);
+    }
+  }
+  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 (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+    const context = targetOrContext;
+    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}"`
+      );
+    }
+    if (context.addInitializer) {
+      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;

package/dist/index.mjs

@@ -973,7 +973,91 @@ function deriveTagName(className, prefix) {
 }
 
 // src/reactive-decorator.ts
-function state(target, propertyKey) {
+function state(targetOrContext, propertyKey) {
+  let propertyName;
+  if (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+    const context = targetOrContext;
+    propertyName = typeof context.name === "string" ? context.name : context.name.toString();
+  } else {
+    if (typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+      propertyName = typeof propertyKey === "string" ? propertyKey : propertyKey.toString();
+    } else {
+      propertyName = String(propertyKey);
+    }
+  }
+  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 (typeof targetOrContext === "object" && targetOrContext !== null && "kind" in targetOrContext && "name" in targetOrContext) {
+    const context = targetOrContext;
+    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}"`
+      );
+    }
+    if (context.addInitializer) {
+      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;

package/package.json

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

package/src/reactive-decorator.ts

@@ -51,7 +51,7 @@ interface DecoratorContext {
 export function state(
     targetOrContext: unknown | DecoratorContext,
     propertyKey?: string | symbol | unknown
-): void | DecoratorContext {
+): unknown {
     /**
      * @state decorator supports both:
      * 1. Compile-time processing by Babel plugin (preferred) - decorator is removed at compile time