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

package/README.md

@@ -1,44 +1,43 @@
 # @meituan-nocode/vite-plugin-nocode-compiler
 
-一个用于 Vite 的 nocode 编译插件，为 JSX 元素自动添加 nocode 所需的标识属性。
+一个专门为 Vite 开发的 nocode 编译插件，用于自动为 JSX/TSX 元素添加 nocode 所需的标识属性。该插件基于 `@meituan-nocode/nocode-compiler-core` 实现，提供了高性能的代码转换能力。
 
-## 功能
+## 特性
 
-- 🚀 **多框架支持**: 支持 JSX、TSX 和 Vue 文件
-- 📦 **自动元素标记**: 为非 Three.js Fiber 和非 Drei 的元素自动添加 nocode 标识
-- 🔄 **数组上下文检测**: 智能识别数组映射，添加索引信息
-- 🎯 **简单配置**: 开箱即用，仅需最少配置
-- ⚡️ **高性能**: 优化的编译过程，快速处理
+- 🎯 **智能元素标记**: 自动为 JSX/TSX 元素添加 nocode 相关属性
+- 🔍 **上下文感知**: 智能识别数组映射上下文，添加相应的数组和索引信息
+- ⚡️ **高性能**: 基于 Babel AST 实现，支持增量编译
+- 🛡️ **类型安全**: 使用 TypeScript 编写，提供完整的类型定义
+- 📦 **零配置**: 开箱即用，支持自定义配置
 
 ## 安装
 
 ```bash
 npm install @meituan-nocode/vite-plugin-nocode-compiler --save-dev
+# 或
+yarn add -D @meituan-nocode/vite-plugin-nocode-compiler
+# 或
+pnpm add -D @meituan-nocode/vite-plugin-nocode-compiler
 ```
 
 ## 使用
 
-### 基础使用
+### 基础配置
 
-在你的 `vite.config.js` 或 `vite.config.ts` 中：
+在你的 `vite.config.ts` 中添加插件：
 
-```javascript
+```typescript
 import { defineConfig } from 'vite';
 import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
-    plugins: [
-        componentCompiler(), // 使用默认配置
-        // 其他插件...
-    ],
+    plugins: [componentCompiler()],
 });
 ```
 
-### 启用调试日志
-
-如果需要查看编译过程的详细日志：
+### 自定义配置
 
-```javascript
+```typescript
 import { defineConfig } from 'vite';
 import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
@@ -46,79 +45,83 @@ export default defineConfig({
     plugins: [
         componentCompiler({
             enableLogging: true, // 启用调试日志
+            rootPath: process.cwd(), // 自定义项目根路径
         }),
-        // 其他插件...
     ],
 });
 ```
 
 ## 工作原理
 
-插件会扫描 `.jsx`、`.tsx` 和 `.vue` 文件中的元素，对于不在 Three.js Fiber 元素列表和 Drei 元素列表中的元素，自动添加以下属性：
+插件会在构建过程中拦截并处理 `.jsx`、`.tsx`、`.js` 和 `.ts` 文件，通过 AST 分析为符合条件的 JSX 元素添加以下属性：
 
-- `data-nocode-id`: 格式为 `文件路径:行号:列号`
-- `data-nocode-tag-name`: 元素名称
-- `data-nocode-array`: 当元素在数组映射中时，包含数组名称
+- `data-nocode-id`: 元素的唯一标识，格式为 `文件路径:行号:列号`
+- `data-nocode-name`: 元素的标签名称
+- `data-nocode-array`: 当元素在数组 map 中时，记录数组名称
+- `data-nocode-index`: 当元素在数组 map 中时，记录当前索引
 
-## 示例
+### 示例
 
-输入：
+输入代码：
 
 ```jsx
-function App() {
+function TodoList({ items }) {
     return (
-        <div>
-            <button>Click me</button>
+        <div className='todo-list'>
             {items.map((item, index) => (
-                <span key={item.id}>{item.name}</span>
+                <div key={item.id} className='todo-item'>
+                    <span>{item.text}</span>
+                    <button onClick={() => handleDelete(item.id)}>删除</button>
+                </div>
             ))}
         </div>
     );
 }
 ```
 
-输出：
+编译后：
 
 ```jsx
-function App() {
+function TodoList({ items }) {
     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>
+        <div data-nocode-id='TodoList.jsx:2:8' data-nocode-name='div' className='todo-list'>
             {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 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>
     );
 }
 ```
 
-## 架构
+## 技术细节
 
-该插件采用模块化设计，支持多种前端框架：
+- 使用 `@babel/parser` 进行代码解析
+- 使用 `@babel/traverse` 进行 AST 遍历
+- 使用 `magic-string` 进行高效的代码修改
+- 支持 TypeScript、装饰器等高级语法特性
+- 智能跳过 `node_modules` 中的文件
 
-- **JSX/TSX**: ✅ 已实现
-- **Vue**: ✅ 已实现
+## 版本要求
 
-详细架构说明请参考 [ARCHITECTURE.md](./ARCHITECTURE.md)
+- Vite: ^5.4.0
+- Node.js: ^20.0.0
 
 ## 开发
 
 ```bash
-# 构建
-npm run build
-
-# 开发模式（监听文件变化）
-npm run dev
-```
-
-## 扩展支持
-
-如需添加新框架支持，请参考架构文档中的扩展指南。
+# 安装依赖
+pnpm install
 
-## License
+# 开发模式
+pnpm run dev
 
-ISC
+# 构建
+pnpm run build
+```

package/dist/index.d.ts

@@ -1,5 +1,9 @@
-import type { Plugin } from 'vite';
 export interface NocodeCompilerOptions {
     enableLogging?: boolean;
+    rootPath?: string;
 }
-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

@@ -3,22 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentCompiler = componentCompiler;
 const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
 function componentCompiler(options = {}) {
-    const { enableLogging = false } = options;
+    const { enableLogging = false, rootPath = process.cwd() } = options;
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
         async transform(code, id) {
             // 检查文件是否在 node_modules 中
             if (id.includes('node_modules')) {
-                return null;
+                return code;
             }
             // 检查文件扩展名
             if (!/\.(jsx?|tsx?)$/.test(id)) {
-                return null;
+                return code;
             }
             // 使用 jsxcompiler 编译
             const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
-                enableLogging: enableLogging || false,
+                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.8",
-    "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": "^5.4.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.14"
+        "@meituan-nocode/nocode-compiler-core": "0.2.0"
     }
 }