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

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

@@ -2,29 +2,44 @@ import * as t from '@babel/types';
 import { isJSXElement, isJSXText } from '@babel/types';
 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,9 +56,7 @@ function processVIfChainItem(chain, children, ctx, transformJSXElement) {
             branches.push(createArrowFunction(transformedNode));
         }
     }
-    // 生成 branch 调用
     const branchCall = createBranch({ conditions, branches }, ctx);
-    // 替换链的第一个节点，其他节点标记为 null
     if (start >= 0) {
         children[start] = branchCall;
         for (let k = start + 1; k <= endIndex; k++) {
@@ -52,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/jsx/processJSXElement.js

@@ -3,7 +3,7 @@ import { isJSXElement } from '@babel/types';
 import { addWarning, markImport } from '../../context.js';
 import { createError, createWarning } from '../../error.js';
 import { addPureComment, createArrowFunction, createBranch, createCreateViewCall, filterEffectiveChildren, getAlias, getDevLocInfo, getDirectiveValue, getJSXAttributeByName, getJSXElementName, hasEffectiveChildren, isNativeElement, isVElse, isVIf, isVIfChain, removeVIfChainDirectives } from '../../utils/index.js';
-import { processDirectives } from '../directives/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) {

package/dist/transform.js

@@ -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/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": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "The official plugin for Vitarx support in Vite.",
   "author": "ZhuChongLin <8210856@qq.com>",
   "license": "MIT",