@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.8

package/dist/index.d.mts

@@ -1,39 +1,19 @@
 import { Plugin } from 'vite';
 
 /**
- * Vite Plugin for WSX (Web Component JSX)
+ * Vite Plugin for WSX with Babel decorator support
  *
- * 专门处理.wsx文件：
- * - 自动添加JSX pragma
- * - 支持TypeScript编译
- * - 完全隔离，不影响主项目React配置
+ * Uses Babel to preprocess decorators before esbuild transformation
+ * This ensures decorators work correctly even with esbuild's limitations
  */
 
 interface WSXPluginOptions {
-    /**
-     * JSX工厂函数名
-     * @default 'h'
-     */
     jsxFactory?: string;
-    /**
-     * JSX Fragment函数名
-     * @default 'Fragment'
-     */
     jsxFragment?: string;
-    /**
-     * 是否启用调试日志
-     * @default false
-     */
     debug?: boolean;
-    /**
-     * 文件扩展名
-     * @default ['.wsx']
-     */
     extensions?: string[];
+    autoStyleInjection?: boolean;
 }
-/**
- * WSX Vite插件
- */
-declare function vitePluginWSX(options?: WSXPluginOptions): Plugin;
+declare function vitePluginWSXWithBabel(options?: WSXPluginOptions): Plugin;
 
-export { vitePluginWSX as wsx };
+export { vitePluginWSXWithBabel as wsx };

package/dist/index.d.ts

@@ -1,39 +1,19 @@
 import { Plugin } from 'vite';
 
 /**
- * Vite Plugin for WSX (Web Component JSX)
+ * Vite Plugin for WSX with Babel decorator support
  *
- * 专门处理.wsx文件：
- * - 自动添加JSX pragma
- * - 支持TypeScript编译
- * - 完全隔离，不影响主项目React配置
+ * Uses Babel to preprocess decorators before esbuild transformation
+ * This ensures decorators work correctly even with esbuild's limitations
  */
 
 interface WSXPluginOptions {
-    /**
-     * JSX工厂函数名
-     * @default 'h'
-     */
     jsxFactory?: string;
-    /**
-     * JSX Fragment函数名
-     * @default 'Fragment'
-     */
     jsxFragment?: string;
-    /**
-     * 是否启用调试日志
-     * @default false
-     */
     debug?: boolean;
-    /**
-     * 文件扩展名
-     * @default ['.wsx']
-     */
     extensions?: string[];
+    autoStyleInjection?: boolean;
 }
-/**
- * WSX Vite插件
- */
-declare function vitePluginWSX(options?: WSXPluginOptions): Plugin;
+declare function vitePluginWSXWithBabel(options?: WSXPluginOptions): Plugin;
 
-export { vitePluginWSX as wsx };
+export { vitePluginWSXWithBabel as wsx };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,104 +17,426 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  wsx: () => vite_plugin_wsx_default
+  wsx: () => vitePluginWSXWithBabel
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/vite-plugin-wsx.ts
+// src/vite-plugin-wsx-babel.ts
 var import_esbuild = require("esbuild");
+var import_core = require("@babel/core");
+var import_fs = require("fs");
+var import_path = require("path");
+
+// src/babel-plugin-wsx-state.ts
+var tModule = __toESM(require("@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
+var tModule2 = __toESM(require("@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 = (0, import_path.dirname)(id);
+        const fileName = (0, import_path.basename)(id, extensions.find((ext) => id.endsWith(ext)) || "");
+        const cssFilePathWithoutQuery = (0, import_path.join)(fileDir, `${fileName}.css`);
+        cssFileExists = (0, import_fs.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 = (0, import_core.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 (0, import_esbuild.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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   wsx