@wsxjs/wsx-vite-plugin 0.0.13 → 0.0.15

package/dist/index.js

@@ -47,68 +47,255 @@ function babelPluginWSXState() {
   return {
     name: "babel-plugin-wsx-state",
     visitor: {
+      Program: {
+        enter(_path, state) {
+          console.info(
+            `[Babel Plugin WSX State] DEBUG: state.opts keys = ${Object.keys(state.opts || {}).join(", ")}`
+          );
+          console.info(
+            `[Babel Plugin WSX State] DEBUG: state.opts = ${JSON.stringify(state.opts).substring(0, 200)}`
+          );
+          const opts = state.opts;
+          if (opts?.originalSource) {
+            state.originalSource = opts.originalSource;
+            console.info(
+              `[Babel Plugin WSX State] \u2705 Stored original source from options (length: ${String(opts.originalSource).length})`
+            );
+          } else {
+            console.warn(
+              `[Babel Plugin WSX State] \u26A0\uFE0F state.opts.originalSource not found, trying fallback...`
+            );
+            const file = state.file;
+            if (file) {
+              const sourceCode = file.code;
+              if (sourceCode) {
+                state.originalSource = sourceCode;
+                console.info(
+                  `[Babel Plugin WSX State] \u2705 Stored original source from file (length: ${sourceCode.length})`
+                );
+              } else {
+                console.error(
+                  `[Babel Plugin WSX State] \u274C ERROR: Could not get original source code from state.opts or state.file!`
+                );
+              }
+            } else {
+              console.error(
+                `[Babel Plugin WSX State] \u274C ERROR: state.file is undefined!`
+              );
+            }
+          }
+        }
+      },
       ClassDeclaration(path) {
         const classBody = path.node.body;
         const stateProperties = [];
         console.info(
           `[Babel Plugin WSX State] Processing class ${path.node.id?.name || "anonymous"}, members: ${classBody.body.length}`
         );
+        if (path.node.decorators && path.node.decorators.length > 0) {
+          console.info(
+            `[Babel Plugin WSX State] Class-level decorators: ${path.node.decorators.length}`
+          );
+        }
         for (const member of classBody.body) {
           console.info(
             `  - Member type: ${member.type}, key: ${member.type === "ClassProperty" || member.type === "ClassPrivateProperty" ? member.key?.name : "N/A"}`
           );
           if ((member.type === "ClassProperty" || member.type === "ClassPrivateProperty") && member.key.type === "Identifier") {
+            const propertyName = member.key.name;
+            const decoratorCount = member.decorators?.length || 0;
+            const hasValue = !!member.value && !(member.value.type === "Identifier" && member.value.name === "undefined") && !(member.value.type === "UnaryExpression" && member.value.operator === "void");
+            const isUndefined = !!(member.value && (member.value.type === "Identifier" && member.value.name === "undefined" || member.value.type === "UnaryExpression" && member.value.operator === "void"));
+            const valueType = member.value ? member.value.type : "none";
+            const valueName = member.value && member.value.type === "Identifier" ? member.value.name : "none";
             console.info(
-              `  - Property: ${member.key.name}, decorators: ${member.decorators?.length || 0}, hasValue: ${!!member.value}`
+              `  - Property: ${propertyName}, decorators: ${decoratorCount}, hasValue: ${hasValue}, isUndefined: ${isUndefined}, value type: ${valueType}, value name: ${valueName}`
             );
-            if (member.decorators && member.decorators.length > 0) {
-              member.decorators.forEach((decorator) => {
-                if (decorator.expression.type === "Identifier") {
-                  console.info(`    Decorator: ${decorator.expression.name}`);
-                } else if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier") {
-                  console.debug(
-                    `    Decorator: ${decorator.expression.callee.name}()`
+            try {
+              if (isUndefined) {
+                const originalSource2 = path.state?.originalSource;
+                if (originalSource2) {
+                  const propertyPattern = new RegExp(
+                    `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                    "m"
                   );
+                  if (propertyPattern.test(originalSource2)) {
+                    console.error(
+                      `[Babel Plugin WSX State] ERROR: Found @state decorator in source for property '${propertyName}' but value is undefined (from optional property syntax)!`
+                    );
+                    const error = path.buildCodeFrameError(
+                      `@state decorator on property '${propertyName}' requires an initial value.
+
+The property has undefined value (from optional property syntax '${propertyName}?'), but @state decorator needs a real value to decide whether to use useState (primitive) or reactive (object/array).
+
+Examples:
+  @state private ${propertyName} = "";  // for string
+  @state private ${propertyName} = 0;  // for number
+  @state private ${propertyName} = {};  // for object
+  @state private ${propertyName} = [];  // for array
+  @state private ${propertyName} = undefined;  // explicitly undefined
+
+Current code: @state private ${propertyName}?;
+
+Fix: Change to '@state private ${propertyName} = undefined;' or provide a real initial value.`
+                    );
+                    console.error(
+                      `[Babel Plugin WSX State] ERROR: ${error.message}`
+                    );
+                    throw error;
+                  }
                 }
-              });
-            }
-            const hasStateDecorator = member.decorators?.some(
-              (decorator) => {
-                if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
-                  return true;
+              }
+              if (propertyName === "count") {
+                console.info(
+                  `[Babel Plugin WSX State] DEBUG path.state keys for '${propertyName}': ${path.state ? Object.keys(path.state).join(", ") : "null"}`
+                );
+                console.info(
+                  `[Babel Plugin WSX State] DEBUG path.state.originalSource type: ${path.state ? typeof path.state.originalSource : "path.state is null"}`
+                );
+              }
+              const originalSource = path.state?.originalSource;
+              if (originalSource) {
+                const propertyPattern = new RegExp(
+                  `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                  "m"
+                );
+                const hasStateInSource = propertyPattern.test(originalSource);
+                if (hasStateInSource) {
+                  console.info(
+                    `[Babel Plugin WSX State] Found @state in source for property '${propertyName}' (decorators array was empty: ${decoratorCount})`
+                  );
+                  const hasInitialValueInSource = new RegExp(
+                    `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*=\\s*[^;]+`,
+                    "m"
+                  ).test(originalSource);
+                  if (!hasInitialValueInSource) {
+                    console.error(
+                      `[Babel Plugin WSX State] ERROR: Found @state decorator in source for property '${propertyName}' but no initial value!`
+                    );
+                    const error = path.buildCodeFrameError(
+                      `@state decorator on property '${propertyName}' requires an initial value.
+
+The @state decorator needs a real value to decide whether to use useState (primitive) or reactive (object/array).
+
+Examples:
+  @state private ${propertyName} = "";  // for string
+  @state private ${propertyName} = 0;  // for number
+  @state private ${propertyName} = {};  // for object
+  @state private ${propertyName} = [];  // for array
+  @state private ${propertyName} = undefined;  // explicitly undefined
+
+Current code: @state private ${propertyName}?;
+
+Fix: Change to '@state private ${propertyName} = undefined;' or provide a real initial value.`
+                    );
+                    console.error(
+                      `[Babel Plugin WSX State] ERROR: ${error.message}`
+                    );
+                    throw error;
+                  }
                 }
-                if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
-                  return true;
+              } else {
+                if (propertyName === "count") {
+                  console.warn(
+                    `[Babel Plugin WSX State] WARNING: originalSource not available for property '${propertyName}'`
+                  );
                 }
-                return false;
               }
-            );
-            if (hasStateDecorator && member.value) {
-              const key = member.key.name;
-              const initialValue = member.value;
-              const isObject = initialValue.type === "ObjectExpression" || initialValue.type === "ArrayExpression";
-              const isArray = initialValue.type === "ArrayExpression";
-              stateProperties.push({
-                key,
-                initialValue,
-                isObject,
-                isArray
-                // Add isArray flag
-              });
-              if (member.decorators) {
-                member.decorators = member.decorators.filter(
+              if (member.decorators && member.decorators.length > 0) {
+                member.decorators.forEach((decorator) => {
+                  if (decorator.expression.type === "Identifier") {
+                    console.info(`    Decorator: ${decorator.expression.name}`);
+                  } else if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier") {
+                    console.info(
+                      `    Decorator: ${decorator.expression.callee.name}()`
+                    );
+                  } else {
+                    console.info(`    Decorator: ${decorator.expression.type}`);
+                  }
+                });
+              } else {
+              }
+              let hasStateDecorator = false;
+              try {
+                hasStateDecorator = member.decorators?.some(
                   (decorator) => {
                     if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
-                      return false;
+                      return true;
                     }
                     if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
-                      return false;
+                      return true;
                     }
-                    return true;
+                    return false;
                   }
+                ) || false;
+              } catch (error) {
+                console.error(
+                  `[Babel Plugin WSX State] ERROR in hasStateDecorator check for ${propertyName}: ${error}`
                 );
+                throw error;
               }
-              member.value = void 0;
+              if (hasStateDecorator) {
+                const key = member.key.name;
+                const hasInitialValue = !!(member.value && !(member.value.type === "Identifier" && member.value.name === "undefined") && !(member.value.type === "UnaryExpression" && member.value.operator === "void"));
+                if (key === "count") {
+                  console.error(
+                    `[Babel Plugin WSX State] DEBUG: hasInitialValue for 'count' = ${hasInitialValue}, type = ${typeof hasInitialValue}`
+                  );
+                  console.error(
+                    `[Babel Plugin WSX State] DEBUG: member.value = ${member.value}, !hasInitialValue = ${!hasInitialValue}`
+                  );
+                }
+                if (!hasInitialValue) {
+                  const error = path.buildCodeFrameError(
+                    `@state decorator on property '${key}' requires an initial value.
+
+Examples:
+  @state private ${key} = "";  // for string
+  @state private ${key} = 0;  // for number
+  @state private ${key} = {};  // for object
+  @state private ${key} = [];  // for array
+  @state private ${key} = undefined;  // for optional
+
+Current code: @state private ${key};
+
+This error should be caught during build time. If you see this at runtime, it means the Babel plugin did not process this file.`
+                  );
+                  console.error(`[Babel Plugin WSX State] ERROR: ${error.message}`);
+                  throw error;
+                }
+                const initialValue = member.value;
+                const isObject = initialValue.type === "ObjectExpression" || initialValue.type === "ArrayExpression";
+                const isArray = initialValue.type === "ArrayExpression";
+                stateProperties.push({
+                  key,
+                  initialValue,
+                  isObject,
+                  isArray
+                  // Add isArray flag
+                });
+                if (member.decorators) {
+                  member.decorators = member.decorators.filter(
+                    (decorator) => {
+                      if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
+                        return false;
+                      }
+                      if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
+                        return false;
+                      }
+                      return true;
+                    }
+                  );
+                }
+                member.value = void 0;
+              }
+            } catch (error) {
+              console.error(
+                `[Babel Plugin WSX State] CRASH in member processing for '${propertyName}':`,
+                error
+              );
+              console.error(`Stack trace:`, error.stack);
+              throw error;
             }
           }
         }
@@ -572,18 +759,39 @@ function vitePluginWSXWithBabel(options = {}) {
         const babelResult = (0, import_core.transformSync)(transformedCode, {
           filename: id,
           // Pass the actual filename so Babel knows it's .wsx
+          // CRITICAL: Configure parser to preserve decorators
+          // @babel/preset-typescript should preserve decorators by default,
+          // but we explicitly enable decorator parsing to be sure
+          parserOpts: {
+            plugins: [
+              ["decorators", { decoratorsBeforeExport: true }],
+              // Stage 3 decorators
+              "typescript",
+              "jsx"
+            ]
+          },
           presets: [
             [
               "@babel/preset-typescript",
               {
                 isTSX: true,
                 // Enable JSX syntax
-                allExtensions: true
+                allExtensions: true,
                 // Process all extensions, including .wsx
+                // CRITICAL: onlyRemoveTypeImports only affects import statements
+                // Decorators are preserved by default in @babel/preset-typescript
+                // They are only removed if we explicitly configure it
+                onlyRemoveTypeImports: false
+                // Remove all type-only imports
               }
             ]
           ],
           plugins: [
+            // CRITICAL: Decorator plugin must run FIRST to parse decorators correctly
+            // This ensures decorators are properly parsed before our custom plugins try to process them
+            // However, we need to use a custom visitor that doesn't transform decorators yet
+            // Actually, we should NOT run decorator plugin first because it transforms decorators
+            // Instead, we rely on TypeScript preset to parse but not transform decorators
             // CRITICAL: Style injection plugin must run FIRST
             // This ensures _autoStyles property exists before state transformations
             ...autoStyleInjection && cssFileExists ? [
@@ -599,8 +807,20 @@ function vitePluginWSXWithBabel(options = {}) {
             // Focus key generation plugin runs early to add data-wsx-key attributes
             // This must run before JSX is transformed to h() calls
             babelPluginWSXFocus,
-            // State decorator transformation runs after style injection
-            babelPluginWSXState,
+            // CRITICAL: State decorator transformation must run BEFORE @babel/plugin-proposal-decorators
+            // This allows the plugin to detect @state decorators in their original form and throw errors if needed
+            // The plugin removes @state decorators after processing, so the decorator plugin won't see them
+            [
+              babelPluginWSXState,
+              {
+                // Pass ORIGINAL source code (before JSX import injection) to plugin
+                // This ensures we can detect @state decorators even if they're removed by TypeScript preset
+                originalSource: code
+                // Use original code, not transformedCode
+              }
+            ],
+            // Decorator plugin runs after our custom plugins
+            // This transforms remaining decorators (like @autoRegister) to runtime calls
             [
               "@babel/plugin-proposal-decorators",
               {
@@ -621,8 +841,13 @@ function vitePluginWSXWithBabel(options = {}) {
         });
         if (babelResult && babelResult.code) {
           transformedCode = babelResult.code;
+        } else {
+          throw new Error(
+            `[WSX Plugin] Babel transform returned no code for ${id}. @state decorators will NOT be processed and will cause runtime errors. Please check Babel configuration and plugin setup.`
+          );
         }
-      } catch {
+      } catch (error) {
+        throw error;
       }
       const hasJSXAfterBabel = transformedCode.includes('from "@wsxjs/wsx-core"') && (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(transformedCode) || new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(transformedCode));
       if ((transformedCode.includes("<") || transformedCode.includes("Fragment")) && !hasJSXAfterBabel) {