@vitarx/plugin-vite 0.0.1-alpha.0

package/dist/passes/jsx/processJSXElement.js

@@ -0,0 +1,173 @@
+import * as t from '@babel/types';
+import { isJSXElement, isJSXExpressionContainer, isJSXText } from '@babel/types';
+import { addWarning, markImport } from '../../context.js';
+import { createError, createWarning } from '../../error.js';
+import { addPureComment, createArrowFunction, createBranch, createCreateViewCall, createLocationObject, getAlias, getDirectiveValue, getJSXAttributeByName, getJSXElementName, isNativeElement, isVElse, isVIf, isVIfChain, removeVDirectives } from '../../utils/index.js';
+import { processDirectives } from '../directives/index.js';
+import { processProps } from '../props/index.js';
+import { processChildren } from './processChildren.js';
+/**
+ * 处理 JSX 元素
+ * @param path - JSX 元素路径
+ * @param ctx - 转换上下文
+ */
+export function processJSXElement(path, ctx) {
+    const name = getJSXElementName(path.node);
+    // 校验 Match 必须在 Switch 内使用
+    if (name === 'Match') {
+        validateMatchInSwitch(path);
+    }
+    const result = transformJSXElement(path.node, ctx, true);
+    if (result) {
+        path.replaceWith(result);
+    }
+}
+/**
+ * 校验 Match 组件必须在 Switch 内使用
+ */
+function validateMatchInSwitch(path) {
+    const parent = path.parentPath;
+    if (!parent) {
+        throw createError('E012', path.node);
+    }
+    // 检查父元素是否是 Switch
+    if (parent.node.type === 'JSXElement') {
+        const parentName = getJSXElementName(parent.node);
+        if (parentName === 'Switch') {
+            return;
+        }
+    }
+    // 检查是否在 Fragment 内且 Fragment 的父元素是 Switch
+    if (parent.node.type === 'JSXFragment' || parent.node.type === 'JSXElement') {
+        const grandParent = parent.parentPath;
+        if (grandParent?.node.type === 'JSXElement') {
+            const grandParentName = getJSXElementName(grandParent.node);
+            if (grandParentName === 'Switch') {
+                return;
+            }
+        }
+    }
+    throw createError('E012', path.node);
+}
+/**
+ * 转换 JSX 元素为表达式
+ * @param node - JSX 元素节点
+ * @param ctx - 转换上下文
+ * @param handleVIf - 是否处理 v-if 指令
+ * @returns 转换后的表达式
+ */
+export function transformJSXElement(node, ctx, handleVIf = false) {
+    const name = getJSXElementName(node);
+    if (!name)
+        return null;
+    // 处理 v-if 链
+    if (handleVIf && isVIfChain(node)) {
+        if (isVIf(node)) {
+            return transformSingleVIf(node, ctx);
+        }
+        else {
+            throw createError(isVElse(node) ? 'E003' : 'E004', node);
+        }
+    }
+    // 确定元素类型
+    const type = isNativeElement(name) ? t.stringLiteral(name) : t.identifier(name);
+    // 检测是否有有效子元素
+    const hasChildren = node.children.some(child => {
+        if (isJSXText(child)) {
+            return child.value.trim().length > 0;
+        }
+        if (isJSXExpressionContainer(child)) {
+            return child.expression.type !== 'JSXEmptyExpression';
+        }
+        return true;
+    });
+    // 处理属性（有子元素时跳过 children 属性）
+    const { props, directives } = processProps(node, ctx, hasChildren);
+    // 处理子元素
+    const finalProps = processElementChildren(node, props, ctx);
+    // 生成 createView 调用
+    markImport(ctx, 'createView');
+    const createViewAlias = getAlias(ctx.vitarxAliases, 'createView');
+    const locInfo = ctx.options.dev && node.loc ? createLocationObject(ctx.filename, node.loc) : null;
+    let viewCall = createCreateViewCall(type, finalProps, locInfo, createViewAlias);
+    // 处理指令
+    if (directives.size > 0) {
+        viewCall = processDirectives(viewCall, directives, ctx);
+    }
+    else {
+        viewCall = addPureComment(viewCall);
+    }
+    if (node.loc) {
+        viewCall.loc = node.loc;
+    }
+    return viewCall;
+}
+/**
+ * 处理元素的子元素
+ * 子元素优先于 children 属性，同时发出警告
+ */
+function processElementChildren(node, props, ctx) {
+    // 过滤有效子元素
+    const children = node.children.filter(child => {
+        if (isJSXText(child)) {
+            return child.value.trim().length > 0;
+        }
+        if (isJSXExpressionContainer(child)) {
+            return child.expression.type !== 'JSXEmptyExpression';
+        }
+        return true;
+    });
+    if (children.length === 0) {
+        return props;
+    }
+    // 检查是否存在 children 属性
+    const childrenAttr = getJSXAttributeByName(node, 'children');
+    if (childrenAttr) {
+        // 发出警告：children 属性和子元素同时存在
+        addWarning(ctx, createWarning('W001', childrenAttr));
+    }
+    // 校验 Match 组件必须在 Switch 内使用
+    // 当前元素不是 Switch 时，检查子元素中是否有 Match
+    const currentName = getJSXElementName(node);
+    if (currentName !== 'Switch') {
+        for (const child of children) {
+            if (isJSXElement(child)) {
+                const childName = getJSXElementName(child);
+                if (childName === 'Match') {
+                    throw createError('E012', child);
+                }
+            }
+        }
+    }
+    // 处理子元素
+    const processedChildren = processChildren(children, ctx);
+    const childrenValue = processedChildren.length === 1 ? processedChildren[0] : t.arrayExpression(processedChildren);
+    // 添加 children 属性
+    if (props) {
+        props.properties.push(t.objectProperty(t.identifier('children'), childrenValue));
+        return props;
+    }
+    return t.objectExpression([t.objectProperty(t.identifier('children'), childrenValue)]);
+}
+/**
+ * 转换单个 v-if 元素
+ */
+function transformSingleVIf(node, ctx) {
+    if (!isVIf(node))
+        return null;
+    const condition = getDirectiveValue(node, 'v-if');
+    if (!condition)
+        return null;
+    // 移除 v- 指令
+    removeVDirectives(node);
+    // 转换元素
+    const transformedNode = transformJSXElement(node, ctx, false);
+    if (!transformedNode)
+        return null;
+    // 生成 branch 调用
+    const branchCall = createBranch({ conditions: [condition], branches: [createArrowFunction(transformedNode)] }, ctx);
+    if (node.loc) {
+        branchCall.loc = node.loc;
+    }
+    return branchCall;
+}

package/dist/passes/jsx/processJSXFragment.js

@@ -0,0 +1,37 @@
+import * as t from '@babel/types';
+import { addPureComment, createCreateViewCall, createLocationObject, filterWhitespaceChildren, getAlias, validateMatchInSwitch } from '../../utils/index.js';
+import { processChildren } from './processChildren.js';
+/**
+ * 处理 JSX Fragment
+ * @param path - JSX Fragment 路径
+ * @param ctx - 转换上下文
+ */
+export function processJSXFragment(path, ctx) {
+    const node = path.node;
+    // 过滤空白子节点
+    const children = filterWhitespaceChildren(node.children);
+    // 校验 Match 组件
+    validateMatchInSwitch(children);
+    // 标记需要的导入
+    ctx.imports.Fragment = true;
+    ctx.imports.createView = true;
+    const fragmentAlias = getAlias(ctx.vitarxAliases, 'Fragment');
+    const createViewAlias = getAlias(ctx.vitarxAliases, 'createView');
+    const locInfo = ctx.options.dev && node.loc ? createLocationObject(ctx.filename, node.loc) : null;
+    // 无子元素
+    if (children.length === 0) {
+        const viewCall = addPureComment(createCreateViewCall(t.identifier(fragmentAlias), null, locInfo, createViewAlias));
+        if (node.loc)
+            viewCall.loc = node.loc;
+        path.replaceWith(viewCall);
+        return;
+    }
+    // 处理子元素
+    const processedChildren = processChildren(children, ctx);
+    const childrenValue = processedChildren.length === 1 ? processedChildren[0] : t.arrayExpression(processedChildren);
+    const props = t.objectExpression([t.objectProperty(t.identifier('children'), childrenValue)]);
+    const viewCall = addPureComment(createCreateViewCall(t.identifier(fragmentAlias), props, locInfo, createViewAlias));
+    if (node.loc)
+        viewCall.loc = node.loc;
+    path.replaceWith(viewCall);
+}

package/dist/passes/props/attribute.js

@@ -0,0 +1,165 @@
+/**
+ * 属性处理模块
+ * 负责处理 JSX 元素的各类属性，包括普通属性、展开属性、命名空间属性等
+ * @module passes/props/attribute
+ */
+import * as t from '@babel/types';
+import { isBooleanLiteral, isIdentifier, isJSXExpressionContainer, isNumericLiteral, isStringLiteral } from '@babel/types';
+import { markImport } from '../../context.js';
+import { createError } from '../../error.js';
+import { getAlias } from '../../utils/index.js';
+/**
+ * 处理展开属性 {...props}
+ * 将展开属性转换为 v-bind 特殊属性格式
+ * @param attr - JSX 展开属性节点
+ * @param hasVBind - 是否已存在 v-bind
+ * @param node - JSX 元素节点（用于错误定位）
+ * @returns 转换后的属性对象，或 null（如果已存在 v-bind）
+ * @throws {Error} E001 - 当已存在 v-bind 时抛出
+ */
+export function processSpreadAttribute(attr, hasVBind, node) {
+    // 不允许多个 v-bind
+    if (hasVBind) {
+        throw createError('E001', node);
+    }
+    return {
+        property: t.objectProperty(t.stringLiteral('v-bind'), attr.argument),
+        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) };
+}
+/**
+ * 处理命名空间属性
+ * 支持 v:xxx 格式的指令语法
+ * @param attr - JSX 属性节点
+ * @param attrName - 命名空间名称
+ * @param existingPropNames - 已存在的属性名集合
+ * @param ctx - 转换上下文
+ * @returns 属性处理结果
+ */
+function processNamespacedAttribute(attr, attrName, existingPropNames, ctx) {
+    const namespace = attrName.namespace.name;
+    const name = attrName.name.name;
+    const fullName = `${namespace}:${name}`;
+    // v:xxx 指令
+    if (namespace === 'v') {
+        const directiveName = `v-${name}`;
+        const value = getAttributeValue(attr.value);
+        // v:bind 等同于 v-bind
+        if (directiveName === 'v-bind') {
+            return { type: 'directive', name: 'v-bind', value, isVBind: true, isVModel: false };
+        }
+        // 其他指令（排除 v-if 系列和 v-model）
+        if (!['v-if', 'v-else-if', 'v-else', 'v-model'].includes(directiveName)) {
+            return { type: 'directive', name: directiveName, value, isVBind: false, isVModel: false };
+        }
+    }
+    // 其他命名空间属性作为普通属性处理
+    existingPropNames.add(fullName);
+    const value = getAttributeValue(attr.value);
+    const property = createProperty(fullName, value, ctx);
+    return { type: 'property', property };
+}
+/**
+ * 获取属性值表达式
+ * 处理不同类型的属性值，统一返回表达式
+ * @param value - JSX 属性值
+ * @returns 表达式节点
+ */
+function getAttributeValue(value) {
+    // 无值属性默认为 true
+    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);
+        }
+        return value.expression;
+    }
+    return value;
+}
+/**
+ * 创建对象属性节点
+ * 静态值直接赋值，动态值生成 getter 方法
+ *
+ * 特殊处理：
+ * - children 属性不使用 unref，因为 ref 作为 children 是合法的可变渲染源
+ * - 其他标识符属性使用 unref 解包
+ *
+ * @param key - 属性名
+ * @param value - 属性值表达式
+ * @param ctx - 转换上下文
+ * @returns 对象属性或方法节点
+ */
+function createProperty(key, value, ctx) {
+    // 静态值：直接赋值
+    if (isStringLiteral(value) || isNumericLiteral(value) || isBooleanLiteral(value)) {
+        return t.objectProperty(t.identifier(key), value);
+    }
+    // Identifier: 检查是否为已知的 ref 变量
+    if (isIdentifier(value)) {
+        // 已知 ref 变量：直接访问 .value
+        if (ctx.refVariables.has(value.name)) {
+            return t.objectMethod('get', t.identifier(key), [], t.blockStatement([t.returnStatement(t.memberExpression(value, t.identifier('value')))]));
+        }
+        // children 属性：直接引用，不使用 unref
+        // 原因：children 中的 ref 是合法的可变渲染源
+        if (key === 'children') {
+            return t.objectProperty(t.identifier(key), value);
+        }
+        // 其他未知变量：使用 unref 进行解包
+        markImport(ctx, 'unref');
+        const unrefAlias = getAlias(ctx.vitarxAliases, 'unref');
+        return t.objectMethod('get', t.identifier(key), [], t.blockStatement([t.returnStatement(t.callExpression(t.identifier(unrefAlias), [value]))]));
+    }
+    // 其他表达式：直接返回（保持响应性）
+    return t.objectMethod('get', t.identifier(key), [], t.blockStatement([t.returnStatement(value)]));
+}

package/dist/passes/props/index.js

@@ -0,0 +1,94 @@
+/**
+ * Props 处理模块入口
+ * 负责处理 JSX 元素的属性，包括 v-model 特殊指令
+ * @module passes/props
+ */
+import * as t from '@babel/types';
+import { processAttribute, processSpreadAttribute } from './attribute.js';
+import { createVModelProps, extractVModelState } from './vmodel.js';
+/**
+ * 处理 JSX 元素的属性
+ * 将 JSX 属性转换为运行时 props 对象，并提取指令
+ *
+ * 处理流程：
+ * 1. 遍历所有属性，分类处理
+ * 2. 展开属性转换为 v-bind 格式
+ * 3. 普通属性转换为对象属性或 getter
+ * 4. 指令属性提取到 directives Map
+ * 5. v-model 特殊处理，生成 modelValue 和 onUpdate:modelValue
+ *
+ * @param node - JSX 元素节点
+ * @param ctx - 转换上下文
+ * @param hasChildren - 是否有子元素（有子元素时跳过 children 属性）
+ * @returns 处理结果，包含 props 对象、指令映射和 v-bind 标记
+ *
+ * @example
+ * ```tsx
+ * // 输入
+ * <Input v-model={value} placeholder="text" disabled />
+ *
+ * // 输出 props
+ * {
+ *   modelValue: get() { return value.value },
+ *   'onUpdate:modelValue': v => value.value = v,
+ *   placeholder: "text",
+ *   disabled: true
+ * }
+ * ```
+ */
+export function processProps(node, ctx, hasChildren = false) {
+    const attributes = node.openingElement.attributes;
+    const properties = [];
+    const directives = new Map();
+    let hasVBind = false;
+    // 追踪已存在的属性名（用于 v-model 冲突检测）
+    const existingPropNames = new Set();
+    // 提取初始 v-model 状态
+    let vModelState = extractVModelState(attributes);
+    // 遍历处理所有属性
+    for (const attr of attributes) {
+        // 处理展开属性 {...props}
+        if (attr.type === 'JSXSpreadAttribute') {
+            const result = processSpreadAttribute(attr, hasVBind, node);
+            if (result) {
+                properties.push(result.property);
+                hasVBind = result.hasVBind;
+            }
+            continue;
+        }
+        // 处理普通属性
+        if (attr.type === 'JSXAttribute') {
+            // 如果有子元素，跳过 children 属性
+            if (hasChildren && attr.name.type === 'JSXIdentifier' && attr.name.name === 'children') {
+                continue;
+            }
+            const result = processAttribute(attr, existingPropNames, ctx);
+            if (result.type === 'directive') {
+                // v-model 指令：更新状态
+                if (result.isVModel) {
+                    vModelState = { hasVModel: true, value: result.value, node: attr };
+                }
+                // v-bind 指令：添加到属性列表
+                else if (result.isVBind) {
+                    properties.push(t.objectProperty(t.stringLiteral('v-bind'), result.value));
+                    hasVBind = true;
+                }
+                // 其他指令：添加到指令映射
+                else {
+                    directives.set(result.name, result.value);
+                }
+            }
+            else if (result.type === 'property') {
+                properties.push(result.property);
+            }
+        }
+    }
+    // 处理 v-model：生成 modelValue 和 onUpdate:modelValue
+    if (vModelState.hasVModel && vModelState.value) {
+        const vModelProps = createVModelProps(vModelState.value, vModelState.node, existingPropNames, node, ctx);
+        properties.push(...vModelProps);
+    }
+    // 构建最终结果
+    const props = properties.length > 0 ? t.objectExpression(properties) : null;
+    return { props, directives, hasVBind };
+}

package/dist/passes/props/types.js

@@ -0,0 +1 @@
+export {};

package/dist/passes/props/vmodel.js

@@ -0,0 +1,115 @@
+/**
+ * v-model 指令处理模块
+ * 负责处理 JSX 元素的 v-model 双向绑定指令
+ * @module passes/props/vmodel
+ */
+import * as t from '@babel/types';
+import { isIdentifier, isMemberExpression } from '@babel/types';
+import { markImport } from '../../context.js';
+import { createError } from '../../error.js';
+import { getAlias } from '../../utils/index.js';
+/**
+ * 从属性列表中提取 v-model 状态
+ * @param attributes - JSX 元素属性列表
+ * @returns v-model 状态对象
+ */
+export function extractVModelState(attributes) {
+    for (const attr of attributes) {
+        if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+            if (attr.name.name === 'v-model') {
+                const value = attr.value?.type === 'JSXExpressionContainer'
+                    ? attr.value.expression
+                    : null;
+                return { hasVModel: true, value, node: attr };
+            }
+        }
+    }
+    return { hasVModel: false, value: null, node: null };
+}
+/**
+ * 创建 v-model 相关的 props
+ * 生成 modelValue getter 和 onUpdate:modelValue 回调
+ * @param value - v-model 绑定的值表达式
+ * @param attrNode - v-model 属性节点（用于错误定位）
+ * @param existingPropNames - 已存在的属性名集合（用于冲突检测）
+ * @param node - JSX 元素节点
+ * @param ctx - 转换上下文
+ * @returns 包含 modelValue 和 onUpdate:modelValue 的属性数组
+ * @throws {Error} E009 - 当 modelValue 或 onUpdate:modelValue 已存在时
+ * @throws {Error} E010 - 当 v-model 绑定值不是 Identifier 或 MemberExpression 时
+ */
+export function createVModelProps(value, attrNode, existingPropNames, node, ctx) {
+    // 检查属性名冲突
+    if (existingPropNames.has('modelValue') || existingPropNames.has('onUpdate:modelValue')) {
+        throw createError('E009', attrNode || node);
+    }
+    // v-model 只支持 Identifier 和 MemberExpression
+    if (!isIdentifier(value) && !isMemberExpression(value)) {
+        throw createError('E010', attrNode || node);
+    }
+    // Identifier: 可能是 ref 变量
+    if (isIdentifier(value)) {
+        return createIdentifierVModelProps(value, attrNode || node, ctx);
+    }
+    // MemberExpression: 直接访问属性
+    return createMemberExpressionVModelProps(value);
+}
+/**
+ * 为 Identifier 类型的 v-model 值创建 props
+ * 支持已知 ref 变量和未知变量两种情况
+ * @param value - Identifier 值
+ * @param node - AST 节点（用于错误定位）
+ * @param ctx - 转换上下文
+ * @returns 属性数组
+ */
+function createIdentifierVModelProps(value, node, ctx) {
+    const isKnownRef = ctx.refVariables.has(value.name);
+    // 已知 ref 变量：直接访问 .value
+    if (isKnownRef) {
+        return [
+            // modelValue getter: 返回 value.value
+            t.objectMethod('get', t.identifier('modelValue'), [], t.blockStatement([t.returnStatement(t.memberExpression(value, t.identifier('value')))])),
+            // onUpdate:modelValue: v => value.value = v
+            t.objectProperty(t.stringLiteral('onUpdate:modelValue'), t.arrowFunctionExpression([t.identifier('v')], t.assignmentExpression('=', t.memberExpression(value, t.identifier('value')), t.identifier('v'))))
+        ];
+    }
+    // 未知变量：使用 unref 进行解包
+    markImport(ctx, 'unref');
+    const unrefAlias = getAlias(ctx.vitarxAliases, 'unref');
+    const updateBody = [];
+    // 开发模式：添加 isRef 检查
+    if (ctx.options.dev) {
+        markImport(ctx, 'isRef');
+        const isRefAlias = getAlias(ctx.vitarxAliases, 'isRef');
+        const locInfo = node.loc
+            ? ` at ${ctx.filename}:${node.loc.start.line}:${node.loc.start.column + 1}`
+            : '';
+        updateBody.push(t.ifStatement(t.unaryExpression('!', t.callExpression(t.identifier(isRefAlias), [value])), t.blockStatement([
+            t.throwStatement(t.newExpression(t.identifier('Error'), [
+                t.stringLiteral(`[v-model] Identifier must be a ref. Invalid usage${locInfo}`)
+            ]))
+        ])));
+    }
+    // 更新逻辑：value.value = v
+    updateBody.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(value, t.identifier('value')), t.identifier('v'))));
+    return [
+        // modelValue getter: 返回 unref(value)
+        t.objectMethod('get', t.identifier('modelValue'), [], t.blockStatement([t.returnStatement(t.callExpression(t.identifier(unrefAlias), [value]))])),
+        // onUpdate:modelValue: v => { [isRef检查]; value.value = v }
+        t.objectProperty(t.stringLiteral('onUpdate:modelValue'), t.arrowFunctionExpression([t.identifier('v')], t.blockStatement(updateBody)))
+    ];
+}
+/**
+ * 为 MemberExpression 类型的 v-model 值创建 props
+ * 直接访问对象属性，无需 ref 处理
+ * @param value - MemberExpression 值
+ * @returns 属性数组
+ */
+function createMemberExpressionVModelProps(value) {
+    return [
+        // modelValue getter: 直接返回表达式
+        t.objectMethod('get', t.identifier('modelValue'), [], t.blockStatement([t.returnStatement(value)])),
+        // onUpdate:modelValue: v => obj.prop = v
+        t.objectProperty(t.stringLiteral('onUpdate:modelValue'), t.arrowFunctionExpression([t.identifier('v')], t.assignmentExpression('=', value, t.identifier('v'))))
+    ];
+}