@vitarx/plugin-vite 0.0.1-beta.8 → 1.0.0-beta.1

package/README.md

@@ -222,6 +222,30 @@ import.meta.hot.accept(mod => {
 2. **被导出** - 使用 `export` 导出
 3. **包含 JSX** - 函数体内包含 JSX 语法或返回编译宏组件
 
+### HMR 代码分离
+
+HMR 在检测到组件更新时，会将组件代码分离为 **UI 代码** 和 **逻辑代码** 两部分：
+
+- **UI 代码**：`createView`、`branch`、`expr`、`accessor`、`dynamic`、`withDirectives` 等调用
+- **逻辑代码**：其余所有代码
+
+仅逻辑代码变化时，组件完全重新挂载；仅 UI 代码变化时，仅重建视图树。
+
+### 开发模式位置信息
+
+开发模式下，`createView` 调用会注入位置信息参数（用于调试），`branch`、`expr`、`accessor` 不注入：
+
+```javascript
+// dev 模式
+createView("div", { children: "hello" }, { fileName: "App.tsx", lineNumber: 5, columnNumber: 10 })
+expr(() => a && b)  // 无位置信息
+branch(() => unref(show) ? 0 : 1)  // 无位置信息
+accessor(props, "value")  // 无位置信息
+
+// 生产模式
+createView("div", { children: "hello" })  // 无位置信息
+```
+
 ## 子元素处理
 
 ### 响应式子元素
@@ -230,19 +254,55 @@ import.meta.hot.accept(mod => {
 // 标识符保持原样
 <div>{value}</div>
 
-// 成员表达式使用 access
+// 成员表达式使用 accessor
 <div>{props.value}</div>
-// 编译为: access(props, 'value')
+// 编译为: accessor(props, 'value')
 
 // 条件表达式使用 branch
 <div>{show ? 'yes' : 'no'}</div>
 // 编译为: branch(() => unref(show) ? 0 : 1, [...])
 
-// 逻辑表达式使用 dynamic
+// 逻辑表达式使用 expr
 <div>{a && b}</div>
-// 编译为: dynamic(() => a && b)
+// 编译为: expr(() => a && b)
+
+// 二元表达式使用 expr
+<div>{count + 1}</div>
+// 编译为: expr(() => count + 1)
+
+// 函数调用使用 expr
+<div>{render()}</div>
+// 编译为: expr(() => render())
 ```
 
+### expr 与数组返回值
+
+`expr` 底层由 `DynamicView` 渲染。当 `expr` 中的表达式返回数组时（如 `arr.map()`），运行时会自动检测并原样返回数组（仅渲染一次，不跟踪响应式）。推荐使用 `For` 组件实现动态数组的响应式渲染。
+
+```jsx
+// arr.map() 返回数组，expr 运行时原样返回（仅渲染一次）
+<div>{items.map(item => <span>{item}</span>)}</div>
+// 编译为: expr(() => items.map(item => createView("span", { children: item })))
+
+// 推荐：使用 For 组件实现响应式数组渲染
+<div>
+  <For each={items} key="id">{item => <span>{item}</span>}</For>
+</div>
+```
+
+### 运行时 API 说明
+
+| API              | 用途      | 编译器注入     | HMR 识别为 UI 代码 |
+|------------------|---------|-----------|---------------|
+| `createView`     | 创建视图节点  | ✅         | ✅             |
+| `branch`         | 条件分支渲染  | ✅         | ✅             |
+| `expr`           | 动态表达式包装 | ✅         | ✅             |
+| `accessor`       | 属性访问追踪  | ✅         | ✅             |
+| `dynamic`        | 动态值包装   | ❌（用户手动使用） | ✅             |
+| `withDirectives` | 指令绑定    | ✅         | ✅             |
+
+> **注意：** `expr` 是编译器插桩注入的辅助函数，用于包装逻辑/二元/调用表达式；`dynamic` 是运行时独立 API，供用户手动使用。两者在 HMR 代码分离时均被视为 UI 描述代码。
+
 ## API 参考
 
 ### 插件选项

package/dist/constants/index.d.ts

@@ -2,21 +2,11 @@
  * Vitarx 运行时 API 名称
  * 这些 API 需要从 vitarx 包导入
  */
-export declare const VITARX_APIS: {
-    readonly CREATE_VIEW: "createView";
-    readonly FRAGMENT: "Fragment";
-    readonly BRANCH: "branch";
-    readonly DYNAMIC: "dynamic";
-    readonly ACCESS: "access";
-    readonly WITH_DIRECTIVES: "withDirectives";
-    readonly UNREF: "unref";
-    readonly IS_REF: "isRef";
-};
 /**
  * UI 相关的 API 名称列表
  * 这些 API 用于创建视图，在 HMR 时需要识别
  */
-export declare const UI_API_NAMES: readonly ["createView", "branch", "dynamic", "access", "withDirectives"];
+export declare const UI_API_NAMES: readonly ["createView", "branch", "dynamic", "expr", "accessor", "withDirectives"];
 /**
  * Ref 相关 API 名称
  * 用于识别 ref 变量

package/dist/constants/index.js

@@ -2,21 +2,11 @@
  * Vitarx 运行时 API 名称
  * 这些 API 需要从 vitarx 包导入
  */
-export const VITARX_APIS = {
-    CREATE_VIEW: 'createView',
-    FRAGMENT: 'Fragment',
-    BRANCH: 'branch',
-    DYNAMIC: 'dynamic',
-    ACCESS: 'access',
-    WITH_DIRECTIVES: 'withDirectives',
-    UNREF: 'unref',
-    IS_REF: 'isRef'
-};
 /**
  * UI 相关的 API 名称列表
  * 这些 API 用于创建视图，在 HMR 时需要识别
  */
-export const UI_API_NAMES = ['createView', 'branch', 'dynamic', 'access', 'withDirectives'];
+export const UI_API_NAMES = ['createView', 'branch', 'dynamic', 'expr', 'accessor', 'withDirectives'];
 /**
  * Ref 相关 API 名称
  * 用于识别 ref 变量

package/dist/context.d.ts

@@ -17,10 +17,10 @@ export interface ImportInfo {
     Fragment: boolean;
     /** branch - 条件分支函数 */
     branch: boolean;
-    /** dynamic - 动态值包装函数 */
-    dynamic: boolean;
-    /** access - 属性访问函数 */
-    access: boolean;
+    /** expr - 动态表达式包装函数 */
+    expr: boolean;
+    /** accessor - 属性访问函数 */
+    accessor: boolean;
     /** withDirectives - 指令包装函数 */
     withDirectives: boolean;
     /** unref - ref 解包函数 */
@@ -36,8 +36,8 @@ export interface VitarxImportAliases {
     createView: string | null;
     Fragment: string | null;
     branch: string | null;
-    dynamic: string | null;
-    access: string | null;
+    expr: string | null;
+    accessor: string | null;
     withDirectives: string | null;
     unref: string | null;
     isRef: string | null;
@@ -78,8 +78,6 @@ export interface TransformContext {
     refApiAliases: RefApiAliases;
     /** ref 变量名集合 */
     refVariables: Set<string>;
-    /** UI API 别名集合（用于 HMR 代码分离识别） */
-    uiApiAliases: Set<string>;
     /** builder 函数的本地别名（用于识别纯构建组件） */
     builderAlias: string | null;
     /** 已处理的 AST 节点追踪集合 */

package/dist/context.js

@@ -18,8 +18,8 @@ export function createContext(code, id, options, ast) {
             createView: false,
             Fragment: false,
             branch: false,
-            dynamic: false,
-            access: false,
+            expr: false,
+            accessor: false,
             withDirectives: false,
             unref: false,
             isRef: false
@@ -29,8 +29,8 @@ export function createContext(code, id, options, ast) {
             createView: null,
             Fragment: null,
             branch: null,
-            dynamic: null,
-            access: null,
+            expr: null,
+            accessor: null,
             withDirectives: null,
             unref: null,
             isRef: null
@@ -43,7 +43,6 @@ export function createContext(code, id, options, ast) {
             computed: null
         },
         refVariables: new Set(),
-        uiApiAliases: new Set(),
         builderAlias: null,
         processedNodes: new WeakSet(),
         pureCommentedNodes: new WeakSet(),

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

@@ -11,7 +11,7 @@ export interface ChangeCode {
  * 判断两个函数组件的代码差异
  *
  * 分析策略：
- * 1. 解析函数代码，提取所有 createView/branch/dynamic 等 UI API 调用
+ * 1. 解析函数代码，提取所有 createView/branch/expr 等 UI API 调用
  * 2. 将这些调用识别为 UI 描述代码
  * 3. 其余代码识别为非 UI 代码（逻辑代码）
  * 4. 分别比较 UI 代码和非 UI 代码是否变化

package/dist/hmr-client/utils.js

@@ -13,13 +13,16 @@ import { UI_API_NAMES } from '../constants/index.js';
 const UI_APIS = new Set([...UI_API_NAMES, 'jsxDEV', 'h']);
 /**
  * 判断标识符名称是否为 UI API
- * 支持原始名称和带后缀的名称（如 jsxDEV$1）
+ * 支持原始名称和带后缀的名称（如 jsxDEV$1、branch$2、expr$1）
  */
 function isUIApi(name) {
     if (UI_APIS.has(name))
         return true;
-    // 支持带数字后缀的 createView
-    return /^jsxDEV\$\d+$/.test(name) || /^createView\$\d+$/.test(name);
+    for (const api of UI_APIS) {
+        if (name.startsWith(api + '$'))
+            return true;
+    }
+    return false;
 }
 /**
  * 从函数代码中分离 UI 代码和非 UI 代码
@@ -100,7 +103,7 @@ function normalizeCode(code) {
  * 判断两个函数组件的代码差异
  *
  * 分析策略：
- * 1. 解析函数代码，提取所有 createView/branch/dynamic 等 UI API 调用
+ * 1. 解析函数代码，提取所有 createView/branch/expr 等 UI API 调用
  * 2. 将这些调用识别为 UI 描述代码
  * 3. 其余代码识别为非 UI 代码（逻辑代码）
  * 4. 分别比较 UI 代码和非 UI 代码是否变化

package/dist/index.js

@@ -32,10 +32,10 @@ export default function vitarx(options) {
     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;
+            isSSR = env.isSsrBuild === true;
             return {
                 define: {
                     __VITARX_DEV__: JSON.stringify(isDEV),
@@ -52,7 +52,11 @@ export default function vitarx(options) {
             };
         },
         configResolved(config) {
-            viteConfig = config;
+            // 根据最终的配置结果，确定是否是 SSR 模式
+            if (!isSSR) {
+                isSSR = !!config.build?.ssr;
+                config.define['__VITARX_SSR__'] = JSON.stringify(isSSR);
+            }
             compileOptions = {
                 dev: isDEV,
                 ssr: isSSR,

package/dist/passes/components/ifBlock.js

@@ -1,6 +1,6 @@
 import { isJSXElement } from '@babel/types';
 import { createError } from '../../error.js';
-import { collectVIfChainInfo, createArrowFunction, createBranch, filterWhitespaceChildren, getDevLocInfo, hasDirective, removeVIfChainDirectives, validateVIfChain } from '../../utils/index.js';
+import { collectVIfChainInfo, createArrowFunction, createBranch, filterWhitespaceChildren, hasDirective, removeVIfChainDirectives, validateVIfChain } from '../../utils/index.js';
 /**
  * 处理 IfBlock 组件
  */
@@ -15,9 +15,7 @@ export function processIfBlock(path, ctx) {
     const { nodes, conditions } = collectVIfChainInfo(jsxChildren);
     nodes.forEach(node => removeVIfChainDirectives(node));
     const branches = nodes.map(node => createArrowFunction(node));
-    // 获取位置信息（仅开发环境）
-    const locInfo = getDevLocInfo(ctx, path.node);
-    const branchCall = createBranch({ conditions, branches, locInfo }, ctx);
+    const branchCall = createBranch({ conditions, branches }, ctx);
     if (path.node.loc) {
         branchCall.loc = path.node.loc;
     }

package/dist/passes/components/switch.js

@@ -1,7 +1,7 @@
 import * as t from '@babel/types';
 import { isJSXElement, isJSXText } from '@babel/types';
 import { createError } from '../../error.js';
-import { createArrowFunction, createBranch, getDevLocInfo, getJSXAttributeByName, getJSXElementName } from '../../utils/index.js';
+import { createArrowFunction, createBranch, getJSXAttributeByName, getJSXElementName } from '../../utils/index.js';
 /**
  * 处理 Switch 组件
  * @param path - JSX 元素路径
@@ -20,11 +20,9 @@ export function processSwitch(path, ctx) {
         conditions.push(t.booleanLiteral(true));
         branches.push(createArrowFunction(fallbackValue));
     }
-    // 获取位置信息（仅开发环境）
-    const locInfo = getDevLocInfo(ctx, path.node);
     // 生成 branch 调用
     // Switch 的 when 条件如果是标识符，需要 unref
-    const branchCall = createBranch({ conditions, branches, locInfo }, ctx);
+    const branchCall = createBranch({ conditions, branches }, ctx);
     if (path.node.loc) {
         branchCall.loc = path.node.loc;
     }

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

@@ -2,5 +2,5 @@
  * 指令处理模块
  * @module passes/directives
  */
-export { processVIfChain } from './vIf.js';
+export { processVIfChain, transformChildrenVIfChains } from './vIf.js';
 export { processDirectives } from './processDirectives.js';

package/dist/passes/directives/index.js

@@ -2,5 +2,5 @@
  * 指令处理模块
  * @module passes/directives
  */
-export { processVIfChain } from './vIf.js';
+export { processVIfChain, transformChildrenVIfChains } from './vIf.js';
 export { processDirectives } from './processDirectives.js';

package/dist/passes/directives/vIf.d.ts

@@ -1,20 +1,27 @@
 /**
  * v-if 链处理器
- * 处理 Fragment 中的 v-if/v-else-if/v-else 链
+ * 处理 Fragment/Element 中的 v-if/v-else-if/v-else 链
  * @module passes/directives/vIf
  */
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
 import { TransformContext } from '../../context.js';
+type TransformJSXElementFn = (node: t.JSXElement, ctx: TransformContext, handleVIf: boolean) => t.Expression | null;
+type JSXContainerPath = NodePath<t.JSXFragment | t.JSXElement>;
 /**
- * JSX 元素转换函数类型
+ * 处理子元素数组中的 v-if 链
+ * 收集并转换 v-if/v-else-if/v-else 链为 branch 调用
+ * @param children - 子元素数组（会被原地修改）
+ * @param ctx - 转换上下文
+ * @param transformJSXElement - JSX 元素转换函数
+ * @returns 处理后的子元素数组（链节点已替换为 branch 调用，nullLiteral 已移除）
  */
-type TransformJSXElementFn = (node: t.JSXElement, ctx: TransformContext, handleVIf: boolean) => t.Expression | null;
+export declare function transformChildrenVIfChains(children: t.Node[], ctx: TransformContext, transformJSXElement: TransformJSXElementFn): t.Node[];
 /**
- * 处理 Fragment 中的 v-if 链
- * @param path - JSX Fragment 路径
+ * 处理 Fragment/Element 中的 v-if 链
+ * @param path - JSX Fragment 或 Element 路径
  * @param ctx - 转换上下文
  * @param transformJSXElement - JSX 元素转换函数
  */
-export declare function processVIfChain(path: NodePath<t.JSXFragment>, ctx: TransformContext, transformJSXElement: TransformJSXElementFn): void;
+export declare function processVIfChain(path: JSXContainerPath, ctx: TransformContext, transformJSXElement: TransformJSXElementFn): void;
 export {};

package/dist/passes/directives/vIf.js

@@ -1,30 +1,45 @@
 import * as t from '@babel/types';
 import { isJSXElement, isJSXText } from '@babel/types';
-import { collectFragmentVIfChains, createArrowFunction, createBranch, getDevLocInfo, isWhitespaceJSXText, removeVIfChainDirectives } from '../../utils/index.js';
+import { collectFragmentVIfChains, createArrowFunction, createBranch, isWhitespaceJSXText, removeVIfChainDirectives } from '../../utils/index.js';
 /**
- * 处理 Fragment 中的 v-if 链
- * @param path - JSX Fragment 路径
+ * 处理子元素数组中的 v-if 链
+ * 收集并转换 v-if/v-else-if/v-else 链为 branch 调用
+ * @param children - 子元素数组（会被原地修改）
  * @param ctx - 转换上下文
  * @param transformJSXElement - JSX 元素转换函数
+ * @returns 处理后的子元素数组（链节点已替换为 branch 调用，nullLiteral 已移除）
  */
-export function processVIfChain(path, ctx, transformJSXElement) {
-    const children = path.node.children;
+export function transformChildrenVIfChains(children, ctx, transformJSXElement) {
     const chains = collectFragmentVIfChains(children);
     if (chains.length === 0)
-        return;
-    // 从后向前处理链，避免索引偏移问题
+        return children;
     for (let c = chains.length - 1; c >= 0; c--) {
         processVIfChainItem(chains[c], children, ctx, transformJSXElement);
     }
-    // 清理已处理的节点
-    cleanupProcessedChildren(path, children);
+    return children.filter(child => {
+        if (t.isNullLiteral(child))
+            return false;
+        return !(isJSXText(child) && isWhitespaceJSXText(child));
+    });
+}
+/**
+ * 处理 Fragment/Element 中的 v-if 链
+ * @param path - JSX Fragment 或 Element 路径
+ * @param ctx - 转换上下文
+ * @param transformJSXElement - JSX 元素转换函数
+ */
+export function processVIfChain(path, ctx, transformJSXElement) {
+    const children = path.node.children;
+    const processed = transformChildrenVIfChains(children, ctx, transformJSXElement);
+    if (processed !== children) {
+        path.node.children = processed;
+    }
 }
 /**
  * 处理单个 v-if 链
  */
 function processVIfChainItem(chain, children, ctx, transformJSXElement) {
     const { nodes, conditions, endIndex } = chain;
-    // 计算链在 children 中的起始位置
     let start = -1;
     for (let i = 0; i < children.length; i++) {
         const child = children[i];
@@ -33,7 +48,6 @@ function processVIfChainItem(chain, children, ctx, transformJSXElement) {
             break;
         }
     }
-    // 移除指令并转换节点
     const branches = [];
     for (const node of nodes) {
         removeVIfChainDirectives(node);
@@ -42,12 +56,7 @@ function processVIfChainItem(chain, children, ctx, transformJSXElement) {
             branches.push(createArrowFunction(transformedNode));
         }
     }
-    // 获取第一个节点的位置信息（仅开发环境）
-    const firstNode = nodes[0];
-    const locInfo = getDevLocInfo(ctx, firstNode);
-    // 生成 branch 调用
-    const branchCall = createBranch({ conditions, branches, locInfo }, ctx);
-    // 替换链的第一个节点，其他节点标记为 null
+    const branchCall = createBranch({ conditions, branches }, ctx);
     if (start >= 0) {
         children[start] = branchCall;
         for (let k = start + 1; k <= endIndex; k++) {
@@ -55,13 +64,3 @@ function processVIfChainItem(chain, children, ctx, transformJSXElement) {
         }
     }
 }
-/**
- * 清理已处理的子节点
- */
-function cleanupProcessedChildren(path, children) {
-    path.node.children = children.filter(child => {
-        if (t.isNullLiteral(child))
-            return false;
-        return !(isJSXText(child) && isWhitespaceJSXText(child));
-    });
-}

package/dist/passes/hmr/inject-state.js

@@ -15,7 +15,7 @@ import { GET_COMPONENT_VIEW_ALIAS } from './inject-imports.js';
 export function createHMRRegistrationStatements(variableNames) {
     const statements = [];
     statements.push(t.variableDeclaration('const', [
-        t.variableDeclarator(t.identifier(HMR.view), t.callExpression(t.identifier(GET_COMPONENT_VIEW_ALIAS), []))
+        t.variableDeclarator(t.identifier(HMR.view), t.callExpression(t.identifier(GET_COMPONENT_VIEW_ALIAS), [t.booleanLiteral(true)]))
     ]));
     statements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier(HMR.manager), t.identifier('instance')), t.identifier('register')), [t.identifier(HMR.view)])));
     const stateProperties = variableNames.map(name => t.objectMethod('get', t.identifier(name), [], t.blockStatement([t.returnStatement(t.identifier(name))])));
@@ -35,7 +35,7 @@ export function createHMRRegistrationStatements(variableNames) {
 export function createWrappedComponentHMRStatements(componentName) {
     const statements = [];
     statements.push(t.variableDeclaration('const', [
-        t.variableDeclarator(t.identifier(HMR.view), t.callExpression(t.identifier(GET_COMPONENT_VIEW_ALIAS), []))
+        t.variableDeclarator(t.identifier(HMR.view), t.callExpression(t.identifier(GET_COMPONENT_VIEW_ALIAS), [t.booleanLiteral(true)]))
     ]));
     statements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier(HMR.manager), t.identifier('instance')), t.identifier('register')), [t.identifier(HMR.view), t.identifier(componentName)])));
     return statements;

package/dist/passes/imports/injectImports.js

@@ -13,8 +13,8 @@ const API_IMPORT_CONFIG = [
     { name: 'createView', importKey: 'createView' },
     { name: 'Fragment', importKey: 'Fragment' },
     { name: 'branch', importKey: 'branch' },
-    { name: 'dynamic', importKey: 'dynamic' },
-    { name: 'access', importKey: 'access' },
+    { name: 'expr', importKey: 'expr' },
+    { name: 'accessor', importKey: 'accessor' },
     { name: 'withDirectives', importKey: 'withDirectives' },
     { name: 'unref', importKey: 'unref' },
     { name: 'isRef', importKey: 'isRef' }

package/dist/passes/jsx/processChildren.js

@@ -4,25 +4,28 @@
  * @module passes/jsx/processChildren
  */
 import * as t from '@babel/types';
-import { isBooleanLiteral, isConditionalExpression, isIdentifier, isJSXElement, isJSXExpressionContainer, isJSXFragment, isJSXText, isLogicalExpression, isMemberExpression, isNumericLiteral, isStringLiteral } from '@babel/types';
+import { isBinaryExpression, isConditionalExpression, isIdentifier, isJSXElement, isJSXExpressionContainer, isJSXFragment, isJSXText, isLogicalExpression, isMemberExpression } from '@babel/types';
 import { markImport } from '../../context.js';
-import { addPureComment, createAccessCall, createBinaryBranch, createDynamicCall, getAlias, getDevLocInfo } from '../../utils/index.js';
+import { addPureComment, createAccessorCall, createBinaryBranch, createExprCall, getAlias } from '../../utils/index.js';
 /**
- * 处理成员表达式
+ * 处理成员表达式，生成 accessor 调用
  */
 function handleMemberExpression(expr, ctx) {
-    markImport(ctx, 'access');
-    const accessAlias = getAlias(ctx.vitarxAliases, 'access');
-    return createAccessCall(expr.object, expr.property, accessAlias);
+    markImport(ctx, 'accessor');
+    const accessorAlias = getAlias(ctx.vitarxAliases, 'accessor');
+    return createAccessorCall(expr.object, expr.property, accessorAlias);
 }
 /**
- * 处理逻辑表达式
+ * 使用 expr 包装表达式
+ * 用于逻辑表达式、二元表达式和调用表达式的统一包装
+ * 运行时根据返回值类型决定是否跟踪响应式：
+ * - 数组返回值：原样返回（仅渲染一次）
+ * - 其他返回值：创建 DynamicView 追踪
  */
-function handleLogicalExpression(expr, ctx, loc) {
-    markImport(ctx, 'dynamic');
-    const dynamicAlias = getAlias(ctx.vitarxAliases, 'dynamic');
-    const locInfo = loc ? getDevLocInfo(ctx, { loc }) : null;
-    return addPureComment(createDynamicCall(expr, dynamicAlias, locInfo), ctx);
+function wrapWithExpr(expr, ctx) {
+    markImport(ctx, 'expr');
+    const exprAlias = getAlias(ctx.vitarxAliases, 'expr');
+    return addPureComment(createExprCall(expr, exprAlias), ctx);
 }
 /**
  * 处理子节点数组
@@ -42,59 +45,40 @@ export function processChildren(children, ctx) {
 }
 /**
  * 处理单个子节点
+ * JSX 容器节点在此拆包后委托给 processChildExpression 处理
+ * 已转换的 API 调用（createView/branch 等 CallExpression）直接透传
  */
 function processChildNode(node, ctx) {
-    // JSX 文本
     if (isJSXText(node)) {
         const trimmed = node.value.trim();
         if (!trimmed)
             return null;
         return t.stringLiteral(trimmed);
     }
-    // JSX 表达式容器
     if (isJSXExpressionContainer(node)) {
         if (node.expression.type === 'JSXEmptyExpression')
             return null;
-        return processChildExpression(node.expression, ctx, node.loc);
+        return processChildExpression(node.expression, ctx);
     }
-    // JSX 展开子元素
     if (node.type === 'JSXSpreadChild') {
-        return processChildExpression(node.expression, ctx, node.loc);
+        return processChildExpression(node.expression, ctx);
     }
-    // JSX 元素或片段
     if (isJSXElement(node) || isJSXFragment(node)) {
         return node;
     }
-    // 字面量
-    if (isStringLiteral(node) || isNumericLiteral(node) || isBooleanLiteral(node)) {
-        return node;
-    }
-    // 标识符
-    if (isIdentifier(node)) {
-        return node;
-    }
-    // 成员表达式
-    if (isMemberExpression(node)) {
-        return handleMemberExpression(node, ctx);
-    }
-    // 条件表达式
-    if (isConditionalExpression(node)) {
-        return processConditionalExpression(node, ctx);
-    }
-    // 逻辑表达式
-    if (isLogicalExpression(node)) {
-        return handleLogicalExpression(node, ctx);
-    }
-    // 调用表达式
+    // 已转换的 API 调用（createView/branch 等）直接透传，不包装 expr
     if (node.type === 'CallExpression') {
         return node;
     }
-    return node;
+    // 其他表达式类型委托给 processChildExpression
+    return processChildExpression(node, ctx);
 }
 /**
- * 处理子表达式
+ * 处理子表达式（来自 JSX 表达式容器或条件分支）
+ * 根据表达式类型生成对应的运行时 API 调用
+ * CallExpression 在此用 expr 包装（用户函数调用需要响应式追踪）
  */
-function processChildExpression(expr, ctx, loc) {
+function processChildExpression(expr, ctx) {
     if (isIdentifier(expr)) {
         return expr;
     }
@@ -104,22 +88,17 @@ function processChildExpression(expr, ctx, loc) {
     if (isConditionalExpression(expr)) {
         return processConditionalExpression(expr, ctx);
     }
-    if (isLogicalExpression(expr)) {
-        return handleLogicalExpression(expr, ctx, loc);
+    if (isLogicalExpression(expr) || isBinaryExpression(expr) || expr.type === 'CallExpression') {
+        return wrapWithExpr(expr, ctx);
     }
     return expr;
 }
 /**
- * 处理条件表达式
- * 转换为 branch 调用
+ * 处理条件表达式，转换为 branch 调用
  */
 function processConditionalExpression(node, ctx) {
     const { test, consequent, alternate } = node;
-    // 处理分支
     const processedConsequent = processChildNode(consequent, ctx) || t.nullLiteral();
     const processedAlternate = processChildNode(alternate, ctx) || t.nullLiteral();
-    // 获取位置信息（仅开发环境）
-    const locInfo = getDevLocInfo(ctx, node);
-    // 使用公共的 createBinaryBranch
-    return createBinaryBranch(test, processedConsequent, processedAlternate, ctx, locInfo);
+    return createBinaryBranch(test, processedConsequent, processedAlternate, ctx);
 }

package/dist/passes/jsx/processJSXElement.js

@@ -2,8 +2,8 @@ import * as t from '@babel/types';
 import { isJSXElement } from '@babel/types';
 import { addWarning, markImport } from '../../context.js';
 import { createError, createWarning } from '../../error.js';
-import { addPureComment, createArrowFunction, createBranch, createCreateViewCall, getAlias, getDevLocInfo, getDirectiveValue, getJSXAttributeByName, getJSXElementName, hasEffectiveChildren, filterEffectiveChildren, isNativeElement, isVElse, isVIf, isVIfChain, removeVIfChainDirectives } from '../../utils/index.js';
-import { processDirectives } from '../directives/index.js';
+import { addPureComment, createArrowFunction, createBranch, createCreateViewCall, filterEffectiveChildren, getAlias, getDevLocInfo, getDirectiveValue, getJSXAttributeByName, getJSXElementName, hasEffectiveChildren, isNativeElement, isVElse, isVIf, isVIfChain, removeVIfChainDirectives } from '../../utils/index.js';
+import { processDirectives, transformChildrenVIfChains } from '../directives/index.js';
 import { processProps } from '../props/index.js';
 import { processChildren } from './processChildren.js';
 /**
@@ -123,8 +123,10 @@ function processElementChildren(node, props, ctx) {
             }
         }
     }
+    // 处理子元素中的 v-if 链（确保嵌套链在 transformJSXElement 递归调用时被正确处理）
+    const chainProcessed = transformChildrenVIfChains(children, ctx, transformJSXElement);
     // 处理子元素
-    const processedChildren = processChildren(children, ctx);
+    const processedChildren = processChildren(chainProcessed, ctx);
     const childrenValue = processedChildren.length === 1 ? processedChildren[0] : t.arrayExpression(processedChildren);
     // 添加 children 属性
     if (props) {
@@ -146,10 +148,7 @@ function transformSingleVIf(node, ctx) {
     const transformedNode = transformJSXElement(node, ctx, false);
     if (!transformedNode)
         return null;
-    // 获取位置信息（仅开发环境）
-    const locInfo = getDevLocInfo(ctx, node);
-    // 生成 branch 调用
-    const branchCall = createBranch({ conditions: [condition], branches: [createArrowFunction(transformedNode)], locInfo }, ctx);
+    const branchCall = createBranch({ conditions: [condition], branches: [createArrowFunction(transformedNode)] }, ctx);
     if (node.loc) {
         branchCall.loc = node.loc;
     }

package/dist/transform.js

@@ -40,8 +40,8 @@ function setupAliases(ctx, program) {
         'createView',
         'Fragment',
         'branch',
-        'dynamic',
-        'access',
+        'expr',
+        'accessor',
         'withDirectives',
         'unref',
         'isRef'
@@ -84,6 +84,9 @@ function transformAST(ast, ctx) {
                     ctx.processedNodes.add(path.node);
                     processPureCompileComponent(path, ctx);
                 }
+                else {
+                    processVIfChain(path, ctx, transformJSXElement);
+                }
             },
             exit(path) {
                 if (ctx.processedNodes.has(path.node))

package/dist/utils/ast-builders.d.ts

@@ -3,7 +3,8 @@
  * @module utils/ast-builders
  */
 import * as t from '@babel/types';
-import { type ArrowFunctionExpression, type CallExpression, type Expression, type ObjectExpression, type SourceLocation } from '@babel/types';
+import { type ArrowFunctionExpression, type CallExpression, type Expression, type ObjectExpression } from '@babel/types';
+import type { SourceLocation } from 'acorn';
 import type { TransformContext, VitarxImportAliases } from '../context.js';
 /**
  * 创建 unref 调用
@@ -13,30 +14,28 @@ import type { TransformContext, VitarxImportAliases } from '../context.js';
  */
 export declare function createUnrefCall(argument: Expression, alias?: string): CallExpression;
 /**
- * 创建 access 调用
+ * 创建 accessor 调用
  * @param object - 对象表达式
  * @param key - 键表达式
- * @param alias - access 别名
+ * @param alias - accessor 别名
  * @returns CallExpression
  */
-export declare function createAccessCall(object: Expression, key: Expression, alias?: string): CallExpression;
+export declare function createAccessorCall(object: Expression, key: Expression, alias?: string): CallExpression;
 /**
- * 创建 dynamic 调用
+ * 创建 expr 调用
  * @param argument - 参数表达式
- * @param alias - dynamic 别名
- * @param locInfo - 位置信息对象
+ * @param alias - expr 别名
  * @returns CallExpression
  */
-export declare function createDynamicCall(argument: Expression, alias?: string, locInfo?: ObjectExpression | null): CallExpression;
+export declare function createExprCall(argument: Expression, alias?: string): CallExpression;
 /**
  * 创建 branch 调用
  * @param condition - 条件函数
  * @param branches - 分支函数数组
  * @param alias - branch 别名
- * @param locInfo - 位置信息对象
  * @returns CallExpression
  */
-export declare function createBranchCall(condition: ArrowFunctionExpression, branches: ArrowFunctionExpression[], alias?: string, locInfo?: ObjectExpression | null): CallExpression;
+export declare function createBranchCall(condition: ArrowFunctionExpression, branches: ArrowFunctionExpression[], alias?: string): CallExpression;
 /**
  * 创建 createView 调用
  * @param type - 元素类型
@@ -60,13 +59,6 @@ export declare function createWithDirectivesCall(view: Expression, directives: A
  * @returns ArrowFunctionExpression
  */
 export declare function createArrowFunction(body: Expression): ArrowFunctionExpression;
-/**
- * 创建位置信息对象
- * @param filename - 文件名
- * @param loc - 源码位置
- * @returns ObjectExpression
- */
-export declare function createLocationObject(filename: string, loc: SourceLocation): ObjectExpression;
 /**
  * 为调用表达式添加 @__PURE__ 注释
  * @param node - 调用表达式节点
@@ -81,6 +73,13 @@ export declare function addPureComment<T extends CallExpression>(node: T, ctx: T
  * @returns 别名或原名
  */
 export declare function getAlias(aliases: VitarxImportAliases, name: keyof VitarxImportAliases): string;
+/**
+ * 创建位置信息对象
+ * @param filename - 文件名
+ * @param loc - 源码位置
+ * @returns ObjectExpression
+ */
+export declare function createLocationObject(filename: string, loc: SourceLocation): ObjectExpression;
 /**
  * 获取开发环境下的位置信息对象
  * 仅在开发环境下返回位置信息，生产环境返回 null

package/dist/utils/ast-builders.js

@@ -15,13 +15,13 @@ export function createUnrefCall(argument, alias) {
     return t.callExpression(t.identifier(alias || 'unref'), [argument]);
 }
 /**
- * 创建 access 调用
+ * 创建 accessor 调用
  * @param object - 对象表达式
  * @param key - 键表达式
- * @param alias - access 别名
+ * @param alias - accessor 别名
  * @returns CallExpression
  */
-export function createAccessCall(object, key, alias) {
+export function createAccessorCall(object, key, alias) {
     let keyArg;
     if (isIdentifier(key)) {
         keyArg = t.stringLiteral(key.name);
@@ -32,36 +32,26 @@ export function createAccessCall(object, key, alias) {
     else {
         keyArg = key;
     }
-    return t.callExpression(t.identifier(alias || 'access'), [object, keyArg]);
+    return t.callExpression(t.identifier(alias || 'accessor'), [object, keyArg]);
 }
 /**
- * 创建 dynamic 调用
+ * 创建 expr 调用
  * @param argument - 参数表达式
- * @param alias - dynamic 别名
- * @param locInfo - 位置信息对象
+ * @param alias - expr 别名
  * @returns CallExpression
  */
-export function createDynamicCall(argument, alias, locInfo) {
-    const args = [t.arrowFunctionExpression([], argument)];
-    if (locInfo) {
-        args.push(locInfo);
-    }
-    return t.callExpression(t.identifier(alias || 'dynamic'), args);
+export function createExprCall(argument, alias) {
+    return t.callExpression(t.identifier(alias || 'expr'), [t.arrowFunctionExpression([], argument)]);
 }
 /**
  * 创建 branch 调用
  * @param condition - 条件函数
  * @param branches - 分支函数数组
  * @param alias - branch 别名
- * @param locInfo - 位置信息对象
  * @returns CallExpression
  */
-export function createBranchCall(condition, branches, alias, locInfo) {
-    const args = [condition, t.arrayExpression(branches)];
-    if (locInfo) {
-        args.push(locInfo);
-    }
-    return t.callExpression(t.identifier(alias || 'branch'), args);
+export function createBranchCall(condition, branches, alias) {
+    return t.callExpression(t.identifier(alias || 'branch'), [condition, t.arrayExpression(branches)]);
 }
 /**
  * 创建 createView 调用
@@ -73,15 +63,12 @@ export function createBranchCall(condition, branches, alias, locInfo) {
  */
 export function createCreateViewCall(type, props, locInfo, alias) {
     const args = [type];
-    // props 参数
     if (props) {
         args.push(props);
     }
     else if (locInfo) {
-        // 如果有 locInfo 但没有 props，需要传 null
         args.push(t.nullLiteral());
     }
-    // locInfo 参数
     if (locInfo) {
         args.push(locInfo);
     }
@@ -111,19 +98,6 @@ export function createWithDirectivesCall(view, directives, alias) {
 export function createArrowFunction(body) {
     return t.arrowFunctionExpression([], body);
 }
-/**
- * 创建位置信息对象
- * @param filename - 文件名
- * @param loc - 源码位置
- * @returns ObjectExpression
- */
-export function createLocationObject(filename, loc) {
-    return t.objectExpression([
-        t.objectProperty(t.identifier('fileName'), t.stringLiteral(filename)),
-        t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(loc.start.line)),
-        t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(loc.start.column + 1))
-    ]);
-}
 /**
  * 为调用表达式添加 @__PURE__ 注释
  * @param node - 调用表达式节点
@@ -147,6 +121,19 @@ export function addPureComment(node, ctx) {
 export function getAlias(aliases, name) {
     return aliases[name] || name;
 }
+/**
+ * 创建位置信息对象
+ * @param filename - 文件名
+ * @param loc - 源码位置
+ * @returns ObjectExpression
+ */
+export function createLocationObject(filename, loc) {
+    return t.objectExpression([
+        t.objectProperty(t.identifier('fileName'), t.stringLiteral(filename)),
+        t.objectProperty(t.identifier('lineNumber'), t.numericLiteral(loc.start.line)),
+        t.objectProperty(t.identifier('columnNumber'), t.numericLiteral(loc.start.column + 1))
+    ]);
+}
 /**
  * 获取开发环境下的位置信息对象
  * 仅在开发环境下返回位置信息，生产环境返回 null

package/dist/utils/branch-factory.d.ts

@@ -15,8 +15,6 @@ export interface BranchConfig {
     branches: t.ArrowFunctionExpression[];
     /** 是否使用 unref 包装标识符条件 */
     useRef?: boolean;
-    /** 位置信息对象 */
-    locInfo?: t.ObjectExpression | null;
 }
 /**
  * 创建 branch 调用
@@ -36,7 +34,6 @@ export declare function buildNestedCondition(conditions: t.Expression[], ctx: Tr
  * @param consequent - 真值分支
  * @param alternate - 假值分支
  * @param ctx - 转换上下文
- * @param locInfo - 位置信息对象
  * @returns branch 调用表达式
  */
-export declare function createBinaryBranch(condition: t.Expression, consequent: t.Expression, alternate: t.Expression, ctx: TransformContext, locInfo?: t.ObjectExpression | null): t.CallExpression;
+export declare function createBinaryBranch(condition: t.Expression, consequent: t.Expression, alternate: t.Expression, ctx: TransformContext): t.CallExpression;

package/dist/utils/branch-factory.js

@@ -14,15 +14,14 @@ import { addPureComment, createArrowFunction, createBranchCall, createUnrefCall,
  * @returns branch 调用表达式
  */
 export function createBranch(config, ctx) {
-    const { conditions, branches, useRef = true, locInfo } = config;
+    const { conditions, branches, useRef = true } = config;
     markImport(ctx, 'branch');
-    // 只有在需要 unref 且条件中有标识符时才标记导入
     if (useRef && conditions.some(c => isIdentifier(c))) {
         markImport(ctx, 'unref');
     }
     const conditionExpr = buildNestedCondition(conditions, ctx, useRef);
     const branchAlias = getAlias(ctx.vitarxAliases, 'branch');
-    return addPureComment(createBranchCall(createArrowFunction(conditionExpr), branches, branchAlias, locInfo), ctx);
+    return addPureComment(createBranchCall(createArrowFunction(conditionExpr), branches, branchAlias), ctx);
 }
 /**
  * 判断表达式是否需要括号包裹
@@ -85,13 +84,11 @@ export function buildNestedCondition(conditions, ctx, useRef = true) {
  * @param consequent - 真值分支
  * @param alternate - 假值分支
  * @param ctx - 转换上下文
- * @param locInfo - 位置信息对象
  * @returns branch 调用表达式
  */
-export function createBinaryBranch(condition, consequent, alternate, ctx, locInfo) {
+export function createBinaryBranch(condition, consequent, alternate, ctx) {
     const conditions = [condition, t.booleanLiteral(true)];
     const branches = [createArrowFunction(consequent), createArrowFunction(alternate)];
-    // 只有条件是 Identifier 时才需要 unref
     const useRef = isIdentifier(condition);
-    return createBranch({ conditions, branches, useRef, locInfo }, ctx);
+    return createBranch({ conditions, branches, useRef }, ctx);
 }

package/dist/utils/index.d.ts

@@ -1,6 +1,6 @@
 export { isWhitespaceJSXText } from './ast-guards.js';
 export { getJSXElementName, isPureCompileComponent, isComponent, isNativeElement, getJSXAttributeByName, hasDirective, getDirectiveValue, isVIfChain, isVIf, isVElseIf, isVElse, removeVDirectives, removeVIfChainDirectives, removeAttribute, filterWhitespaceChildren, hasEffectiveChildren, filterEffectiveChildren, validateNoDirectMatchChild } from './jsx-helpers.js';
-export { createUnrefCall, createAccessCall, createDynamicCall, createBranchCall, createCreateViewCall, createWithDirectivesCall, createArrowFunction, createLocationObject, addPureComment, getAlias, getDevLocInfo } from './ast-builders.js';
+export { createUnrefCall, createAccessorCall, createExprCall, createBranchCall, createCreateViewCall, createWithDirectivesCall, createArrowFunction, createLocationObject, addPureComment, getAlias, getDevLocInfo } from './ast-builders.js';
 export { collectPatternBindings, collectObjectPatternBindings } from './pattern-helpers.js';
 export { createBranch, createBinaryBranch, buildNestedCondition, type BranchConfig } from './branch-factory.js';
 export { validateVIfChain, collectVIfChainInfo, collectFragmentVIfChains, type VIfChainInfo } from './vif-helpers.js';

package/dist/utils/index.js

@@ -3,7 +3,7 @@ export { isWhitespaceJSXText } from './ast-guards.js';
 // JSX 辅助函数
 export { getJSXElementName, isPureCompileComponent, isComponent, isNativeElement, getJSXAttributeByName, hasDirective, getDirectiveValue, isVIfChain, isVIf, isVElseIf, isVElse, removeVDirectives, removeVIfChainDirectives, removeAttribute, filterWhitespaceChildren, hasEffectiveChildren, filterEffectiveChildren, validateNoDirectMatchChild } from './jsx-helpers.js';
 // AST 构建函数
-export { createUnrefCall, createAccessCall, createDynamicCall, createBranchCall, createCreateViewCall, createWithDirectivesCall, createArrowFunction, createLocationObject, addPureComment, getAlias, getDevLocInfo } from './ast-builders.js';
+export { createUnrefCall, createAccessorCall, createExprCall, createBranchCall, createCreateViewCall, createWithDirectivesCall, createArrowFunction, createLocationObject, addPureComment, getAlias, getDevLocInfo } from './ast-builders.js';
 // 模式处理辅助函数
 export { collectPatternBindings, collectObjectPatternBindings } from './pattern-helpers.js';
 // Branch 工厂

package/dist/utils/jsx-helpers.d.ts

@@ -26,10 +26,13 @@ export declare function isNativeElement(name: string): boolean;
 export declare function getJSXAttributeByName(node: JSXElement, name: string): JSXAttribute | undefined;
 /**
  * 检查元素是否具有指定指令
+ * v-if/v-else-if/v-else 仅支持 JSXIdentifier 格式（v-if），不支持命名空间格式（v:if）
+ * 其他指令（如 v-show）支持 v-xxx:arg 命名空间格式
  */
 export declare function hasDirective(node: JSXElement, directiveName: string): boolean;
 /**
  * 获取指令的值
+ * v-if/v-else-if/v-else 仅支持 JSXIdentifier 格式（v-if），不支持命名空间格式（v:if）
  */
 export declare function getDirectiveValue(node: JSXElement, directiveName: string): Expression | null;
 /**
@@ -54,6 +57,7 @@ export declare function isVElse(node: JSXElement): boolean;
 export declare function removeVDirectives(node: JSXElement): void;
 /**
  * 移除元素上的 v-if 链指令（v-if、v-else-if、v-else）
+ * 仅处理 JSXIdentifier 格式，不支持命名空间格式（v:if）
  */
 export declare function removeVIfChainDirectives(node: JSXElement): void;
 /**

package/dist/utils/jsx-helpers.js

@@ -5,8 +5,8 @@
 import * as t from '@babel/types';
 import { isJSXElement, isJSXText } from '@babel/types';
 import { DIRECTIVE_PREFIX, PURE_COMPILE_COMPONENTS } from '../constants/index.js';
-import { isWhitespaceJSXText } from './ast-guards.js';
 import { createError } from '../error.js';
+import { isWhitespaceJSXText } from './ast-guards.js';
 /**
  * 获取 JSX 元素的名称
  */
@@ -45,14 +45,19 @@ export function getJSXAttributeByName(node, name) {
     }
     return undefined;
 }
+const V_IF_CHAIN_DIRECTIVES = new Set(['v-if', 'v-else-if', 'v-else']);
 /**
  * 检查元素是否具有指定指令
+ * v-if/v-else-if/v-else 仅支持 JSXIdentifier 格式（v-if），不支持命名空间格式（v:if）
+ * 其他指令（如 v-show）支持 v-xxx:arg 命名空间格式
  */
 export function hasDirective(node, directiveName) {
     for (const attr of node.openingElement.attributes) {
         if (attr.type === 'JSXAttribute') {
             const attrName = attr.name;
             if (attrName.type === 'JSXNamespacedName') {
+                if (V_IF_CHAIN_DIRECTIVES.has(directiveName))
+                    continue;
                 if (attrName.namespace.name === 'v' && attrName.name.name === directiveName.slice(2)) {
                     return true;
                 }
@@ -66,6 +71,7 @@ export function hasDirective(node, directiveName) {
 }
 /**
  * 获取指令的值
+ * v-if/v-else-if/v-else 仅支持 JSXIdentifier 格式（v-if），不支持命名空间格式（v:if）
  */
 export function getDirectiveValue(node, directiveName) {
     for (const attr of node.openingElement.attributes) {
@@ -73,6 +79,8 @@ export function getDirectiveValue(node, directiveName) {
             const attrName = attr.name;
             let matches = false;
             if (attrName.type === 'JSXNamespacedName') {
+                if (V_IF_CHAIN_DIRECTIVES.has(directiveName))
+                    continue;
                 matches = attrName.namespace.name === 'v' && attrName.name.name === directiveName.slice(2);
             }
             else if (attrName.type === 'JSXIdentifier') {
@@ -129,19 +137,14 @@ export function removeVDirectives(node) {
 }
 /**
  * 移除元素上的 v-if 链指令（v-if、v-else-if、v-else）
+ * 仅处理 JSXIdentifier 格式，不支持命名空间格式（v:if）
  */
 export function removeVIfChainDirectives(node) {
-    const vIfChainDirectives = ['v-if', 'v-else-if', 'v-else'];
     node.openingElement.attributes = node.openingElement.attributes.filter(attr => {
         if (attr.type === 'JSXAttribute') {
             const attrName = attr.name;
-            if (attrName.type === 'JSXNamespacedName') {
-                if (attrName.namespace.name === 'v') {
-                    return !vIfChainDirectives.includes(`v-${attrName.name.name}`);
-                }
-            }
-            else if (attrName.type === 'JSXIdentifier') {
-                return !vIfChainDirectives.includes(attrName.name);
+            if (attrName.type === 'JSXIdentifier') {
+                return !V_IF_CHAIN_DIRECTIVES.has(attrName.name);
             }
         }
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitarx/plugin-vite",
-  "version": "0.0.1-beta.8",
+  "version": "1.0.0-beta.1",
   "description": "The official plugin for Vitarx support in Vite.",
   "author": "ZhuChongLin <8210856@qq.com>",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "rimraf": "^6.1.3",
     "vitest": "^4.0.18",
     "vite": "^8.0.5",
-    "vitarx": "^4.0.0-beta.8"
+    "vitarx": "^4.0.0-beta.16"
   },
   "scripts": {
     "build": "vitest run && rimraf dist && tsc -p tsconfig.build.json",