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

package/README.md

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

package/dist/index.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  componentCompiler: () => componentCompiler,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_nocode_compiler_core = require("@meituan-nocode/nocode-compiler-core");
+function componentCompiler(options = {}) {
+  options = {
+    enableLogging: false,
+    ...options
+  };
+  const vueCompiler = new import_nocode_compiler_core.VueCompiler(options);
+  const jsxCompiler = new import_nocode_compiler_core.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 } = (0, import_nocode_compiler_core.detectCompileScenario)({
+        filePath,
+        query
+      });
+      if (useJSXCompiler) {
+        return jsxCompiler.compile(code, filePath) || code;
+      }
+      if (useVueCompiler) {
+        return vueCompiler.compile(code, filePath) || code;
+      }
+      return code;
+    }
+  };
+}
+var index_default = componentCompiler;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  componentCompiler
+});

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,28 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentCompiler = componentCompiler;
-const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
+// src/index.ts
+import { JSXCompiler, VueCompiler, detectCompileScenario } from "@meituan-nocode/nocode-compiler-core";
 function componentCompiler(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 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;
-        },
-    };
+  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;
+    }
+  };
 }
+var index_default = componentCompiler;
+export {
+  componentCompiler,
+  index_default as default
+};

package/package.json

@@ -1,24 +1,33 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.2.2",
+    "version": "0.2.3-beta.1",
     "description": "Vite plugin for nocode compiler",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
+    "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",
     "files": [
         "dist"
     ],
     "scripts": {
-        "dev": "tsc --watch",
-        "build": "tsc",
+        "dev": "tsup --watch",
+        "build": "tsup",
         "prepublishOnly": "npm run build"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",
         "typescript": "^5.0.0",
-        "vite": "^5.4.0"
+        "vite": "^4.5.14",
+        "tsup": "8.5.0"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.2.1"
+        "@meituan-nocode/nocode-compiler-core": "0.2.3-beta.1"
     }
 }