@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.8

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

@@ -0,0 +1,260 @@
+/**
+ * Babel plugin to transform @state decorator to compile-time Proxy creation
+ *
+ * Transforms:
+ *   @state private state = { count: 0 };
+ *
+ * To:
+ *   private state;
+ *   constructor() {
+ *     super();
+ *     this.state = this.reactive({ count: 0 });
+ *   }
+ */
+
+import type { PluginObj, PluginPass } from "@babel/core";
+import type * as t from "@babel/types";
+import * as tModule from "@babel/types";
+
+interface WSXStatePluginPass extends PluginPass {
+    stateProperties: Array<{
+        key: string;
+        initialValue: t.Expression;
+        isObject: boolean;
+    }>;
+    reactiveMethodName: string;
+}
+
+export default function babelPluginWSXState(): PluginObj<WSXStatePluginPass> {
+    const t = tModule;
+    return {
+        name: "babel-plugin-wsx-state",
+        visitor: {
+            ClassDeclaration(path) {
+                const classBody = path.node.body;
+                const stateProperties: Array<{
+                    key: string;
+                    initialValue: t.Expression;
+                    isObject: boolean;
+                }> = [];
+
+                // Find all @state decorated properties
+                // Debug: log all class members
+                console.info(
+                    `[Babel Plugin WSX State] Processing class ${path.node.id?.name || "anonymous"}, members: ${classBody.body.length}`
+                );
+
+                for (const member of classBody.body) {
+                    // Debug: log member type
+                    console.info(
+                        `  - Member type: ${member.type}, key: ${member.type === "ClassProperty" || member.type === "ClassPrivateProperty" ? (member.key as any)?.name : "N/A"}`
+                    );
+
+                    // Check both ClassProperty and ClassPrivateProperty
+                    // @babel/plugin-proposal-class-properties might convert them
+                    if (
+                        (member.type === "ClassProperty" ||
+                            member.type === "ClassPrivateProperty") &&
+                        member.key.type === "Identifier"
+                    ) {
+                        // Debug: log all class properties
+                        console.info(
+                            `  - Property: ${member.key.name}, decorators: ${member.decorators?.length || 0}, hasValue: ${!!member.value}`
+                        );
+
+                        if (member.decorators && member.decorators.length > 0) {
+                            // Debug: log decorator names
+                            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}()`
+                                    );
+                                }
+                            });
+                        }
+
+                        // Check if has @state decorator
+                        const hasStateDecorator = member.decorators?.some(
+                            (decorator: t.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 as t.Expression;
+
+                            // Determine if it's an object/array
+                            const isObject =
+                                initialValue.type === "ObjectExpression" ||
+                                initialValue.type === "ArrayExpression";
+
+                            stateProperties.push({
+                                key,
+                                initialValue,
+                                isObject,
+                            });
+
+                            // Remove @state decorator - but keep other decorators
+                            if (member.decorators) {
+                                member.decorators = member.decorators.filter(
+                                    (decorator: t.Decorator) => {
+                                        if (
+                                            decorator.expression.type === "Identifier" &&
+                                            decorator.expression.name === "state"
+                                        ) {
+                                            return false; // Remove @state decorator
+                                        }
+                                        if (
+                                            decorator.expression.type === "CallExpression" &&
+                                            decorator.expression.callee.type === "Identifier" &&
+                                            decorator.expression.callee.name === "state"
+                                        ) {
+                                            return false; // Remove @state() decorator
+                                        }
+                                        return true; // Keep other decorators
+                                    }
+                                );
+                            }
+
+                            // Remove initial value - it will be set in constructor via this.reactive()
+                            // Keep the property declaration but without initial value
+                            member.value = undefined;
+                        }
+                    }
+                }
+
+                if (stateProperties.length === 0) {
+                    return; // No @state properties found
+                }
+
+                // Find or create constructor
+                let constructor = classBody.body.find(
+                    (member: t.ClassBody["body"][number]): member is t.ClassMethod =>
+                        member.type === "ClassMethod" && member.kind === "constructor"
+                ) as t.ClassMethod | undefined;
+
+                if (!constructor) {
+                    // Create constructor if it doesn't exist
+                    constructor = t.classMethod(
+                        "constructor",
+                        t.identifier("constructor"),
+                        [],
+                        t.blockStatement([])
+                    );
+                    classBody.body.unshift(constructor);
+                }
+
+                // Add initialization code to constructor
+                const statements: t.Statement[] = [];
+
+                // Add super() call if not present
+                const hasSuper = constructor.body.body.some(
+                    (stmt: t.Statement) =>
+                        stmt.type === "ExpressionStatement" &&
+                        stmt.expression.type === "CallExpression" &&
+                        stmt.expression.callee.type === "Super"
+                );
+
+                if (!hasSuper) {
+                    statements.push(t.expressionStatement(t.callExpression(t.super(), [])));
+                }
+
+                // CRITICAL: Add state property initialization AFTER all existing constructor code
+                // WebComponent already has reactive() and useState() methods
+                // We'll insert these statements at the END of constructor, not right after super()
+                for (const { key, initialValue, isObject } of stateProperties) {
+                    if (isObject) {
+                        // For objects/arrays: this.state = this.reactive({ count: 0 });
+                        statements.push(
+                            t.expressionStatement(
+                                t.assignmentExpression(
+                                    "=",
+                                    t.memberExpression(t.thisExpression(), t.identifier(key)),
+                                    t.callExpression(
+                                        t.memberExpression(
+                                            t.thisExpression(),
+                                            t.identifier("reactive")
+                                        ),
+                                        [initialValue]
+                                    )
+                                )
+                            )
+                        );
+                    } else {
+                        // For primitives: use useState
+                        // const [getState, setState] = this.useState("state", initialValue);
+                        // Object.defineProperty(this, "state", { get: getState, set: setState });
+                        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)
+                                            ),
+                                        ]),
+                                    ]
+                                )
+                            )
+                        );
+                    }
+                }
+
+                // CRITICAL: Insert statements at the END of constructor
+                // WebComponent already has reactive() and useState() methods
+                // Inserting at the end ensures all constructor code has run
+                constructor.body.body.push(...statements);
+            },
+        },
+    };
+}

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,218 @@
+/* eslint-disable no-console */
+/**
+ * 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";
+
+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",
+        debug = false,
+        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;
+            }
+
+            if (debug) {
+                console.log(`[WSX Plugin Babel] Processing: ${id}`);
+            }
+
+            // 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`;
+                }
+
+                if (cssFileExists) {
+                    console.log(
+                        `[WSX Plugin Babel] Found CSS file for auto-injection: ${cssFilePathWithoutQuery}, will inject: ${cssFilePath}`
+                    );
+                }
+            }
+
+            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,
+                                      },
+                                  ],
+                              ]
+                            : []),
+                        // 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}`);
+                        // Log generated code for debugging
+                        if (
+                            transformedCode.includes("this.reactive") ||
+                            transformedCode.includes("this.useState")
+                        ) {
+                            console.log(
+                                `[WSX Plugin Babel] Generated reactive code found in: ${id}\n` +
+                                    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
+                );
+            }
+
+            // 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;
+                if (debug) {
+                    console.log(
+                        `[WSX Plugin Babel] Re-added JSX imports after Babel transform: ${id}`
+                    );
+                }
+            }
+
+            // 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;
+            }
+        },
+    };
+}