@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.20-z → 0.1.0-beta.21-z

package/README.md

@@ -1,16 +1,19 @@
 # @meituan-nocode/vite-plugin-nocode-compiler
 
-Vite 插件，用于在构建过程中处理 Vue 和 React 组件，添加 nocode 相关的标记。该插件支持自动检测项目框架类型（Vue/React），并应用相应的编译逻辑。
+Vite 插件，用于在构建过程中为 Vue 和 React 组件自动添加属性，支持无代码平台的可视化编辑。
 
-## 特性
+## 🚀 特性
 
-- ✅ 支持 Vue 和 React 组件的处理
-- ✅ 自动检测项目框架类型
+- ✅ 支持 Vue 单文件组件 (`.vue`)
+- ✅ 支持 React JSX/TSX 组件 (`.jsx`, `.tsx`)
+- ✅ 支持 Vue 文件中的 JSX 语法
+- ✅ 支持外部模板文件 (`<template src="xxx.html">`)
 - ✅ 兼容 Vite 4.x 和 5.x 版本
 - ✅ 可配置的日志输出
 - ✅ 支持 ESM 和 CommonJS 导入方式
+- ✅ 自动跳过 `node_modules` 文件
 
-## 安装
+## 📦 安装
 
 ```bash
 # npm
@@ -23,181 +26,211 @@ yarn add @meituan-nocode/vite-plugin-nocode-compiler --dev
 pnpm add @meituan-nocode/vite-plugin-nocode-compiler -D
 ```
 
-## 在测试项目中引入和使用
+## 🔧 快速开始
 
-### 1. 安装依赖
+### 基础配置
 
-首先确保安装了必要的依赖：
+在项目的 `vite.config.js` 或 `vite.config.ts` 中配置插件：
 
-```bash
-# 安装 vite-plugin-nocode-compiler
-npm install @meituan-nocode/vite-plugin-nocode-compiler --save-dev
-
-# 确保安装了 vite
-npm install vite --save-dev
-```
-
-### 2. 配置 Vite
-
-在测试项目的根目录创建或修改 `vite.config.js` 或 `vite.config.ts` 文件：
-
-#### ESM 方式 (推荐)
-
-```js
-// vite.config.js / vite.config.ts
+```typescript
+// vite.config.ts
 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, // 开启日志，方便调试
+        componentCompiler({
+            enableLogging: true, // 开发时建议开启日志
         }),
     ],
 });
 ```
 
-#### CommonJS 方式
+### CommonJS 配置
 
-```js
+```javascript
 // vite.config.js
 const { defineConfig } = require('vite');
-const { NocodeCompiler } = require('@meituan-nocode/vite-plugin-nocode-compiler');
+const componentCompiler = require('@meituan-nocode/vite-plugin-nocode-compiler').default;
 
 module.exports = defineConfig({
     plugins: [
-        NocodeCompiler({
-            enableLogging: true, // 开启日志，方便调试
+        componentCompiler({
+            enableLogging: true,
         }),
     ],
 });
 ```
 
-### 3. 运行测试项目
+## ⚙️ 配置选项
 
-配置完成后，可以通过以下命令启动测试项目：
+| 选项            | 类型      | 默认值  | 描述                                                   |
+| --------------- | --------- | ------- | ------------------------------------------------------ |
+| `enableLogging` | `boolean` | `false` | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
+| `rootPath`      | `string`  | -       | 项目根路径，用于生成相对路径标识                       |
 
-```bash
-# 开发模式
-npx vite
+### 配置示例
 
-# 或构建
-npx vite build
+```typescript
+// 完整配置示例
+export default defineConfig({
+    plugins: [
+        componentCompiler({
+            enableLogging: process.env.NODE_ENV === 'development',
+            rootPath: process.cwd(),
+        }),
+    ],
+});
 ```
 
-### 4. 验证插件是否正常工作
+## 📁 处理的文件类型
 
-如果启用了 `enableLogging: true`，在构建过程中会看到插件的日志输出，包括检测到的框架类型和处理的文件信息。
+### Vue 文件
 
-## 使用方法详解
+- `.vue` 单文件组件的 `<template>` 部分
+- Vue 文件中的 JSX/TSX `<script>` 部分
+- 外部模板文件 `<template src="xxx.html">`
 
-### ESM 导入 (推荐)
+### React 文件
 
-```js
-// vite.config.js / vite.config.ts
-import { defineConfig } from 'vite';
-import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
-// 或者使用默认导入
-// import NocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
+- `.jsx` 文件
+- `.tsx` 文件
+- 包含 JSX 语法的 `.js` 和 `.ts` 文件
 
-export default defineConfig({
-    plugins: [
-        NocodeCompiler({
-            enableLogging: true,
-            // 其他配置选项
-        }),
-    ],
-});
-```
+### 文件处理逻辑
 
-### CommonJS 导入
+插件会根据文件扩展名和 Vite 查询参数智能判断文件类型：
 
-```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;
+```typescript
+// Vue 文件中的 JSX 处理
+// App.vue?type=script&lang.tsx
+// App.vue?isJsx
 
-module.exports = defineConfig({
-    plugins: [
-        NocodeCompiler({
-            enableLogging: true,
-            // 其他配置选项
-        }),
-    ],
-});
+// Vue 模板处理
+// App.vue?type=template
+
+// 外部模板处理
+// template.html?type=template&vue
 ```
 
-## 配置选项
+## 🎯 工作原理
 
-| 选项            | 类型      | 默认值  | 描述                                                   |
-| --------------- | --------- | ------- | ------------------------------------------------------ |
-| `enableLogging` | `boolean` | `false` | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
+插件会在构建过程中为符合条件的元素添加以下属性：
 
-## 处理的文件类型
+```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>
+```
 
-- Vue 文件: `.vue` 文件
-- JSX/TSX 文件: `.jsx`, `.tsx` 文件
-- 包含 JSX 语法的 JS/TS 文件: `.js`, `.ts` 文件
+### 添加的属性说明
 
-## 依赖关系
+- `data-nocode-id`: 元素的唯一标识符（格式：`文件路径:行号:列号`）
+- `data-nocode-path`: 相对文件路径
+- `data-nocode-line`: 元素在文件中的行号
+- `data-nocode-col`: 元素在文件中的列号
+- `data-nocode-array`: （可选）当元素在 `v-for` 或 `map` 循环中时，标识数组名称
 
-该插件依赖于 `@meituan-nocode/nocode-compiler-core` 包，它提供了核心的编译逻辑：
+## 🏗️ 在 Monorepo 项目中使用
 
-- Vue 组件编译器 (`VueCompiler`)
-- JSX 组件编译器 (`JSXCompiler`)
-- 代码转换器 (`CodeTransformer`)
+在 monorepo 项目中，建议在共享配置中定义插件：
 
-## 在 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 });
+```
 
-在 monorepo 项目中，可以在各子项目的 `vite.config.js` 中分别配置插件：
+## 🐛 调试和故障排除
 
-```js
-// 子项目的 vite.config.js
-import { defineConfig } from 'vite';
-import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+### 启用调试日志
 
+```typescript
+// vite.config.ts
 export default defineConfig({
     plugins: [
-        NocodeCompiler({
-            enableLogging: true,
+        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: 开启 `enableLogging` 选项，构建时会输出详细的处理日志，包括检测到的框架类型和处理的文件。
+#### Q: 插件没有生效怎么办？
 
-### Q: 插件处理哪些文件类型？
+A: 检查以下几点：
 
-A: 插件会处理以下文件类型：
+1. 确认插件已正确安装和配置
+2. 确保 `enforce: 'pre'` 设置正确（插件已内置）
+3. 检查文件是否在 `node_modules` 中（插件会自动跳过）
+4. 开启 `enableLogging` 查看是否有处理日志
 
-- Vue 框架: `.vue` 文件
-- React 框架: `.jsx`, `.tsx` 文件，以及包含 JSX 语法的 `.js`, `.ts` 文件
+#### Q: 某些文件没有被处理？
 
-### Q: 如何在 monorepo 项目中使用？
+A: 可能的原因：
 
-A: 在各子项目的 `vite.config.js` 中分别配置插件即可。如果子项目共享配置，确保正确设置相关选项。
+- 文件在 `node_modules` 目录下
+- 文件类型不支持（如纯 CSS 文件）
+- Vue 文件的 `<style>` 部分（插件只处理模板和脚本）
 
-### Q: 如何排查插件不工作的问题？
+#### Q: 如何排除特定文件？
 
-A:
+A: 目前插件没有内置排除选项，但可以通过 Vite 的 `optimizeDeps` 或自定义插件来实现：
+
+```typescript
+export default defineConfig({
+    plugins: [
+        componentCompiler(),
+        // 自定义插件排除特定文件
+        {
+            name: 'exclude-files',
+            transform(code, id) {
+                if (id.includes('excluded-folder')) {
+                    return null; // 跳过处理
+                }
+            },
+        },
+    ],
+});
+```
 
-1. 确保 `vite.config.js` 中正确导入和配置了插件
-2. 开启 `enableLogging: true` 查看详细日志
-3. 检查项目中是否有需要处理的 Vue 或 JSX/TSX 文件
-4. 确认 Vite 版本兼容性（支持 Vite 4.x 和 5.x）
+## 📚 依赖关系
 
-## 许可证
+该插件依赖于以下核心包：
 
-MIT
+- `@meituan-nocode/nocode-compiler-core`: 提供核心编译逻辑
+    - `VueCompiler`: Vue 组件编译器
+    - `JSXCompiler`: JSX 组件编译器

package/dist/index.d.ts

@@ -1,15 +1,14 @@
 export interface NocodeCompilerOptions {
     enableLogging?: boolean;
-    entryFileMarker?: boolean;
+    rootPath?: string;
 }
 /**
  * Vite插件
  * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
- * 兼容 Vite 4.x 和 5.x 版本
  */
-export declare function NocodeCompiler(options?: NocodeCompilerOptions): {
+export 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 default NocodeCompiler;
+export default componentCompiler;

package/dist/index.js

@@ -1,103 +1,60 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NocodeCompiler = NocodeCompiler;
-const compilerCore = __importStar(require("@meituan-nocode/nocode-compiler-core"));
-const { CodeTransformer } = compilerCore;
+exports.componentCompiler = componentCompiler;
+const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
 const utils_1 = require("./utils");
-// 检查是否安装了@vue/compiler-dom
-let vueCompilerAvailable = false;
-try {
-    require('@vue/compiler-dom');
-    vueCompilerAvailable = true;
-}
-catch (error) {
-    console.warn('[vite-plugin-nocode-compiler] @vue/compiler-dom not found. Vue compilation will be skipped.');
-}
 /**
  * Vite插件
  * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
- * 兼容 Vite 4.x 和 5.x 版本
  */
-function NocodeCompiler(options = {}) {
+function componentCompiler(options = {}) {
     options = {
         enableLogging: false,
-        entryFileMarker: false,
         ...options,
     };
     // 创建代码转换器实例
-    const codeTransformer = new CodeTransformer(options);
+    // const codeTransformer = new CodeTransformer(options);
+    const vueCompiler = new nocode_compiler_core_1.VueCompiler(options);
+    const jsxCompiler = new nocode_compiler_core_1.JSXCompiler(options);
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
         async transform(code, id) {
             // 跳过node_modules
             if (id.includes('node_modules')) {
-                return null;
+                return code;
             }
             const [_completePath, query] = id.split('?', 2); // 当前文件的绝对路径
             let filePath = _completePath;
             const params = new URLSearchParams(query);
-            let fileType = '';
-            if ((0, utils_1.isJsTypeFile)(filePath) || (filePath.endsWith('.vue') && (utils_1.jsxParamList.some(param => params.get(param) !== null) || params.get('lang') === 'tsx' || params.get('lang') === 'jsx'))) {
+            // let fileType = '';
+            if ((0, utils_1.isJsTypeFile)(filePath) || (filePath.endsWith('.vue') && (utils_1.JsxParamList.some(param => params.get(param) !== null) || params.get('lang') === 'tsx' || params.get('lang') === 'jsx'))) {
                 // jsx 代码
-                fileType = 'jsx';
+                return jsxCompiler.compile(code, filePath) || code;
             }
             else if (filePath.endsWith('.html') && params.get('type') === 'template' && params.has('vue')) {
                 // <template src="xxx.html"></template>
-                fileType = 'vue';
+                return vueCompiler.compile(code, filePath) || code;
             }
             else if (filePath.endsWith('.vue') && params.get('type') !== 'style' && params.get('raw') === null) {
                 // vue 代码
-                fileType = 'vue';
-            }
-            // 如果是Vue文件但@vue/compiler-dom不可用，跳过处理
-            if (fileType === 'vue' && !vueCompilerAvailable) {
-                console.warn(`[vite-plugin-nocode-compiler] Skipping Vue file processing for ${filePath} due to missing @vue/compiler-dom`);
-                return code;
-            }
-            if (fileType) {
-                return codeTransformer.transformCode({
-                    content: code,
-                    filePath,
-                    fileType,
-                });
+                return vueCompiler.compile(code, filePath) || code;
             }
+            // // 如果是Vue文件但@vue/compiler-dom不可用，跳过处理
+            // if (fileType === 'vue' && !vueCompilerAvailable) {
+            //     console.warn(`[vite-plugin-nocode-compiler] Skipping Vue file processing for ${filePath} due to missing @vue/compiler-dom`);
+            //     return code;
+            // }
+            // if (fileType) {
+            //     return codeTransformer.transformCode({
+            //         content: code,
+            //         filePath,
+            //         fileType,
+            //     });
+            // }
             return code;
         },
     };
 }
 // 添加默认导出，使 ESM 导入更方便
-exports.default = NocodeCompiler;
+exports.default = componentCompiler;

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 export declare const JsFileExtList: string[];
-export declare const jsxParamList: string[];
+export declare const JsxParamList: string[];
 export declare function isJsTypeFile(file: string): boolean;
 /**
  * 规范化路径，将反斜杠转换为正斜杠

package/dist/utils.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsxParamList = exports.JsFileExtList = void 0;
+exports.JsxParamList = exports.JsFileExtList = void 0;
 exports.isJsTypeFile = isJsTypeFile;
 exports.normalizePath = normalizePath;
 exports.JsFileExtList = ['.js', '.ts', '.mjs', '.mts', '.jsx', '.tsx'];
-exports.jsxParamList = ['isJsx', 'isTsx', 'lang.jsx', 'lang.tsx'];
+exports.JsxParamList = ['isJsx', 'isTsx', 'lang.jsx', 'lang.tsx'];
 // 是否为 JS 类型的文件
 function isJsTypeFile(file) {
     return exports.JsFileExtList.some(ext => file.endsWith(ext));
@@ -15,5 +15,7 @@ function isJsTypeFile(file) {
  * @returns 规范化后的路径
  */
 function normalizePath(filePath) {
+    if (!filePath)
+        return '';
     return filePath.replace(/\\/g, '/');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.1.0-beta.20-z",
+    "version": "0.1.0-beta.21-z",
     "description": "nocode compiler plugin",
     "type": "module",
     "main": "dist/index.cjs.js",
@@ -27,6 +27,6 @@
         "vite": "^4.5.14"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.20-z"
+        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.21-z"
     }
 }

package/dist/index.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@meituan-nocode/nocode-compiler-core");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const p=f(m),d=[".js",".ts",".mjs",".mts",".jsx",".tsx"],g=["isJsx","isTsx","lang.jsx","lang.tsx"];function j(e){return d.some(t=>e.endsWith(t))}const{CodeTransformer:x}=p;function i(e={}){const t=new x(e);return{name:"vite-plugin-nocode-compiler",enforce:"pre",async transform(n,r){if(r.includes("node_modules"))return null;const[a,u]=r.split("?",2);let o=a;const s=new URLSearchParams(u);let l="";return j(o)||o.endsWith(".vue")&&(g.some(c=>s.get(c)!==null)||s.get("lang")==="tsx"||s.get("lang")==="jsx")?l="jsx":(o.endsWith(".html")&&s.get("type")==="template"&&s.has("vue")||o.endsWith(".vue")&&s.get("type")!=="style"&&s.get("raw")===null)&&(l="vue"),l?t.transformCode({content:n,filePath:o,fileType:l}):n}}}exports.NocodeCompiler=i;exports.default=i;

package/dist/index.es.js

@@ -1,30 +0,0 @@
-import * as u from "@meituan-nocode/nocode-compiler-core";
-const c = [".js", ".ts", ".mjs", ".mts", ".jsx", ".tsx"], f = ["isJsx", "isTsx", "lang.jsx", "lang.tsx"];
-function p(n) {
-  return c.some((r) => n.endsWith(r));
-}
-const { CodeTransformer: x } = u;
-function d(n = {}) {
-  const r = new x(n);
-  return {
-    name: "vite-plugin-nocode-compiler",
-    enforce: "pre",
-    async transform(o, l) {
-      if (l.includes("node_modules"))
-        return null;
-      const [i, a] = l.split("?", 2);
-      let t = i;
-      const e = new URLSearchParams(a);
-      let s = "";
-      return p(t) || t.endsWith(".vue") && (f.some((m) => e.get(m) !== null) || e.get("lang") === "tsx" || e.get("lang") === "jsx") ? s = "jsx" : (t.endsWith(".html") && e.get("type") === "template" && e.has("vue") || t.endsWith(".vue") && e.get("type") !== "style" && e.get("raw") === null) && (s = "vue"), s ? r.transformCode({
-        content: o,
-        filePath: t,
-        fileType: s
-      }) : o;
-    }
-  };
-}
-export {
-  d as NocodeCompiler,
-  d as default
-};