@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.5 → 0.1.0-beta.7

package/README.md

@@ -4,11 +4,11 @@
 
 ## 功能
 
-- 🚀 **多框架支持**: 模块化设计，当前支持 JSX，未来将支持 Vue
+- 🚀 **多框架支持**: 支持 JSX、TSX 和 Vue 文件
 - 📦 **自动元素标记**: 为非 Three.js Fiber 和非 Drei 的元素自动添加 nocode 标识
 - 🔄 **数组上下文检测**: 智能识别数组映射，添加索引信息
-- 🛠️ **可配置**: 支持自定义配置选项
-- 📝 **详细日志**: 提供完整的调试信息
+- 🎯 **简单配置**: 开箱即用，仅需最少配置
+- ⚡️ **高性能**: 优化的编译过程，快速处理
 
 ## 安装
 
@@ -28,13 +28,15 @@ import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
     plugins: [
-        componentCompiler(),
+        componentCompiler(), // 使用默认配置
         // 其他插件...
     ],
 });
 ```
 
-### 自定义配置
+### 启用调试日志
+
+如果需要查看编译过程的详细日志：
 
 ```javascript
 import { defineConfig } from 'vite';
@@ -43,27 +45,21 @@ import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 export default defineConfig({
     plugins: [
         componentCompiler({
-            validExtensions: new Set(['.jsx', '.tsx']), // 支持的文件扩展名
             enableLogging: true, // 启用调试日志
-            threeFiberElems: [
-                /* 自定义列表 */
-            ], // 自定义 Three.js 元素
-            dreiElems: [
-                /* 自定义列表 */
-            ], // 自定义 Drei 元素
         }),
+        // 其他插件...
     ],
 });
 ```
 
 ## 工作原理
 
-插件会扫描 `.jsx` 文件中的 JSX 元素，对于不在 Three.js Fiber 元素列表和 Drei 元素列表中的元素，自动添加以下属性：
+插件会扫描 `.jsx`、`.tsx` 和 `.vue` 文件中的元素，对于不在 Three.js Fiber 元素列表和 Drei 元素列表中的元素，自动添加以下属性：
 
 - `data-nocode-id`: 格式为 `文件路径:行号:列号`
 - `data-nocode-name`: 元素名称
 - `data-nocode-array`: 当元素在数组映射中时，包含数组名称
-- `data-nocode-index`: 当元素在数组映射中时，包含索引变量
+- `data-nocode-content`: 元素content内容
 
 ## 示例
 
@@ -106,7 +102,7 @@ function App() {
 该插件采用模块化设计，支持多种前端框架：
 
 - **JSX/TSX**: ✅ 已实现
-- **Vue**: 🚧 接口已预留，等待实现
+- **Vue**: ✅ 已实现
 
 详细架构说明请参考 [ARCHITECTURE.md](./ARCHITECTURE.md)
 

package/dist/index.d.ts

@@ -1,8 +1,19 @@
 import type { Plugin } from 'vite';
-import type { CompilerOptions } from './types';
 /**
  * 创建 nocode 编译器插件
  * @param options 编译器选项
  * @returns Vite 插件
  */
-export declare function componentCompiler(options?: Partial<CompilerOptions>): Plugin;
+/**
+ * 创建 nocode 编译器插件，默认处理所有 jsx、tsx 和 vue 文件
+ * @param options 编译器选项
+ * @returns Vite 插件
+ */
+export interface CompilerPluginOptions {
+    /**
+     * 是否启用日志
+     * @default false
+     */
+    enableLogging?: boolean;
+}
+export declare function componentCompiler(options?: CompilerPluginOptions): Plugin;

package/dist/index.js

@@ -1,50 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentCompiler = componentCompiler;
-const constants_1 = require("./utils/constants");
-const base_compiler_1 = require("./modules/base-compiler");
-const jsx_compiler_1 = require("./modules/jsx-compiler");
-const utils_1 = require("./utils/utils");
-/**
- * 创建 nocode 编译器插件
- * @param options 编译器选项
- * @returns Vite 插件
- */
+const nocode_compiler_core_1 = require("@mcopilot-nocode/nocode-compiler-core");
 function componentCompiler(options = {}) {
-    // 合并默认配置
-    const config = {
-        ...constants_1.DEFAULT_CONFIG,
-        ...options,
-        validExtensions: new Set([...Array.from(constants_1.DEFAULT_CONFIG.validExtensions), ...(options.validExtensions ? Array.from(options.validExtensions) : [])]),
-        threeFiberElems: options.threeFiberElems || constants_1.DEFAULT_CONFIG.threeFiberElems,
-        dreiElems: options.dreiElems || constants_1.DEFAULT_CONFIG.dreiElems,
+    const { enableLogging = false } = options;
+    // 构建基础配置
+    const baseConfig = {
+        validExtensions: new Set(['.jsx', '.tsx', '.vue']),
+        threeFiberElems: nocode_compiler_core_1.DEFAULT_CONFIG.threeFiberElems,
+        dreiElems: nocode_compiler_core_1.DEFAULT_CONFIG.dreiElems,
+        enableLogging,
     };
     // 创建编译器注册表
-    const registry = new base_compiler_1.CompilerRegistry();
-    // 注册 JSX 编译器
+    const registry = new nocode_compiler_core_1.CompilerRegistry();
+    // 注册 JSX/TSX 编译器
     registry.register({
-        name: 'jsx',
-        supportedExtensions: jsx_compiler_1.JSXCompiler.supportedExtensions,
-        CompilerClass: jsx_compiler_1.JSXCompiler,
+        extensionName: 'jsx',
+        supportedExtensions: ['.jsx', '.tsx'],
+        CompilerClass: nocode_compiler_core_1.JSXCompiler,
+    });
+    // 注册 Vue 编译器
+    registry.register({
+        extensionName: 'vue',
+        supportedExtensions: ['.vue'],
+        CompilerClass: nocode_compiler_core_1.VueCompiler,
     });
-    // 未来可以在这里注册 Vue 编译器
-    // registry.register({
-    //     name: 'vue',
-    //     supportedExtensions: VueCompiler.supportedExtensions,
-    //     CompilerClass: VueCompiler,
-    // });
     // 创建统计管理器
-    const statsManager = new utils_1.StatsManager();
+    const statsManager = new nocode_compiler_core_1.StatsManager();
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
         async transform(code, id) {
             // 获取适合的编译器
             const compiler = registry.getCompilerForFile(id, {
-                validExtensions: config.validExtensions,
-                threeFiberElems: config.threeFiberElems,
-                dreiElems: config.dreiElems,
-                enableLogging: config.enableLogging,
+                validExtensions: baseConfig.validExtensions,
+                threeFiberElems: baseConfig.threeFiberElems,
+                dreiElems: baseConfig.dreiElems,
+                enableLogging: baseConfig.enableLogging,
             });
             if (!compiler) {
                 return null;
@@ -55,7 +47,6 @@ function componentCompiler(options = {}) {
             const result = await compiler.compile(code, id);
             if (result) {
                 statsManager.incrementProcessedFiles();
-                // 这里可以添加元素计数，如果编译器返回相关信息的话
             }
             return result;
         },

package/dist/{modules → nocode-compiler-core/src/compilers}/base-compiler.d.ts

@@ -22,7 +22,7 @@ export type CompilerConstructor = new (options: any) => BaseCompiler;
  * 编译器信息接口
  */
 export interface CompilerInfo {
-    name: string;
+    extensionName: string;
     supportedExtensions: string[];
     CompilerClass: CompilerConstructor;
 }
@@ -39,7 +39,7 @@ export declare class CompilerRegistry {
     /**
      * 获取编译器信息
      */
-    getCompilerInfo(name: string): CompilerInfo | undefined;
+    getCompilerInfo(extensionName: string): CompilerInfo | undefined;
     /**
      * 获取所有支持的文件扩展名
      */

package/dist/{modules → nocode-compiler-core/src/compilers}/base-compiler.js

@@ -11,13 +11,13 @@ class CompilerRegistry {
      * 注册编译器
      */
     register(info) {
-        this.compilers.set(info.name, info);
+        this.compilers.set(info.extensionName, info);
     }
     /**
      * 获取编译器信息
      */
-    getCompilerInfo(name) {
-        return this.compilers.get(name);
+    getCompilerInfo(extensionName) {
+        return this.compilers.get(extensionName);
     }
     /**
      * 获取所有支持的文件扩展名

package/dist/{modules → nocode-compiler-core/src/compilers}/jsx-compiler.d.ts

@@ -6,12 +6,20 @@ export interface JSXCompilerOptions {
     enableLogging?: boolean;
 }
 /**
- * JSX 编译器类
- * 负责处理 JSX 文件的编译逻辑
+ * JSX/TSX 编译器类
+ * 负责处理 JSX/TSX 文件的编译逻辑
+ *
+ * 支持的文件类型：
+ * - .jsx: React JSX 文件
+ * - .tsx: React TypeScript JSX 文件
+ *
+ * 注意：
+ * - TypeScript 类型信息在编译时会被擦除
+ * - 编译器关注的是 JSX 结构而不是类型信息
  */
 export declare class JSXCompiler implements BaseCompiler {
     static readonly supportedExtensions: string[];
-    static readonly name = "jsx";
+    static readonly extensionName = "jsx";
     private options;
     private logger;
     private cwd;

package/dist/nocode-compiler-core/src/compilers/jsx-compiler.js

@@ -0,0 +1,211 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JSXCompiler = void 0;
+const parser_1 = require("@babel/parser");
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const magic_string_1 = __importDefault(require("magic-string"));
+const path_1 = __importDefault(require("path"));
+const utils_1 = require("../utils/utils");
+/**
+ * JSX/TSX 编译器类
+ * 负责处理 JSX/TSX 文件的编译逻辑
+ *
+ * 支持的文件类型：
+ * - .jsx: React JSX 文件
+ * - .tsx: React TypeScript JSX 文件
+ *
+ * 注意：
+ * - TypeScript 类型信息在编译时会被擦除
+ * - 编译器关注的是 JSX 结构而不是类型信息
+ */
+class JSXCompiler {
+    static supportedExtensions = ['.jsx', '.tsx'];
+    static extensionName = 'jsx';
+    options;
+    logger;
+    cwd;
+    constructor(options) {
+        this.options = options;
+        this.logger = new utils_1.Logger(options.enableLogging);
+        this.cwd = process.cwd();
+    }
+    /**
+     * 编译 JSX 代码
+     */
+    async compile(code, id) {
+        this.logger.log('\nProcessing file:', id);
+        if (!(0, utils_1.shouldProcessFile)(id, this.options.validExtensions)) {
+            this.logger.log('Skipping file (not .jsx or in node_modules):', id);
+            return null;
+        }
+        const relativePath = path_1.default.relative(this.cwd, id);
+        this.logger.log('Relative path:', relativePath);
+        try {
+            const parserOptions = {
+                sourceType: 'module',
+                plugins: ['jsx', 'typescript'],
+            };
+            const ast = (0, parser_1.parse)(code, parserOptions);
+            const magicString = new magic_string_1.default(code);
+            let changedElementsCount = 0;
+            let arrayContext = null;
+            // 使用 @babel/traverse 替代 estree-walker
+            (0, traverse_1.default)(ast, {
+                enter: path => {
+                    const node = path.node;
+                    // 检测数组的 map 调用
+                    if (node.type === 'CallExpression') {
+                        const callExpr = node;
+                        if (callExpr.callee.type === 'MemberExpression') {
+                            const memberExpr = callExpr.callee;
+                            if (memberExpr.property.type === 'Identifier' && memberExpr.property.name === 'map') {
+                                this.logger.log('Found array map:', node);
+                                let arrayName = null;
+                                // 获取数组名称
+                                if (memberExpr.object.type === 'Identifier') {
+                                    arrayName = memberExpr.object.name;
+                                }
+                                else if (memberExpr.object.type === 'MemberExpression') {
+                                    const innerMember = memberExpr.object;
+                                    if (innerMember.object.type === 'Identifier' && innerMember.property.type === 'Identifier') {
+                                        arrayName = `${innerMember.object.name}.${innerMember.property.name}`;
+                                    }
+                                }
+                                // 获取参数名（通常是 index）
+                                let paramName = 'index';
+                                if (callExpr.arguments.length > 0) {
+                                    const callback = callExpr.arguments[0];
+                                    if (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression') {
+                                        const func = callback;
+                                        if (func.params.length > 1 && func.params[1].type === 'Identifier') {
+                                            paramName = func.params[1].name;
+                                        }
+                                    }
+                                }
+                                if (arrayName) {
+                                    arrayContext = { arrayName, paramName };
+                                    this.logger.log('Found array map:', { arrayName, paramName });
+                                }
+                            }
+                        }
+                    }
+                    // 处理 JSX 开标签
+                    if (node.type === 'JSXOpeningElement') {
+                        const jsxOpeningElement = node;
+                        let elementName;
+                        // 获取元素名称
+                        if (jsxOpeningElement.name.type === 'JSXIdentifier') {
+                            elementName = jsxOpeningElement.name.name;
+                        }
+                        else if (jsxOpeningElement.name.type === 'JSXMemberExpression') {
+                            const memberExpr = jsxOpeningElement.name;
+                            if (memberExpr.object.type === 'JSXIdentifier' && memberExpr.property.type === 'JSXIdentifier') {
+                                elementName = `${memberExpr.object.name}.${memberExpr.property.name}`;
+                            }
+                            else {
+                                return;
+                            }
+                        }
+                        else {
+                            return;
+                        }
+                        // 跳过 Fragment
+                        if (elementName === 'Fragment' || elementName === 'React.Fragment') {
+                            return;
+                        }
+                        const shouldTag = (0, utils_1.shouldTagElement)(elementName, this.options.threeFiberElems, this.options.dreiElems);
+                        this.logger.log('Found JSX element:', {
+                            elementName,
+                            shouldTag,
+                            hasArrayContext: !!arrayContext,
+                        });
+                        if (shouldTag) {
+                            const line = node.loc?.start?.line ?? 0;
+                            const col = node.loc?.start?.column ?? 0;
+                            // 收集元素内容
+                            const content = {};
+                            // 收集属性
+                            jsxOpeningElement.attributes.forEach(attr => {
+                                if (attr.type === 'JSXAttribute') {
+                                    const attrName = attr.name.name;
+                                    if (attrName === 'placeholder' || attrName === 'className') {
+                                        if (attr.value?.type === 'StringLiteral') {
+                                            content[attrName] = attr.value.value;
+                                        }
+                                        else if (attr.value?.type === 'JSXExpressionContainer' && attr.value.expression.type === 'StringLiteral') {
+                                            content[attrName] = attr.value.expression.value;
+                                        }
+                                    }
+                                }
+                            });
+                            // 收集文本内容
+                            const parentPath = path.parentPath;
+                            if (parentPath && parentPath.node.type === 'JSXElement') {
+                                const textContent = parentPath.node.children
+                                    .map((child) => {
+                                    if (child.type === 'JSXText') {
+                                        return child.value.trim();
+                                    }
+                                    else if (child.type === 'JSXExpressionContainer' && child.expression.type === 'StringLiteral') {
+                                        return child.expression.value;
+                                    }
+                                    return '';
+                                })
+                                    .filter(Boolean)
+                                    .join(' ')
+                                    .trim();
+                                if (textContent) {
+                                    content.text = textContent;
+                                }
+                            }
+                            const attributes = (0, utils_1.generateDataAttributes)(relativePath, line, col, elementName, content, arrayContext);
+                            this.logger.log('Adding attributes:', attributes);
+                            // 使用 path 获取准确的节点位置信息
+                            const nameEndPosition = jsxOpeningElement.name.end;
+                            if (nameEndPosition !== null) {
+                                magicString.appendLeft(nameEndPosition, attributes);
+                                changedElementsCount++;
+                            }
+                        }
+                    }
+                },
+                exit: path => {
+                    const node = path.node;
+                    // 离开 map 调用时清除上下文
+                    if (node.type === 'CallExpression') {
+                        const callExpr = node;
+                        if (callExpr.callee.type === 'MemberExpression') {
+                            const memberExpr = callExpr.callee;
+                            if (memberExpr.property.type === 'Identifier' && memberExpr.property.name === 'map') {
+                                if (arrayContext) {
+                                    this.logger.log('Leaving array map context:', arrayContext.arrayName);
+                                }
+                                arrayContext = null;
+                            }
+                        }
+                    }
+                },
+            });
+            this.logger.log('File processing complete:', {
+                file: relativePath,
+                elementsChanged: changedElementsCount,
+            });
+            if (changedElementsCount > 0) {
+                this.logger.log('Modified code preview:', magicString.toString().slice(0, 500) + '...');
+            }
+            return {
+                code: magicString.toString(),
+                map: magicString.generateMap({ hires: true }),
+            };
+        }
+        catch (error) {
+            this.logger.error('Error processing file:', relativePath);
+            this.logger.error(error);
+            return null;
+        }
+    }
+}
+exports.JSXCompiler = JSXCompiler;

package/dist/nocode-compiler-core/src/compilers/vue-compiler.d.ts

@@ -0,0 +1,26 @@
+import type { BaseCompiler } from './base-compiler';
+export interface VueCompilerOptions {
+    validExtensions: Set<string>;
+    threeFiberElems: string[];
+    dreiElems: string[];
+    enableLogging?: boolean;
+}
+/**
+ * Vue 编译器类
+ * 负责处理 Vue 文件的编译逻辑
+ */
+export declare class VueCompiler implements BaseCompiler {
+    static readonly supportedExtensions: string[];
+    static readonly extensionName = "vue";
+    private options;
+    private logger;
+    private cwd;
+    constructor(options: VueCompilerOptions);
+    /**
+     * 编译 Vue 代码
+     */
+    compile(code: string, id: string): Promise<{
+        code: string;
+        map: any;
+    } | null>;
+}

package/dist/nocode-compiler-core/src/compilers/vue-compiler.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VueCompiler = void 0;
+const compiler_sfc_1 = require("@vue/compiler-sfc");
+const magic_string_1 = __importDefault(require("magic-string"));
+const path_1 = __importDefault(require("path"));
+const utils_1 = require("../utils/utils");
+/**
+ * Vue 编译器类
+ * 负责处理 Vue 文件的编译逻辑
+ */
+class VueCompiler {
+    static supportedExtensions = ['.vue'];
+    static extensionName = 'vue';
+    options;
+    logger;
+    cwd;
+    constructor(options) {
+        this.options = options;
+        this.logger = new utils_1.Logger(options.enableLogging);
+        this.cwd = process.cwd();
+    }
+    /**
+     * 编译 Vue 代码
+     */
+    async compile(code, id) {
+        this.logger.log('\nProcessing file:', id);
+        if (!(0, utils_1.shouldProcessFile)(id, this.options.validExtensions)) {
+            this.logger.log('Skipping file (not .vue or in node_modules):', id);
+            return null;
+        }
+        const relativePath = path_1.default.relative(this.cwd, id);
+        this.logger.log('Relative path:', relativePath);
+        try {
+            // 解析Vue SFC
+            const { descriptor } = (0, compiler_sfc_1.parse)(code);
+            if (!descriptor.template) {
+                return null;
+            }
+            const magicString = new magic_string_1.default(code);
+            let changedElementsCount = 0;
+            // 获取template的AST
+            const templateAst = descriptor.template.ast;
+            if (!templateAst) {
+                return null;
+            }
+            // 递归处理AST节点
+            const processNode = (node, arrayContext = null) => {
+                if (node.type !== 1) {
+                    // 1 表示元素节点
+                    return;
+                }
+                const elementName = node.tag;
+                // 跳过内置组件
+                if (elementName === 'template' || elementName === 'slot') {
+                    return;
+                }
+                const shouldTag = (0, utils_1.shouldTagElement)(elementName, this.options.threeFiberElems, this.options.dreiElems);
+                if (shouldTag) {
+                    const line = node.loc.start.line;
+                    const col = node.loc.start.column;
+                    // 收集元素内容
+                    const content = {};
+                    // 收集属性
+                    if (node.props) {
+                        node.props.forEach((prop) => {
+                            if (prop.type === 6) {
+                                // 6 表示属性
+                                if (prop.name === 'placeholder' || prop.name === 'class') {
+                                    content[prop.name === 'class' ? 'className' : prop.name] = prop.value?.content;
+                                }
+                            }
+                        });
+                    }
+                    // 收集文本内容
+                    if (node.children) {
+                        const textContent = node.children
+                            .filter((child) => child.type === 2) // 2 表示文本节点
+                            .map((child) => child.content.trim())
+                            .filter(Boolean)
+                            .join(' ');
+                        if (textContent) {
+                            content.text = textContent;
+                        }
+                    }
+                    const attributes = (0, utils_1.generateDataAttributes)(relativePath, line, col, elementName, content, arrayContext);
+                    // 在标签名后插入属性
+                    const insertPos = node.loc.start.offset + elementName.length + 1;
+                    magicString.appendLeft(insertPos, attributes);
+                    changedElementsCount++;
+                }
+                // 处理v-for上下文
+                let vForContext = null;
+                const vForProp = node.props?.find((p) => p.type === 7 && p.name === 'for'); // 7 表示指令
+                if (vForProp) {
+                    const match = vForProp.exp?.content.match(/\((.*?),\s*(.*?)\)\s+in\s+(.*)/);
+                    if (match) {
+                        vForContext = {
+                            arrayName: match[3],
+                            paramName: match[2],
+                        };
+                    }
+                }
+                // 递归处理子节点
+                if (node.children) {
+                    node.children.forEach((child) => processNode(child, vForContext || arrayContext));
+                }
+            };
+            processNode(templateAst);
+            this.logger.log('File processing complete:', {
+                file: relativePath,
+                elementsChanged: changedElementsCount,
+            });
+            return {
+                code: magicString.toString(),
+                map: magicString.generateMap({ hires: true }),
+            };
+        }
+        catch (error) {
+            this.logger.error('Error processing file:', relativePath);
+            this.logger.error(error);
+            return null;
+        }
+    }
+}
+exports.VueCompiler = VueCompiler;

package/dist/nocode-compiler-core/src/types.d.ts

@@ -0,0 +1,9 @@
+export interface ArrayContext {
+    arrayName: string;
+    paramName: string;
+}
+export interface CompilerStats {
+    totalFiles: number;
+    processedFiles: number;
+    totalElements: number;
+}

package/dist/{utils → nocode-compiler-core/src/utils}/utils.d.ts

@@ -6,7 +6,12 @@ export declare function shouldTagElement(elementName: string, threeFiberElems: s
 /**
  * 生成数据属性字符串
  */
-export declare function generateDataAttributes(relativePath: string, line: number, col: number, elementName: string, arrayContext?: ArrayContext | null): string;
+interface ElementContent {
+    text?: string;
+    placeholder?: string;
+    className?: string;
+}
+export declare function generateDataAttributes(relativePath: string, line: number, col: number, elementName: string, content?: ElementContent, arrayContext?: ArrayContext | null): string;
 /**
  * 日志记录工具
  */
@@ -31,3 +36,4 @@ export declare class StatsManager {
  * 检查文件是否应该被处理
  */
 export declare function shouldProcessFile(id: string, validExtensions: Set<string>): boolean;
+export {};

package/dist/{utils → nocode-compiler-core/src/utils}/utils.js

@@ -14,16 +14,14 @@ const path_1 = __importDefault(require("path"));
 function shouldTagElement(elementName, threeFiberElems, dreiElems) {
     return !threeFiberElems.includes(elementName) && !dreiElems.includes(elementName);
 }
-/**
- * 生成数据属性字符串
- */
-function generateDataAttributes(relativePath, line, col, elementName, arrayContext) {
+function generateDataAttributes(relativePath, line, col, elementName, content = {}, arrayContext) {
     const dataComponentId = `${relativePath}:${line}:${col}`;
     let arrayAttrs = '';
     if (arrayContext) {
-        arrayAttrs = ` data-nocode-array="${arrayContext.arrayName}" data-nocode-index="\${${arrayContext.paramName}}"`;
+        arrayAttrs = ` data-nocode-array="${arrayContext.arrayName}"`;
     }
-    return ` data-nocode-id="${dataComponentId}" data-nocode-name="${elementName}"${arrayAttrs}`;
+    const contentAttr = Object.keys(content).length > 0 ? ` data-nocode-content="${encodeURIComponent(JSON.stringify(content))}"` : '';
+    return ` data-nocode-id="${dataComponentId}" data-nocode-name="${elementName}"${arrayAttrs}${contentAttr}`;
 }
 /**
  * 日志记录工具

package/dist/vite-plugin-nocode-compiler/src/index.d.ts

@@ -0,0 +1,42 @@
+import type { Plugin } from 'vite';
+/**
+ * 创建 nocode 编译器插件
+ * @param options 编译器选项
+ * @returns Vite 插件
+ */
+export type FileType = 'jsx' | 'tsx' | 'vue';
+export interface CompilerPluginOptions {
+    /**
+     * 指定要处理的文件类型
+     * @default ['jsx']
+     * @example ['jsx', 'tsx', 'vue']
+     */
+    include?: FileType[];
+    /**
+     * Three.js 相关组件配置
+     */
+    three?: {
+        /**
+         * Three.js Fiber 组件列表
+         */
+        fiberElements?: string[];
+        /**
+         * Drei 组件列表
+         */
+        dreiElements?: string[];
+    };
+    /**
+     * 调试选项
+     */
+    debug?: {
+        /**
+         * 是否启用日志
+         */
+        enableLogging?: boolean;
+        /**
+         * 是否在开发模式下跳过编译
+         */
+        skipInDev?: boolean;
+    };
+}
+export declare function componentCompiler(options?: CompilerPluginOptions): Plugin;

package/dist/vite-plugin-nocode-compiler/src/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentCompiler = componentCompiler;
+const constants_1 = require("@mcopilot-nocode/nocode-compiler-core/utils/constants");
+const base_compiler_1 = require("@mcopilot-nocode/nocode-compiler-core/compilers/base-compiler");
+const jsx_compiler_1 = require("@mcopilot-nocode/nocode-compiler-core/compilers/jsx-compiler");
+const vue_compiler_1 = require("@mcopilot-nocode/nocode-compiler-core/compilers/vue-compiler");
+const utils_1 = require("@mcopilot-nocode/nocode-compiler-core/utils/utils");
+function componentCompiler(options = {}) {
+    const { include = ['jsx'], three = {}, debug = {} } = options;
+    // 构建基础配置
+    const baseConfig = {
+        validExtensions: new Set(),
+        threeFiberElems: three.fiberElements || constants_1.DEFAULT_CONFIG.threeFiberElems,
+        dreiElems: three.dreiElements || constants_1.DEFAULT_CONFIG.dreiElems,
+        enableLogging: debug.enableLogging ?? false,
+    };
+    // 创建编译器注册表
+    const registry = new base_compiler_1.CompilerRegistry();
+    // 根据include配置注册对应的编译器
+    const hasJsxOrTsx = include.includes('jsx') || include.includes('tsx');
+    if (hasJsxOrTsx) {
+        const extensions = [];
+        if (include.includes('jsx'))
+            extensions.push('.jsx');
+        if (include.includes('tsx'))
+            extensions.push('.tsx');
+        extensions.forEach(ext => baseConfig.validExtensions.add(ext));
+        registry.register({
+            extensionName: 'jsx',
+            supportedExtensions: extensions,
+            CompilerClass: jsx_compiler_1.JSXCompiler,
+        });
+    }
+    if (include.includes('vue')) {
+        baseConfig.validExtensions.add('.vue');
+        registry.register({
+            extensionName: 'vue',
+            supportedExtensions: ['.vue'],
+            CompilerClass: vue_compiler_1.VueCompiler,
+        });
+    }
+    // 创建统计管理器
+    const statsManager = new utils_1.StatsManager();
+    return {
+        name: 'vite-plugin-nocode-compiler',
+        enforce: 'pre',
+        async transform(code, id) {
+            // 获取适合的编译器
+            const compiler = registry.getCompilerForFile(id, {
+                validExtensions: baseConfig.validExtensions,
+                threeFiberElems: baseConfig.threeFiberElems,
+                dreiElems: baseConfig.dreiElems,
+                enableLogging: baseConfig.enableLogging,
+            });
+            if (!compiler) {
+                return null;
+            }
+            // 统计文件处理
+            statsManager.incrementTotalFiles();
+            // 编译代码
+            const result = await compiler.compile(code, id);
+            if (result) {
+                statsManager.incrementProcessedFiles();
+            }
+            return result;
+        },
+    };
+}

package/dist/{types.d.ts → vite-plugin-nocode-compiler/src/types.d.ts}

@@ -1,13 +1,4 @@
 import type { Plugin } from 'vite';
-export interface ArrayContext {
-    arrayName: string;
-    paramName: string;
-}
-export interface CompilerStats {
-    totalFiles: number;
-    processedFiles: number;
-    totalElements: number;
-}
 export interface CompilerOptions {
     validExtensions?: Set<string>;
     threeFiberElems?: string[];

package/dist/vite-plugin-nocode-compiler/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.1.0-beta.5",
-    "description": "nocode编译插件",
+    "version": "0.1.0-beta.7",
+    "description": "nocode compiler plugin",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
@@ -22,9 +22,6 @@
         "vite": "^5.4.0"
     },
     "dependencies": {
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
-        "magic-string": "^0.30.0",
-        "estree-walker": "^3.0.0"
+        "@mcopilot-nocode/nocode-compiler-core": "workspace:*"
     }
 }

package/dist/modules/jsx-compiler.js

@@ -1,124 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSXCompiler = void 0;
-const parser_1 = require("@babel/parser");
-const magic_string_1 = __importDefault(require("magic-string"));
-const path_1 = __importDefault(require("path"));
-const utils_1 = require("../utils/utils");
-const estree_walker_1 = require("estree-walker");
-/**
- * JSX 编译器类
- * 负责处理 JSX 文件的编译逻辑
- */
-class JSXCompiler {
-    static supportedExtensions = ['.jsx'];
-    static name = 'jsx';
-    options;
-    logger;
-    cwd;
-    constructor(options) {
-        this.options = options;
-        this.logger = new utils_1.Logger(options.enableLogging);
-        this.cwd = process.cwd();
-    }
-    /**
-     * 编译 JSX 代码
-     */
-    async compile(code, id) {
-        this.logger.log('\nProcessing file:', id);
-        if (!(0, utils_1.shouldProcessFile)(id, this.options.validExtensions)) {
-            this.logger.log('Skipping file (not .jsx or in node_modules):', id);
-            return null;
-        }
-        const relativePath = path_1.default.relative(this.cwd, id);
-        this.logger.log('Relative path:', relativePath);
-        try {
-            const parserOptions = {
-                sourceType: 'module',
-                plugins: ['jsx'],
-            };
-            const ast = (0, parser_1.parse)(code, parserOptions);
-            const magicString = new magic_string_1.default(code);
-            let changedElementsCount = 0;
-            let currentElement = null;
-            let arrayContext = null;
-            (0, estree_walker_1.walk)(ast, {
-                enter: (node) => {
-                    // 检测数组的 map 调用
-                    if (node.type === 'CallExpression' && node.callee?.type === 'MemberExpression' && node.callee.property?.name === 'map') {
-                        this.logger.log('Found array map:', node);
-                        const callee = node.callee;
-                        const arrayName = callee.object.name || (callee.object.type === 'MemberExpression' ? `${callee.object.object.name}.${callee.object.property.name}` : null);
-                        if (arrayName) {
-                            const paramName = node.arguments[0].params?.[1]?.name || 'index';
-                            arrayContext = { arrayName, paramName };
-                            this.logger.log('Found array map:', { arrayName, paramName });
-                        }
-                    }
-                    if (node.type === 'JSXElement') {
-                        currentElement = node;
-                    }
-                    if (node.type === 'JSXOpeningElement') {
-                        const jsxNode = node;
-                        let elementName;
-                        if (jsxNode.name.type === 'JSXIdentifier') {
-                            elementName = jsxNode.name.name;
-                        }
-                        else if (jsxNode.name.type === 'JSXMemberExpression') {
-                            const memberExpr = jsxNode.name;
-                            elementName = `${memberExpr.object.name}.${memberExpr.property.name}`;
-                        }
-                        else {
-                            return;
-                        }
-                        if (elementName === 'Fragment' || elementName === 'React.Fragment') {
-                            return;
-                        }
-                        const shouldTag = (0, utils_1.shouldTagElement)(elementName, this.options.threeFiberElems, this.options.dreiElems);
-                        this.logger.log('Found JSX element:', {
-                            elementName,
-                            shouldTag,
-                            hasArrayContext: !!arrayContext,
-                        });
-                        if (shouldTag) {
-                            const line = jsxNode.loc?.start?.line ?? 0;
-                            const col = jsxNode.loc?.start?.column ?? 0;
-                            const attributes = (0, utils_1.generateDataAttributes)(relativePath, line, col, elementName, arrayContext);
-                            this.logger.log('Adding attributes:', attributes);
-                            magicString.appendLeft(jsxNode.name.end ?? 0, attributes);
-                            changedElementsCount++;
-                        }
-                    }
-                },
-                leave: (node) => {
-                    if (node.type === 'CallExpression' && node.callee?.type === 'MemberExpression' && node.callee.property?.name === 'map') {
-                        if (arrayContext) {
-                            this.logger.log('Leaving array map context:', arrayContext.arrayName);
-                        }
-                        arrayContext = null;
-                    }
-                },
-            });
-            this.logger.log('File processing complete:', {
-                file: relativePath,
-                elementsChanged: changedElementsCount,
-            });
-            if (changedElementsCount > 0) {
-                this.logger.log('Modified code preview:', magicString.toString().slice(0, 500) + '...');
-            }
-            return {
-                code: magicString.toString(),
-                map: magicString.generateMap({ hires: true }),
-            };
-        }
-        catch (error) {
-            this.logger.error('Error processing file:', relativePath);
-            this.logger.error(error);
-            return null;
-        }
-    }
-}
-exports.JSXCompiler = JSXCompiler;