@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.9

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

@@ -0,0 +1,149 @@
+/**
+ * Babel plugin to automatically inject CSS styles for WSX components
+ *
+ * Transforms:
+ *   // Button.wsx (if Button.css exists)
+ *   export default class Button extends WebComponent { ... }
+ *
+ * To:
+ *   import styles from "./Button.css?inline";
+ *   export default class Button extends WebComponent {
+ *       private _autoStyles = styles;
+ *       ...
+ *   }
+ */
+
+import type { PluginObj, PluginPass } from "@babel/core";
+import type * as t from "@babel/types";
+import * as tModule from "@babel/types";
+
+interface WSXStylePluginPass extends PluginPass {
+    cssFileExists: boolean;
+    cssFilePath: string;
+    componentName: string;
+}
+
+/**
+ * Check if styles are already imported in the file
+ */
+function hasStylesImport(program: t.Program): boolean {
+    for (const node of program.body) {
+        if (node.type === "ImportDeclaration") {
+            const source = node.source.value;
+            // Check if it's a CSS import with ?inline
+            if (
+                typeof source === "string" &&
+                (source.endsWith(".css?inline") || source.endsWith(".css"))
+            ) {
+                // Check if it's imported as "styles"
+                const defaultSpecifier = node.specifiers.find(
+                    (spec) => spec.type === "ImportDefaultSpecifier"
+                );
+                if (defaultSpecifier) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+
+/**
+ * Check if _autoStyles property already exists in the class
+ */
+function hasAutoStylesProperty(classBody: t.ClassBody): boolean {
+    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;
+}
+
+export default function babelPluginWSXStyle(): PluginObj<WSXStylePluginPass> {
+    const t = tModule;
+    return {
+        name: "babel-plugin-wsx-style",
+        visitor: {
+            Program(path, state) {
+                const { cssFileExists, cssFilePath, componentName } =
+                    state.opts as WSXStylePluginPass;
+
+                // Skip if CSS file doesn't exist
+                if (!cssFileExists) {
+                    return;
+                }
+
+                // Check if styles are already manually imported
+                if (hasStylesImport(path.node)) {
+                    console.info(
+                        `[Babel Plugin WSX Style] Skipping ${componentName}: styles already manually imported`
+                    );
+                    return; // Skip auto-injection if manual import exists
+                }
+
+                console.info(
+                    `[Babel Plugin WSX Style] Injecting CSS import for ${componentName}: ${cssFilePath}`
+                );
+
+                // Add CSS import at the top of the file
+                const importStatement = t.importDeclaration(
+                    [t.importDefaultSpecifier(t.identifier("styles"))],
+                    t.stringLiteral(cssFilePath)
+                );
+
+                // Insert after existing imports (if any)
+                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 as WSXStylePluginPass;
+
+                // Skip if CSS file doesn't exist
+                if (!cssFileExists) {
+                    return;
+                }
+
+                const classBody = path.node.body;
+
+                // Check if _autoStyles property already exists
+                if (hasAutoStylesProperty(classBody)) {
+                    return; // Skip if already exists
+                }
+
+                // Note: We don't check for manual imports here because:
+                // 1. Program visitor already handled that and skipped if manual import exists
+                // 2. If we reach here, it means Program visitor added the import (or it was already there)
+                // 3. We should add the class property regardless
+
+                // Add class property: private _autoStyles = styles;
+                // Use classProperty (not classPrivateProperty) to create TypeScript private property
+                // TypeScript private is compile-time only and becomes a regular property at runtime
+                const autoStylesProperty = t.classProperty(
+                    t.identifier("_autoStyles"),
+                    t.identifier("styles"),
+                    null, // typeAnnotation
+                    [], // decorators
+                    false, // computed
+                    false // static
+                );
+
+                // Insert at the beginning of class body (before methods and other properties)
+                classBody.body.unshift(autoStylesProperty);
+            },
+        },
+    };
+}

package/src/index.ts

@@ -1 +1,2 @@
-export { default as wsx } from "./vite-plugin-wsx";
+// Export the Babel-based plugin (with compile-time decorator support)
+export { vitePluginWSXWithBabel as wsx } from "./vite-plugin-wsx-babel";

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

@@ -0,0 +1,182 @@
+/**
+ * Vite Plugin for WSX with Babel decorator support
+ *
+ * Uses Babel to preprocess decorators before esbuild transformation
+ * This ensures decorators work correctly even with esbuild's limitations
+ */
+
+import type { Plugin } from "vite";
+import { transform } from "esbuild";
+import { transformSync } from "@babel/core";
+import { existsSync } from "fs";
+import { dirname, join, basename } from "path";
+import babelPluginWSXState from "./babel-plugin-wsx-state";
+import babelPluginWSXStyle from "./babel-plugin-wsx-style";
+import babelPluginWSXFocus from "./babel-plugin-wsx-focus";
+
+export interface WSXPluginOptions {
+    jsxFactory?: string;
+    jsxFragment?: string;
+    debug?: boolean;
+    extensions?: string[];
+    autoStyleInjection?: boolean; // Default: true
+}
+
+function getJSXFactoryImportPath(_options: WSXPluginOptions): string {
+    return "@wsxjs/wsx-core";
+}
+
+export function vitePluginWSXWithBabel(options: WSXPluginOptions = {}): Plugin {
+    const {
+        jsxFactory = "h",
+        jsxFragment = "Fragment",
+        extensions = [".wsx"],
+        autoStyleInjection = true,
+    } = options;
+
+    return {
+        name: "vite-plugin-wsx-babel",
+        enforce: "pre",
+
+        async transform(code: string, id: string) {
+            const isWSXFile = extensions.some((ext) => id.endsWith(ext));
+
+            if (!isWSXFile) {
+                return null;
+            }
+
+            // Check if corresponding CSS file exists (for auto style injection)
+            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;
+
+                // Generate relative path for import (e.g., "./Button.css?inline")
+                // Use relative path from the file's directory
+                if (cssFileExists) {
+                    // For import statement, use relative path with ?inline query
+                    cssFilePath = `./${fileName}.css?inline`;
+                }
+            }
+
+            let transformedCode = code;
+
+            // 1. Add JSX imports if needed
+            // Check for actual import statement
+            const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
+            // Check if JSX factory functions are already imported
+            const hasJSXInImport =
+                hasWSXCoreImport &&
+                (new RegExp(`[{,]\\s*${jsxFactory}\\s*[},]`).test(code) ||
+                    new RegExp(`[{,]\\s*${jsxFragment}\\s*[},]`).test(code));
+
+            // If file has JSX syntax but no import, add it
+            // Note: @jsxImportSource pragma is just a hint, we need actual import for esbuild
+            if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
+                const importPath = getJSXFactoryImportPath(options);
+                const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";\n`;
+                transformedCode = importStatement + transformedCode;
+            }
+
+            // 2. Use Babel to preprocess decorators
+            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 {
+                // Babel transform failed, fallback to esbuild only
+            }
+
+            // 2.5. Ensure JSX imports still exist after Babel transformation
+            // Babel might have removed or modified imports, so we check again
+            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}";\n`;
+                transformedCode = importStatement + transformedCode;
+            }
+
+            // 3. Use esbuild for JSX transformation
+            try {
+                const result = await transform(transformedCode, {
+                    loader: "jsx", // Already TypeScript-transformed by Babel
+                    jsx: "transform",
+                    jsxFactory: jsxFactory,
+                    jsxFragment: jsxFragment,
+                    target: "es2020",
+                    format: "esm",
+                });
+
+                return {
+                    code: result.code,
+                    map: null,
+                };
+            } catch (error) {
+                console.error(`[WSX Plugin Babel] Transform error for ${id}:`, error);
+                throw error;
+            }
+        },
+    };
+}

package/src/vite-plugin-wsx.ts

@@ -1,166 +0,0 @@
-/* eslint-disable no-console */
-/**
- * Vite Plugin for WSX (Web Component JSX)
- *
- * 专门处理.wsx文件：
- * - 自动添加JSX pragma
- * - 支持TypeScript编译
- * - 完全隔离，不影响主项目React配置
- */
-
-import type { Plugin } from "vite";
-import { transform } from "esbuild";
-
-export interface WSXPluginOptions {
-    /**
-     * JSX工厂函数名
-     * @default 'h'
-     */
-    jsxFactory?: string;
-
-    /**
-     * JSX Fragment函数名
-     * @default 'Fragment'
-     */
-    jsxFragment?: string;
-
-    /**
-     * 是否启用调试日志
-     * @default false
-     */
-    debug?: boolean;
-
-    /**
-     * 文件扩展名
-     * @default ['.wsx']
-     */
-    extensions?: string[];
-}
-
-/**
- * 获取 JSX 工厂函数的导入路径
- */
-function getJSXFactoryImportPath(_options: WSXPluginOptions): string {
-    // 使用 @wsxjs/wsx-core 包中的 JSX 工厂
-    return "@wsxjs/wsx-core";
-}
-
-/**
- * WSX Vite插件
- */
-export function vitePluginWSX(options: WSXPluginOptions = {}): Plugin {
-    const {
-        jsxFactory = "h",
-        jsxFragment = "Fragment",
-        debug = false,
-        extensions = [".wsx"],
-    } = options;
-
-    return {
-        name: "vite-plugin-wsx",
-        enforce: "pre", // 确保在 React 插件之前执行
-
-        // 处理 .wsx 文件加载
-        load(id: string) {
-            const isWSXFile = extensions.some((ext) => id.endsWith(ext));
-
-            if (!isWSXFile) {
-                return null;
-            }
-
-            if (debug) {
-                console.log(`[WSX Plugin] Loading: ${id}`);
-            }
-
-            // 返回 null 让 Vite 继续处理文件
-            return null;
-        },
-
-        // 在transform阶段处理文件
-        async transform(code: string, id: string) {
-            // 检查是否是WSX文件
-            const isWSXFile = extensions.some((ext) => id.endsWith(ext));
-
-            if (!isWSXFile) {
-                return null;
-            }
-
-            if (debug) {
-                console.log(`[WSX Plugin] Processing: ${id}`);
-            }
-
-            let transformedCode = code;
-
-            // 1. 检查是否已经有JSX工厂导入
-            const hasWSXCoreImport = code.includes('from "@wsxjs/wsx-core"');
-            // 更精确的检测：使用正则表达式检查 JSX 工厂函数是否在导入中
-            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")}`);
-            }
-
-            // 如果有JSX语法但没有JSX工厂导入，则需要注入
-            if ((code.includes("<") || code.includes("Fragment")) && !hasJSXInImport) {
-                // 使用标准的包导入
-                const importPath = getJSXFactoryImportPath(options);
-                const importStatement = `import { ${jsxFactory}, ${jsxFragment} } from "${importPath}";\n`;
-                transformedCode = importStatement + transformedCode;
-
-                if (debug) {
-                    console.log(`[WSX Plugin] Added JSX factory import to: ${id}`);
-                }
-            }
-
-            // 2. 添加JSX pragma - 不添加，让esbuild使用jsxFactory config
-            // JSX transformation will be handled by esbuild with our custom config
-
-            // 3. 使用 esbuild 进行 JSX 转换
-
-            try {
-                const result = await transform(transformedCode, {
-                    loader: "tsx",
-                    jsx: "transform",
-                    jsxFactory: jsxFactory,
-                    jsxFragment: 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);
-                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}`);
-            }
-        },
-    };
-}
-
-export default vitePluginWSX;