@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.9-z → 0.2.0-beta.1

package/README.md

@@ -1,137 +1,127 @@
 # @meituan-nocode/vite-plugin-nocode-compiler
 
-Vite 插件，用于在构建过程中处理 Vue 和 React 组件，添加 nocode 相关的标记。该插件支持自动检测项目框架类型（Vue/React），并应用相应的编译逻辑。
+一个专门为 Vite 开发的 nocode 编译插件，用于自动为 JSX/TSX 元素添加 nocode 所需的标识属性。该插件基于 `@meituan-nocode/nocode-compiler-core` 实现，提供了高性能的代码转换能力。
 
 ## 特性
 
-- ✅ 支持 Vue 和 React 组件的处理
-- ✅ 自动检测项目框架类型
-- ✅ 兼容 Vite 4.x 和 5.x 版本
-- ✅ 可配置的日志输出
-- ✅ 支持 ESM 和 CommonJS 导入方式
+- 🎯 **智能元素标记**: 自动为 JSX/TSX 元素添加 nocode 相关属性
+- 🔍 **上下文感知**: 智能识别数组映射上下文，添加相应的数组和索引信息
+- ⚡️ **高性能**: 基于 Babel AST 实现，支持增量编译
+- 🛡️ **类型安全**: 使用 TypeScript 编写，提供完整的类型定义
+- 📦 **零配置**: 开箱即用，支持自定义配置
 
 ## 安装
 
 ```bash
-# npm
 npm install @meituan-nocode/vite-plugin-nocode-compiler --save-dev
-
-# yarn
-yarn add @meituan-nocode/vite-plugin-nocode-compiler --dev
-
-# pnpm
-pnpm add @meituan-nocode/vite-plugin-nocode-compiler -D
+# 或
+yarn add -D @meituan-nocode/vite-plugin-nocode-compiler
+# 或
+pnpm add -D @meituan-nocode/vite-plugin-nocode-compiler
 ```
 
-## 使用方法
+## 使用
+
+### 基础配置
 
-### ESM 导入 (推荐)
+在你的 `vite.config.ts` 中添加插件：
 
-```js
-// vite.config.js / vite.config.ts
+```typescript
 import { defineConfig } from 'vite';
-import { nocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
-// 或者使用默认导入
-// import nocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
+import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
-    plugins: [
-        nocodeCompiler({
-            enableLogging: true,
-            forceFramework: 'vue', // 或 'react'
-        }),
-    ],
-});
-```
-
-### CommonJS 导入
-
-```js
-// vite.config.js
-const { defineConfig } = require('vite');
-const { nocodeCompiler } = require('@meituan-nocode/vite-plugin-nocode-compiler');
-// 或者使用默认导入并解构
-// const pkg = require('@meituan-nocode/vite-plugin-nocode-compiler');
-// const { nocodeCompiler } = pkg;
-
-module.exports = defineConfig({
-    plugins: [
-        nocodeCompiler({
-            enableLogging: true,
-            forceFramework: 'vue', // 或 'react'
-        }),
-    ],
+    plugins: [componentCompiler()],
 });
 ```
 
-### 兼容性导入 (如果上述方法不起作用)
+### 自定义配置
 
-```js
-// vite.config.js / vite.config.ts
+```typescript
 import { defineConfig } from 'vite';
-import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler/compat';
+import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
     plugins: [
         componentCompiler({
-            enableLogging: true,
-            forceFramework: 'vue', // 或 'react'
+            enableLogging: true, // 启用调试日志
+            rootPath: process.cwd(), // 自定义项目根路径
         }),
     ],
 });
 ```
 
-## 配置选项
-
-| 选项             | 类型               | 默认值   | 描述                                                   |
-| ---------------- | ------------------ | -------- | ------------------------------------------------------ |
-| `enableLogging`  | `boolean`          | `false`  | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
-| `forceFramework` | `'vue' \| 'react'` | 自动检测 | 强制指定框架类型，不指定时会自动检测                   |
-| `jsxOptions`     | `object`           | `{}`     | JSX 编译器选项，用于配置 React 组件的编译行为          |
-| `vueOptions`     | `object`           | `{}`     | Vue 编译器选项，用于配置 Vue 组件的编译行为            |
-
-## 框架检测
-
-如果未指定 `forceFramework`，插件会按以下优先级自动检测项目使用的框架：
-
-1. 检查 package.json 中的依赖（React 依赖优先于 Vue 依赖）
-2. 检查 src 目录下是否有框架特定文件（JSX/TSX 文件优先于 Vue 文件）
-3. 如果以上都没有检测到，默认返回 React
+## 工作原理
 
-## 兼容性
+插件会在构建过程中拦截并处理 `.jsx`、`.tsx`、`.js` 和 `.ts` 文件，通过 AST 分析为符合条件的 JSX 元素添加以下属性：
 
-本插件兼容 Vite 4.x 和 5.x 版本。插件会自动检测 Vite 版本并进行相应的适配，确保在不同版本的 Vite 环境中都能正常工作。
+- `data-nocode-id`: 元素的唯一标识，格式为 `文件路径:行号:列号`
+- `data-nocode-name`: 元素的标签名称
+- `data-nocode-array`: 当元素在数组 map 中时，记录数组名称
+- `data-nocode-index`: 当元素在数组 map 中时，记录当前索引
 
-### Vite 版本支持
+### 示例
 
-- **Vite 4.x**: 完全支持 (>=4.0.0)
-- **Vite 5.x**: 完全支持 (包括最新的 5.4.x)
+输入代码：
 
-如果在使用过程中遇到任何兼容性问题，请开启日志功能进行调试：
-
-```js
-nocodeCompiler({
-    enableLogging: true,
-});
+```jsx
+function TodoList({ items }) {
+    return (
+        <div className='todo-list'>
+            {items.map((item, index) => (
+                <div key={item.id} className='todo-item'>
+                    <span>{item.text}</span>
+                    <button onClick={() => handleDelete(item.id)}>删除</button>
+                </div>
+            ))}
+        </div>
+    );
+}
 ```
 
-## 常见问题
-
-### Q: 如何确认插件正在正常工作？
+编译后：
+
+```jsx
+function TodoList({ items }) {
+    return (
+        <div data-nocode-id='TodoList.jsx:2:8' data-nocode-name='div' className='todo-list'>
+            {items.map((item, index) => (
+                <div data-nocode-id='TodoList.jsx:4:12' data-nocode-name='div' data-nocode-array='items' data-nocode-index='${index}' key={item.id} className='todo-item'>
+                    <span data-nocode-id='TodoList.jsx:5:16' data-nocode-name='span' data-nocode-array='items' data-nocode-index='${index}'>
+                        {item.text}
+                    </span>
+                    <button data-nocode-id='TodoList.jsx:6:16' data-nocode-name='button' data-nocode-array='items' data-nocode-index='${index}' onClick={() => handleDelete(item.id)}>
+                        删除
+                    </button>
+                </div>
+            ))}
+        </div>
+    );
+}
+```
 
-A: 开启 `enableLogging` 选项，构建时会输出详细的处理日志，包括检测到的框架类型和处理的文件。
+## 技术细节
 
-### Q: 插件处理哪些文件类型？
+- 使用 `@babel/parser` 进行代码解析
+- 使用 `@babel/traverse` 进行 AST 遍历
+- 使用 `magic-string` 进行高效的代码修改
+- 支持 TypeScript、装饰器等高级语法特性
+- 智能跳过 `node_modules` 中的文件
 
-A: 插件会处理以下文件类型：
+## 版本要求
 
-- Vue 框架: `.vue` 文件
-- React 框架: `.jsx`, `.tsx` 文件，以及包含 JSX 语法的 `.js`, `.ts` 文件
+- Vite: ^5.4.0
+- Node.js: ^20.0.0
 
-### Q: 如何在 monorepo 项目中使用？
+## 开发
 
-A: 在各子项目的 `vite.config.js` 中分别配置插件即可。如果子项目共享配置，确保正确设置 `forceFramework` 选项。
+```bash
+# 安装依赖
+pnpm install
 
-## 许可证
+# 开发模式
+pnpm run dev
 
-MIT
+# 构建
+pnpm run build
+```

package/dist/index.d.ts

@@ -1,12 +1,9 @@
-import { Plugin } from 'vite';
-import { FrameworkType } from './framework-detector';
 export interface NocodeCompilerOptions {
     enableLogging?: boolean;
-    forceFramework?: FrameworkType;
+    rootPath?: string;
 }
-/**
- * Vite插件：nocode-compiler
- * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
- * 兼容 Vite 4.x 和 5.x 版本
- */
-export declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;
+export declare function componentCompiler(options?: NocodeCompilerOptions): {
+    name: string;
+    enforce: "pre";
+    transform(code: string, id: string): Promise<string | null>;
+};

package/dist/index.js

@@ -1,128 +1,28 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentCompiler = componentCompiler;
-const vite_1 = require("vite");
 const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
-const framework_detector_1 = require("./framework-detector");
-const path_1 = __importDefault(require("path"));
-/**
- * 检测 Vite 版本
- * @returns 返回主版本号 (4, 5 等)
- */
-function getViteMajorVersion() {
-    // 从 viteVersion 中提取主版本号
-    const majorVersionMatch = vite_1.version.match(/^(\d+)\./);
-    return majorVersionMatch ? parseInt(majorVersionMatch[1], 10) : 0;
-}
-/**
- * Vite插件：nocode-compiler
- * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
- * 兼容 Vite 4.x 和 5.x 版本
- */
 function componentCompiler(options = {}) {
-    // 检测框架类型
-    let framework = null;
-    // 检测 Vite 版本
-    const viteMajorVersion = getViteMajorVersion();
-    if (options.enableLogging) {
-        console.log(`[vite-nocode-compiler] Detected Vite version: ${vite_1.version} (major: ${viteMajorVersion})`);
-    }
-    // 创建编译器实例
-    const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
-        enableLogging: options.enableLogging || false,
-    });
-    const vueCompiler = new nocode_compiler_core_1.VueCompiler({
-        enableLogging: options.enableLogging || false,
-    });
+    const { enableLogging = false, rootPath = process.cwd() } = options;
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
-        configResolved() {
-            // 在配置解析后检测框架
-            framework = options.forceFramework || (0, framework_detector_1.detectFramework)(options);
-            if (options.enableLogging) {
-                console.log(`[vite-nocode-compiler] Detected framework: ${framework}`);
-            }
-        },
         async transform(code, id) {
-            // 跳过node_modules
+            // 检查文件是否在 node_modules 中
             if (id.includes('node_modules')) {
-                return null;
-            }
-            const fileExt = path_1.default.extname(id);
-            // 处理Vue文件
-            if (fileExt === '.vue') {
-                if (framework === 'vue' || options.forceFramework === 'vue') {
-                    if (options.enableLogging) {
-                        console.log(`[vite-nocode-compiler] Processing Vue file: ${id}`);
-                    }
-                    try {
-                        const result = vueCompiler.compile(code, id);
-                        if (typeof result === 'string') {
-                            return {
-                                code: result,
-                                map: null,
-                            };
-                        }
-                        return null;
-                    }
-                    catch (error) {
-                        console.error(`[vite-nocode-compiler] Error processing Vue file: ${id}`, error);
-                        return null;
-                    }
-                }
-            }
-            // 处理JSX/TSX文件
-            if (['.jsx', '.tsx'].includes(fileExt)) {
-                if (framework === 'react' || options.forceFramework === 'react') {
-                    if (options.enableLogging) {
-                        console.log(`[vite-nocode-compiler] Processing JSX/TSX file: ${id}`);
-                    }
-                    try {
-                        const result = jsxCompiler.compile(code, id);
-                        if (typeof result === 'string') {
-                            return {
-                                code: result,
-                                map: null,
-                            };
-                        }
-                        return null;
-                    }
-                    catch (error) {
-                        console.error(`[vite-nocode-compiler] Error processing JSX/TSX file: ${id}`, error);
-                        return null;
-                    }
-                }
+                return code;
             }
-            // 处理JS/TS文件（可能包含JSX）
-            if (['.js', '.ts'].includes(fileExt)) {
-                if (framework === 'react' || options.forceFramework === 'react') {
-                    // 简单检查是否包含JSX语法
-                    if (code.includes('React.createElement') || code.includes('jsx') || (code.includes('<') && code.includes('/>'))) {
-                        if (options.enableLogging) {
-                            console.log(`[vite-nocode-compiler] Processing JS/TS file with potential JSX: ${id}`);
-                        }
-                        try {
-                            const result = jsxCompiler.compile(code, id);
-                            if (typeof result === 'string') {
-                                return {
-                                    code: result,
-                                    map: null,
-                                };
-                            }
-                            return null;
-                        }
-                        catch (error) {
-                            console.error(`[vite-nocode-compiler] Error processing JS/TS file: ${id}`, error);
-                            return null;
-                        }
-                    }
-                }
+            // 检查文件扩展名
+            if (!/\.(jsx?|tsx?)$/.test(id)) {
+                return code;
             }
-            return null;
+            // 使用 jsxcompiler 编译
+            const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
+                enableLogging,
+                rootPath,
+            });
+            const result = jsxCompiler.compile(code, id);
+            return result;
         },
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.1.0-beta.9-z",
-    "description": "nocode compiler plugin",
+    "version": "0.2.0-beta.1",
+    "description": "Vite plugin for nocode compiler",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
@@ -13,15 +13,12 @@
         "build": "tsc",
         "prepublishOnly": "npm run build"
     },
-    "peerDependencies": {
-        "vite": ">=4.0.0"
-    },
     "devDependencies": {
         "@types/node": "^20.0.0",
         "typescript": "^5.0.0",
         "vite": "^5.4.0"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.16-z"
+        "@meituan-nocode/nocode-compiler-core": "0.2.0"
     }
 }

package/dist/framework-detector.d.ts

@@ -1,13 +0,0 @@
-export type FrameworkType = 'vue' | 'react';
-/**
- * 框架检测器
- * 按优先级检测项目使用的前端框架
- * 1. 首先检查是否强制指定了框架
- * 2. 然后检查package.json中的依赖（React依赖优先于Vue依赖）
- * 3. 接着检查src目录下是否有框架特定文件（JSX/TSX文件优先于Vue文件）
- * 4. 如果以上都没有检测到，默认返回React
- */
-export declare function detectFramework(options?: {
-    forceFramework?: FrameworkType;
-    enableLogging?: boolean;
-}): FrameworkType;

package/dist/framework-detector.js

@@ -1,85 +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.detectFramework = detectFramework;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-/**
- * 框架检测器
- * 按优先级检测项目使用的前端框架
- * 1. 首先检查是否强制指定了框架
- * 2. 然后检查package.json中的依赖（React依赖优先于Vue依赖）
- * 3. 接着检查src目录下是否有框架特定文件（JSX/TSX文件优先于Vue文件）
- * 4. 如果以上都没有检测到，默认返回React
- */
-function detectFramework(options) {
-    const log = (message, ...args) => {
-        if (options?.enableLogging) {
-            console.log(`[vite-nocode-compiler] ${message}`, ...args);
-        }
-    };
-    // 1. 如果强制指定了框架，直接返回
-    if (options?.forceFramework) {
-        log('Using forced framework:', options.forceFramework);
-        return options.forceFramework;
-    }
-    try {
-        // 2. 检查package.json
-        const packagePath = path_1.default.resolve(process.cwd(), 'package.json');
-        log('Checking package.json:', packagePath);
-        if (fs_1.default.existsSync(packagePath)) {
-            try {
-                const pkg = JSON.parse(fs_1.default.readFileSync(packagePath, 'utf8'));
-                const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
-                log('Package dependencies:', deps);
-                // React相关依赖（优先检查React，因为Vue项目可能也会依赖React组件）
-                if (deps.react || deps['react-dom']) {
-                    log('React dependency detected');
-                    return 'react';
-                }
-                // Vue相关依赖
-                if (deps.vue || deps['@vue/cli-service'] || deps.nuxt || deps['@vitejs/plugin-vue']) {
-                    log('Vue dependency detected');
-                    return 'vue';
-                }
-            }
-            catch (e) {
-                log('Failed to parse package.json:', e);
-                // 解析package.json失败，继续下一步检测
-            }
-        }
-        // 3. 快速检查src目录下是否有框架特定文件（不递归）
-        const srcDir = path_1.default.resolve(process.cwd(), 'src');
-        log('Checking src directory:', srcDir);
-        if (fs_1.default.existsSync(srcDir)) {
-            try {
-                const files = fs_1.default.readdirSync(srcDir);
-                log('Files in src directory:', files);
-                // 检查是否有.jsx/.tsx文件（优先检查React文件）
-                if (files.some(file => file.endsWith('.jsx') || file.endsWith('.tsx'))) {
-                    log('JSX/TSX file detected');
-                    return 'react';
-                }
-                // 检查是否有.vue文件
-                if (files.some(file => file.endsWith('.vue'))) {
-                    log('Vue file detected');
-                    return 'vue';
-                }
-            }
-            catch (e) {
-                log('Failed to read src directory:', e);
-                // 读取目录失败，继续使用默认值
-            }
-        }
-        // 4. 默认返回React
-        log('No framework detected, using default: react');
-        return 'react';
-    }
-    catch (e) {
-        log('Error in detectFramework:', e);
-        // 出现任何错误，默认使用React
-        return 'react';
-    }
-}