@meituan-nocode/vite-plugin-nocode-compiler 0.2.3-beta.1 → 0.2.3

package/README.md

@@ -1,236 +1,127 @@
 # @meituan-nocode/vite-plugin-nocode-compiler
 
-Vite 插件，用于在构建过程中为 Vue 和 React 组件自动添加属性，支持无代码平台的可视化编辑。
+一个专门为 Vite 开发的 nocode 编译插件，用于自动为 JSX/TSX 元素添加 nocode 所需的标识属性。该插件基于 `@meituan-nocode/nocode-compiler-core` 实现，提供了高性能的代码转换能力。
 
-## 🚀 特性
+## 特性
 
-- ✅ 支持 Vue 单文件组件 (`.vue`)
-- ✅ 支持 React JSX/TSX 组件 (`.jsx`, `.tsx`)
-- ✅ 支持 Vue 文件中的 JSX 语法
-- ✅ 支持外部模板文件 (`<template src="xxx.html">`)
-- ✅ 兼容 Vite 4.x 和 5.x 版本
-- ✅ 可配置的日志输出
-- ✅ 支持 ESM 和 CommonJS 导入方式
-- ✅ 自动跳过 `node_modules` 文件
+- 🎯 **智能元素标记**: 自动为 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
 ```
 
-## 🔧 快速开始
+## 使用
 
 ### 基础配置
 
-在项目的 `vite.config.js` 或 `vite.config.ts` 中配置插件：
+在你的 `vite.config.ts` 中添加插件：
 
 ```typescript
-// vite.config.ts
 import { defineConfig } from 'vite';
-import componentCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
+import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
-    plugins: [
-        componentCompiler({
-            enableLogging: true, // 开发时建议开启日志
-        }),
-    ],
-});
-```
-
-### CommonJS 配置
-
-```javascript
-// vite.config.js
-const { defineConfig } = require('vite');
-const componentCompiler = require('@meituan-nocode/vite-plugin-nocode-compiler').default;
-
-module.exports = defineConfig({
-    plugins: [
-        componentCompiler({
-            enableLogging: true,
-        }),
-    ],
+    plugins: [componentCompiler()],
 });
 ```
 
-## ⚙️ 配置选项
-
-| 选项            | 类型      | 默认值  | 描述                                                   |
-| --------------- | --------- | ------- | ------------------------------------------------------ |
-| `enableLogging` | `boolean` | `false` | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
-| `rootPath`      | `string`  | -       | 项目根路径，用于生成相对路径标识                       |
-
-### 配置示例
+### 自定义配置
 
 ```typescript
-// 完整配置示例
+import { defineConfig } from 'vite';
+import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+
 export default defineConfig({
     plugins: [
         componentCompiler({
-            enableLogging: process.env.NODE_ENV === 'development',
-            rootPath: process.cwd(),
+            enableLogging: true, // 启用调试日志
+            rootPath: process.cwd(), // 自定义项目根路径
         }),
     ],
 });
 ```
 
-## 📁 处理的文件类型
-
-### Vue 文件
+## 工作原理
 
-- `.vue` 单文件组件的 `<template>` 部分
-- Vue 文件中的 JSX/TSX `<script>` 部分
-- 外部模板文件 `<template src="xxx.html">`
+插件会在构建过程中拦截并处理 `.jsx`、`.tsx`、`.js` 和 `.ts` 文件，通过 AST 分析为符合条件的 JSX 元素添加以下属性：
 
-### React 文件
+- `data-nocode-id`: 元素的唯一标识，格式为 `文件路径:行号:列号`
+- `data-nocode-name`: 元素的标签名称
+- `data-nocode-array`: 当元素在数组 map 中时，记录数组名称
+- `data-nocode-index`: 当元素在数组 map 中时，记录当前索引
 
-- `.jsx` 文件
-- `.tsx` 文件
-- 包含 JSX 语法的 `.js` 和 `.ts` 文件
-
-### 文件处理逻辑
-
-插件会根据文件扩展名和 Vite 查询参数智能判断文件类型：
-
-```typescript
-// Vue 文件中的 JSX 处理
-// App.vue?type=script&lang.tsx
-// App.vue?isJsx
+### 示例
 
-// Vue 模板处理
-// App.vue?type=template
+输入代码：
 
-// 外部模板处理
-// template.html?type=template&vue
+```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>
+    );
+}
 ```
 
-## 🎯 工作原理
-
-插件会在构建过程中为符合条件的元素添加以下属性：
-
-```html
-<!-- 处理前 -->
-<div class="container">
-    <button>Click me</button>
-</div>
-
-<!-- 处理后 -->
-<div class="container" data-nocode-id="src/App.vue:1:0" data-nocode-path="src/App.vue" data-nocode-line="1" data-nocode-col="0">
-    <button data-nocode-id="src/App.vue:2:2" data-nocode-path="src/App.vue" data-nocode-line="2" data-nocode-col="2">Click me</button>
-</div>
+编译后：
+
+```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>
+    );
+}
 ```
 
-### 添加的属性说明
-
-- `data-nocode-id`: 元素的唯一标识符（格式：`文件路径:行号:列号`）
-- `data-nocode-path`: 相对文件路径
-- `data-nocode-line`: 元素在文件中的行号
-- `data-nocode-col`: 元素在文件中的列号
-- `data-nocode-array`: （可选）当元素在 `v-for` 或 `map` 循环中时，标识数组名称
+## 技术细节
 
-## 🏗️ 在 Monorepo 项目中使用
+- 使用 `@babel/parser` 进行代码解析
+- 使用 `@babel/traverse` 进行 AST 遍历
+- 使用 `magic-string` 进行高效的代码修改
+- 支持 TypeScript、装饰器等高级语法特性
+- 智能跳过 `node_modules` 中的文件
 
-在 monorepo 项目中，建议在共享配置中定义插件：
+## 版本要求
 
-```typescript
-// packages/shared/vite-config.ts
-import { defineConfig } from 'vite';
-import componentCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
-
-export const createViteConfig = (options: { enableLogging?: boolean } = {}) => {
-    return defineConfig({
-        plugins: [
-            componentCompiler({
-                enableLogging: options.enableLogging ?? process.env.NODE_ENV === 'development',
-            }),
-        ],
-    });
-};
-
-// 子项目中使用
-// packages/app-a/vite.config.ts
-import { createViteConfig } from '@shared/vite-config';
-
-export default createViteConfig({ enableLogging: true });
-```
+- Vite: ^5.4.0
+- Node.js: ^20.0.0
 
-## 🐛 调试和故障排除
+## 开发
 
-### 启用调试日志
-
-```typescript
-// vite.config.ts
-export default defineConfig({
-    plugins: [
-        componentCompiler({
-            enableLogging: true, // 开启详细日志
-        }),
-    ],
-});
-```
-
-开启后，构建时会输出类似日志：
-
-```
-[vite-plugin-nocode-compiler] Processing Vue file: src/App.vue
-[vue-compiler] File processing complete 5
-[vite-plugin-nocode-compiler] Processing JSX file: src/components/Button.tsx
-[jsx-compiler] File processing complete 3
-```
-
-### 常见问题
-
-#### Q: 插件没有生效怎么办？
-
-A: 检查以下几点：
-
-1. 确认插件已正确安装和配置
-2. 确保 `enforce: 'pre'` 设置正确（插件已内置）
-3. 检查文件是否在 `node_modules` 中（插件会自动跳过）
-4. 开启 `enableLogging` 查看是否有处理日志
-
-#### Q: 某些文件没有被处理？
-
-A: 可能的原因：
-
-- 文件在 `node_modules` 目录下
-- 文件类型不支持（如纯 CSS 文件）
-- Vue 文件的 `<style>` 部分（插件只处理模板和脚本）
-
-#### Q: 如何排除特定文件？
+```bash
+# 安装依赖
+pnpm install
 
-A: 目前插件没有内置排除选项，但可以通过 Vite 的 `optimizeDeps` 或自定义插件来实现：
+# 开发模式
+pnpm run dev
 
-```typescript
-export default defineConfig({
-    plugins: [
-        componentCompiler(),
-        // 自定义插件排除特定文件
-        {
-            name: 'exclude-files',
-            transform(code, id) {
-                if (id.includes('excluded-folder')) {
-                    return null; // 跳过处理
-                }
-            },
-        },
-    ],
-});
+# 构建
+pnpm run build
 ```
-
-## 📚 依赖关系
-
-该插件依赖于以下核心包：
-
-- `@meituan-nocode/nocode-compiler-core`: 提供核心编译逻辑
-    - `VueCompiler`: Vue 组件编译器
-    - `JSXCompiler`: JSX 组件编译器

package/dist/index.d.ts

@@ -1,15 +1,9 @@
-interface NocodeCompilerOptions {
+export interface NocodeCompilerOptions {
     enableLogging?: boolean;
     rootPath?: string;
 }
-/**
- * Vite插件
- * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
- */
-declare function componentCompiler(options?: NocodeCompilerOptions): {
+export declare function componentCompiler(options?: NocodeCompilerOptions): {
     name: string;
     enforce: "pre";
-    transform(code: string, id: string): Promise<string>;
+    transform(code: string, id: string): Promise<string | null>;
 };
-
-export { type NocodeCompilerOptions, componentCompiler, componentCompiler as default };

package/dist/index.js

@@ -1,36 +1,28 @@
-// src/index.ts
-import { JSXCompiler, VueCompiler, detectCompileScenario } from "@meituan-nocode/nocode-compiler-core";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentCompiler = componentCompiler;
+const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
 function componentCompiler(options = {}) {
-  options = {
-    enableLogging: false,
-    ...options
-  };
-  const vueCompiler = new VueCompiler(options);
-  const jsxCompiler = new JSXCompiler(options);
-  return {
-    name: "vite-plugin-nocode-compiler",
-    enforce: "pre",
-    async transform(code, id) {
-      if (id.includes("node_modules")) {
-        return code;
-      }
-      const [filePath, query] = id.split("?", 2);
-      const { useJSXCompiler, useVueCompiler } = detectCompileScenario({
-        filePath,
-        query
-      });
-      if (useJSXCompiler) {
-        return jsxCompiler.compile(code, filePath) || code;
-      }
-      if (useVueCompiler) {
-        return vueCompiler.compile(code, filePath) || code;
-      }
-      return code;
-    }
-  };
+    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 code;
+            }
+            // 检查文件扩展名
+            if (!/\.(jsx?|tsx?)$/.test(id)) {
+                return code;
+            }
+            // 使用 jsxcompiler 编译
+            const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
+                enableLogging,
+                rootPath,
+            });
+            const result = jsxCompiler.compile(code, id);
+            return result;
+        },
+    };
 }
-var index_default = componentCompiler;
-export {
-  componentCompiler,
-  index_default as default
-};

package/package.json

@@ -1,33 +1,24 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.2.3-beta.1",
+    "version": "0.2.3",
     "description": "Vite plugin for nocode compiler",
-    "type": "module",
-    "exports": {
-        ".": {
-            "import": "./dist/index.js",
-            "require": "./dist/index.cjs"
-        },
-        "./package.json": "./package.json"
-    },
-    "main": "./dist/index.cjs",
-    "types": "./dist/index.d.ts",
-    "module": "./dist/index.js",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
     "files": [
         "dist"
     ],
     "scripts": {
-        "dev": "tsup --watch",
-        "build": "tsup",
+        "dev": "tsc --watch",
+        "build": "tsc",
         "prepublishOnly": "npm run build"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",
         "typescript": "^5.0.0",
-        "vite": "^4.5.14",
-        "tsup": "8.5.0"
+        "vite": "^5.4.0"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.2.3-beta.1"
+        "@meituan-nocode/nocode-compiler-core": "0.2.3"
     }
 }