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

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

@@ -24,17 +24,97 @@ __export(index_exports, {
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
+var import_path = require("path");
 var import_nocode_compiler_core = require("@meituan-nocode/nocode-compiler-core");
+
+// src/utils.ts
+function readJsonBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (e) {
+        reject(e);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+
+// src/index.ts
+var overrideMap = /* @__PURE__ */ new Map();
 function componentCompiler(options = {}) {
   options = {
     enableLogging: false,
+    enableOverride: true,
     ...options
   };
   const vueCompiler = new import_nocode_compiler_core.VueCompiler(options);
   const jsxCompiler = new import_nocode_compiler_core.JSXCompiler(options);
+  let server;
   return {
     name: "vite-plugin-nocode-compiler",
     enforce: "pre",
+    /**
+     * 配置开发服务器，添加 Override 中间件
+     */
+    configureServer(_server) {
+      if (!options.enableOverride) return;
+      server = _server;
+      server.middlewares.use("/__nocode_file_override", async (req, res, next) => {
+        if (req.method !== "POST") {
+          return next();
+        }
+        try {
+          const { file, code } = await readJsonBody(req);
+          if (!file || typeof code !== "string") {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: "file and code are required" }));
+            return;
+          }
+          const absolutePath = (0, import_path.resolve)(server.config.root, file);
+          overrideMap.set(absolutePath, code);
+          const mods = server.moduleGraph.getModulesByFile(absolutePath);
+          if (mods && mods.size > 0) {
+            for (const mod of mods) {
+              server.moduleGraph.invalidateModule(mod);
+              server.ws.send({
+                type: "update",
+                updates: [
+                  {
+                    type: "js-update",
+                    path: mod.url,
+                    acceptedPath: mod.url,
+                    timestamp: Date.now()
+                  }
+                ]
+              });
+            }
+          }
+          res.statusCode = 200;
+          res.end(JSON.stringify({ success: true }));
+        } catch (error) {
+          res.statusCode = 500;
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+    },
+    /**
+     * 加载模块时，如果有 override 则返回 override 内容
+     */
+    load(id) {
+      if (!options.enableOverride) return;
+      if (id.includes("node_modules")) return;
+      const [filePath] = id.split("?", 2);
+      if (overrideMap.has(filePath)) {
+        return overrideMap.get(filePath);
+      }
+      return void 0;
+    },
     async transform(code, id) {
       if (id.includes("node_modules")) {
         return code;

package/dist/index.d.cts

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

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-export interface NocodeCompilerOptions {
+import { Plugin } from 'vite';
+
+interface NocodeCompilerOptions {
     enableLogging?: boolean;
     rootPath?: string;
+    enableOverride?: boolean;
 }
-export declare function componentCompiler(options?: NocodeCompilerOptions): {
-    name: string;
-    enforce: "pre";
-    transform(code: string, id: string): Promise<string | null>;
-};
+declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;
+
+export { type NocodeCompilerOptions, componentCompiler, componentCompiler as default };

package/dist/index.js

@@ -1,28 +1,116 @@
-"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 { resolve } from "path";
+import { JSXCompiler, VueCompiler, detectCompileScenario } from "@meituan-nocode/nocode-compiler-core";
+
+// src/utils.ts
+function readJsonBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (e) {
+        reject(e);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+
+// src/index.ts
+var overrideMap = /* @__PURE__ */ new Map();
 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;
+  options = {
+    enableLogging: false,
+    enableOverride: true,
+    ...options
+  };
+  const vueCompiler = new VueCompiler(options);
+  const jsxCompiler = new JSXCompiler(options);
+  let server;
+  return {
+    name: "vite-plugin-nocode-compiler",
+    enforce: "pre",
+    /**
+     * 配置开发服务器，添加 Override 中间件
+     */
+    configureServer(_server) {
+      if (!options.enableOverride) return;
+      server = _server;
+      server.middlewares.use("/__nocode_file_override", async (req, res, next) => {
+        if (req.method !== "POST") {
+          return next();
+        }
+        try {
+          const { file, code } = await readJsonBody(req);
+          if (!file || typeof code !== "string") {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: "file and code are required" }));
+            return;
+          }
+          const absolutePath = resolve(server.config.root, file);
+          overrideMap.set(absolutePath, code);
+          const mods = server.moduleGraph.getModulesByFile(absolutePath);
+          if (mods && mods.size > 0) {
+            for (const mod of mods) {
+              server.moduleGraph.invalidateModule(mod);
+              server.ws.send({
+                type: "update",
+                updates: [
+                  {
+                    type: "js-update",
+                    path: mod.url,
+                    acceptedPath: mod.url,
+                    timestamp: Date.now()
+                  }
+                ]
+              });
             }
-            // 使用 jsxcompiler 编译
-            const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
-                enableLogging,
-                rootPath,
-            });
-            const result = jsxCompiler.compile(code, id);
-            return result;
-        },
-    };
+          }
+          res.statusCode = 200;
+          res.end(JSON.stringify({ success: true }));
+        } catch (error) {
+          res.statusCode = 500;
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+    },
+    /**
+     * 加载模块时，如果有 override 则返回 override 内容
+     */
+    load(id) {
+      if (!options.enableOverride) return;
+      if (id.includes("node_modules")) return;
+      const [filePath] = id.split("?", 2);
+      if (overrideMap.has(filePath)) {
+        return overrideMap.get(filePath);
+      }
+      return void 0;
+    },
+    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,32 @@
 {
-    "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.2.3",
-    "description": "Vite plugin for nocode compiler",
-    "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"
+  "name": "@meituan-nocode/vite-plugin-nocode-compiler",
+  "version": "0.2.4-beta.0",
+  "description": "Vite plugin for nocode compiler",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "devDependencies": {
-        "@types/node": "^20.0.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.4.0"
-    },
-    "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.2.3"
-    }
-}
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.5.14",
+    "tsup": "8.5.0"
+  },
+  "dependencies": {
+    "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.24-z"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  }
+}