@vitarx/plugin-vite 0.0.1-alpha.0

package/dist/hmr-client/index.js

@@ -0,0 +1,143 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _HMRManager_idMapToView, _HMRManager_idMapToComponent;
+import { isReactive, isRef } from 'vitarx';
+import { HMR } from '../constants/index.js';
+import { processUpdate } from './update.js';
+class HMRManager {
+    constructor() {
+        /**
+         * id模块映射到组件虚拟节点集合
+         *
+         * 模块id -> 组件虚拟节点
+         */
+        _HMRManager_idMapToView.set(this, new Map()
+        /**
+         * id映射到组件构造函数
+         */
+        );
+        /**
+         * id映射到组件构造函数
+         */
+        _HMRManager_idMapToComponent.set(this, new Map()
+        /**
+         * 获取单实例
+         */
+        );
+    }
+    /**
+     * 获取单实例
+     */
+    static get instance() {
+        if (!window[HMR.manager]) {
+            window[HMR.manager] = new HMRManager();
+        }
+        return window[HMR.manager];
+    }
+    /**
+     * 给组件绑定唯一id
+     *
+     * @param component
+     * @param id
+     */
+    bindId(component, id) {
+        if (typeof component === 'function') {
+            Object.defineProperty(component, HMR.id, { value: id });
+        }
+    }
+    /**
+     * 置换新模块
+     *
+     * 此方法提供给`jsxDev`函数调用，保持每次创建组件实例都是最新的模块！
+     * @param component
+     */
+    resolveComponent(component) {
+        const id = this.getId(component);
+        return id ? (__classPrivateFieldGet(this, _HMRManager_idMapToComponent, "f").get(id) ?? component) : component;
+    }
+    /**
+     * 恢复状态
+     *
+     * @param {ComponentView} view - 组件视图
+     * @param {string} name - 变量名称
+     * @example
+     * const state = __$VITARX_HMR$__.instance.memo(__$VITARX_HMR_VIEW_NODE$__, 'state') ?? ref(0)
+     */
+    memo(view, name) {
+        if (!view)
+            return undefined;
+        const state = view[HMR.state]?.[name];
+        // 如果是副作用，则丢弃。
+        if (!isRef(state) && !isReactive(state))
+            return undefined;
+        return state;
+    }
+    /**
+     * 注册节点
+     *
+     * @param view - 组件视图节点
+     */
+    register(view) {
+        if (!view)
+            return;
+        const component = view.component;
+        const id = this.getId(component);
+        if (__classPrivateFieldGet(this, _HMRManager_idMapToView, "f").has(id)) {
+            __classPrivateFieldGet(this, _HMRManager_idMapToView, "f").get(id).add(view);
+        }
+        else {
+            __classPrivateFieldGet(this, _HMRManager_idMapToView, "f").set(id, new Set([view]));
+        }
+    }
+    /**
+     * 获取模块id
+     *
+     * @param component
+     */
+    getId(component) {
+        return Reflect.get(component, HMR.id);
+    }
+    update(mod) {
+        if (!mod)
+            return;
+        try {
+            for (const modKey in mod) {
+                // 新模块
+                const newComponent = mod[modKey];
+                // 模块id
+                const moduleId = this.getId(newComponent);
+                // 模块ID不存在，跳过
+                if (!moduleId)
+                    continue;
+                // 模块活跃的虚拟节点集合
+                const nodes = __classPrivateFieldGet(this, _HMRManager_idMapToView, "f").get(moduleId);
+                // 模块不存在，跳过
+                if (!nodes)
+                    continue;
+                for (const node of nodes) {
+                    // 更新模块
+                    const id = this.getId(newComponent);
+                    if (id)
+                        __classPrivateFieldGet(this, _HMRManager_idMapToComponent, "f").set(id, newComponent);
+                    // 更新节点视图
+                    if (node.active && node.isMounted) {
+                        processUpdate(node, newComponent);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            if (import.meta.hot) {
+                import.meta.hot.invalidate(`[VitarxHMR]: ${e}`);
+            }
+            else {
+                throw e;
+            }
+        }
+    }
+}
+_HMRManager_idMapToView = new WeakMap(), _HMRManager_idMapToComponent = new WeakMap();
+export default HMRManager;

package/dist/hmr-client/update.js

@@ -0,0 +1,53 @@
+import { createCommentView, EffectScope, getRenderer, runComponent } from 'vitarx';
+import { diffComponentChange } from './utils.js';
+/**
+ * 处理组件更新函数
+ * @param view - 组件视图对象，包含当前组件的实例和节点信息
+ * @param newComponent - 新的组件定义，用于替换现有组件
+ */
+export function processUpdate(view, newComponent) {
+    // 获取渲染器实例
+    const renderer = getRenderer();
+    // 创建一个占位符注释节点
+    const placeholder = renderer.createComment('');
+    // 获取旧组件的DOM元素
+    const oldElement = view.node;
+    // 将占位符插入到旧元素的位置
+    renderer.insert(placeholder, oldElement);
+    // 获取组件实例
+    const instance = view.instance;
+    // 比较新旧组件的差异，检查逻辑是否有变化
+    const { logic } = diffComponentChange(view.component.toString(), newComponent.toString());
+    view.component = newComponent;
+    // 如果逻辑有变化，则完全重新挂载组件
+    if (logic) {
+        view.dispose();
+        view.mount(placeholder, 'replace');
+        return;
+    }
+    // 销毁旧作用域
+    instance.scope.dispose();
+    instance.scope = new EffectScope({
+        name: view.name,
+        errorHandler: (error, source) => {
+            instance.reportError(error, `effect:${source}`);
+        }
+    });
+    // 销毁旧的子树
+    instance.subView.dispose();
+    // 创建新的子树
+    let subView;
+    try {
+        subView = runComponent(instance, () => newComponent(view.props));
+    }
+    catch (e) {
+        instance.reportError(e, 'component:run');
+        subView = createCommentView(`Component<${view.name}>:failed`);
+    }
+    ;
+    instance.subView = instance['normalizeView'](subView);
+    // 初始化新的子树
+    instance.subView.init(instance.subViewContext);
+    // 挂载新的子树
+    instance.subView.mount(placeholder, 'replace');
+}

package/dist/hmr-client/utils.js

@@ -0,0 +1,125 @@
+/**
+ * HMR 代码变更检测工具
+ * 用于判断组件代码中 UI 描述部分和非 UI 部分的变更
+ * @module hmr-client/utils
+ */
+import { parse } from 'acorn';
+import { simple as walkSimple } from 'acorn-walk';
+/**
+ * UI 相关的运行时 API 名称
+ * 这些 API 调用代表 UI 描述代码
+ */
+const UI_APIS = new Set(['createView', 'branch', 'dynamic', 'access', 'withDirectives', 'jsxDEV']);
+/**
+ * 判断标识符名称是否为 UI API
+ * 支持原始名称和带后缀的名称（如 jsxDEV$1）
+ */
+function isUIApi(name) {
+    if (UI_APIS.has(name))
+        return true;
+    // 支持带数字后缀的 createView
+    return /^jsxDEV\$\d+$/.test(name) || /^createView\$\d+$/.test(name);
+}
+/**
+ * 从函数代码中分离 UI 代码和非 UI 代码
+ * @param functionCode 完整函数代码
+ * @returns 包含逻辑代码和渲染代码的对象
+ */
+function separateLogicAndRender(functionCode) {
+    const uiNodes = [];
+    // 包装代码以便解析
+    const wrappedCode = `(${functionCode})`;
+    try {
+        const ast = parse(wrappedCode, {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            allowReturnOutsideFunction: true,
+            allowAwaitOutsideFunction: true,
+            allowImportExportEverywhere: true,
+            allowHashBang: true,
+            allowReserved: true
+        });
+        // 遍历 AST 收集所有 UI API 调用节点
+        walkSimple(ast, {
+            CallExpression(node) {
+                const callee = node.callee;
+                // 直接调用：createView(...)
+                if (callee.type === 'Identifier' && isUIApi(callee.name)) {
+                    uiNodes.push({ start: node.start, end: node.end });
+                    return;
+                }
+                // 成员调用：exports.createView(...)
+                if (callee.type === 'MemberExpression' &&
+                    callee.property.type === 'Identifier' &&
+                    isUIApi(callee.property.name)) {
+                    uiNodes.push({ start: node.start, end: node.end });
+                }
+            }
+        });
+    }
+    catch {
+        // 解析失败时，返回原始代码作为逻辑代码
+        return {
+            logicCode: functionCode.trim(),
+            renderCode: ''
+        };
+    }
+    // 按位置排序，从后向前替换以保持索引正确
+    uiNodes.sort((a, b) => b.start - a.start);
+    // 提取 UI 代码
+    const renderCode = uiNodes
+        .map(n => wrappedCode.slice(n.start, n.end))
+        .reverse()
+        .join('\n');
+    // 移除 UI 代码后的逻辑代码
+    let logicCode = wrappedCode;
+    for (const node of uiNodes) {
+        logicCode = logicCode.slice(0, node.start) + logicCode.slice(node.end);
+    }
+    return {
+        logicCode: logicCode.trim(),
+        renderCode
+    };
+}
+/**
+ * 规范化代码字符串
+ * 移除多余空白、注释等，用于比较
+ */
+function normalizeCode(code) {
+    // 移除多行注释
+    let result = code.replace(/\/\*[\s\S]*?\*\//g, '');
+    // 移除单行注释
+    result = result.replace(/\/\/.*$/gm, '');
+    // 移除多余空白
+    result = result.replace(/\s+/g, ' ');
+    // 移除首尾空白
+    return result.trim();
+}
+/**
+ * 判断两个函数组件的代码差异
+ *
+ * 分析策略：
+ * 1. 解析函数代码，提取所有 createView/branch/dynamic 等 UI API 调用
+ * 2. 将这些调用识别为 UI 描述代码
+ * 3. 其余代码识别为非 UI 代码（逻辑代码）
+ * 4. 分别比较 UI 代码和非 UI 代码是否变化
+ *
+ * @param newCode 新函数代码
+ * @param oldCode 旧函数代码
+ * @returns {ChangeCode} 变更检测结果
+ */
+export function diffComponentChange(newCode, oldCode) {
+    const { renderCode: newRenderCode, logicCode: newLogicCode } = separateLogicAndRender(newCode);
+    const { renderCode: oldRenderCode, logicCode: oldLogicCode } = separateLogicAndRender(oldCode);
+    // 规范化后比较，避免格式差异导致误判
+    const normalizedNewLogic = normalizeCode(newLogicCode);
+    const normalizedOldLogic = normalizeCode(oldLogicCode);
+    const normalizedNewRender = normalizeCode(newRenderCode);
+    const normalizedOldRender = normalizeCode(oldRenderCode);
+    return {
+        // UI 代码变化：需要重新构建视图
+        build: normalizedNewRender !== normalizedOldRender,
+        // 非 UI 代码变化：需要完全重新挂载组件
+        logic: normalizedNewLogic !== normalizedOldLogic
+    };
+}

package/dist/index.js

@@ -0,0 +1,65 @@
+import path from 'node:path';
+import { transformWithOxc } from 'vite';
+import { transform } from './transform.js';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+/**
+ * vite-plugin-vitarx
+ *
+ * 功能：
+ * - jsx -> createView 编译转换
+ * - 支持 v-if、v-else-if、v-else 、v-model 等编译宏指令
+ * - 支持 Switch , IfBlock 等编译宏组件
+ * - 开发时 HMR 热更新相关代码注入与功能支持
+ *
+ * @param _options - 暂无可选配置。
+ * @returns - vite插件对象。
+ */
+export default function vitarx(_options) {
+    let compileOptions;
+    let isDEV = false;
+    let isSSR = false;
+    let viteConfig;
+    return {
+        name: 'vite-plugin-vitarx',
+        config(config, env) {
+            isDEV = env.command === 'serve' && !env.isPreview;
+            const configSSR = !!config.build?.ssr;
+            isSSR = env.isSsrBuild === true || configSSR;
+            return {
+                oxc: {
+                    jsx: 'preserve',
+                    exclude: /\.[jt]sx$/,
+                },
+                define: {
+                    __VITARX_DEV__: JSON.stringify(isDEV),
+                    __VITARX_SSR__: JSON.stringify(isSSR)
+                },
+                resolve: {
+                    alias: {
+                        '@vitarx/vite-plugin/hmr-client': path.join(__dirname, 'hmr-client/index.js')
+                    }
+                }
+            };
+        },
+        configResolved(config) {
+            viteConfig = config;
+            const sourcemap = config.build.sourcemap;
+            compileOptions = {
+                dev: isDEV,
+                ssr: isSSR,
+                hmr: isDEV && !isSSR,
+                runtimeModule: 'vitarx',
+                sourceMap: sourcemap === 'inline' ? 'inline' : sourcemap === true ? 'both' : false
+            };
+        },
+        async transform(code, id) {
+            const result = await transform(code, id, compileOptions);
+            if (result) {
+                return await transformWithOxc(result.code, id, {
+                    jsx: 'preserve'
+                }, result.map, viteConfig);
+            }
+            return result;
+        }
+    };
+}

package/dist/passes/components/ifBlock.js

@@ -0,0 +1,42 @@
+import { isJSXElement } from '@babel/types';
+import { createError } from '../../error.js';
+import { collectVIfChainInfo, createArrowFunction, createBranch, filterWhitespaceChildren, hasDirective, removeVDirectives, validateVIfChain } from '../../utils/index.js';
+/**
+ * 处理 IfBlock 组件
+ */
+export function processIfBlock(path, ctx) {
+    const children = filterWhitespaceChildren(path.node.children);
+    if (children.length === 0) {
+        throw createError('E014', path.node);
+    }
+    validateChildrenType(children);
+    const jsxChildren = children;
+    validateVIfChain(jsxChildren);
+    const { nodes, conditions } = collectVIfChainInfo(jsxChildren);
+    nodes.forEach(node => removeVDirectives(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);
+}
+/**
+ * 验证子元素类型
+ */
+function validateChildrenType(children) {
+    for (const child of children) {
+        if (!isJSXElement(child)) {
+            throw createError('E008', child, 'IfBlock children must be JSX elements with v-if directives');
+        }
+        if (!hasVIfChainDirective(child)) {
+            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/index.js

@@ -0,0 +1,24 @@
+import { getJSXElementName, isPureCompileComponent } from '../../utils/index.js';
+import { processIfBlock } from './ifBlock.js';
+import { processSwitch } from './switch.js';
+/**
+ * 处理纯编译组件
+ * 根据组件名称分发到对应的处理器
+ * @param path - JSX 元素路径
+ * @param ctx - 转换上下文
+ */
+export function processPureCompileComponent(path, ctx) {
+    const name = getJSXElementName(path.node);
+    if (!name || !isPureCompileComponent(name))
+        return;
+    switch (name) {
+        case 'Switch':
+            processSwitch(path, ctx);
+            break;
+        case 'IfBlock':
+            processIfBlock(path, ctx);
+            break;
+    }
+}
+export { processSwitch } from './switch.js';
+export { processIfBlock } from './ifBlock.js';

package/dist/passes/components/switch.js

@@ -0,0 +1,102 @@
+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';
+/**
+ * 处理 Switch 组件
+ * @param path - JSX 元素路径
+ * @param ctx - 转换上下文
+ */
+export function processSwitch(path, ctx) {
+    const children = path.node.children;
+    // 获取 fallback 属性
+    const fallbackValue = extractFallbackValue(path.node);
+    // 收集 Match 子节点
+    const matchNodes = collectMatchNodes(children);
+    // 构建条件和分支
+    const { conditions, branches } = buildConditionsAndBranches(matchNodes);
+    // 添加 fallback 分支
+    if (fallbackValue) {
+        conditions.push(t.booleanLiteral(true));
+        branches.push(createArrowFunction(fallbackValue));
+    }
+    // 生成 branch 调用
+    // Switch 的 when 条件如果是标识符，需要 unref
+    const branchCall = createBranch({ conditions, branches, useRef: true }, ctx);
+    if (path.node.loc) {
+        branchCall.loc = path.node.loc;
+    }
+    path.replaceWith(branchCall);
+}
+/**
+ * 提取 fallback 属性值
+ */
+function extractFallbackValue(node) {
+    const fallbackAttr = getJSXAttributeByName(node, 'fallback');
+    if (!fallbackAttr?.value)
+        return null;
+    if (fallbackAttr.value.type === 'JSXExpressionContainer') {
+        return fallbackAttr.value.expression;
+    }
+    return fallbackAttr.value;
+}
+/**
+ * 收集 Match 子节点
+ */
+function collectMatchNodes(children) {
+    const matchNodes = [];
+    for (const child of children) {
+        if (isJSXText(child))
+            continue;
+        if (!isJSXElement(child)) {
+            throw createError('E006', child, 'Switch children must be Match components');
+        }
+        const childName = getJSXElementName(child);
+        if (childName === 'Match') {
+            matchNodes.push(child);
+        }
+        else {
+            throw createError('E006', child, `Invalid child "${childName}" in Switch`);
+        }
+    }
+    if (matchNodes.length === 0) {
+        throw createError('E015', undefined);
+    }
+    return matchNodes;
+}
+/**
+ * 构建条件数组和分支数组
+ */
+function buildConditionsAndBranches(matchNodes) {
+    const conditions = [];
+    const branches = [];
+    for (const matchNode of matchNodes) {
+        const whenAttr = getJSXAttributeByName(matchNode, 'when');
+        if (!whenAttr?.value) {
+            throw createError('E007', matchNode);
+        }
+        // 提取 when 条件
+        const whenExpr = whenAttr.value.type === 'JSXExpressionContainer'
+            ? 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);
+        }
+        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 };
+}

package/dist/passes/directives/index.js

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

package/dist/passes/directives/processDirectives.js

@@ -0,0 +1,46 @@
+/**
+ * 指令处理模块
+ * 处理 v-show 等指令
+ * @module passes/directives/processDirectives
+ */
+import * as t from '@babel/types';
+import { isIdentifier } from '@babel/types';
+import { markImport } from '../../context.js';
+import { addPureComment, createWithDirectivesCall, getAlias } from '../../utils/index.js';
+/**
+ * 处理指令
+ * 将指令转换为 withDirectives 调用
+ * @param viewCall - 视图调用表达式
+ * @param directives - 指令映射
+ * @param ctx - 转换上下文
+ * @returns 处理后的调用表达式
+ */
+export function processDirectives(viewCall, directives, ctx) {
+    if (directives.size === 0) {
+        return viewCall;
+    }
+    const directiveArray = [];
+    for (const [name, value] of directives) {
+        const directiveName = name.slice(2); // 移除 'v-' 前缀
+        const directiveValue = buildDirectiveValue(value, ctx);
+        directiveArray.push([directiveName, directiveValue]);
+    }
+    markImport(ctx, 'withDirectives');
+    const withDirectivesAlias = getAlias(ctx.vitarxAliases, 'withDirectives');
+    return addPureComment(createWithDirectivesCall(viewCall, directiveArray, withDirectivesAlias));
+}
+/**
+ * 构建指令值对象
+ */
+function buildDirectiveValue(value, ctx) {
+    if (isIdentifier(value)) {
+        markImport(ctx, 'unref');
+        const unrefAlias = getAlias(ctx.vitarxAliases, 'unref');
+        return t.objectExpression([
+            t.objectMethod('get', t.identifier('value'), [], t.blockStatement([t.returnStatement(t.callExpression(t.identifier(unrefAlias), [value]))]))
+        ]);
+    }
+    return t.objectExpression([
+        t.objectMethod('get', t.identifier('value'), [], t.blockStatement([t.returnStatement(value)]))
+    ]);
+}

package/dist/passes/directives/vIf.js

@@ -0,0 +1,64 @@
+import * as t from '@babel/types';
+import { isJSXElement, isJSXText } from '@babel/types';
+import { collectFragmentVIfChains, createArrowFunction, createBranch, isWhitespaceJSXText, removeVDirectives } from '../../utils/index.js';
+/**
+ * 处理 Fragment 中的 v-if 链
+ * @param path - JSX Fragment 路径
+ * @param ctx - 转换上下文
+ * @param transformJSXElement - JSX 元素转换函数
+ */
+export function processVIfChain(path, ctx, transformJSXElement) {
+    const children = path.node.children;
+    const chains = collectFragmentVIfChains(children);
+    if (chains.length === 0)
+        return;
+    // 从后向前处理链，避免索引偏移问题
+    for (let c = chains.length - 1; c >= 0; c--) {
+        processVIfChainItem(chains[c], children, ctx, transformJSXElement);
+    }
+    // 清理已处理的节点
+    cleanupProcessedChildren(path, children);
+}
+/**
+ * 处理单个 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];
+        if (isJSXElement(child) && child === nodes[0]) {
+            start = i;
+            break;
+        }
+    }
+    // 移除指令并转换节点
+    const branches = [];
+    for (const node of nodes) {
+        removeVDirectives(node);
+        const transformedNode = transformJSXElement(node, ctx, false);
+        if (transformedNode) {
+            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++) {
+            children[k] = t.nullLiteral();
+        }
+    }
+}
+/**
+ * 清理已处理的子节点
+ */
+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/index.js

@@ -0,0 +1,5 @@
+/**
+ * HMR 注入模块入口
+ * @module passes/hmr
+ */
+export { injectHMRSupport } from './inject.js';