@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.1

package/README.md

@@ -0,0 +1,129 @@
+# @meituan-nocode/vite-plugin-nocode-compiler
+
+一个用于 Vite 的 nocode 编译插件，为 JSX 元素自动添加 nocode 所需的标识属性。
+
+## 功能
+
+- 🚀 **多框架支持**: 模块化设计，当前支持 JSX，未来将支持 Vue
+- 📦 **自动元素标记**: 为非 Three.js Fiber 和非 Drei 的元素自动添加 nocode 标识
+- 🔄 **数组上下文检测**: 智能识别数组映射，添加索引信息
+- 🛠️ **可配置**: 支持自定义配置选项
+- 📝 **详细日志**: 提供完整的调试信息
+
+## 安装
+
+```bash
+npm install @meituan-nocode/vite-plugin-nocode-compiler --save-dev
+```
+
+## 使用
+
+### 基础使用
+
+在你的 `vite.config.js` 或 `vite.config.ts` 中：
+
+```javascript
+import { defineConfig } from 'vite';
+import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+
+export default defineConfig({
+    plugins: [
+        componentCompiler(),
+        // 其他插件...
+    ],
+});
+```
+
+### 自定义配置
+
+```javascript
+import { defineConfig } from 'vite';
+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 元素列表中的元素，自动添加以下属性：
+
+- `data-nocode-id`: 格式为 `文件路径:行号:列号`
+- `data-nocode-name`: 元素名称
+- `data-nocode-array`: 当元素在数组映射中时，包含数组名称
+- `data-nocode-index`: 当元素在数组映射中时，包含索引变量
+
+## 示例
+
+输入：
+
+```jsx
+function App() {
+    return (
+        <div>
+            <button>Click me</button>
+            {items.map((item, index) => (
+                <span key={item.id}>{item.name}</span>
+            ))}
+        </div>
+    );
+}
+```
+
+输出：
+
+```jsx
+function App() {
+    return (
+        <div data-nocode-id='App.jsx:3:4' data-nocode-name='div'>
+            <button data-nocode-id='App.jsx:4:6' data-nocode-name='button'>
+                Click me
+            </button>
+            {items.map((item, index) => (
+                <span data-nocode-id='App.jsx:6:8' data-nocode-name='span' data-nocode-array='items' data-nocode-index='${index}' key={item.id}>
+                    {item.name}
+                </span>
+            ))}
+        </div>
+    );
+}
+```
+
+## 架构
+
+该插件采用模块化设计，支持多种前端框架：
+
+- **JSX/TSX**: ✅ 已实现
+- **Vue**: 🚧 接口已预留，等待实现
+
+详细架构说明请参考 [ARCHITECTURE.md](./ARCHITECTURE.md)
+
+## 开发
+
+```bash
+# 构建
+npm run build
+
+# 开发模式（监听文件变化）
+npm run dev
+```
+
+## 扩展支持
+
+如需添加新框架支持，请参考架构文档中的扩展指南。
+
+## License
+
+ISC

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'vite';
+import type { CompilerOptions } from './types';
+/**
+ * 创建 nocode 编译器插件
+ * @param options 编译器选项
+ * @returns Vite 插件
+ */
+export declare function componentCompiler(options?: Partial<CompilerOptions>): Plugin;

package/dist/index.js

@@ -0,0 +1,63 @@
+"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 插件
+ */
+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 registry = new base_compiler_1.CompilerRegistry();
+    // 注册 JSX 编译器
+    registry.register({
+        name: 'jsx',
+        supportedExtensions: jsx_compiler_1.JSXCompiler.supportedExtensions,
+        CompilerClass: jsx_compiler_1.JSXCompiler,
+    });
+    // 未来可以在这里注册 Vue 编译器
+    // registry.register({
+    //     name: 'vue',
+    //     supportedExtensions: VueCompiler.supportedExtensions,
+    //     CompilerClass: 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: config.validExtensions,
+                threeFiberElems: config.threeFiberElems,
+                dreiElems: config.dreiElems,
+                enableLogging: config.enableLogging,
+            });
+            if (!compiler) {
+                return null;
+            }
+            // 统计文件处理
+            statsManager.incrementTotalFiles();
+            // 编译代码
+            const result = await compiler.compile(code, id);
+            if (result) {
+                statsManager.incrementProcessedFiles();
+                // 这里可以添加元素计数，如果编译器返回相关信息的话
+            }
+            return result;
+        },
+    };
+}

package/dist/modules/base-compiler.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 基础编译器接口
+ * 定义所有编译器（JSX、Vue等）的通用接口
+ */
+export interface BaseCompiler {
+    /**
+     * 编译代码
+     * @param code 源代码
+     * @param id 文件路径
+     * @returns 编译结果或null（如果不需要处理）
+     */
+    compile(code: string, id: string): Promise<{
+        code: string;
+        map: any;
+    } | null>;
+}
+/**
+ * 编译器类构造函数类型
+ */
+export type CompilerConstructor = new (options: any) => BaseCompiler;
+/**
+ * 编译器信息接口
+ */
+export interface CompilerInfo {
+    name: string;
+    supportedExtensions: string[];
+    CompilerClass: CompilerConstructor;
+}
+/**
+ * 编译器注册表
+ * 管理不同类型的编译器
+ */
+export declare class CompilerRegistry {
+    private compilers;
+    /**
+     * 注册编译器
+     */
+    register(info: CompilerInfo): void;
+    /**
+     * 获取编译器信息
+     */
+    getCompilerInfo(name: string): CompilerInfo | undefined;
+    /**
+     * 获取所有支持的文件扩展名
+     */
+    getAllSupportedExtensions(): string[];
+    /**
+     * 根据文件扩展名获取合适的编译器
+     */
+    getCompilerForFile(filePath: string, options: any): BaseCompiler | null;
+}

package/dist/modules/base-compiler.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompilerRegistry = void 0;
+/**
+ * 编译器注册表
+ * 管理不同类型的编译器
+ */
+class CompilerRegistry {
+    compilers = new Map();
+    /**
+     * 注册编译器
+     */
+    register(info) {
+        this.compilers.set(info.name, info);
+    }
+    /**
+     * 获取编译器信息
+     */
+    getCompilerInfo(name) {
+        return this.compilers.get(name);
+    }
+    /**
+     * 获取所有支持的文件扩展名
+     */
+    getAllSupportedExtensions() {
+        const extensions = [];
+        for (const info of this.compilers.values()) {
+            extensions.push(...info.supportedExtensions);
+        }
+        return [...new Set(extensions)];
+    }
+    /**
+     * 根据文件扩展名获取合适的编译器
+     */
+    getCompilerForFile(filePath, options) {
+        for (const info of this.compilers.values()) {
+            if (info.supportedExtensions.some(ext => filePath.endsWith(ext))) {
+                return new info.CompilerClass(options);
+            }
+        }
+        return null;
+    }
+}
+exports.CompilerRegistry = CompilerRegistry;

package/dist/modules/jsx-compiler.d.ts

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

package/dist/modules/jsx-compiler.js

@@ -0,0 +1,158 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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");
+/**
+ * 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;
+            const estreeWalker = await Promise.resolve().then(() => __importStar(require('estree-walker')));
+            const walk = estreeWalker.walk || estreeWalker.default?.walk || estreeWalker.default;
+            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;

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+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[];
+    dreiElems?: string[];
+    enableLogging?: boolean;
+}
+export type NocodeCompilerPlugin = (options?: Partial<CompilerOptions>) => Plugin;

package/dist/types.js

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

package/dist/utils/constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Three.js Fiber 元素列表
+ * 这些元素不需要添加 nocode 标识
+ */
+export declare const threeFiberElems: string[];
+/**
+ * Drei 元素列表
+ * 这些元素不需要添加 nocode 标识
+ */
+export declare const dreiElems: string[];
+/**
+ * 支持的文件扩展名
+ */
+export declare const DEFAULT_VALID_EXTENSIONS: Set<string>;
+/**
+ * 默认配置
+ */
+export declare const DEFAULT_CONFIG: {
+    validExtensions: Set<string>;
+    threeFiberElems: string[];
+    dreiElems: string[];
+    enableLogging: boolean;
+};

package/dist/utils/constants.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CONFIG = exports.DEFAULT_VALID_EXTENSIONS = exports.dreiElems = exports.threeFiberElems = void 0;
+/**
+ * Three.js Fiber 元素列表
+ * 这些元素不需要添加 nocode 标识
+ */
+exports.threeFiberElems = [
+    'object3D',
+    'audioListener',
+    'positionalAudio',
+    'mesh',
+    'batchedMesh',
+    'instancedMesh',
+    'scene',
+    'sprite',
+    'lOD',
+    'skinnedMesh',
+    'skeleton',
+    'bone',
+    'lineSegments',
+    'lineLoop',
+    'points',
+    'group',
+    'camera',
+    'perspectiveCamera',
+    'orthographicCamera',
+    'cubeCamera',
+    'arrayCamera',
+    'instancedBufferGeometry',
+    'bufferGeometry',
+    'boxBufferGeometry',
+    'circleBufferGeometry',
+    'coneBufferGeometry',
+    'cylinderBufferGeometry',
+    'dodecahedronBufferGeometry',
+    'extrudeBufferGeometry',
+    'icosahedronBufferGeometry',
+    'latheBufferGeometry',
+    'octahedronBufferGeometry',
+    'planeBufferGeometry',
+    'polyhedronBufferGeometry',
+    'ringBufferGeometry',
+    'shapeBufferGeometry',
+    'sphereBufferGeometry',
+    'tetrahedronBufferGeometry',
+    'torusBufferGeometry',
+    'torusKnotBufferGeometry',
+    'tubeBufferGeometry',
+    'wireframeGeometry',
+    'tetrahedronGeometry',
+    'octahedronGeometry',
+    'icosahedronGeometry',
+    'dodecahedronGeometry',
+    'polyhedronGeometry',
+    'tubeGeometry',
+    'torusKnotGeometry',
+    'torusGeometry',
+    'sphereGeometry',
+    'ringGeometry',
+    'planeGeometry',
+    'latheGeometry',
+    'shapeGeometry',
+    'extrudeGeometry',
+    'edgesGeometry',
+    'coneGeometry',
+    'cylinderGeometry',
+    'circleGeometry',
+    'boxGeometry',
+    'capsuleGeometry',
+    'material',
+    'shadowMaterial',
+    'spriteMaterial',
+    'rawShaderMaterial',
+    'shaderMaterial',
+    'pointsMaterial',
+    'meshPhysicalMaterial',
+    'meshStandardMaterial',
+    'meshPhongMaterial',
+    'meshToonMaterial',
+    'meshNormalMaterial',
+    'meshLambertMaterial',
+    'meshDepthMaterial',
+    'meshDistanceMaterial',
+    'meshBasicMaterial',
+    'meshMatcapMaterial',
+    'lineDashedMaterial',
+    'lineBasicMaterial',
+    'primitive',
+    'light',
+    'spotLightShadow',
+    'spotLight',
+    'pointLight',
+    'rectAreaLight',
+    'hemisphereLight',
+    'directionalLightShadow',
+    'directionalLight',
+    'ambientLight',
+    'lightShadow',
+    'ambientLightProbe',
+    'hemisphereLightProbe',
+    'lightProbe',
+    'spotLightHelper',
+    'skeletonHelper',
+    'pointLightHelper',
+    'hemisphereLightHelper',
+    'gridHelper',
+    'polarGridHelper',
+    'directionalLightHelper',
+    'cameraHelper',
+    'boxHelper',
+    'box3Helper',
+    'planeHelper',
+    'arrowHelper',
+    'axesHelper',
+    'texture',
+    'videoTexture',
+    'dataTexture',
+    'dataTexture3D',
+    'compressedTexture',
+    'cubeTexture',
+    'canvasTexture',
+    'depthTexture',
+    'raycaster',
+    'vector2',
+    'vector3',
+    'vector4',
+    'euler',
+    'matrix3',
+    'matrix4',
+    'quaternion',
+    'bufferAttribute',
+    'float16BufferAttribute',
+    'float32BufferAttribute',
+    'float64BufferAttribute',
+    'int8BufferAttribute',
+    'int16BufferAttribute',
+    'int32BufferAttribute',
+    'uint8BufferAttribute',
+    'uint16BufferAttribute',
+    'uint32BufferAttribute',
+    'instancedBufferAttribute',
+    'color',
+    'fog',
+    'fogExp2',
+    'shape',
+    'colorShiftMaterial',
+];
+/**
+ * Drei 元素列表
+ * 这些元素不需要添加 nocode 标识
+ */
+exports.dreiElems = [
+    'AsciiRenderer',
+    'Billboard',
+    'Clone',
+    'ComputedAttribute',
+    'Decal',
+    'Edges',
+    'Effects',
+    'GradientTexture',
+    'Image',
+    'MarchingCubes',
+    'Outlines',
+    'PositionalAudio',
+    'Sampler',
+    'ScreenSizer',
+    'ScreenSpace',
+    'Splat',
+    'Svg',
+    'Text',
+    'Text3D',
+    'Trail',
+    'CubeCamera',
+    'OrthographicCamera',
+    'PerspectiveCamera',
+    'CameraControls',
+    'FaceControls',
+    'KeyboardControls',
+    'MotionPathControls',
+    'PresentationControls',
+    'ScrollControls',
+    'DragControls',
+    'GizmoHelper',
+    'Grid',
+    'Helper',
+    'PivotControls',
+    'TransformControls',
+    'CubeTexture',
+    'Fbx',
+    'Gltf',
+    'Ktx2',
+    'Loader',
+    'Progress',
+    'ScreenVideoTexture',
+    'Texture',
+    'TrailTexture',
+    'VideoTexture',
+    'WebcamVideoTexture',
+    'CycleRaycast',
+    'DetectGPU',
+    'Example',
+    'FaceLandmarker',
+    'Fbo',
+    'Html',
+    'Select',
+    'SpriteAnimator',
+    'StatsGl',
+    'Stats',
+    'Trail',
+    'Wireframe',
+    'CurveModifier',
+    'AdaptiveDpr',
+    'AdaptiveEvents',
+    'BakeShadows',
+    'Bvh',
+    'Detailed',
+    'Instances',
+    'Merged',
+    'meshBounds',
+    'PerformanceMonitor',
+    'Points',
+    'Preload',
+    'Segments',
+    'Fisheye',
+    'Hud',
+    'Mask',
+    'MeshPortalMaterial',
+    'RenderCubeTexture',
+    'RenderTexture',
+    'View',
+    'MeshDiscardMaterial',
+    'MeshDistortMaterial',
+    'MeshReflectorMaterial',
+    'MeshRefractionMaterial',
+    'MeshTransmissionMaterial',
+    'MeshWobbleMaterial',
+    'PointMaterial',
+    'shaderMaterial',
+    'SoftShadows',
+    'CatmullRomLine',
+    'CubicBezierLine',
+    'Facemesh',
+    'Line',
+    'Mesh',
+    'QuadraticBezierLine',
+    'RoundedBox',
+    'ScreenQuad',
+    'AccumulativeShadows',
+    'Backdrop',
+    'BBAnchor',
+    'Bounds',
+    'CameraShake',
+    'Caustics',
+    'Center',
+    'Cloud',
+    'ContactShadows',
+    'Environment',
+    'Float',
+    'Lightformer',
+    'MatcapTexture',
+    'NormalTexture',
+    'RandomizedLight',
+    'Resize',
+    'ShadowAlpha',
+    'Shadow',
+    'Sky',
+    'Sparkles',
+    'SpotLightShadow',
+    'SpotLight',
+    'Stage',
+    'Stars',
+    'OrbitControls',
+];
+/**
+ * 支持的文件扩展名
+ */
+exports.DEFAULT_VALID_EXTENSIONS = new Set(['.jsx']);
+/**
+ * 默认配置
+ */
+exports.DEFAULT_CONFIG = {
+    validExtensions: exports.DEFAULT_VALID_EXTENSIONS,
+    threeFiberElems: exports.threeFiberElems,
+    dreiElems: exports.dreiElems,
+    enableLogging: true,
+};

package/dist/utils/utils.d.ts

@@ -0,0 +1,33 @@
+import type { ArrayContext, CompilerStats } from '../types';
+/**
+ * 判断是否需要给元素打标
+ */
+export declare function shouldTagElement(elementName: string, threeFiberElems: string[], dreiElems: string[]): boolean;
+/**
+ * 生成数据属性字符串
+ */
+export declare function generateDataAttributes(relativePath: string, line: number, col: number, elementName: string, arrayContext?: ArrayContext | null): string;
+/**
+ * 日志记录工具
+ */
+export declare class Logger {
+    private enableLogging;
+    constructor(enableLogging?: boolean);
+    log(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+}
+/**
+ * 统计信息管理
+ */
+export declare class StatsManager {
+    private stats;
+    constructor();
+    incrementTotalFiles(): void;
+    incrementProcessedFiles(): void;
+    addElements(count: number): void;
+    getStats(): CompilerStats;
+}
+/**
+ * 检查文件是否应该被处理
+ */
+export declare function shouldProcessFile(id: string, validExtensions: Set<string>): boolean;

package/dist/utils/utils.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatsManager = exports.Logger = void 0;
+exports.shouldTagElement = shouldTagElement;
+exports.generateDataAttributes = generateDataAttributes;
+exports.shouldProcessFile = shouldProcessFile;
+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) {
+    const dataComponentId = `${relativePath}:${line}:${col}`;
+    let arrayAttrs = '';
+    if (arrayContext) {
+        arrayAttrs = ` data-nocode-array="${arrayContext.arrayName}" data-nocode-index="\${${arrayContext.paramName}}"`;
+    }
+    return ` data-nocode-id="${dataComponentId}" data-nocode-name="${elementName}"${arrayAttrs}`;
+}
+/**
+ * 日志记录工具
+ */
+class Logger {
+    enableLogging;
+    constructor(enableLogging = true) {
+        this.enableLogging = enableLogging;
+    }
+    log(message, ...args) {
+        if (this.enableLogging) {
+            console.log(`[nocode-compiler] ${message}`, ...args);
+        }
+    }
+    error(message, ...args) {
+        if (this.enableLogging) {
+            console.error(`[nocode-compiler] ${message}`, ...args);
+        }
+    }
+}
+exports.Logger = Logger;
+/**
+ * 统计信息管理
+ */
+class StatsManager {
+    stats;
+    constructor() {
+        this.stats = {
+            totalFiles: 0,
+            processedFiles: 0,
+            totalElements: 0,
+        };
+    }
+    incrementTotalFiles() {
+        this.stats.totalFiles++;
+    }
+    incrementProcessedFiles() {
+        this.stats.processedFiles++;
+    }
+    addElements(count) {
+        this.stats.totalElements += count;
+    }
+    getStats() {
+        return { ...this.stats };
+    }
+}
+exports.StatsManager = StatsManager;
+/**
+ * 检查文件是否应该被处理
+ */
+function shouldProcessFile(id, validExtensions) {
+    return validExtensions.has(path_1.default.extname(id)) && !id.includes('node_modules');
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@meituan-nocode/vite-plugin-nocode-compiler",
+    "version": "0.1.0-beta.1",
+    "description": "nocode编译插件",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev": "tsc --watch",
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "vite": "^5.4.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "typescript": "^5.0.0",
+        "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"
+    }
+}