@meituan-nocode/vite-plugin-nocode-compiler 0.1.0-beta.8 → 0.1.0-beta.9-z

package/README.md

@@ -1,124 +1,137 @@
 # @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
+```
 
-### 基础使用
+## 使用方法
 
-在你的 `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,
+            forceFramework: 'vue', // 或 'react'
+        }),
     ],
 });
 ```
 
-### 启用调试日志
+### CommonJS 导入
+
+```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;
+
+module.exports = defineConfig({
+    plugins: [
+        nocodeCompiler({
+            enableLogging: true,
+            forceFramework: 'vue', // 或 'react'
+        }),
+    ],
+});
+```
 
-如果需要查看编译过程的详细日志：
+### 兼容性导入 (如果上述方法不起作用)
 
-```javascript
+```js
+// vite.config.js / 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/compat';
 
 export default defineConfig({
     plugins: [
         componentCompiler({
-            enableLogging: true, // 启用调试日志
+            enableLogging: true,
+            forceFramework: 'vue', // 或 'react'
         }),
-        // 其他插件...
     ],
 });
 ```
 
-## 工作原理
+## 配置选项
 
-插件会扫描 `.jsx`、`.tsx` 和 `.vue` 文件中的元素，对于不在 Three.js Fiber 元素列表和 Drei 元素列表中的元素，自动添加以下属性：
+| 选项             | 类型               | 默认值   | 描述                                                   |
+| ---------------- | ------------------ | -------- | ------------------------------------------------------ |
+| `enableLogging`  | `boolean`          | `false`  | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |
+| `forceFramework` | `'vue' \| 'react'` | 自动检测 | 强制指定框架类型，不指定时会自动检测                   |
+| `jsxOptions`     | `object`           | `{}`     | JSX 编译器选项，用于配置 React 组件的编译行为          |
+| `vueOptions`     | `object`           | `{}`     | Vue 编译器选项，用于配置 Vue 组件的编译行为            |
 
-- `data-nocode-id`: 格式为 `文件路径:行号:列号`
-- `data-nocode-tag-name`: 元素名称
-- `data-nocode-array`: 当元素在数组映射中时，包含数组名称
+## 框架检测
 
-## 示例
+如果未指定 `forceFramework`，插件会按以下优先级自动检测项目使用的框架：
 
-输入：
+1. 检查 package.json 中的依赖（React 依赖优先于 Vue 依赖）
+2. 检查 src 目录下是否有框架特定文件（JSX/TSX 文件优先于 Vue 文件）
+3. 如果以上都没有检测到，默认返回 React
 
-```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>
-    );
-}
-```
+本插件兼容 Vite 4.x 和 5.x 版本。插件会自动检测 Vite 版本并进行相应的适配，确保在不同版本的 Vite 环境中都能正常工作。
+
+### Vite 版本支持
+
+- **Vite 4.x**: 完全支持 (>=4.0.0)
+- **Vite 5.x**: 完全支持 (包括最新的 5.4.x)
 
-## 架构
+如果在使用过程中遇到任何兼容性问题，请开启日志功能进行调试：
 
-该插件采用模块化设计，支持多种前端框架：
+```js
+nocodeCompiler({
+    enableLogging: true,
+});
+```
 
-- **JSX/TSX**: ✅ 已实现
-- **Vue**: ✅ 已实现
+## 常见问题
 
-详细架构说明请参考 [ARCHITECTURE.md](./ARCHITECTURE.md)
+### Q: 如何确认插件正在正常工作？
 
-## 开发
+A: 开启 `enableLogging` 选项，构建时会输出详细的处理日志，包括检测到的框架类型和处理的文件。
 
-```bash
-# 构建
-npm run build
+### Q: 插件处理哪些文件类型？
 
-# 开发模式（监听文件变化）
-npm run dev
-```
+A: 插件会处理以下文件类型：
+
+- Vue 框架: `.vue` 文件
+- React 框架: `.jsx`, `.tsx` 文件，以及包含 JSX 语法的 `.js`, `.ts` 文件
 
-## 扩展支持
+### Q: 如何在 monorepo 项目中使用？
 
-如需添加新框架支持，请参考架构文档中的扩展指南。
+A: 在各子项目的 `vite.config.js` 中分别配置插件即可。如果子项目共享配置，确保正确设置 `forceFramework` 选项。
 
-## License
+## 许可证
 
-ISC
+MIT

package/dist/framework-detector.d.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,85 @@
+"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';
+    }
+}

package/dist/index.d.ts

@@ -1,5 +1,12 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
+import { FrameworkType } from './framework-detector';
 export interface NocodeCompilerOptions {
     enableLogging?: boolean;
+    forceFramework?: FrameworkType;
 }
+/**
+ * Vite插件：nocode-compiler
+ * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
+ * 兼容 Vite 4.x 和 5.x 版本
+ */
 export declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;

package/dist/index.js

@@ -1,27 +1,128 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentCompiler = componentCompiler;
+const vite_1 = require("vite");
 const nocode_compiler_core_1 = require("@meituan-nocode/nocode-compiler-core");
+const framework_detector_1 = require("./framework-detector");
+const path_1 = __importDefault(require("path"));
+/**
+ * 检测 Vite 版本
+ * @returns 返回主版本号 (4, 5 等)
+ */
+function getViteMajorVersion() {
+    // 从 viteVersion 中提取主版本号
+    const majorVersionMatch = vite_1.version.match(/^(\d+)\./);
+    return majorVersionMatch ? parseInt(majorVersionMatch[1], 10) : 0;
+}
+/**
+ * Vite插件：nocode-compiler
+ * 用于在构建过程中处理Vue和React组件，添加nocode相关的标记
+ * 兼容 Vite 4.x 和 5.x 版本
+ */
 function componentCompiler(options = {}) {
-    const { enableLogging = false } = options;
+    // 检测框架类型
+    let framework = null;
+    // 检测 Vite 版本
+    const viteMajorVersion = getViteMajorVersion();
+    if (options.enableLogging) {
+        console.log(`[vite-nocode-compiler] Detected Vite version: ${vite_1.version} (major: ${viteMajorVersion})`);
+    }
+    // 创建编译器实例
+    const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
+        enableLogging: options.enableLogging || false,
+    });
+    const vueCompiler = new nocode_compiler_core_1.VueCompiler({
+        enableLogging: options.enableLogging || false,
+    });
     return {
         name: 'vite-plugin-nocode-compiler',
         enforce: 'pre',
+        configResolved() {
+            // 在配置解析后检测框架
+            framework = options.forceFramework || (0, framework_detector_1.detectFramework)(options);
+            if (options.enableLogging) {
+                console.log(`[vite-nocode-compiler] Detected framework: ${framework}`);
+            }
+        },
         async transform(code, id) {
-            // 检查文件是否在 node_modules 中
+            // 跳过node_modules
             if (id.includes('node_modules')) {
                 return null;
             }
-            // 检查文件扩展名
-            if (!/\.(jsx?|tsx?)$/.test(id)) {
-                return null;
+            const fileExt = path_1.default.extname(id);
+            // 处理Vue文件
+            if (fileExt === '.vue') {
+                if (framework === 'vue' || options.forceFramework === 'vue') {
+                    if (options.enableLogging) {
+                        console.log(`[vite-nocode-compiler] Processing Vue file: ${id}`);
+                    }
+                    try {
+                        const result = vueCompiler.compile(code, id);
+                        if (typeof result === 'string') {
+                            return {
+                                code: result,
+                                map: null,
+                            };
+                        }
+                        return null;
+                    }
+                    catch (error) {
+                        console.error(`[vite-nocode-compiler] Error processing Vue file: ${id}`, error);
+                        return null;
+                    }
+                }
+            }
+            // 处理JSX/TSX文件
+            if (['.jsx', '.tsx'].includes(fileExt)) {
+                if (framework === 'react' || options.forceFramework === 'react') {
+                    if (options.enableLogging) {
+                        console.log(`[vite-nocode-compiler] Processing JSX/TSX file: ${id}`);
+                    }
+                    try {
+                        const result = jsxCompiler.compile(code, id);
+                        if (typeof result === 'string') {
+                            return {
+                                code: result,
+                                map: null,
+                            };
+                        }
+                        return null;
+                    }
+                    catch (error) {
+                        console.error(`[vite-nocode-compiler] Error processing JSX/TSX file: ${id}`, error);
+                        return null;
+                    }
+                }
+            }
+            // 处理JS/TS文件（可能包含JSX）
+            if (['.js', '.ts'].includes(fileExt)) {
+                if (framework === 'react' || options.forceFramework === 'react') {
+                    // 简单检查是否包含JSX语法
+                    if (code.includes('React.createElement') || code.includes('jsx') || (code.includes('<') && code.includes('/>'))) {
+                        if (options.enableLogging) {
+                            console.log(`[vite-nocode-compiler] Processing JS/TS file with potential JSX: ${id}`);
+                        }
+                        try {
+                            const result = jsxCompiler.compile(code, id);
+                            if (typeof result === 'string') {
+                                return {
+                                    code: result,
+                                    map: null,
+                                };
+                            }
+                            return null;
+                        }
+                        catch (error) {
+                            console.error(`[vite-nocode-compiler] Error processing JS/TS file: ${id}`, error);
+                            return null;
+                        }
+                    }
+                }
             }
-            // 使用 jsxcompiler 编译
-            const jsxCompiler = new nocode_compiler_core_1.JSXCompiler({
-                enableLogging: enableLogging || false,
-            });
-            const result = jsxCompiler.compile(code, id);
-            return result;
+            return null;
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-    "version": "0.1.0-beta.8",
+    "version": "0.1.0-beta.9-z",
     "description": "nocode compiler plugin",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
         "prepublishOnly": "npm run build"
     },
     "peerDependencies": {
-        "vite": "^5.4.0"
+        "vite": ">=4.0.0"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",
@@ -22,6 +22,6 @@
         "vite": "^5.4.0"
     },
     "dependencies": {
-        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.14"
+        "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.16-z"
     }
 }