@vitarx/plugin-vite 0.0.1-alpha.0

package/dist/passes/hmr/inject.js

@@ -0,0 +1,189 @@
+/**
+ * HMR 代码注入模块
+ * 在 HMR 模式下为组件函数注入热更新支持代码
+ * @module passes/hmr
+ */
+import * as t from '@babel/types';
+import { HMR } from '../../constants/index.js';
+import { collectPatternBindings } from '../../utils/index.js';
+/** getComponentView 的内部别名，避免与用户代码冲突 */
+const GET_COMPONENT_VIEW_ALIAS = '__$VITARX_GET_COMPONENT_VIEW$__';
+/**
+ * 注入 HMR 客户端导入
+ * @param program - AST Program 节点
+ */
+function injectHMRImport(program) {
+    const importDecl = t.importDeclaration([t.importDefaultSpecifier(t.identifier(HMR.manager))], t.stringLiteral('@vitarx/vite-plugin/hmr-client'));
+    program.body.unshift(importDecl);
+}
+/**
+ * 注入 getComponentView 导入
+ * 使用唯一的别名避免与用户代码冲突
+ * @param program - AST Program 节点
+ */
+function injectGetComponentViewImport(program) {
+    // 创建独立的 import 语句，使用不会冲突的别名
+    const importDecl = t.importDeclaration([t.importSpecifier(t.identifier(GET_COMPONENT_VIEW_ALIAS), t.identifier('getComponentView'))], t.stringLiteral('vitarx'));
+    program.body.unshift(importDecl);
+}
+/**
+ * 创建组件函数体内的 HMR 注册代码
+ * @param variableNames - 需要追踪的变量名列表
+ * @returns HMR 注册语句数组
+ */
+function createHMRRegistrationStatements(variableNames) {
+    const statements = [];
+    // 声明并获取当前视图实例
+    statements.push(t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier(HMR.view), t.callExpression(t.identifier(GET_COMPONENT_VIEW_ALIAS), []))
+    ]));
+    // 注册到 HMR 管理器
+    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))])));
+    // 异步设置状态
+    statements.push(t.expressionStatement(t.logicalExpression('&&', t.identifier(HMR.view), t.callExpression(t.memberExpression(t.callExpression(t.memberExpression(t.identifier('Promise'), t.identifier('resolve')), []), t.identifier('then')), [
+        t.arrowFunctionExpression([], t.blockStatement([
+            t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier(HMR.view), t.identifier(HMR.state)), t.objectExpression(stateProperties)))
+        ]))
+    ]))));
+    return statements;
+}
+/**
+ * 从函数体中收集局部变量名
+ * @param functionBody - 函数体语句块
+ * @returns 变量名数组
+ */
+function collectLocalVariableNames(functionBody) {
+    const variableNames = new Set();
+    for (const stmt of functionBody.body) {
+        if (stmt.type === 'VariableDeclaration') {
+            for (const decl of stmt.declarations) {
+                if (decl.id.type !== 'VoidPattern') {
+                    collectPatternBindings(decl.id, variableNames);
+                }
+            }
+        }
+    }
+    return Array.from(variableNames);
+}
+/**
+ * 判断表达式是否为函数类型
+ * 包括：箭头函数、函数表达式、类表达式
+ */
+function isFunctionExpression(expr) {
+    if (!expr)
+        return false;
+    return (expr.type === 'ArrowFunctionExpression' ||
+        expr.type === 'FunctionExpression' ||
+        expr.type === 'ClassExpression');
+}
+/**
+ * 创建状态恢复表达式
+ * 格式：__$VITARX_HMR$__.instance.memo(__$VITARX_HMR_VIEW_NODE$__, '变量名') ?? 原始初始值
+ */
+function createMemoExpression(variableName, originalInit) {
+    return t.logicalExpression('??', t.callExpression(t.memberExpression(t.memberExpression(t.identifier(HMR.manager), t.identifier('instance')), t.identifier('memo')), [t.identifier(HMR.view), t.stringLiteral(variableName)]), originalInit);
+}
+/**
+ * 为单个变量声明注入状态恢复代码
+ * 仅处理标识符类型的变量声明，且初始值不是函数
+ */
+function injectStatePreservationForDeclaration(decl) {
+    // 只处理标识符类型的变量声明
+    if (decl.id.type !== 'Identifier')
+        return;
+    // 没有初始值，不需要处理
+    if (!decl.init)
+        return;
+    // 初始值是函数，不需要状态恢复
+    if (isFunctionExpression(decl.init))
+        return;
+    // 注入状态恢复代码
+    decl.init = createMemoExpression(decl.id.name, decl.init);
+}
+/**
+ * 为函数体内的变量声明注入状态恢复代码
+ */
+function injectStatePreservation(functionBody) {
+    for (const stmt of functionBody.body) {
+        if (stmt.type === 'VariableDeclaration') {
+            for (const decl of stmt.declarations) {
+                injectStatePreservationForDeclaration(decl);
+            }
+        }
+    }
+}
+/**
+ * 为组件函数注入 HMR 注册代码
+ * @param func - 函数声明/表达式/箭头函数
+ * @param variableNames - 需要追踪的变量名列表
+ */
+function injectHMRIntoFunction(func, variableNames) {
+    // 处理箭头函数没有函数体的情况（表达式体）
+    if (func.type === 'ArrowFunctionExpression' && func.body.type !== 'BlockStatement') {
+        // 将表达式体转换为块语句
+        const returnStmt = t.returnStatement(func.body);
+        func.body = t.blockStatement([returnStmt]);
+    }
+    if (!func.body || func.body.type !== 'BlockStatement')
+        return;
+    // 注入状态恢复代码
+    injectStatePreservation(func.body);
+    // 注入 HMR 注册代码
+    const statements = createHMRRegistrationStatements(variableNames);
+    func.body.body.unshift(...statements);
+}
+/**
+ * 创建 bindId 语句
+ */
+function createBindIdStatement(componentName, componentId) {
+    return t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier(HMR.manager), t.identifier('instance')), t.identifier('bindId')), [t.identifier(componentName), t.stringLiteral(componentId)]));
+}
+/**
+ * 创建 import.meta.hot.accept 语句
+ */
+function createHotAcceptStatement() {
+    return t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.memberExpression(t.identifier('import'), t.identifier('meta')), t.identifier('hot')), t.identifier('accept')), [
+        t.arrowFunctionExpression([t.identifier('mod')], t.blockStatement([
+            t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier(HMR.manager), t.identifier('instance')), t.identifier('update')), [t.identifier('mod')]))
+        ]))
+    ]));
+}
+/**
+ * 生成组件唯一 ID（文件路径 + 组件名称）
+ */
+function generateComponentId(filename, componentName) {
+    const combined = `${filename}:${componentName}`;
+    let hash = 0;
+    for (let i = 0; i < combined.length; i++) {
+        hash = ((hash << 5) - hash + combined.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash).toString(16);
+}
+/**
+ * 注入 HMR 支持
+ * 主入口函数，为所有组件注入完整的 HMR 支持
+ * @param program - AST Program 节点
+ * @param components - 组件信息列表
+ * @param filename - 文件名
+ */
+export function injectHMRSupport(program, components, filename) {
+    if (components.length === 0)
+        return;
+    // 注入必要的导入
+    injectHMRImport(program);
+    injectGetComponentViewImport(program);
+    // 为每个组件函数注入 HMR 代码
+    for (const { node } of components) {
+        // 收集局部变量名（如果有函数体）
+        const variableNames = node.body?.type === 'BlockStatement' ? collectLocalVariableNames(node.body) : [];
+        injectHMRIntoFunction(node, variableNames);
+    }
+    // 为每个组件绑定 ID
+    for (const { name } of components) {
+        program.body.push(createBindIdStatement(name, generateComponentId(filename, name)));
+    }
+    // 注入 import.meta.hot.accept
+    program.body.push(createHotAcceptStatement());
+}

package/dist/passes/imports/collectImports.js

@@ -0,0 +1,56 @@
+import { VITARX_MODULE } from '../../constants/index.js';
+import { collectPatternBindings } from '../../utils/index.js';
+/**
+ * 收集现有导入信息
+ * @param program - AST Program 节点
+ * @returns 本地变量名集合和 vitarx 导入映射
+ */
+export function collectExistingImports(program) {
+    const localNames = new Set();
+    const vitarxImports = new Map();
+    for (const node of program.body) {
+        if (node.type !== 'ImportDeclaration')
+            continue;
+        const source = node.source.value;
+        for (const specifier of node.specifiers) {
+            localNames.add(specifier.local.name);
+            if (source === VITARX_MODULE && specifier.type === 'ImportSpecifier') {
+                const importedName = specifier.imported.type === 'Identifier'
+                    ? specifier.imported.name
+                    : specifier.imported.value;
+                vitarxImports.set(importedName, specifier.local.name);
+            }
+        }
+    }
+    return { localNames, vitarxImports };
+}
+/**
+ * 收集本地变量绑定
+ * 包括导入绑定、变量声明、函数声明、类声明
+ * @param program - AST Program 节点
+ * @returns 本地变量名集合
+ */
+export function collectLocalBindings(program) {
+    const bindings = new Set();
+    for (const node of program.body) {
+        if (node.type === 'ImportDeclaration') {
+            for (const specifier of node.specifiers) {
+                bindings.add(specifier.local.name);
+            }
+        }
+        if (node.type === 'VariableDeclaration') {
+            for (const decl of node.declarations) {
+                if (decl.id.type !== 'VoidPattern') {
+                    collectPatternBindings(decl.id, bindings);
+                }
+            }
+        }
+        if (node.type === 'FunctionDeclaration' && node.id) {
+            bindings.add(node.id.name);
+        }
+        if (node.type === 'ClassDeclaration' && node.id) {
+            bindings.add(node.id.name);
+        }
+    }
+    return bindings;
+}

package/dist/passes/imports/collectRefVariables.js

@@ -0,0 +1,95 @@
+import { REF_APIS, RESPONSIVE_MODULES } from '../../constants/index.js';
+import { collectPatternBindings, collectObjectPatternBindings } from '../../utils/index.js';
+/**
+ * 收集 ref API 的别名
+ * 识别从 vitarx 或 @vitarx/responsive 导入的 ref/toRef/toRefs/shallowRef/computed
+ * @param program - AST Program 节点
+ * @returns ref API 别名映射
+ */
+export function collectRefApiAliases(program) {
+    const aliases = {
+        ref: null,
+        toRef: null,
+        toRefs: null,
+        shallowRef: null,
+        computed: null
+    };
+    for (const node of program.body) {
+        if (node.type !== 'ImportDeclaration')
+            continue;
+        const source = node.source.value;
+        if (!RESPONSIVE_MODULES.includes(source))
+            continue;
+        for (const specifier of node.specifiers) {
+            if (specifier.type !== 'ImportSpecifier')
+                continue;
+            const importedName = specifier.imported.type === 'Identifier'
+                ? specifier.imported.name
+                : specifier.imported.value;
+            if (Object.values(REF_APIS).includes(importedName)) {
+                aliases[importedName] = specifier.local.name;
+            }
+        }
+    }
+    return aliases;
+}
+/**
+ * 收集通过 ref API 定义的变量
+ * 包括直接赋值和 toRefs 解构
+ * @param program - AST Program 节点
+ * @param refApiAliases - ref API 别名映射
+ * @returns ref 变量名集合
+ */
+export function collectRefVariables(program, refApiAliases) {
+    const refVariables = new Set();
+    const { refApiLocalNames, toRefsLocalNames } = buildApiNameSets(refApiAliases);
+    for (const node of program.body) {
+        if (node.type !== 'VariableDeclaration')
+            continue;
+        for (const decl of node.declarations) {
+            if (!decl.init)
+                continue;
+            if (decl.id.type === 'VoidPattern')
+                continue;
+            const init = decl.init;
+            if (init.type !== 'CallExpression' || init.callee.type !== 'Identifier') {
+                continue;
+            }
+            const calleeName = init.callee.name;
+            if (toRefsLocalNames.has(calleeName) && decl.id.type === 'ObjectPattern') {
+                collectObjectPatternBindings(decl.id, refVariables);
+            }
+            else if (refApiLocalNames.has(calleeName)) {
+                collectPatternBindings(decl.id, refVariables);
+            }
+        }
+    }
+    return refVariables;
+}
+/**
+ * 构建 API 名称集合
+ */
+function buildApiNameSets(refApiAliases) {
+    const refApiLocalNames = new Set();
+    const toRefsLocalNames = new Set();
+    for (const key of Object.keys(refApiAliases)) {
+        const alias = refApiAliases[key];
+        if (alias) {
+            if (key === 'toRefs') {
+                toRefsLocalNames.add(alias);
+            }
+            else {
+                refApiLocalNames.add(alias);
+            }
+        }
+        else {
+            if (key === 'toRefs') {
+                toRefsLocalNames.add(key);
+            }
+            else {
+                refApiLocalNames.add(key);
+            }
+        }
+    }
+    return { refApiLocalNames, toRefsLocalNames };
+}

package/dist/passes/imports/index.js

@@ -0,0 +1,7 @@
+/**
+ * 导入处理模块
+ * @module passes/imports
+ */
+export { collectExistingImports, collectLocalBindings } from './collectImports.js';
+export { collectRefApiAliases, collectRefVariables } from './collectRefVariables.js';
+export { injectImports } from './injectImports.js';

package/dist/passes/imports/injectImports.js

@@ -0,0 +1,96 @@
+/**
+ * 导入注入模块
+ * 负责动态注入 vitarx 导入语句
+ * @module passes/imports/injectImports
+ */
+import * as t from '@babel/types';
+import { VITARX_MODULE } from '../../constants/index.js';
+/**
+ * API 导入配置
+ * 定义需要注入的 API 及其与 ImportInfo 的映射关系
+ */
+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: 'withDirectives', importKey: 'withDirectives' },
+    { name: 'unref', importKey: 'unref' },
+    { name: 'isRef', importKey: 'isRef' }
+];
+/**
+ * 注入 vitarx 导入
+ * 根据已使用的 API 动态生成导入语句
+ * @param program - AST Program 节点
+ * @param ctx - 转换上下文
+ */
+export function injectImports(program, ctx) {
+    if (!needsInject(ctx))
+        return;
+    const existingVitarxImport = findExistingVitarxImport(program);
+    if (existingVitarxImport) {
+        appendImportSpecifiers(existingVitarxImport, ctx);
+    }
+    else {
+        const specifiers = buildImportSpecifiers(ctx);
+        if (specifiers.length === 0)
+            return;
+        const importDecl = t.importDeclaration(specifiers, t.stringLiteral(VITARX_MODULE));
+        program.body.unshift(importDecl);
+    }
+}
+/**
+ * 查找已存在的 vitarx 导入语句
+ */
+function findExistingVitarxImport(program) {
+    for (const node of program.body) {
+        if (node.type === 'ImportDeclaration' && node.source.value === VITARX_MODULE) {
+            return node;
+        }
+    }
+    return null;
+}
+/**
+ * 向已存在的导入语句追加说明符
+ */
+function appendImportSpecifiers(importDecl, ctx) {
+    const existingLocals = new Set();
+    for (const spec of importDecl.specifiers) {
+        if (spec.type === 'ImportSpecifier') {
+            existingLocals.add(spec.local.name);
+        }
+    }
+    for (const { name, importKey } of API_IMPORT_CONFIG) {
+        if (!ctx.imports[importKey])
+            continue;
+        const alias = ctx.vitarxAliases[name];
+        const localName = alias || name;
+        if (existingLocals.has(localName))
+            continue;
+        const imported = t.identifier(name);
+        const local = t.identifier(localName);
+        importDecl.specifiers.push(t.importSpecifier(local, imported));
+    }
+}
+/**
+ * 检查是否需要注入导入
+ */
+function needsInject(ctx) {
+    return Object.values(ctx.imports).some(Boolean);
+}
+/**
+ * 构建导入说明符列表
+ */
+function buildImportSpecifiers(ctx) {
+    const specifiers = [];
+    for (const { name, importKey } of API_IMPORT_CONFIG) {
+        if (ctx.imports[importKey]) {
+            const alias = ctx.vitarxAliases[name];
+            const imported = t.identifier(name);
+            const local = alias ? t.identifier(alias) : imported;
+            specifiers.push(t.importSpecifier(local, imported));
+        }
+    }
+    return specifiers;
+}

package/dist/passes/index.js

@@ -0,0 +1,16 @@
+/**
+ * 编译转换处理模块
+ * @module passes
+ */
+// 导入处理
+export { collectExistingImports, collectLocalBindings, collectRefApiAliases, collectRefVariables, injectImports } from './imports/index.js';
+// 编译宏组件
+export { processPureCompileComponent, processSwitch, processIfBlock } from './components/index.js';
+// 指令处理
+export { processVIfChain, processDirectives } from './directives/index.js';
+// JSX 处理
+export { processChildren, processJSXElement, transformJSXElement, processJSXFragment } from './jsx/index.js';
+// Props 处理
+export { processProps } from './props/index.js';
+// HMR 注入
+export { injectHMRSupport } from './hmr/index.js';

package/dist/passes/jsx/index.js

@@ -0,0 +1,7 @@
+/**
+ * JSX 处理模块
+ * @module passes/jsx
+ */
+export { processChildren } from './processChildren.js';
+export { processJSXElement, transformJSXElement } from './processJSXElement.js';
+export { processJSXFragment } from './processJSXFragment.js';

package/dist/passes/jsx/processChildren.js

@@ -0,0 +1,114 @@
+/**
+ * 子元素处理模块
+ * 处理 JSX 元素的子节点
+ * @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 { markImport } from '../../context.js';
+import { addPureComment, createAccessCall, createBinaryBranch, createDynamicCall, getAlias } from '../../utils/index.js';
+/**
+ * 处理子节点数组
+ * @param children - 子节点数组
+ * @param ctx - 转换上下文
+ * @returns 处理后的表达式数组
+ */
+export function processChildren(children, ctx) {
+    const result = [];
+    for (const child of children) {
+        const processed = processChildNode(child, ctx);
+        if (processed !== null) {
+            result.push(processed);
+        }
+    }
+    return result;
+}
+/**
+ * 处理单个子节点
+ */
+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);
+    }
+    // JSX 展开子元素
+    if (node.type === 'JSXSpreadChild') {
+        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)) {
+        markImport(ctx, 'access');
+        const accessAlias = getAlias(ctx.vitarxAliases, 'access');
+        return createAccessCall(node.object, node.property, accessAlias);
+    }
+    // 条件表达式
+    if (isConditionalExpression(node)) {
+        return processConditionalExpression(node, ctx);
+    }
+    // 逻辑表达式
+    if (isLogicalExpression(node)) {
+        markImport(ctx, 'dynamic');
+        const dynamicAlias = getAlias(ctx.vitarxAliases, 'dynamic');
+        return addPureComment(createDynamicCall(node, dynamicAlias));
+    }
+    // 调用表达式
+    if (node.type === 'CallExpression') {
+        return node;
+    }
+    return node;
+}
+/**
+ * 处理子表达式
+ */
+function processChildExpression(expr, ctx) {
+    if (isIdentifier(expr)) {
+        return expr;
+    }
+    if (isMemberExpression(expr)) {
+        markImport(ctx, 'access');
+        const accessAlias = getAlias(ctx.vitarxAliases, 'access');
+        return createAccessCall(expr.object, expr.property, accessAlias);
+    }
+    if (isConditionalExpression(expr)) {
+        return processConditionalExpression(expr, ctx);
+    }
+    if (isLogicalExpression(expr)) {
+        markImport(ctx, 'dynamic');
+        const dynamicAlias = getAlias(ctx.vitarxAliases, 'dynamic');
+        return addPureComment(createDynamicCall(expr, dynamicAlias));
+    }
+    return expr;
+}
+/**
+ * 处理条件表达式
+ * 转换为 branch 调用
+ */
+function processConditionalExpression(node, ctx) {
+    const { test, consequent, alternate } = node;
+    // 处理分支
+    const processedConsequent = processChildNode(consequent, ctx) || t.nullLiteral();
+    const processedAlternate = processChildNode(alternate, ctx) || t.nullLiteral();
+    // 使用公共的 createBinaryBranch
+    return createBinaryBranch(test, processedConsequent, processedAlternate, ctx);
+}