@vitarx/plugin-vite 0.0.1-beta.4 → 0.0.1-beta.6

package/README.md

@@ -249,10 +249,42 @@ import.meta.hot.accept(mod => {
 
 ```typescript
 interface VitePluginVitarxOptions {
-  // 暂无配置选项
+  /**
+   * 是否将 className 属性转换为 class 属性
+   * 仅对原生 HTML 元素生效，组件不生效
+   * @default false
+   */
+  transformClassNameToClass?: boolean
 }
 ```
 
+### className 转 class
+
+启用 `transformClassNameToClass` 选项后，原生 HTML 元素的 `className` 属性会自动转换为 `class`：
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vitarx from '@vitarx/plugin-vite'
+
+export default defineConfig({
+  plugins: [vitarx({ transformClassNameToClass: true })]
+})
+```
+
+```jsx
+// 编译前
+<div className="container">Hello</div>
+
+// 编译后
+createView('div', { class: 'container', children: 'Hello' })
+```
+
+**注意事项：**
+- 仅对原生 HTML 元素（小写字母开头）生效，组件不转换
+- `class` 和 `className` 不能同时存在，否则会抛出 `E016` 错误
+- `class` 属性优先级更高
+
 ## 目录结构
 
 ```
@@ -292,6 +324,7 @@ src/
 | E013 | Match 组件必须包含子元素             |
 | E014 | IfBlock 组件必须包含子元素           |
 | E015 | Switch 组件必须包含至少一个 Match 子元素 |
+| E016 | class 和 className 不能同时存在    |
 
 ## License
 

package/dist/error.d.ts

@@ -71,6 +71,8 @@ export declare const ErrorCodes: {
     readonly E014: "E014";
     /** Switch 组件必须有 Match 子元素 */
     readonly E015: "E015";
+    /** class 和 className 不能同时存在 */
+    readonly E016: "E016";
 };
 /**
  * 警告代码枚举

package/dist/error.js

@@ -61,6 +61,8 @@ export const ErrorCodes = {
     E014: 'E014',
     /** Switch 组件必须有 Match 子元素 */
     E015: 'E015',
+    /** class 和 className 不能同时存在 */
+    E016: 'E016',
 };
 /**
  * 警告代码枚举
@@ -88,6 +90,7 @@ export const ErrorMessages = {
     E013: 'Match component must have children',
     E014: 'IfBlock component must have children',
     E015: 'Switch component must have at least one Match child',
+    E016: 'Cannot use both "class" and "className" attributes on the same element. When transformClassNameToClass is enabled, "class" takes priority',
 };
 /**
  * 警告消息映射

package/dist/hmr-client/index.d.ts

@@ -27,7 +27,8 @@ export default class HMRManager {
     /**
      * 置换新模块
      *
-     * 此方法提供给`jsxDev`函数调用，保持每次创建组件实例都是最新的模块！
+     * 此方法提供给`createView`函数调用，保持每次创建组件实例都是最新的模块！
+     *
      * @param component
      */
     resolveComponent(component: Component): Component;

package/dist/hmr-client/index.js

@@ -51,7 +51,8 @@ class HMRManager {
     /**
      * 置换新模块
      *
-     * 此方法提供给`jsxDev`函数调用，保持每次创建组件实例都是最新的模块！
+     * 此方法提供给`createView`函数调用，保持每次创建组件实例都是最新的模块！
+     *
      * @param component
      */
     resolveComponent(component) {

package/dist/hmr-client/update.js

@@ -21,7 +21,9 @@ export function processUpdate(view, newComponent) {
     view.component = newComponent;
     // 如果逻辑有变化，则完全重新挂载组件
     if (logic) {
+        const ctx = view.ctx;
         view.dispose();
+        view.init(ctx);
         view.mount(placeholder, 'replace');
         return;
     }

package/dist/index.d.ts

@@ -2,10 +2,19 @@ import { type Plugin } from 'vite';
 export type * from './types.js';
 /**
  * vite-plugin-vitarx 配置选项
- *
- * 暂无配置选项
  */
 export interface VitePluginVitarxOptions {
+    /**
+     * 是否将 className 属性转换为 class 属性
+     * 仅对原生 HTML 元素生效，组件不生效
+     *
+     * 当启用时：
+     * - `<div className="test" />` 转换为 `<div class="test" />`
+     * - 如果同时存在 class 和 className，会抛出错误（class 优先级更高）
+     *
+     * @default false
+     */
+    transformClassNameToClass?: boolean;
 }
 /**
  * vite-plugin-vitarx
@@ -15,8 +24,9 @@ export interface VitePluginVitarxOptions {
  * - 支持 v-if、v-else-if、v-else 、v-model 等编译宏指令
  * - 支持 Switch , IfBlock 等编译宏组件
  * - 开发时 HMR 热更新相关代码注入与功能支持
+ * - 支持 className 转 class（仅原生 HTML 元素）
  *
- * @param _options - 暂无可选配置。
+ * @param options - 插件配置选项。
  * @returns - vite插件对象。
  */
-export default function vitarx(_options?: VitePluginVitarxOptions): Plugin;
+export default function vitarx(options?: VitePluginVitarxOptions): Plugin;

package/dist/index.js

@@ -20,26 +20,24 @@ else {
  * - 支持 v-if、v-else-if、v-else 、v-model 等编译宏指令
  * - 支持 Switch , IfBlock 等编译宏组件
  * - 开发时 HMR 热更新相关代码注入与功能支持
+ * - 支持 className 转 class（仅原生 HTML 元素）
  *
- * @param _options - 暂无可选配置。
+ * @param options - 插件配置选项。
  * @returns - vite插件对象。
  */
-export default function vitarx(_options) {
+export default function vitarx(options) {
     let compileOptions;
     let isDEV = false;
     let isSSR = false;
     let viteConfig;
     return {
         name: 'vite-plugin-vitarx',
+        enforce: 'pre',
         config(config, env) {
             isDEV = env.command === 'serve' && !env.isPreview;
             const configSSR = !!config.build?.ssr;
             isSSR = env.isSsrBuild === true || configSSR;
-            const buildConfig = {
-                jsx: 'preserve',
-                exclude: /\.[jt]sx$/
-            };
-            const _config = {
+            return {
                 define: {
                     __VITARX_DEV__: JSON.stringify(isDEV),
                     __VITARX_SSR__: JSON.stringify(isSSR)
@@ -48,10 +46,11 @@ export default function vitarx(_options) {
                     alias: {
                         '@vitarx/vite-plugin/hmr-client': path.join(__dirname, 'hmr-client/index.js')
                     }
+                },
+                [IS_V8 ? 'oxc' : 'esbuild']: {
+                    jsx: 'preserve'
                 }
             };
-            _config[IS_V8 ? 'oxc' : 'esbuild'] = buildConfig;
-            return _config;
         },
         configResolved(config) {
             viteConfig = config;
@@ -60,7 +59,8 @@ export default function vitarx(_options) {
                 ssr: isSSR,
                 hmr: isDEV && !isSSR,
                 runtimeModule: 'vitarx',
-                sourceMap: false
+                sourceMap: false,
+                transformClassNameToClass: options?.transformClassNameToClass ?? false
             };
         },
         async transform(code, id) {

package/dist/passes/props/attribute.d.ts

@@ -19,12 +19,33 @@ export declare function processSpreadAttribute(attr: t.JSXSpreadAttribute, hasVB
     property: t.ObjectProperty;
     hasVBind: boolean;
 } | null;
+/**
+ * 获取属性值表达式
+ * 处理不同类型的属性值，统一返回表达式
+ * @param value - JSX 属性值
+ * @returns 表达式节点
+ */
+export declare function getAttributeValue(value: t.JSXAttribute['value']): t.Expression;
+/**
+ * 创建对象属性节点
+ * 静态值直接赋值，动态值生成 getter 方法
+ *
+ * 特殊处理：
+ * - children 属性不使用 unref，因为 ref 作为 children 是合法的可变渲染源
+ * - 其他标识符属性使用 unref 解包
+ *
+ * @param key - 属性名
+ * @param value - 属性值表达式
+ * @param ctx - 转换上下文
+ * @returns 对象属性或方法节点
+ */
+export declare function createProperty(key: string, value: t.Expression, ctx: TransformContext): t.ObjectProperty | t.ObjectMethod;
 /**
  * 处理单个 JSX 属性
  * 根据属性名类型分发到不同的处理逻辑
  * @param attr - JSX 属性节点
  * @param existingPropNames - 已存在的属性名集合
  * @param ctx - 转换上下文
- * @returns 属性处理结果
+ * @returns - 属性处理结果
  */
 export declare function processAttribute(attr: t.JSXAttribute, existingPropNames: Set<string>, ctx: TransformContext): AttributeResult;

package/dist/passes/props/attribute.js

@@ -27,48 +27,6 @@ export function processSpreadAttribute(attr, hasVBind, node) {
         hasVBind: true
     };
 }
-/**
- * 处理单个 JSX 属性
- * 根据属性名类型分发到不同的处理逻辑
- * @param attr - JSX 属性节点
- * @param existingPropNames - 已存在的属性名集合
- * @param ctx - 转换上下文
- * @returns 属性处理结果
- */
-export function processAttribute(attr, existingPropNames, ctx) {
-    const attrName = attr.name;
-    // 处理命名空间属性 (v:xxx)
-    if (attrName.type === 'JSXNamespacedName') {
-        return processNamespacedAttribute(attr, attrName, existingPropNames, ctx);
-    }
-    // 处理标识符属性
-    if (attrName.type === 'JSXIdentifier') {
-        const name = attrName.name;
-        // v-bind 指令
-        if (name === 'v-bind') {
-            const value = getAttributeValue(attr.value);
-            return { type: 'directive', name: 'v-bind', value, isVBind: true, isVModel: false };
-        }
-        // v-model 指令
-        if (name === 'v-model') {
-            const value = getAttributeValue(attr.value);
-            return { type: 'directive', name: 'v-model', value, isVBind: false, isVModel: true };
-        }
-        // 其他 v- 指令（排除 v-if 系列，它们在单独的处理流程中）
-        if (name.startsWith('v-') && !['v-if', 'v-else-if', 'v-else'].includes(name)) {
-            const value = getAttributeValue(attr.value);
-            return { type: 'directive', name, value, isVBind: false, isVModel: false };
-        }
-        // 普通属性
-        existingPropNames.add(name);
-        const value = getAttributeValue(attr.value);
-        const property = createProperty(name, value, ctx);
-        return { type: 'property', property };
-    }
-    // 未知属性类型，作为普通属性处理
-    const value = getAttributeValue(attr.value);
-    return { type: 'property', property: t.objectProperty(t.identifier('unknown'), value) };
-}
 /**
  * 处理命名空间属性
  *
@@ -109,18 +67,14 @@ function processNamespacedAttribute(attr, attrName, existingPropNames, ctx) {
  * @param value - JSX 属性值
  * @returns 表达式节点
  */
-function getAttributeValue(value) {
-    // 无值属性默认为 true
+export function getAttributeValue(value) {
     if (!value) {
         return t.booleanLiteral(true);
     }
-    // 字符串字面量直接返回
     if (isStringLiteral(value)) {
         return value;
     }
-    // JSX 表达式容器
     if (isJSXExpressionContainer(value)) {
-        // 空表达式 {} 视为 true
         if (value.expression.type === 'JSXEmptyExpression') {
             return t.booleanLiteral(true);
         }
@@ -141,7 +95,7 @@ function getAttributeValue(value) {
  * @param ctx - 转换上下文
  * @returns 对象属性或方法节点
  */
-function createProperty(key, value, ctx) {
+export function createProperty(key, value, ctx) {
     const keyNode = t.stringLiteral(key);
     if (isStringLiteral(value) || isNumericLiteral(value) || isBooleanLiteral(value)) {
         return t.objectProperty(keyNode, value);
@@ -159,3 +113,45 @@ function createProperty(key, value, ctx) {
     }
     return t.objectMethod('get', keyNode, [], t.blockStatement([t.returnStatement(value)]));
 }
+/**
+ * 处理单个 JSX 属性
+ * 根据属性名类型分发到不同的处理逻辑
+ * @param attr - JSX 属性节点
+ * @param existingPropNames - 已存在的属性名集合
+ * @param ctx - 转换上下文
+ * @returns - 属性处理结果
+ */
+export function processAttribute(attr, existingPropNames, ctx) {
+    const attrName = attr.name;
+    // 处理命名空间属性 (v:xxx)
+    if (attrName.type === 'JSXNamespacedName') {
+        return processNamespacedAttribute(attr, attrName, existingPropNames, ctx);
+    }
+    // 处理标识符属性
+    if (attrName.type === 'JSXIdentifier') {
+        const name = attrName.name;
+        // v-bind 指令
+        if (name === 'v-bind') {
+            const value = getAttributeValue(attr.value);
+            return { type: 'directive', name: 'v-bind', value, isVBind: true, isVModel: false };
+        }
+        // v-model 指令
+        if (name === 'v-model') {
+            const value = getAttributeValue(attr.value);
+            return { type: 'directive', name: 'v-model', value, isVBind: false, isVModel: true };
+        }
+        // 其他 v- 指令（排除 v-if 系列，它们在单独的处理流程中）
+        if (name.startsWith('v-') && !['v-if', 'v-else-if', 'v-else'].includes(name)) {
+            const value = getAttributeValue(attr.value);
+            return { type: 'directive', name, value, isVBind: false, isVModel: false };
+        }
+        // 普通属性
+        existingPropNames.add(name);
+        const value = getAttributeValue(attr.value);
+        const property = createProperty(name, value, ctx);
+        return { type: 'property', property };
+    }
+    // 未知属性类型，作为普通属性处理
+    const value = getAttributeValue(attr.value);
+    return { type: 'property', property: t.objectProperty(t.identifier('unknown'), value) };
+}

package/dist/passes/props/index.d.ts

@@ -6,7 +6,7 @@
 import * as t from '@babel/types';
 import { TransformContext } from '../../context.js';
 import type { PropsResult } from './types.js';
-export type { PropsResult, VModelState, AttributeResult } from './types.js';
+export type { AttributeResult, PropsResult, VModelState } from './types.js';
 /**
  * 处理 JSX 元素的属性
  * 将 JSX 属性转换为运行时 props 对象，并提取指令
@@ -17,6 +17,7 @@ export type { PropsResult, VModelState, AttributeResult } from './types.js';
  * 3. 普通属性转换为对象属性或 getter
  * 4. 指令属性提取到 directives Map
  * 5. v-model 特殊处理，生成 modelValue 和 onUpdate:modelValue
+ * 6. className 转 class（仅原生元素，启用 transformClassNameToClass 时）
  *
  * @param node - JSX 元素节点
  * @param ctx - 转换上下文

package/dist/passes/props/index.js

@@ -4,8 +4,39 @@
  * @module passes/props
  */
 import * as t from '@babel/types';
-import { processAttribute, processSpreadAttribute } from './attribute.js';
+import { createError } from '../../error.js';
+import { isNativeElement } from '../../utils/index.js';
+import { createProperty, getAttributeValue, processAttribute, processSpreadAttribute } from './attribute.js';
 import { createVModelProps, extractVModelState } from './vmodel.js';
+/**
+ * 获取 JSX 元素的名称
+ */
+function getJSXElementName(node) {
+    const nameNode = node.openingElement.name;
+    return nameNode.type === 'JSXIdentifier' ? nameNode.name : null;
+}
+/**
+ * 校验 class 和 className 不能同时存在
+ */
+function validateClassAndClassName(attributes) {
+    let hasClass = false;
+    let hasClassName = false;
+    let classNameAttr;
+    for (const attr of attributes) {
+        if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+            if (attr.name.name === 'class') {
+                hasClass = true;
+            }
+            else if (attr.name.name === 'className') {
+                hasClassName = true;
+                classNameAttr = attr;
+            }
+        }
+    }
+    if (hasClass && hasClassName) {
+        throw createError('E016', classNameAttr);
+    }
+}
 /**
  * 处理 JSX 元素的属性
  * 将 JSX 属性转换为运行时 props 对象，并提取指令
@@ -16,6 +47,7 @@ import { createVModelProps, extractVModelState } from './vmodel.js';
  * 3. 普通属性转换为对象属性或 getter
  * 4. 指令属性提取到 directives Map
  * 5. v-model 特殊处理，生成 modelValue 和 onUpdate:modelValue
+ * 6. className 转 class（仅原生元素，启用 transformClassNameToClass 时）
  *
  * @param node - JSX 元素节点
  * @param ctx - 转换上下文
@@ -45,6 +77,14 @@ export function processProps(node, ctx, hasChildren = false) {
     const existingPropNames = new Set();
     // 提取初始 v-model 状态
     let vModelState = extractVModelState(attributes);
+    // 获取元素名称，用于判断是否为原生元素
+    const elementName = getJSXElementName(node);
+    const isNative = elementName ? isNativeElement(elementName) : false;
+    // 检查是否启用 className 转 class 且为原生元素
+    const shouldTransformClassName = ctx.options.transformClassNameToClass && isNative;
+    // 如果启用 className 转 class，先检测 class 和 className 冲突
+    if (shouldTransformClassName)
+        validateClassAndClassName(attributes);
     // 遍历处理所有属性
     for (const attr of attributes) {
         // 处理展开属性 {...props}
@@ -62,6 +102,16 @@ export function processProps(node, ctx, hasChildren = false) {
             if (hasChildren && attr.name.type === 'JSXIdentifier' && attr.name.name === 'children') {
                 continue;
             }
+            // 如果启用 className 转 class，处理 className 属性
+            if (shouldTransformClassName &&
+                attr.name.type === 'JSXIdentifier' &&
+                attr.name.name === 'className') {
+                const value = getAttributeValue(attr.value);
+                const property = createProperty('class', value, ctx);
+                properties.push(property);
+                existingPropNames.add('class');
+                continue;
+            }
             const result = processAttribute(attr, existingPropNames, ctx);
             if (result.type === 'directive') {
                 // v-model 指令：更新状态

package/dist/transform.d.ts

@@ -8,6 +8,7 @@ export interface CompileOptions {
     ssr: boolean;
     runtimeModule: string;
     sourceMap: boolean | 'inline' | 'both';
+    transformClassNameToClass: boolean;
 }
 /**
  * 转换 JSX/TSX 代码

package/dist/transform.js

@@ -15,8 +15,6 @@ const processedNodes = new WeakSet();
  * 检查文件是否需要转换
  */
 function shouldTransform(id) {
-    if (id.includes('node_modules'))
-        return false;
     const ext = id.split('?')[0].split('.').pop()?.toLowerCase();
     return ext === 'jsx' || ext === 'tsx';
 }

package/dist/types.d.ts

@@ -32,6 +32,50 @@ export interface MatchProps {
     children: RenderUnit;
 }
 declare global {
+    namespace Vitarx {
+        interface IntrinsicAttributes {
+            /**
+             * 条件渲染指令 - v-if
+             *
+             * 用于条件性地渲染元素。
+             * 当表达式的值为真时，元素将被渲染；否则，元素不会被渲染到DOM中。
+             *
+             * ```tsx
+             * const show = ref(true)
+             * // v-if指令不支持 ref 自动解包，必须使用.value
+             * <div v-if={show.value}></div>
+             * ```
+             */
+            'v-if'?: unknown;
+            /**
+             * 条件渲染指令 - v-else
+             *
+             * 用于表示else块。
+             * 必须紧跟在v-if或v-else-if元素后面。
+             *
+             * ```tsx
+             * const show = ref(false)
+             * <div v-if={show.value}></div>
+             * <div v-else></div>
+             * ```
+             */
+            'v-else'?: unknown;
+            /**
+             * 条件渲染指令 - v-else-if
+             *
+             * 用于表示else-if块。
+             * 必须紧跟在v-if或v-else-if元素后面。
+             *
+             * ```tsx
+             * const show = ref(1)
+             * <div v-if={show.value === 0}></div>
+             * <div v-else-if={show.value === 1}></div>
+             * <div v-else></div>
+             * ```
+             */
+            'v-else-if'?: unknown;
+        }
+    }
     /**
      * IfBlock - 编译宏组件，无需import导入
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitarx/plugin-vite",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "The official plugin for Vitarx support in Vite.",
   "author": "ZhuChongLin <8210856@qq.com>",
   "license": "MIT",
@@ -52,7 +52,8 @@
     "node": "^25.7.0",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "vite": "^8.0.2"
   },
   "scripts": {
     "build": "rimraf dist && tsc",