@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.10 → 0.1.0-beta.18-z

package/README.md

@@ -1,120 +1,203 @@
 # @meituan-nocode/vite-plugin-nocode-compiler
 
-一个用于 Vite 的 nocode 编译插件，为 JSX 元素自动添加 nocode 所需的标识属性。
+Vite 插件，用于在构建过程中处理 Vue 和 React 组件，添加 nocode 相关的标记。该插件支持自动检测项目框架类型（Vue/React），并应用相应的编译逻辑。
 
-## 功能
+## 特性
 
-- 🚀 **多框架支持**: 支持 JSX、TSX 和 Vue 文件
-- 📦 **自动元素标记**: 为非 Three.js Fiber 和非 Drei 的元素自动添加 nocode 标识
-- 🔄 **数组上下文检测**: 智能识别数组映射，添加索引信息
-- 🎯 **简单配置**: 开箱即用，仅需最少配置
-- ⚡️ **高性能**: 优化的编译过程，快速处理
+- ✅ 支持 Vue 和 React 组件的处理
+- ✅ 自动检测项目框架类型
+- ✅ 兼容 Vite 4.x 和 5.x 版本
+- ✅ 可配置的日志输出
+- ✅ 支持 ESM 和 CommonJS 导入方式
 
 ## 安装
 
 ```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
+```
+
+## 在测试项目中引入和使用
+
+### 1. 安装依赖
+
+首先确保安装了必要的依赖：
+
+```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` 文件：
 
-在你的 `vite.config.js` 或 `vite.config.ts` 中：
+#### ESM 方式 (推荐)
 
-```javascript
+```js
+// vite.config.js / vite.config.ts
 import { defineConfig } from 'vite';
-import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+// 或者使用默认导出
+// import NocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
     plugins: [
-        componentCompiler(), // 使用默认配置
-        // 其他插件...
+        NocodeCompiler({
+            enableLogging: true, // 开启日志，方便调试
+        }),
     ],
 });
 ```
 
-### 启用调试日志
+#### CommonJS 方式
+
+```js
+// vite.config.js
+const { defineConfig } = require('vite');
+const { NocodeCompiler } = require('@meituan-nocode/vite-plugin-nocode-compiler');
+
+module.exports = defineConfig({
+    plugins: [
+        NocodeCompiler({
+            enableLogging: true, // 开启日志，方便调试
+        }),
+    ],
+});
+```
+
+### 3. 运行测试项目
+
+配置完成后，可以通过以下命令启动测试项目：
+
+```bash
+# 开发模式
+npx vite
+
+# 或构建
+npx vite build
+```
+
+### 4. 验证插件是否正常工作
+
+如果启用了 `enableLogging: true`，在构建过程中会看到插件的日志输出，包括检测到的框架类型和处理的文件信息。
+
+## 使用方法详解
 
-如果需要查看编译过程的详细日志：
+### ESM 导入 (推荐)
 
-```javascript
+```js
+// vite.config.js / vite.config.ts
 import { defineConfig } from 'vite';
-import { componentCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
+// 或者使用默认导入
+// import NocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
 
 export default defineConfig({
     plugins: [
-        componentCompiler({
-            enableLogging: true, // 启用调试日志
+        NocodeCompiler({
+            enableLogging: true,
+            // 其他配置选项
         }),
-        // 其他插件...
     ],
 });
 ```
 
-## 工作原理
+### CommonJS 导入
 
-插件会扫描 `.jsx`、`.tsx` 和 `.vue` 文件中的元素，对于不在 Three.js Fiber 元素列表和 Drei 元素列表中的元素，自动添加以下属性：
+```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;
 
-- `data-nocode-id`: 格式为 `文件路径:行号:列号`
-- `data-nocode-tag-name`: 元素名称
-- `data-nocode-array`: 当元素在数组映射中时，包含数组名称
+module.exports = defineConfig({
+    plugins: [
+        NocodeCompiler({
+            enableLogging: true,
+            // 其他配置选项
+        }),
+    ],
+});
+```
 
-## 示例
+## 配置选项
 
-输入：
+| 选项            | 类型      | 默认值  | 描述                                                   |
+| --------------- | --------- | ------- | ------------------------------------------------------ |
+| `enableLogging` | `boolean` | `false` | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
 
-```jsx
-function App() {
-    return (
-        <div>
-            <button>Click me</button>
-            {items.map((item, index) => (
-                <span key={item.id}>{item.name}</span>
-            ))}
-        </div>
-    );
-}
-```
+## 处理的文件类型
 
-输出：
-
-```jsx
-function App() {
-    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>
-            {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>
-    );
-}
-```
+插件会处理以下文件类型：
 
-## 架构
+- Vue 文件: `.vue` 文件
+- JSX/TSX 文件: `.jsx`, `.tsx` 文件
+- 包含 JSX 语法的 JS/TS 文件: `.js`, `.ts` 文件
 
-该插件采用模块化设计，支持多种前端框架：
+## 依赖关系
 
-- **JSX/TSX**: ✅ 已实现
-- **Vue**: ✅ 已实现
+该插件依赖于 `@meituan-nocode/nocode-compiler-core` 包，它提供了核心的编译逻辑：
 
-详细架构说明请参考 [ARCHITECTURE.md](./ARCHITECTURE.md)
+- Vue 组件编译器 (`VueCompiler`)
+- JSX 组件编译器 (`JSXCompiler`)
+- 代码转换器 (`CodeTransformer`)
 
-## 开发
+## 在 monorepo 项目中使用
 
-```bash
-# 构建
-npm run build
+在 monorepo 项目中，可以在各子项目的 `vite.config.js` 中分别配置插件：
+
+```js
+// 子项目的 vite.config.js
+import { defineConfig } from 'vite';
+import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
 
-# 开发模式（监听文件变化）
-npm run dev
+export default defineConfig({
+    plugins: [
+        NocodeCompiler({
+            enableLogging: true,
+        }),
+    ],
+});
 ```
 
-## 扩展支持
+## 常见问题
+
+### Q: 如何确认插件正在正常工作？
+
+A: 开启 `enableLogging` 选项，构建时会输出详细的处理日志，包括检测到的框架类型和处理的文件。
+
+### Q: 插件处理哪些文件类型？
+
+A: 插件会处理以下文件类型：
+
+- Vue 框架: `.vue` 文件
+- React 框架: `.jsx`, `.tsx` 文件，以及包含 JSX 语法的 `.js`, `.ts` 文件
+
+### Q: 如何在 monorepo 项目中使用？
+
+A: 在各子项目的 `vite.config.js` 中分别配置插件即可。如果子项目共享配置，确保正确设置相关选项。
+
+### Q: 如何排查插件不工作的问题？
+
+A:
+
+1. 确保 `vite.config.js` 中正确导入和配置了插件
+2. 开启 `enableLogging: true` 查看详细日志
+3. 检查项目中是否有需要处理的 Vue 或 JSX/TSX 文件
+4. 确认 Vite 版本兼容性（支持 Vite 4.x 和 5.x）
+
+## 许可证
 
-如需添加新框架支持，请参考架构文档中的扩展指南。
+MIT

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"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.d.ts

@@ -1,5 +1,14 @@
-import type { Plugin } from 'vite';
 export interface NocodeCompilerOptions {
     enableLogging?: boolean;
 }
-export declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;
+/**
+ * Vite插件
+ * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
+ * 兼容 Vite 4.x 和 5.x 版本
+ */
+export declare function NocodeCompiler(options?: NocodeCompilerOptions): {
+    name: string;
+    enforce: "pre";
+    transform(code: string, id: string): Promise<string | null>;
+};
+export default NocodeCompiler;

package/dist/index.es.js

@@ -0,0 +1,30 @@
+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
+};

package/dist/index.js

@@ -1,28 +1,100 @@
 "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.componentCompiler = componentCompiler;
-const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
-function componentCompiler(options = {}) {
-    const { enableLogging = false } = options;
+exports.NocodeCompiler = NocodeCompiler;
+// import { Plugin } from 'vite';
+// 使用动态导入方式解决 ESM 和 CommonJS 的兼容性问题
+const compilerCore = __importStar(require("@meituan-nocode/nocode-compiler-core"));
+const { CodeTransformer } = compilerCore;
+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 = {}) {
+    // 创建代码转换器实例
+    const codeTransformer = new CodeTransformer(options);
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
         async transform(code, id) {
-            // 检查文件是否在 node_modules 中
+            // 跳过node_modules
             if (id.includes('node_modules')) {
-                return code;
+                return null;
             }
-            // 检查文件扩展名
-            if (!/\.(jsx?|tsx?)$/.test(id)) {
+            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'))) {
+                // jsx 代码
+                fileType = 'jsx';
+            }
+            else if (filePath.endsWith('.html') && params.get('type') === 'template' && params.has('vue')) {
+                // <template src="xxx.html"></template>
+                fileType = 'vue';
+            }
+            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;
             }
-            // 使用 jsxcompiler 编译
-            const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
-                enableLogging: enableLogging || false,
-                rootPath: process.cwd(),
-            });
-            const result = jsxCompiler.compile(code, id);
-            return result;
+            if (fileType) {
+                return codeTransformer.transformCode({
+                    content: code,
+                    filePath,
+                    fileType,
+                });
+            }
+            return code;
         },
     };
 }
+// 添加默认导出，使 ESM 导入更方便
+exports.default = NocodeCompiler;

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const JsFileExtList: string[];
+export declare const jsxParamList: string[];
+export declare function isJsTypeFile(file: string): boolean;

package/dist/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxParamList = exports.JsFileExtList = void 0;
+exports.isJsTypeFile = isJsTypeFile;
+exports.JsFileExtList = ['.js', '.ts', '.mjs', '.mts', '.jsx', '.tsx'];
+exports.jsxParamList = ['isJsx', 'isTsx', 'lang.jsx', 'lang.tsx'];
+// 是否为 JS 类型的文件
+function isJsTypeFile(file) {
+    return exports.JsFileExtList.some(ext => file.endsWith(ext));
+}

package/package.json

@@ -1,10 +1,18 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.1.0-beta.10",
+    "version": "0.1.0-beta.18-z",
     "description": "nocode compiler plugin",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
+    "type": "module",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.es.js",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "require": "./dist/index.cjs.js",
+            "import": "./dist/index.es.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
     "files": [
         "dist"
     ],
@@ -13,15 +21,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"
+        "vite": "^4.5.14"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.17"
+        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.18-z"
     }
 }

package/dist/framework-detector.d.ts

@@ -1,13 +0,0 @@
-export type FrameworkType = 'vue' | 'react';
-/**
- * 框架检测器
- * 按优先级检测项目使用的前端框架
- * 1. 首先检查是否强制指定了框架
- * 2. 然后检查package.json中的依赖（React依赖优先于Vue依赖）
- * 3. 接着检查src目录下是否有框架特定文件（JSX/TSX文件优先于Vue文件）
- * 4. 如果以上都没有检测到，默认返回React
- */
-export declare function detectFramework(options?: {
-    forceFramework?: FrameworkType;
-    enableLogging?: boolean;
-}): FrameworkType;

package/dist/framework-detector.js

@@ -1,85 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.detectFramework = detectFramework;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-/**
- * 框架检测器
- * 按优先级检测项目使用的前端框架
- * 1. 首先检查是否强制指定了框架
- * 2. 然后检查package.json中的依赖（React依赖优先于Vue依赖）
- * 3. 接着检查src目录下是否有框架特定文件（JSX/TSX文件优先于Vue文件）
- * 4. 如果以上都没有检测到，默认返回React
- */
-function detectFramework(options) {
-    const log = (message, ...args) => {
-        if (options?.enableLogging) {
-            console.log(`[vite-nocode-compiler] ${message}`, ...args);
-        }
-    };
-    // 1. 如果强制指定了框架，直接返回
-    if (options?.forceFramework) {
-        log('Using forced framework:', options.forceFramework);
-        return options.forceFramework;
-    }
-    try {
-        // 2. 检查package.json
-        const packagePath = path_1.default.resolve(process.cwd(), 'package.json');
-        log('Checking package.json:', packagePath);
-        if (fs_1.default.existsSync(packagePath)) {
-            try {
-                const pkg = JSON.parse(fs_1.default.readFileSync(packagePath, 'utf8'));
-                const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
-                log('Package dependencies:', deps);
-                // React相关依赖（优先检查React，因为Vue项目可能也会依赖React组件）
-                if (deps.react || deps['react-dom']) {
-                    log('React dependency detected');
-                    return 'react';
-                }
-                // Vue相关依赖
-                if (deps.vue || deps['@vue/cli-service'] || deps.nuxt || deps['@vitejs/plugin-vue']) {
-                    log('Vue dependency detected');
-                    return 'vue';
-                }
-            }
-            catch (e) {
-                log('Failed to parse package.json:', e);
-                // 解析package.json失败，继续下一步检测
-            }
-        }
-        // 3. 快速检查src目录下是否有框架特定文件（不递归）
-        const srcDir = path_1.default.resolve(process.cwd(), 'src');
-        log('Checking src directory:', srcDir);
-        if (fs_1.default.existsSync(srcDir)) {
-            try {
-                const files = fs_1.default.readdirSync(srcDir);
-                log('Files in src directory:', files);
-                // 检查是否有.jsx/.tsx文件（优先检查React文件）
-                if (files.some(file => file.endsWith('.jsx') || file.endsWith('.tsx'))) {
-                    log('JSX/TSX file detected');
-                    return 'react';
-                }
-                // 检查是否有.vue文件
-                if (files.some(file => file.endsWith('.vue'))) {
-                    log('Vue file detected');
-                    return 'vue';
-                }
-            }
-            catch (e) {
-                log('Failed to read src directory:', e);
-                // 读取目录失败，继续使用默认值
-            }
-        }
-        // 4. 默认返回React
-        log('No framework detected, using default: react');
-        return 'react';
-    }
-    catch (e) {
-        log('Error in detectFramework:', e);
-        // 出现任何错误，默认使用React
-        return 'react';
-    }
-}