@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.8

package/dist/index.mjs

@@ -1,92 +1,406 @@
-// src/vite-plugin-wsx.ts
+// src/vite-plugin-wsx-babel.ts
 import { transform } from "esbuild";
+import { transformSync } from "@babel/core";
+import { existsSync } from "fs";
+import { dirname, join, basename } from "path";
+
+// src/babel-plugin-wsx-state.ts
+import * as tModule from "@babel/types";
+function babelPluginWSXState() {
+  const t = tModule;
+  return {
+    name: "babel-plugin-wsx-state",
+    visitor: {
+      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}`
+        );
+        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") {
+            console.info(
+              `  - Property: ${member.key.name}, decorators: ${member.decorators?.length || 0}, hasValue: ${!!member.value}`
+            );
+            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}()`
+                  );
+                }
+              });
+            }
+            const 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;
+              }
+            );
+            if (hasStateDecorator && member.value) {
+              const key = member.key.name;
+              const initialValue = member.value;
+              const isObject = initialValue.type === "ObjectExpression" || initialValue.type === "ArrayExpression";
+              stateProperties.push({
+                key,
+                initialValue,
+                isObject
+              });
+              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;
+            }
+          }
+        }
+        if (stateProperties.length === 0) {
+          return;
+        }
+        let constructor = classBody.body.find(
+          (member) => member.type === "ClassMethod" && member.kind === "constructor"
+        );
+        if (!constructor) {
+          constructor = t.classMethod(
+            "constructor",
+            t.identifier("constructor"),
+            [],
+            t.blockStatement([])
+          );
+          classBody.body.unshift(constructor);
+        }
+        const statements = [];
+        const hasSuper = constructor.body.body.some(
+          (stmt) => stmt.type === "ExpressionStatement" && stmt.expression.type === "CallExpression" && stmt.expression.callee.type === "Super"
+        );
+        if (!hasSuper) {
+          statements.push(t.expressionStatement(t.callExpression(t.super(), [])));
+        }
+        for (const { key, initialValue, isObject } of stateProperties) {
+          if (isObject) {
+            statements.push(
+              t.expressionStatement(
+                t.assignmentExpression(
+                  "=",
+                  t.memberExpression(t.thisExpression(), t.identifier(key)),
+                  t.callExpression(
+                    t.memberExpression(
+                      t.thisExpression(),
+                      t.identifier("reactive")
+                    ),
+                    [initialValue]
+                  )
+                )
+              )
+            );
+          } else {
+            const getterId = t.identifier(`_get${key}`);
+            const setterId = t.identifier(`_set${key}`);
+            statements.push(
+              t.variableDeclaration("const", [
+                t.variableDeclarator(
+                  t.arrayPattern([getterId, setterId]),
+                  t.callExpression(
+                    t.memberExpression(
+                      t.thisExpression(),
+                      t.identifier("useState")
+                    ),
+                    [t.stringLiteral(key), initialValue]
+                  )
+                )
+              ])
+            );
+            statements.push(
+              t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(
+                    t.identifier("Object"),
+                    t.identifier("defineProperty")
+                  ),
+                  [
+                    t.thisExpression(),
+                    t.stringLiteral(key),
+                    t.objectExpression([
+                      t.objectProperty(t.identifier("get"), getterId),
+                      t.objectProperty(t.identifier("set"), setterId),
+                      t.objectProperty(
+                        t.identifier("enumerable"),
+                        t.booleanLiteral(true)
+                      ),
+                      t.objectProperty(
+                        t.identifier("configurable"),
+                        t.booleanLiteral(true)
+                      )
+                    ])
+                  ]
+                )
+              )
+            );
+          }
+        }
+        constructor.body.body.push(...statements);
+      }
+    }
+  };
+}
+
+// src/babel-plugin-wsx-style.ts
+import * as tModule2 from "@babel/types";
+function hasStylesImport(program) {
+  for (const node of program.body) {
+    if (node.type === "ImportDeclaration") {
+      const source = node.source.value;
+      if (typeof source === "string" && (source.endsWith(".css?inline") || source.endsWith(".css"))) {
+        const defaultSpecifier = node.specifiers.find(
+          (spec) => spec.type === "ImportDefaultSpecifier"
+        );
+        if (defaultSpecifier) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+function hasAutoStylesProperty(classBody) {
+  for (const member of classBody.body) {
+    if ((member.type === "ClassProperty" || member.type === "ClassPrivateProperty") && member.key.type === "Identifier" && member.key.name === "_autoStyles") {
+      return true;
+    }
+  }
+  return false;
+}
+function babelPluginWSXStyle() {
+  const t = tModule2;
+  return {
+    name: "babel-plugin-wsx-style",
+    visitor: {
+      Program(path, state) {
+        const { cssFileExists, cssFilePath, componentName } = state.opts;
+        if (!cssFileExists) {
+          return;
+        }
+        if (hasStylesImport(path.node)) {
+          console.info(
+            `[Babel Plugin WSX Style] Skipping ${componentName}: styles already manually imported`
+          );
+          return;
+        }
+        console.info(
+          `[Babel Plugin WSX Style] Injecting CSS import for ${componentName}: ${cssFilePath}`
+        );
+        const importStatement = t.importDeclaration(
+          [t.importDefaultSpecifier(t.identifier("styles"))],
+          t.stringLiteral(cssFilePath)
+        );
+        let insertIndex = 0;
+        for (let i = 0; i < path.node.body.length; i++) {
+          const node = path.node.body[i];
+          if (node.type === "ImportDeclaration") {
+            insertIndex = i + 1;
+          } else {
+            break;
+          }
+        }
+        path.node.body.splice(insertIndex, 0, importStatement);
+      },
+      ClassDeclaration(path, state) {
+        const { cssFileExists } = state.opts;
+        if (!cssFileExists) {
+          return;
+        }
+        const classBody = path.node.body;
+        if (hasAutoStylesProperty(classBody)) {
+          return;
+        }
+        const autoStylesProperty = t.classProperty(
+          t.identifier("_autoStyles"),
+          t.identifier("styles"),
+          null,
+          // typeAnnotation
+          [],
+          // decorators
+          false,
+          // computed
+          false
+          // static
+        );
+        classBody.body.unshift(autoStylesProperty);
+      }
+    }
+  };
+}
+
+// src/vite-plugin-wsx-babel.ts
 function getJSXFactoryImportPath(_options) {
   return "@wsxjs/wsx-core";
 }
-function vitePluginWSX(options = {}) {
+function vitePluginWSXWithBabel(options = {}) {
   const {
     jsxFactory = "h",
     jsxFragment = "Fragment",
     debug = false,
-    extensions = [".wsx"]
+    extensions = [".wsx"],
+    autoStyleInjection = true
   } = options;
   return {
-    name: "vite-plugin-wsx",
+    name: "vite-plugin-wsx-babel",
     enforce: "pre",
-    // 确保在 React 插件之前执行
-    // 处理 .wsx 文件加载
-    load(id) {
-      const isWSXFile = extensions.some((ext) => id.endsWith(ext));
-      if (!isWSXFile) {
-        return null;
-      }
-      if (debug) {
-        console.log(`[WSX Plugin] Loading: ${id}`);
-      }
-      return null;
-    },
-    // 在transform阶段处理文件
     async transform(code, id) {
       const isWSXFile = extensions.some((ext) => id.endsWith(ext));
       if (!isWSXFile) {
         return null;
       }
       if (debug) {
-        console.log(`[WSX Plugin] Processing: ${id}`);
+        console.log(`[WSX Plugin Babel] Processing: ${id}`);
+      }
+      let cssFileExists = false;
+      let cssFilePath = "";
+      let componentName = "";
+      if (autoStyleInjection) {
+        const fileDir = dirname(id);
+        const fileName = basename(id, extensions.find((ext) => id.endsWith(ext)) || "");
+        const cssFilePathWithoutQuery = join(fileDir, `${fileName}.css`);
+        cssFileExists = existsSync(cssFilePathWithoutQuery);
+        componentName = fileName;
+        if (cssFileExists) {
+          cssFilePath = `./${fileName}.css?inline`;
+        }
+        if (cssFileExists) {
+          console.log(
+            `[WSX Plugin Babel] Found CSS file for auto-injection: ${cssFilePathWithoutQuery}, will inject: ${cssFilePath}`
+          );
+        }
       }
       let transformedCode = code;
       const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
       const hasJSXInImport = hasWSXCoreImport && (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(code) || new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(code));
-      if (debug) {
-        console.log(`[WSX Plugin] Checking JSX imports for: ${id}`);
-        console.log(`  - hasWSXCoreImport: ${hasWSXCoreImport}`);
-        console.log(`  - hasJSXInImport: ${hasJSXInImport}`);
-        console.log(`  - has < character: ${code.includes("<")}`);
-        console.log(`  - has Fragment: ${code.includes("Fragment")}`);
-      }
       if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
         const importPath = getJSXFactoryImportPath(options);
         const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";
+`;
+        transformedCode = importStatement + transformedCode;
+      }
+      try {
+        const babelResult = transformSync(transformedCode, {
+          filename: id,
+          // Pass the actual filename so Babel knows it's .wsx
+          presets: [
+            [
+              "@babel/preset-typescript",
+              {
+                isTSX: true,
+                // Enable JSX syntax
+                allExtensions: true
+                // Process all extensions, including .wsx
+              }
+            ]
+          ],
+          plugins: [
+            // CRITICAL: Style injection plugin must run FIRST
+            // This ensures _autoStyles property exists before state transformations
+            ...autoStyleInjection && cssFileExists ? [
+              [
+                babelPluginWSXStyle,
+                {
+                  cssFileExists,
+                  cssFilePath,
+                  componentName
+                }
+              ]
+            ] : [],
+            // State decorator transformation runs after style injection
+            babelPluginWSXState,
+            [
+              "@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;
+          if (debug) {
+            console.log(`[WSX Plugin Babel] Decorators preprocessed: ${id}`);
+            if (transformedCode.includes("this.reactive") || transformedCode.includes("this.useState")) {
+              console.log(
+                `[WSX Plugin Babel] Generated reactive code found in: ${id}
+` + transformedCode.split("\n").filter(
+                  (line) => line.includes("this.reactive") || line.includes("this.useState")
+                ).join("\n")
+              );
+            }
+          }
+        }
+      } catch (error) {
+        console.warn(
+          `[WSX Plugin Babel] Babel transform failed for ${id}, falling back to esbuild only:`,
+          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) {
+        const importPath = getJSXFactoryImportPath(options);
+        const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";
 `;
         transformedCode = importStatement + transformedCode;
         if (debug) {
-          console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
+          console.log(
+            `[WSX Plugin Babel] Re-added JSX imports after Babel transform: ${id}`
+          );
         }
       }
       try {
         const result = await transform(transformedCode, {
-          loader: "tsx",
+          loader: "jsx",
+          // Already TypeScript-transformed by Babel
           jsx: "transform",
           jsxFactory,
           jsxFragment,
           target: "es2020",
           format: "esm"
-          // Esbuild supports decorators natively with tsx loader
         });
-        if (debug) {
-          console.log(`[WSX Plugin] JSX transformed: ${id}`);
-        }
         return {
           code: result.code,
           map: null
         };
       } catch (error) {
-        console.error(`[WSX Plugin] Transform error for ${id}:`, error);
+        console.error(`[WSX Plugin Babel] Transform error for ${id}:`, error);
         throw error;
       }
-    },
-    // We handle JSX transformation directly in the transform hook
-    // No need to modify global esbuild config
-    // 构建开始时的日志
-    buildStart() {
-      if (debug) {
-        console.log(`[WSX Plugin] Build started with extensions: ${extensions.join(", ")}`);
-        console.log(`[WSX Plugin] JSX Factory: ${jsxFactory}, Fragment: ${jsxFragment}`);
-      }
     }
   };
 }
-var vite_plugin_wsx_default = vitePluginWSX;
 export {
-  vite_plugin_wsx_default as wsx
+  vitePluginWSXWithBabel as wsx
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-vite-plugin",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Vite plugin for WSX Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,9 +25,17 @@
     "web-components"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.7"
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@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.8"
   },
   "devDependencies": {
+    "@babel/traverse": "^7.28.5",
+    "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.0.0",
     "@types/node": "^20.0.0",
     "jest": "^29.0.0",
@@ -37,12 +45,12 @@
     "vite": "^5.0.0"
   },
   "peerDependencies": {
-    "vite": ">=4.0.0",
-    "esbuild": ">=0.25.0"
+    "esbuild": ">=0.25.0",
+    "vite": ">=4.0.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --external esbuild",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external esbuild",
+    "build": "tsup src/index.ts --format cjs,esm --dts --external esbuild --external @babel/core --external @babel/preset-typescript --external @babel/plugin-proposal-decorators --external @babel/plugin-proposal-class-properties --external @babel/plugin-transform-class-static-block --external @babel/types",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external esbuild --external @babel/core --external @babel/preset-typescript --external @babel/plugin-proposal-decorators --external @babel/plugin-proposal-class-properties --external @babel/plugin-transform-class-static-block --external @babel/types",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",