@vitarx/plugin-vite 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/constants/index.d.ts

@@ -32,6 +32,7 @@ export declare const PURE_COMPILE_COMPONENTS: readonly ["Switch", "Match", "IfBl
  * 指令前缀
  */
 export declare const DIRECTIVE_PREFIX = "v-";
+export declare const V_IF_CHAIN_DIRECTIVES: Set<string>;
 /**
  * 纯函数注释
  */

package/dist/constants/index.js

@@ -32,6 +32,7 @@ export const PURE_COMPILE_COMPONENTS = ['Switch', 'Match', 'IfBlock'];
  * 指令前缀
  */
 export const DIRECTIVE_PREFIX = 'v-';
+export const V_IF_CHAIN_DIRECTIVES = new Set(['v-if', 'v-else-if', 'v-else']);
 /**
  * 纯函数注释
  */

package/dist/hmr-client/update.js

@@ -18,7 +18,13 @@ export function processUpdate(view, newComponent) {
     const instance = view.instance;
     // 比较新旧组件的差异，检查逻辑是否有变化
     const { logic } = diffComponentChange(view.component.toString(), newComponent.toString());
-    view.component = newComponent;
+    // 更新视图中的组件引用
+    Object.defineProperty(view, 'component', {
+        value: newComponent,
+        writable: true,
+        enumerable: true,
+        configurable: true
+    });
     // 如果逻辑有变化，则完全重新挂载组件
     if (logic) {
         const ctx = view.ctx;
@@ -29,12 +35,19 @@ export function processUpdate(view, newComponent) {
     }
     // 销毁旧作用域
     instance.scope.dispose();
-    instance.scope = new EffectScope({
+    // 重新创建新的作用域
+    const scope = new EffectScope({
         name: view.name,
         errorHandler: (error, source) => {
             instance.reportError(error, `effect:${source}`);
         }
     });
+    Object.defineProperty(instance, 'scope', {
+        value: scope,
+        writable: true,
+        enumerable: true,
+        configurable: true
+    });
     // 销毁旧的子树
     instance.subView.dispose();
     // 创建新的子树
@@ -46,8 +59,12 @@ export function processUpdate(view, newComponent) {
         instance.reportError(e, 'component:run');
         subView = createCommentView(`Component<${view.name}>:failed`);
     }
-    ;
-    instance.subView = instance['normalizeView'](subView);
+    Object.defineProperty(instance, 'subView', {
+        value: instance['normalizeView'](subView),
+        writable: true,
+        enumerable: true,
+        configurable: true
+    });
     // 初始化新的子树
     instance.subView.init(instance.subViewContext);
     // 挂载新的子树

package/dist/hmr-client/utils.js

@@ -69,15 +69,23 @@ function separateLogicAndRender(functionCode) {
         };
     }
     // 按位置排序，从后向前替换以保持索引正确
-    uiNodes.sort((a, b) => b.start - a.start);
+    uiNodes.sort((a, b) => a.start - b.start);
+    const filteredNodes = [];
+    for (const node of uiNodes) {
+        const isContained = filteredNodes.some(parent => node.start >= parent.start && node.end <= parent.end);
+        if (!isContained) {
+            filteredNodes.push(node);
+        }
+    }
+    filteredNodes.sort((a, b) => b.start - a.start);
     // 提取 UI 代码
-    const renderCode = uiNodes
+    const renderCode = filteredNodes
         .map(n => wrappedCode.slice(n.start, n.end))
         .reverse()
         .join('\n');
     // 移除 UI 代码后的逻辑代码
     let logicCode = wrappedCode;
-    for (const node of uiNodes) {
+    for (const node of filteredNodes) {
         logicCode = logicCode.slice(0, node.start) + logicCode.slice(node.end);
     }
     return {

package/dist/index.js

@@ -4,14 +4,6 @@ import { version } from 'vite';
 import { shouldTransform, transform } from './transform.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const IS_V8 = version.startsWith('8');
-let viteTransform;
-if (IS_V8) {
-    // @ts-ignore
-    viteTransform = (await import('vite')).transformWithOxc;
-}
-else {
-    viteTransform = (await import('vite')).transformWithEsbuild;
-}
 /**
  * vite-plugin-vitarx
  *
@@ -30,6 +22,7 @@ export default function vitarx(options) {
     let isDEV = false;
     let isSSR = false;
     let viteConfig;
+    let viteTransform;
     return {
         name: 'vite-plugin-vitarx',
         enforce: 'pre',
@@ -51,8 +44,7 @@ export default function vitarx(options) {
                 }
             };
         },
-        configResolved(config) {
-            // 根据最终的配置结果，确定是否是 SSR 模式
+        async configResolved(config) {
             if (!isSSR) {
                 isSSR = !!config.build?.ssr;
                 config.define['__VITARX_SSR__'] = JSON.stringify(isSSR);
@@ -65,6 +57,13 @@ export default function vitarx(options) {
                 sourceMap: true,
                 transformClassNameToClass: options?.transformClassNameToClass ?? false
             };
+            viteConfig = config;
+            if (IS_V8) {
+                viteTransform = (await import('vite')).transformWithOxc;
+            }
+            else {
+                viteTransform = (await import('vite')).transformWithEsbuild;
+            }
         },
         async transform(code, id) {
             if (!shouldTransform(id))

package/dist/passes/components/ifBlock.d.ts

@@ -8,5 +8,8 @@ import * as t from '@babel/types';
 import { TransformContext } from '../../context.js';
 /**
  * 处理 IfBlock 组件
+ * 该函数用于处理包含 v-if 指令的 JSX 元素，将其转换为条件分支调用
+ * @param path - JSX 元素的 AST 路径
+ * @param ctx - 转换上下文对象，包含转换过程中的配置和信息
  */
 export declare function processIfBlock(path: NodePath<t.JSXElement>, ctx: TransformContext): void;

package/dist/passes/components/ifBlock.js

@@ -1,42 +1,58 @@
 import { isJSXElement } from '@babel/types';
 import { createError } from '../../error.js';
-import { collectVIfChainInfo, createArrowFunction, createBranch, filterWhitespaceChildren, hasDirective, removeVIfChainDirectives, validateVIfChain } from '../../utils/index.js';
+import { collectVIfChainInfo, createArrowFunction, createBranch, filterWhitespaceChildren, isVIfChain, removeVIfChainDirectives, validateVIfChain } from '../../utils/index.js';
 /**
  * 处理 IfBlock 组件
+ * 该函数用于处理包含 v-if 指令的 JSX 元素，将其转换为条件分支调用
+ * @param path - JSX 元素的 AST 路径
+ * @param ctx - 转换上下文对象，包含转换过程中的配置和信息
  */
 export function processIfBlock(path, ctx) {
+    // 过滤掉子元素中的空白文本节点
     const children = filterWhitespaceChildren(path.node.children);
+    // 如果过滤后没有子元素，抛出错误 E014
     if (children.length === 0) {
         throw createError('E014', path.node);
     }
+    // 验证子元素类型是否符合要求
     validateChildrenType(children);
+    // 将子元素转换为 JSXElement 类型（假设前面已经验证过）
     const jsxChildren = children;
+    // 验证 v-if 链的合法性
     validateVIfChain(jsxChildren);
+    // 收集 v-if 链的相关信息，包括条件和对应的节点
     const { nodes, conditions } = collectVIfChainInfo(jsxChildren);
+    // 移除所有节点上的 v-if 指令
     nodes.forEach(node => removeVIfChainDirectives(node));
+    // 为每个节点创建箭头函数表达式
     const branches = nodes.map(node => createArrowFunction(node));
+    // 创建条件分支调用表达式
     const branchCall = createBranch({ conditions, branches }, ctx);
+    // 保留原始位置信息
     if (path.node.loc) {
         branchCall.loc = path.node.loc;
     }
+    // 用创建的条件分支调用替换原始节点
     path.replaceWith(branchCall);
 }
 /**
  * 验证子元素类型
+ * 该函数用于验证一组子节点是否符合IfBlock的要求
+ * @param children - 需要验证的子节点数组
+ * @throws 当子节点不符合要求时抛出错误
  */
 function validateChildrenType(children) {
+    // 遍历所有子节点进行验证
     for (const child of children) {
+        // 检查子节点是否为JSX元素
         if (!isJSXElement(child)) {
+            // 如果不是JSX元素，抛出错误E008
             throw createError('E008', child, 'IfBlock children must be JSX elements with v-if directives');
         }
-        if (!hasVIfChainDirective(child)) {
+        // 检查子节点是否包含v-if/v-else-if/v-else指令链
+        if (!isVIfChain(child)) {
+            // 如果不包含指令链，抛出错误E008
             throw createError('E008', child, 'IfBlock children must have v-if/v-else-if/v-else directives');
         }
     }
 }
-/**
- * 检查元素是否有 v-if 链指令
- */
-function hasVIfChainDirective(node) {
-    return (hasDirective(node, 'v-if') || hasDirective(node, 'v-else-if') || hasDirective(node, 'v-else'));
-}

package/dist/passes/components/switch.js

@@ -2,13 +2,14 @@ import * as t from '@babel/types';
 import { isJSXElement, isJSXText } from '@babel/types';
 import { createError } from '../../error.js';
 import { createArrowFunction, createBranch, getJSXAttributeByName, getJSXElementName } from '../../utils/index.js';
+import { getAttributeValue } from '../props/attribute.js';
 /**
  * 处理 Switch 组件
  * @param path - JSX 元素路径
  * @param ctx - 转换上下文
  */
 export function processSwitch(path, ctx) {
-    const children = path.node.children;
+    const children = path.node.children; // 获取 Switch 组件的子节点
     // 获取 fallback 属性
     const fallbackValue = extractFallbackValue(path.node);
     // 收集 Match 子节点
@@ -17,86 +18,113 @@ export function processSwitch(path, ctx) {
     const { conditions, branches } = buildConditionsAndBranches(matchNodes);
     // 添加 fallback 分支
     if (fallbackValue) {
-        conditions.push(t.booleanLiteral(true));
-        branches.push(createArrowFunction(fallbackValue));
+        conditions.push(t.booleanLiteral(true)); // 添加一个总是为 true 的条件作为 fallback
+        branches.push(createArrowFunction(fallbackValue)); // 将 fallback 值转换为箭头函数
     }
     // 生成 branch 调用
     // Switch 的 when 条件如果是标识符，需要 unref
     const branchCall = createBranch({ conditions, branches }, ctx);
     if (path.node.loc) {
-        branchCall.loc = path.node.loc;
+        branchCall.loc = path.node.loc; // 保留原始代码的位置信息
     }
-    path.replaceWith(branchCall);
+    path.replaceWith(branchCall); // 用生成的 branch 调用替换原始的 Switch 元素
 }
 /**
  * 提取 fallback 属性值
+ * 该函数用于从 JSX 元素节点中提取名为 'fallback' 的属性值
+ * @param node - 要检查的 JSX 元素节点
+ * @returns 返回找到的 fallback 属性的表达式值，如果没有找到则返回 null
  */
 function extractFallbackValue(node) {
+    // 通过 getJSXAttributeByName 函数获取名为 'fallback' 的属性
     const fallbackAttr = getJSXAttributeByName(node, 'fallback');
-    if (!fallbackAttr?.value)
+    // 如果不存在 fallback 属性，则直接返回 null
+    if (!fallbackAttr)
         return null;
-    if (fallbackAttr.value.type === 'JSXExpressionContainer') {
-        return fallbackAttr.value.expression;
-    }
-    return fallbackAttr.value;
+    // 如果存在 fallback 属性，则通过 getAttributeValue 函数提取其属性值并返回
+    return getAttributeValue(fallbackAttr.value);
 }
 /**
  * 收集 Match 子节点
+ * 该函数用于从给定的子节点数组中收集所有名为 "Match" 的 JSX 元素
+ * @param children - 需要处理的子节点数组
+ * @returns 返回包含所有 Match JSX 元素的数组
+ * @throws 当子节点不是 Match 组件或没有 Match 组件时抛出错误
  */
 function collectMatchNodes(children) {
-    const matchNodes = [];
+    const matchNodes = []; // 用于存储收集到的 Match JSX 元素
+    // 遍历所有子节点
     for (const child of children) {
+        // 如果是文本节点，则跳过处理
         if (isJSXText(child))
             continue;
+        // 检查子节点是否为 JSX 元素，如果不是则抛出错误
         if (!isJSXElement(child)) {
             throw createError('E006', child, 'Switch children must be Match components');
         }
+        // 获取当前子节点的名称
         const childName = getJSXElementName(child);
+        // 如果节点名称为 "Match"，则将其添加到结果数组中
         if (childName === 'Match') {
             matchNodes.push(child);
         }
         else {
+            // 如果不是 Match 组件，则抛出错误
             throw createError('E006', child, `Invalid child "${childName}" in Switch`);
         }
     }
+    // 检查是否至少有一个 Match 组件，如果没有则抛出错误
     if (matchNodes.length === 0) {
         throw createError('E015', undefined);
     }
+    // 返回收集到的所有 Match 组件
     return matchNodes;
 }
 /**
  * 构建条件数组和分支数组
+ * 该函数接收一个 JSX 元素数组，提取每个元素的 when 属性作为条件，
+ * 并将子元素内容转换为对应的分支函数
+ * @param matchNodes - JSX 元素数组，每个元素代表一个条件分支
+ * @returns 返回一个对象，包含 conditions 条件数组和 branches 分支数组
  */
 function buildConditionsAndBranches(matchNodes) {
-    const conditions = [];
-    const branches = [];
+    const conditions = []; // 存储提取的条件表达式
+    const branches = []; // 存储转换后的分支函数
+    // 遍历每个 JSX 元素，提取条件和分支
     for (const matchNode of matchNodes) {
+        // 获取 when 属性
         const whenAttr = getJSXAttributeByName(matchNode, 'when');
+        // 检查 when 属性是否存在且有效
         if (!whenAttr?.value) {
-            throw createError('E007', matchNode);
+            throw createError('E007', matchNode); // 如果不存在，抛出错误
         }
-        // 提取 when 条件
+        // 提取 when 条件表达式
         const whenExpr = whenAttr.value.type === 'JSXExpressionContainer'
-            ? whenAttr.value.expression
-            : whenAttr.value;
-        conditions.push(whenExpr);
-        // 提取分支内容
+            ? whenAttr.value.expression // 如果是表达式容器，取出表达式
+            : whenAttr.value; // 否则直接使用值
+        conditions.push(whenExpr); // 将条件添加到条件数组
+        // 提取分支内容，过滤掉空白文本节点
         const matchChildren = matchNode.children.filter(c => !isJSXText(c) || c.value.trim());
+        // 检查是否有子元素
         if (matchChildren.length === 0) {
-            throw createError('E013', matchNode);
+            throw createError('E013', matchNode); // 如果没有子元素，抛出错误
         }
+        // 根据子元素数量创建不同的分支函数
         if (matchChildren.length === 1) {
             const child = matchChildren[0];
             if (isJSXText(child)) {
+                // 如果是单个文本节点，创建返回字符串的函数
                 branches.push(createArrowFunction(t.stringLiteral(child.value.trim())));
             }
             else {
+                // 如果是单个表达式节点，直接使用该表达式
                 branches.push(createArrowFunction(child));
             }
         }
         else {
+            // 如果有多个子元素，创建返回数组表达式的函数
             branches.push(createArrowFunction(t.arrayExpression(matchChildren)));
         }
     }
-    return { conditions, branches };
+    return { conditions, branches }; // 返回条件和分支数组
 }

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

@@ -14,4 +14,6 @@ import type { DirectiveInfo } from '../../passes/props/types.js';
  * @param ctx - 转换上下文
  * @returns 处理后的调用表达式
  */
-export declare function processDirectives(viewCall: t.CallExpression, directives: Map<string, DirectiveInfo>, ctx: TransformContext): t.CallExpression;
+export declare function processDirectives(viewCall: t.CallExpression, // 视图调用的表达式，表示要应用指令的视图节点
+directives: Map<string, DirectiveInfo>, // 指令映射表，键为指令名（如'v-if'），值为指令信息
+ctx: TransformContext): t.CallExpression;

package/dist/passes/directives/processDirectives.js

@@ -15,11 +15,18 @@ import { addPureComment, createWithDirectivesCall, getAlias } from '../../utils/
  * @param ctx - 转换上下文
  * @returns 处理后的调用表达式
  */
-export function processDirectives(viewCall, directives, ctx) {
+export function processDirectives(viewCall, // 视图调用的表达式，表示要应用指令的视图节点
+directives, // 指令映射表，键为指令名（如'v-if'），值为指令信息
+ctx // 转换上下文，包含转换过程中的各种信息和工具函数
+) {
+    // 返回处理后的调用表达式，即应用了指令的视图节点
+    // 如果没有指令，直接返回原始视图调用表达式
     if (directives.size === 0) {
         return viewCall;
     }
+    // 创建指令数组，用于存储处理后的指令信息
     const directiveArray = [];
+    // 遍历指令映射表，处理每个指令
     for (const [name, info] of directives) {
         const directiveName = name.slice(2); // 移除 'v-' 前缀
         const directiveValue = buildDirectiveValue(info.value, info.arg, ctx);
@@ -31,21 +38,41 @@ export function processDirectives(viewCall, directives, ctx) {
 }
 /**
  * 构建指令值对象
+ * 该函数用于创建一个包含指令值和参数的对象表达式
+ * @param value - 指令的值表达式
+ * @param arg - 指令的参数，可选
+ * @param ctx - 转换上下文对象，包含转换过程中需要的信息
+ * @returns 返回一个对象表达式，包含value和可能的arg属性
  */
-function buildDirectiveValue(value, arg, ctx) {
-    const properties = [];
+function buildDirectiveValue(value, // 表达式类型的值，可以是标识符、字面量等
+arg, // 指令参数，可选字符串
+ctx // 转换上下文，包含别名、导入等信息
+) {
+    // 返回一个表达式类型的对象
+    const properties = []; // 定义对象属性数组，可以是属性或方法
     // 添加 value 属性
     if (isIdentifier(value)) {
-        markImport(ctx, 'unref');
-        const unrefAlias = getAlias(ctx.vitarxAliases, 'unref');
-        properties.push(t.objectMethod('get', t.identifier('value'), [], t.blockStatement([t.returnStatement(t.callExpression(t.identifier(unrefAlias), [value]))])));
+        // 如果值是一个标识符
+        markImport(ctx, 'unref'); // 标记需要导入unref函数
+        const unrefAlias = getAlias(ctx.vitarxAliases, 'unref'); // 获取unref函数的别名
+        properties.push(
+        // 添加一个getter方法作为属性
+        t.objectMethod('get', // 方法类型为getter
+        t.identifier('value'), // 属性名为value
+        [], // 无参数
+        t.blockStatement([t.returnStatement(t.callExpression(t.identifier(unrefAlias), [value]))]) // 返回unref(value)
+        ));
     }
     else {
-        properties.push(t.objectMethod('get', t.identifier('value'), [], t.blockStatement([t.returnStatement(value)])));
+        // 如果值不是标识符
+        properties.push(
+        // 直接添加一个getter方法返回值
+        t.objectMethod('get', t.identifier('value'), [], t.blockStatement([t.returnStatement(value)])));
     }
     // 添加 arg 属性
     if (arg) {
-        properties.push(t.objectProperty(t.identifier('arg'), t.stringLiteral(arg)));
+        // 如果存在参数
+        properties.push(t.objectProperty(t.identifier('arg'), t.stringLiteral(arg))); // 添加arg属性，值为字符串字面量
     }
-    return t.objectExpression(properties);
+    return t.objectExpression(properties); // 返回包含所有属性的对象表达式
 }

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

@@ -16,12 +16,17 @@ type JSXContainerPath = NodePath<t.JSXFragment | t.JSXElement>;
  * @param transformJSXElement - JSX 元素转换函数
  * @returns 处理后的子元素数组（链节点已替换为 branch 调用，nullLiteral 已移除）
  */
-export declare function transformChildrenVIfChains(children: t.Node[], ctx: TransformContext, transformJSXElement: TransformJSXElementFn): t.Node[];
+export declare function transformChildrenVIfChains(children: t.Node[], // 子元素数组，将被原地修改
+ctx: TransformContext, // 转换上下文，包含转换所需的环境信息
+transformJSXElement: TransformJSXElementFn): t.Node[];
 /**
  * 处理 Fragment/Element 中的 v-if 链
  * @param path - JSX Fragment 或 Element 路径
  * @param ctx - 转换上下文
  * @param transformJSXElement - JSX 元素转换函数
  */
-export declare function processVIfChain(path: JSXContainerPath, ctx: TransformContext, transformJSXElement: TransformJSXElementFn): void;
+export declare function processVIfChain(// 导出处理 v-if 链的函数
+path: JSXContainerPath, // 参数 path：接收 JSX 容器（Fragment 或 Element）的路径
+ctx: TransformContext, // 参数 ctx：提供转换过程中所需的上下文信息
+transformJSXElement: TransformJSXElementFn): void;
 export {};

package/dist/passes/directives/vIf.js

@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import { isJSXElement, isJSXText } from '@babel/types';
+import { isJSXText } from '@babel/types';
 import { collectFragmentVIfChains, createArrowFunction, createBranch, isWhitespaceJSXText, removeVIfChainDirectives } from '../../utils/index.js';
 /**
  * 处理子元素数组中的 v-if 链
@@ -9,17 +9,23 @@ import { collectFragmentVIfChains, createArrowFunction, createBranch, isWhitespa
  * @param transformJSXElement - JSX 元素转换函数
  * @returns 处理后的子元素数组（链节点已替换为 branch 调用，nullLiteral 已移除）
  */
-export function transformChildrenVIfChains(children, ctx, transformJSXElement) {
-    const chains = collectFragmentVIfChains(children);
+export function transformChildrenVIfChains(children, // 子元素数组，将被原地修改
+ctx, // 转换上下文，包含转换所需的环境信息
+transformJSXElement // JSX 元素转换函数，用于转换 JSX 元素节点
+) {
+    // 返回处理后的子元素数组，链节点已替换为 branch 调用，nullLiteral 已移除
+    const chains = collectFragmentVIfChains(children); // 收集所有 v-if 链
     if (chains.length === 0)
-        return children;
+        return children; // 如果没有 v-if 链，直接返回原数组
+    // 从后向前处理每个 v-if 链，确保正确的顺序
     for (let c = chains.length - 1; c >= 0; c--) {
-        processVIfChainItem(chains[c], children, ctx, transformJSXElement);
+        processVIfChainItem(chains[c], children, ctx, transformJSXElement); // 处理单个 v-if 链项
     }
+    // 过滤掉 nullLiteral 类型的节点和空白文本节点
     return children.filter(child => {
         if (t.isNullLiteral(child))
-            return false;
-        return !(isJSXText(child) && isWhitespaceJSXText(child));
+            return false; // 过滤掉 nullLiteral 节点
+        return !(isJSXText(child) && isWhitespaceJSXText(child)); // 过滤掉空白文本节点
     });
 }
 /**
@@ -28,39 +34,46 @@ export function transformChildrenVIfChains(children, ctx, transformJSXElement) {
  * @param ctx - 转换上下文
  * @param transformJSXElement - JSX 元素转换函数
  */
-export function processVIfChain(path, ctx, transformJSXElement) {
-    const children = path.node.children;
-    const processed = transformChildrenVIfChains(children, ctx, transformJSXElement);
+export function processVIfChain(// 导出处理 v-if 链的函数
+path, // 参数 path：接收 JSX 容器（Fragment 或 Element）的路径
+ctx, // 参数 ctx：提供转换过程中所需的上下文信息
+transformJSXElement // 参数 transformJSXElement：用于转换 JSX 元素的回调函数
+) {
+    // 函数无返回值
+    const children = path.node.children; // 获取当前路径下节点的子节点数组
+    const processed = transformChildrenVIfChains(children, ctx, transformJSXElement); // 调用函数处理子节点中的 v-if 链
     if (processed !== children) {
-        path.node.children = processed;
+        // 检查处理后的子节点是否与原始子节点不同
+        path.node.children = processed; // 如果不同，则更新节点的子节点数组
     }
 }
 /**
  * 处理单个 v-if 链
+ * 该函数用于处理包含 v-if 指令的 JSX 元素链，将其转换为条件分支结构
+ * @param chain - 包含 v-if 链信息的对象，包含节点、条件和索引范围
+ * @param children - 子节点数组，将被修改以插入转换后的条件分支
+ * @param ctx - 转换上下文，包含转换过程中需要的配置和信息
+ * @param transformJSXElement - 用于转换 JSX 元素的函数
  */
-function processVIfChainItem(chain, children, ctx, transformJSXElement) {
-    const { nodes, conditions, endIndex } = chain;
-    let start = -1;
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (isJSXElement(child) && child === nodes[0]) {
-            start = i;
-            break;
-        }
-    }
+function processVIfChainItem(chain, children, // 子节点数组，将被修改以插入转换后的条件分支
+ctx, // 转换上下文对象，包含转换过程中的配置和信息
+transformJSXElement // 转换 JSX 元素的函数类型
+) {
+    const { nodes, conditions, startIndex, endIndex } = chain; // 解构赋值获取链信息
+    // 创建分支数组，每个分支是一个箭头函数表达式
     const branches = [];
+    // 遍历所有节点，移除 v-if 指令并转换节点
     for (const node of nodes) {
-        removeVIfChainDirectives(node);
-        const transformedNode = transformJSXElement(node, ctx, false);
+        removeVIfChainDirectives(node); // 移除节点上的 v-if 相关指令
+        const transformedNode = transformJSXElement(node, ctx, false); // 转换 JSX 元素
         if (transformedNode) {
-            branches.push(createArrowFunction(transformedNode));
+            branches.push(createArrowFunction(transformedNode)); // 将转换后的节点包装为箭头函数
         }
     }
-    const branchCall = createBranch({ conditions, branches }, ctx);
-    if (start >= 0) {
-        children[start] = branchCall;
-        for (let k = start + 1; k <= endIndex; k++) {
-            children[k] = t.nullLiteral();
-        }
+    // 在起始位置创建条件分支结构
+    children[startIndex] = createBranch({ conditions, branches }, ctx);
+    // 将后续位置填充为 null 字面量，避免重复渲染
+    for (let k = startIndex + 1; k <= endIndex; k++) {
+        children[k] = t.nullLiteral();
     }
 }