@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.9

package/dist/index.mjs

@@ -1,92 +1,621 @@
-// 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";
+              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;
+            }
+          }
+        }
+        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) {
+            const reactiveVarId = t.identifier(`_${key}Reactive`);
+            statements.push(
+              t.variableDeclaration("let", [
+                t.variableDeclarator(
+                  reactiveVarId,
+                  t.callExpression(
+                    t.memberExpression(
+                      t.thisExpression(),
+                      t.identifier("reactive")
+                    ),
+                    [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"),
+                        t.arrowFunctionExpression([], reactiveVarId)
+                      ),
+                      t.objectProperty(
+                        t.identifier("set"),
+                        t.arrowFunctionExpression(
+                          [t.identifier("newValue")],
+                          t.blockStatement([
+                            t.expressionStatement(
+                              t.assignmentExpression(
+                                "=",
+                                reactiveVarId,
+                                t.conditionalExpression(
+                                  // Check if newValue is an object or array
+                                  t.logicalExpression(
+                                    "&&",
+                                    t.binaryExpression(
+                                      "!==",
+                                      t.identifier(
+                                        "newValue"
+                                      ),
+                                      t.nullLiteral()
+                                    ),
+                                    t.logicalExpression(
+                                      "&&",
+                                      t.binaryExpression(
+                                        "!==",
+                                        t.unaryExpression(
+                                          "typeof",
+                                          t.identifier(
+                                            "newValue"
+                                          )
+                                        ),
+                                        t.stringLiteral(
+                                          "undefined"
+                                        )
+                                      ),
+                                      t.logicalExpression(
+                                        "||",
+                                        t.callExpression(
+                                          t.memberExpression(
+                                            t.identifier(
+                                              "Array"
+                                            ),
+                                            t.identifier(
+                                              "isArray"
+                                            )
+                                          ),
+                                          [
+                                            t.identifier(
+                                              "newValue"
+                                            )
+                                          ]
+                                        ),
+                                        t.binaryExpression(
+                                          "===",
+                                          t.unaryExpression(
+                                            "typeof",
+                                            t.identifier(
+                                              "newValue"
+                                            )
+                                          ),
+                                          t.stringLiteral(
+                                            "object"
+                                          )
+                                        )
+                                      )
+                                    )
+                                  ),
+                                  // If object/array, wrap in reactive
+                                  t.callExpression(
+                                    t.memberExpression(
+                                      t.thisExpression(),
+                                      t.identifier("reactive")
+                                    ),
+                                    [t.identifier("newValue")]
+                                  ),
+                                  // Otherwise, just assign (for primitives)
+                                  t.identifier("newValue")
+                                )
+                              )
+                            ),
+                            // Trigger rerender when value is replaced
+                            t.expressionStatement(
+                              t.callExpression(
+                                t.memberExpression(
+                                  t.thisExpression(),
+                                  t.identifier("scheduleRerender")
+                                ),
+                                []
+                              )
+                            )
+                          ])
+                        )
+                      ),
+                      t.objectProperty(
+                        t.identifier("enumerable"),
+                        t.booleanLiteral(true)
+                      ),
+                      t.objectProperty(
+                        t.identifier("configurable"),
+                        t.booleanLiteral(true)
+                      )
+                    ])
+                  ]
+                )
+              )
+            );
+          } 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/babel-plugin-wsx-focus.ts
+import * as tModule3 from "@babel/types";
+var FOCUSABLE_ELEMENTS = /* @__PURE__ */ new Set([
+  "input",
+  "textarea",
+  "select",
+  "button"
+  // Also focusable
+]);
+function isFocusableElement(tagName, hasContentEditable) {
+  const lowerTag = tagName.toLowerCase();
+  return FOCUSABLE_ELEMENTS.has(lowerTag) || hasContentEditable;
+}
+function extractPropsFromJSXAttributes(attributes) {
+  const props = {};
+  for (const attr of attributes) {
+    if (tModule3.isJSXAttribute(attr) && tModule3.isJSXIdentifier(attr.name)) {
+      const keyName = attr.name.name;
+      if (keyName === "id" || keyName === "name" || keyName === "type") {
+        if (tModule3.isStringLiteral(attr.value)) {
+          props[keyName] = attr.value.value;
+        } else if (tModule3.isJSXExpressionContainer(attr.value) && tModule3.isStringLiteral(attr.value.expression)) {
+          props[keyName] = attr.value.expression.value;
+        }
+      }
+    }
+  }
+  return props;
+}
+function generateStableKey(tagName, componentName, path, props) {
+  const pathStr = path.join("-");
+  const lowerTag = tagName.toLowerCase();
+  if (props.id) {
+    return `${componentName}-${props.id}`;
+  }
+  if (props.name) {
+    return `${componentName}-${props.name}`;
+  }
+  const typeStr = props.type || "text";
+  return `${componentName}-${lowerTag}-${typeStr}-${pathStr}`;
+}
+function calculateJSXPath(path) {
+  const pathArray = [];
+  let currentPath = path.parentPath;
+  while (currentPath) {
+    if (currentPath.isJSXElement()) {
+      const parent = currentPath.parentPath;
+      if (parent && parent.isJSXElement()) {
+        const parentNode = parent.node;
+        let index = 0;
+        for (let i = 0; i < parentNode.children.length; i++) {
+          const child = parentNode.children[i];
+          if (child === currentPath.node) {
+            index = i;
+            break;
+          }
+        }
+        pathArray.unshift(index);
+      } else if (parent && parent.isReturnStatement()) {
+        break;
+      }
+    } else if (currentPath.isReturnStatement()) {
+      break;
+    }
+    currentPath = currentPath.parentPath;
+  }
+  return pathArray.length > 0 ? pathArray : [0];
+}
+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;
+      }
+      break;
+    }
+    classPath = classPath.parentPath;
+  }
+  return "Component";
+}
+function babelPluginWSXFocus() {
+  const t = tModule3;
+  return {
+    name: "babel-plugin-wsx-focus",
+    visitor: {
+      JSXOpeningElement(path) {
+        const element = path.node;
+        if (!t.isJSXIdentifier(element.name)) {
+          return;
+        }
+        const elementName = element.name.name;
+        const hasKey = element.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === "data-wsx-key"
+        );
+        if (hasKey) {
+          return;
+        }
+        const props = extractPropsFromJSXAttributes(element.attributes);
+        const hasContentEditable = element.attributes.some(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && (attr.name.name === "contenteditable" || attr.name.name === "contentEditable")
+        );
+        if (!isFocusableElement(elementName, hasContentEditable)) {
+          return;
+        }
+        const componentName = findComponentName(path);
+        const pathArray = calculateJSXPath(path);
+        const key = generateStableKey(elementName, componentName, pathArray, props);
+        const keyAttr = t.jsxAttribute(
+          t.jsxIdentifier("data-wsx-key"),
+          t.stringLiteral(key)
+        );
+        element.attributes.push(keyAttr);
+      }
+    }
+  };
+}
+
+// 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}`);
+      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`;
+        }
       }
       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;
-        if (debug) {
-          console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
+      }
+      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
+                }
+              ]
+            ] : [],
+            // 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,
+            [
+              "@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;
         }
+      } catch {
+      }
+      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;
       }
       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
 };