@wsxjs/wsx-vite-plugin 0.0.14 → 0.0.16

package/dist/index.js

@@ -115,8 +115,12 @@ function babelPluginWSXState() {
               if (isUndefined) {
                 const originalSource2 = path.state?.originalSource;
                 if (originalSource2) {
+                  const escapedPropertyName = propertyName.replace(
+                    /[.*+?^${}()|[\]\\]/g,
+                    "\\$&"
+                  );
                   const propertyPattern = new RegExp(
-                    `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                    `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*[?;]`,
                     "m"
                   );
                   if (propertyPattern.test(originalSource2)) {
@@ -156,8 +160,12 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
               }
               const originalSource = path.state?.originalSource;
               if (originalSource) {
+                const escapedPropertyName = propertyName.replace(
+                  /[.*+?^${}()|[\]\\]/g,
+                  "\\$&"
+                );
                 const propertyPattern = new RegExp(
-                  `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                  `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*[?;]`,
                   "m"
                 );
                 const hasStateInSource = propertyPattern.test(originalSource);
@@ -166,7 +174,7 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
                     `[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*[^;]+`,
+                    `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*=\\s*[^;]+`,
                     "m"
                   ).test(originalSource);
                   if (!hasInitialValueInSource) {
@@ -218,17 +226,15 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
               }
               let hasStateDecorator = false;
               try {
-                hasStateDecorator = member.decorators?.some(
-                  (decorator) => {
-                    if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
-                      return true;
-                    }
-                    if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
-                      return true;
-                    }
-                    return false;
+                hasStateDecorator = member.decorators?.some((decorator) => {
+                  if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
+                    return true;
+                  }
+                  if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
+                    return true;
                   }
-                ) || false;
+                  return false;
+                }) || false;
               } catch (error) {
                 console.error(
                   `[Babel Plugin WSX State] ERROR in hasStateDecorator check for ${propertyName}: ${error}`
@@ -261,7 +267,9 @@ 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}`);
+                  console.error(
+                    `[Babel Plugin WSX State] ERROR: ${error.message}`
+                  );
                   throw error;
                 }
                 const initialValue = member.value;
@@ -668,8 +676,9 @@ function findComponentName(path) {
   let classPath = path;
   while (classPath) {
     if (classPath.isClassDeclaration()) {
-      if (classPath.node.id && tModule3.isIdentifier(classPath.node.id)) {
-        return classPath.node.id.name;
+      const classNode = classPath.node;
+      if (classNode.id && tModule3.isIdentifier(classNode.id)) {
+        return classNode.id.name;
       }
       break;
     }
@@ -755,99 +764,95 @@ function vitePluginWSXWithBabel(options = {}) {
 `;
         transformedCode = importStatement + transformedCode;
       }
-      try {
-        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: [
+      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,
+              // 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 ? [
             [
-              "@babel/preset-typescript",
+              babelPluginWSXStyle,
               {
-                isTSX: true,
-                // Enable JSX syntax
-                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
+                cssFileExists,
+                cssFilePath,
+                componentName
               }
             ]
+          ] : [],
+          // Focus key generation plugin runs early to add data-wsx-key attributes
+          // This must run before JSX is transformed to h() calls
+          babelPluginWSXFocus,
+          // 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
+            }
           ],
-          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 ? [
-              [
-                babelPluginWSXStyle,
-                {
-                  cssFileExists,
-                  cssFilePath,
-                  componentName
-                }
-              ]
-            ] : [],
-            // Focus key generation plugin runs early to add data-wsx-key attributes
-            // This must run before JSX is transformed to h() calls
-            babelPluginWSXFocus,
-            // 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",
-              {
-                version: "2023-05",
-                decoratorsBeforeExport: true
-              }
-            ],
-            [
-              "@babel/plugin-proposal-class-properties",
-              {
-                loose: false
-              }
-            ],
-            "@babel/plugin-transform-class-static-block"
-            // Support static class blocks
-          ]
-          // parserOpts not needed - @babel/preset-typescript and plugins handle it
-        });
-        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 (error) {
-        throw error;
+          // Decorator plugin runs after our custom plugins
+          // This transforms remaining decorators (like @autoRegister) to runtime calls
+          [
+            "@babel/plugin-proposal-decorators",
+            {
+              version: "2023-05",
+              decoratorsBeforeExport: true
+            }
+          ],
+          [
+            "@babel/plugin-proposal-class-properties",
+            {
+              loose: false
+            }
+          ],
+          "@babel/plugin-transform-class-static-block"
+          // Support static class blocks
+        ]
+        // parserOpts not needed - @babel/preset-typescript and plugins handle it
+      });
+      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.`
+        );
       }
       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) {

package/dist/index.mjs

@@ -79,8 +79,12 @@ function babelPluginWSXState() {
               if (isUndefined) {
                 const originalSource2 = path.state?.originalSource;
                 if (originalSource2) {
+                  const escapedPropertyName = propertyName.replace(
+                    /[.*+?^${}()|[\]\\]/g,
+                    "\\$&"
+                  );
                   const propertyPattern = new RegExp(
-                    `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                    `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*[?;]`,
                     "m"
                   );
                   if (propertyPattern.test(originalSource2)) {
@@ -120,8 +124,12 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
               }
               const originalSource = path.state?.originalSource;
               if (originalSource) {
+                const escapedPropertyName = propertyName.replace(
+                  /[.*+?^${}()|[\]\\]/g,
+                  "\\$&"
+                );
                 const propertyPattern = new RegExp(
-                  `@state\\s+(?:private|protected|public)?\\s+${propertyName}\\s*[?;]`,
+                  `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*[?;]`,
                   "m"
                 );
                 const hasStateInSource = propertyPattern.test(originalSource);
@@ -130,7 +138,7 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
                     `[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*[^;]+`,
+                    `@state\\s+(?:private|protected|public)?\\s+${escapedPropertyName}\\s*=\\s*[^;]+`,
                     "m"
                   ).test(originalSource);
                   if (!hasInitialValueInSource) {
@@ -182,17 +190,15 @@ Fix: Change to '@state private ${propertyName} = undefined;' or provide a real i
               }
               let hasStateDecorator = false;
               try {
-                hasStateDecorator = member.decorators?.some(
-                  (decorator) => {
-                    if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
-                      return true;
-                    }
-                    if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
-                      return true;
-                    }
-                    return false;
+                hasStateDecorator = member.decorators?.some((decorator) => {
+                  if (decorator.expression.type === "Identifier" && decorator.expression.name === "state") {
+                    return true;
+                  }
+                  if (decorator.expression.type === "CallExpression" && decorator.expression.callee.type === "Identifier" && decorator.expression.callee.name === "state") {
+                    return true;
                   }
-                ) || false;
+                  return false;
+                }) || false;
               } catch (error) {
                 console.error(
                   `[Babel Plugin WSX State] ERROR in hasStateDecorator check for ${propertyName}: ${error}`
@@ -225,7 +231,9 @@ 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}`);
+                  console.error(
+                    `[Babel Plugin WSX State] ERROR: ${error.message}`
+                  );
                   throw error;
                 }
                 const initialValue = member.value;
@@ -632,8 +640,9 @@ function findComponentName(path) {
   let classPath = path;
   while (classPath) {
     if (classPath.isClassDeclaration()) {
-      if (classPath.node.id && tModule3.isIdentifier(classPath.node.id)) {
-        return classPath.node.id.name;
+      const classNode = classPath.node;
+      if (classNode.id && tModule3.isIdentifier(classNode.id)) {
+        return classNode.id.name;
       }
       break;
     }
@@ -719,99 +728,95 @@ function vitePluginWSXWithBabel(options = {}) {
 `;
         transformedCode = importStatement + transformedCode;
       }
-      try {
-        const babelResult = 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: [
+      const babelResult = 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,
+              // 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 ? [
             [
-              "@babel/preset-typescript",
+              babelPluginWSXStyle,
               {
-                isTSX: true,
-                // Enable JSX syntax
-                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
+                cssFileExists,
+                cssFilePath,
+                componentName
               }
             ]
+          ] : [],
+          // Focus key generation plugin runs early to add data-wsx-key attributes
+          // This must run before JSX is transformed to h() calls
+          babelPluginWSXFocus,
+          // 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
+            }
           ],
-          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 ? [
-              [
-                babelPluginWSXStyle,
-                {
-                  cssFileExists,
-                  cssFilePath,
-                  componentName
-                }
-              ]
-            ] : [],
-            // Focus key generation plugin runs early to add data-wsx-key attributes
-            // This must run before JSX is transformed to h() calls
-            babelPluginWSXFocus,
-            // 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",
-              {
-                version: "2023-05",
-                decoratorsBeforeExport: true
-              }
-            ],
-            [
-              "@babel/plugin-proposal-class-properties",
-              {
-                loose: false
-              }
-            ],
-            "@babel/plugin-transform-class-static-block"
-            // Support static class blocks
-          ]
-          // parserOpts not needed - @babel/preset-typescript and plugins handle it
-        });
-        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 (error) {
-        throw error;
+          // Decorator plugin runs after our custom plugins
+          // This transforms remaining decorators (like @autoRegister) to runtime calls
+          [
+            "@babel/plugin-proposal-decorators",
+            {
+              version: "2023-05",
+              decoratorsBeforeExport: true
+            }
+          ],
+          [
+            "@babel/plugin-proposal-class-properties",
+            {
+              loose: false
+            }
+          ],
+          "@babel/plugin-transform-class-static-block"
+          // Support static class blocks
+        ]
+        // parserOpts not needed - @babel/preset-typescript and plugins handle it
+      });
+      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.`
+        );
       }
       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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-vite-plugin",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Vite plugin for WSX Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,7 +31,7 @@
     "@babel/plugin-transform-class-static-block": "^7.28.0",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/types": "^7.28.1",
-    "@wsxjs/wsx-core": "0.0.14"
+    "@wsxjs/wsx-core": "0.0.16"
   },
   "devDependencies": {
     "@babel/traverse": "^7.28.5",

package/src/babel-plugin-wsx-focus.ts

@@ -138,13 +138,14 @@ function calculateJSXPath(path: NodePath<t.JSXOpeningElement>): number[] {
  * Find component name from class declaration
  */
 function findComponentName(path: NodePath<t.JSXOpeningElement>): string {
-    let classPath = path;
+    let classPath: NodePath<t.Node> | null = path;
 
     // Find parent class declaration
     while (classPath) {
         if (classPath.isClassDeclaration()) {
-            if (classPath.node.id && tModule.isIdentifier(classPath.node.id)) {
-                return classPath.node.id.name;
+            const classNode = classPath.node;
+            if (classNode.id && tModule.isIdentifier(classNode.id)) {
+                return classNode.id.name;
             }
             break;
         }