@wsxjs/wsx-vite-plugin 0.0.30 → 0.1.0

package/dist/index.js

@@ -632,125 +632,6 @@ function babelPluginWSXStyle() {
   };
 }
 
-// src/babel-plugin-wsx-focus.ts
-var tModule3 = __toESM(require("@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()) {
-      const classNode = classPath.node;
-      if (classNode.id && tModule3.isIdentifier(classNode.id)) {
-        return classNode.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";
@@ -842,9 +723,6 @@ function vitePluginWSXWithBabel(options = {}) {
               }
             ]
           ] : [],
-          // Focus key generation plugin runs early to add data-wsx-key attributes
-          // This must run before JSX is transformed to h() calls
-          babelPluginWSXFocus,
           // CRITICAL: State decorator transformation must run BEFORE @babel/plugin-proposal-decorators
           // This allows the plugin to detect @state decorators in their original form and throw errors if needed
           // The plugin removes @state decorators after processing, so the decorator plugin won't see them

package/dist/index.mjs

@@ -596,125 +596,6 @@ function babelPluginWSXStyle() {
   };
 }
 
-// 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()) {
-      const classNode = classPath.node;
-      if (classNode.id && tModule3.isIdentifier(classNode.id)) {
-        return classNode.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";
@@ -806,9 +687,6 @@ function vitePluginWSXWithBabel(options = {}) {
               }
             ]
           ] : [],
-          // Focus key generation plugin runs early to add data-wsx-key attributes
-          // This must run before JSX is transformed to h() calls
-          babelPluginWSXFocus,
           // CRITICAL: State decorator transformation must run BEFORE @babel/plugin-proposal-decorators
           // This allows the plugin to detect @state decorators in their original form and throw errors if needed
           // The plugin removes @state decorators after processing, so the decorator plugin won't see them

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-vite-plugin",
-  "version": "0.0.30",
+  "version": "0.1.0",
   "description": "Vite plugin for WSXJS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,7 +31,7 @@
     "@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.30"
+    "@wsxjs/wsx-core": "0.1.0"
   },
   "devDependencies": {
     "@babel/traverse": "^7.28.5",

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

@@ -12,7 +12,6 @@ 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;
@@ -131,9 +130,6 @@ export function vitePluginWSXWithBabel(options: WSXPluginOptions = {}): Plugin {
                               ],
                           ]
                         : []),
-                    // Focus key generation plugin runs early to add data-wsx-key attributes
-                    // This must run before JSX is transformed to h() calls
-                    babelPluginWSXFocus,
                     // CRITICAL: State decorator transformation must run BEFORE @babel/plugin-proposal-decorators
                     // This allows the plugin to detect @state decorators in their original form and throw errors if needed
                     // The plugin removes @state decorators after processing, so the decorator plugin won't see them

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

@@ -1,225 +0,0 @@
-/**
- * Babel plugin to automatically add data-wsx-key attributes to focusable elements
- * for focus preservation only (RFC-0046).
- *
- * 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.
- *
- * IMPORTANT: This plugin ONLY handles focus preservation. It does NOT generate
- * cache keys or position IDs. The framework handles cache key generation using
- * user-provided `key` prop or runtime counters (following React/Vue design).
- */
-
-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: NodePath<t.Node> | null = path;
-
-    // Find parent class declaration
-    while (classPath) {
-        if (classPath.isClassDeclaration()) {
-            const classNode = classPath.node;
-            if (classNode.id && tModule.isIdentifier(classNode.id)) {
-                return classNode.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);
-            },
-        },
-    };
-}