@wsxjs/wsx-vite-plugin 0.0.7 → 0.0.9

package/package.json

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

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

@@ -0,0 +1,219 @@
+/**
+ * Babel plugin to automatically add data-wsx-key attributes to focusable elements
+ *
+ * Transforms:
+ *   <input value={this.name} onInput={this.handleInput} />
+ *
+ * To:
+ *   <input
+ *     data-wsx-key="MyComponent-input-text-0-0"
+ *     value={this.name}
+ *     onInput={this.handleInput}
+ *   />
+ *
+ * This enables automatic focus preservation during component rerenders.
+ */
+
+import type { PluginObj, NodePath } from "@babel/core";
+import type * as t from "@babel/types";
+import * as tModule from "@babel/types";
+
+/**
+ * Focusable HTML elements that need keys
+ */
+const FOCUSABLE_ELEMENTS = new Set([
+    "input",
+    "textarea",
+    "select",
+    "button", // Also focusable
+]);
+
+/**
+ * Check if an element is focusable
+ */
+function isFocusableElement(tagName: string, hasContentEditable: boolean): boolean {
+    const lowerTag = tagName.toLowerCase();
+    return FOCUSABLE_ELEMENTS.has(lowerTag) || hasContentEditable;
+}
+
+/**
+ * Extract props from JSX attributes for key generation
+ */
+function extractPropsFromJSXAttributes(attributes: (t.JSXAttribute | t.JSXSpreadAttribute)[]): {
+    id?: string;
+    name?: string;
+    type?: string;
+} {
+    const props: { id?: string; name?: string; type?: string } = {};
+
+    for (const attr of attributes) {
+        if (tModule.isJSXAttribute(attr) && tModule.isJSXIdentifier(attr.name)) {
+            const keyName = attr.name.name;
+
+            if (keyName === "id" || keyName === "name" || keyName === "type") {
+                if (tModule.isStringLiteral(attr.value)) {
+                    props[keyName as "id" | "name" | "type"] = attr.value.value;
+                } else if (
+                    tModule.isJSXExpressionContainer(attr.value) &&
+                    tModule.isStringLiteral(attr.value.expression)
+                ) {
+                    props[keyName as "id" | "name" | "type"] = attr.value.expression.value;
+                }
+            }
+        }
+    }
+
+    return props;
+}
+
+/**
+ * Generate stable key for an element
+ * @param tagName - HTML tag name
+ * @param componentName - Component class name
+ * @param path - Path from root (array of sibling indices)
+ * @param props - Element properties (for id, name, type)
+ * @returns Stable key string
+ */
+function generateStableKey(
+    tagName: string,
+    componentName: string,
+    path: number[],
+    props: { id?: string; name?: string; type?: string }
+): string {
+    const pathStr = path.join("-");
+    const lowerTag = tagName.toLowerCase();
+
+    // Priority: id > name > type + path
+    if (props.id) {
+        return `${componentName}-${props.id}`;
+    }
+
+    if (props.name) {
+        return `${componentName}-${props.name}`;
+    }
+
+    // Default: component-tag-type-path
+    const typeStr = props.type || "text";
+    return `${componentName}-${lowerTag}-${typeStr}-${pathStr}`;
+}
+
+/**
+ * Calculate path from root JSX element
+ */
+function calculateJSXPath(path: NodePath<t.JSXOpeningElement>): number[] {
+    const pathArray: number[] = [];
+    let currentPath: NodePath | null = path.parentPath; // JSXElement
+
+    // Walk up to find siblings
+    while (currentPath) {
+        if (currentPath.isJSXElement()) {
+            const parent = currentPath.parentPath;
+            if (parent && parent.isJSXElement()) {
+                // Find index in parent's children
+                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()) {
+                // At root level
+                break;
+            }
+        } else if (currentPath.isReturnStatement()) {
+            // At root level
+            break;
+        }
+        currentPath = currentPath.parentPath;
+    }
+
+    return pathArray.length > 0 ? pathArray : [0];
+}
+
+/**
+ * Find component name from class declaration
+ */
+function findComponentName(path: NodePath<t.JSXOpeningElement>): string {
+    let classPath = path;
+
+    // Find parent class declaration
+    while (classPath) {
+        if (classPath.isClassDeclaration()) {
+            if (classPath.node.id && tModule.isIdentifier(classPath.node.id)) {
+                return classPath.node.id.name;
+            }
+            break;
+        }
+        classPath = classPath.parentPath;
+    }
+
+    return "Component";
+}
+
+export default function babelPluginWSXFocus(): PluginObj {
+    const t = tModule;
+    return {
+        name: "babel-plugin-wsx-focus",
+        visitor: {
+            JSXOpeningElement(path) {
+                const element = path.node;
+
+                if (!t.isJSXIdentifier(element.name)) {
+                    return;
+                }
+
+                const elementName = element.name.name;
+
+                // Check if already has data-wsx-key
+                const hasKey = element.attributes.some(
+                    (attr) =>
+                        t.isJSXAttribute(attr) &&
+                        t.isJSXIdentifier(attr.name) &&
+                        attr.name.name === "data-wsx-key"
+                );
+
+                if (hasKey) {
+                    return; // Skip if already has key
+                }
+
+                // Extract props
+                const props = extractPropsFromJSXAttributes(element.attributes);
+
+                // Check for contenteditable attribute
+                const hasContentEditable = element.attributes.some(
+                    (attr) =>
+                        t.isJSXAttribute(attr) &&
+                        t.isJSXIdentifier(attr.name) &&
+                        (attr.name.name === "contenteditable" ||
+                            attr.name.name === "contentEditable")
+                );
+
+                // Check if element is focusable
+                if (!isFocusableElement(elementName, hasContentEditable)) {
+                    return; // Skip non-focusable elements
+                }
+
+                // Get component name
+                const componentName = findComponentName(path);
+
+                // Calculate path from root
+                const pathArray = calculateJSXPath(path);
+
+                // Generate key
+                const key = generateStableKey(elementName, componentName, pathArray, props);
+
+                // Add data-wsx-key attribute
+                const keyAttr = t.jsxAttribute(
+                    t.jsxIdentifier("data-wsx-key"),
+                    t.stringLiteral(key)
+                );
+
+                element.attributes.push(keyAttr);
+            },
+        },
+    };
+}

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

@@ -0,0 +1,394 @@
+/**
+ * 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;
+        isArray?: boolean; // Add isArray flag
+    }>;
+    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;
+                    isArray?: 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";
+
+                            // Check if it's specifically an array
+                            const isArray = initialValue.type === "ArrayExpression";
+
+                            stateProperties.push({
+                                key,
+                                initialValue,
+                                isObject,
+                                isArray, // Add isArray flag
+                            });
+
+                            // 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 });
+                        // Store the initial reactive value in a private variable
+                        const reactiveVarId = t.identifier(`_${key}Reactive`);
+
+                        // Create variable to store reactive value
+                        statements.push(
+                            t.variableDeclaration("let", [
+                                t.variableDeclarator(
+                                    reactiveVarId,
+                                    t.callExpression(
+                                        t.memberExpression(
+                                            t.thisExpression(),
+                                            t.identifier("reactive")
+                                        ),
+                                        [initialValue]
+                                    )
+                                ),
+                            ])
+                        );
+
+                        // For both arrays and objects, create a getter/setter that automatically wraps new values in reactive()
+                        // This ensures that when you do `this.state = { ... }` or `this.todos = [...]`,
+                        // the new value is automatically wrapped in reactive()
+                        // Create getter/setter using Object.defineProperty
+                        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 {
+                        // 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);
+            },
+        },
+    };
+}