@wsxjs/wsx-core 0.0.11 → 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.11",
+  "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

@@ -33,20 +33,176 @@
  * }
  * ```
  */
-export function state(target: unknown, propertyKey: string | symbol | unknown): void {
+/**
+ * Stage 3 Decorator Context interface
+ */
+interface DecoratorContext {
+    kind: "class" | "method" | "getter" | "setter" | "field" | "accessor";
+    name: string | symbol;
+    access?: {
+        get?(): unknown;
+        set?(value: unknown): void;
+    };
+    private?: boolean;
+    static?: boolean;
+    addInitializer?(initializer: () => void): void;
+}
+
+export function state(
+    targetOrContext: unknown | DecoratorContext,
+    propertyKey?: string | symbol | unknown
+): unknown {
     /**
-     * @state decorator is a compile-time marker for Babel plugin.
-     * Babel plugin will:
-     * 1. Detect @state decorator on properties
-     * 2. Extract initial value from AST
-     * 3. Remove @state decorator
-     * 4. Generate initialization code in constructor (this.state = this.reactive(...) or useState)
+     * @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
      *
-     * This runtime function only performs basic validation.
-     * If Babel plugin is not configured, this will throw an error.
+     * If this function is executed at runtime, it means Babel plugin did not process it.
+     * We should warn the user and provide fallback functionality.
      */
 
-    // Normalize propertyKey
+    // 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.`
+    );
+
+    // 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.`
+                    );
+                }
+
+                // 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,
+                    });
+                }
+            });
+        }
+
+        // Return context for Stage 3 decorators
+        return context;
+    }
+
+    // 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;