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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,16 +1,19 @@
1
1
  # @meituan-nocode/vite-plugin-nocode-compiler
2
2
 
3
- Vite 插件,用于在构建过程中处理 Vue 和 React 组件,添加 nocode 相关的标记。该插件支持自动检测项目框架类型(Vue/React),并应用相应的编译逻辑。
3
+ Vite 插件,用于在构建过程中为 Vue 和 React 组件自动添加属性,支持无代码平台的可视化编辑。
4
4
 
5
- ## 特性
5
+ ## 🚀 特性
6
6
 
7
- - ✅ 支持 Vue React 组件的处理
8
- - ✅ 自动检测项目框架类型
7
+ - ✅ 支持 Vue 单文件组件 (`.vue`)
8
+ - ✅ 支持 React JSX/TSX 组件 (`.jsx`, `.tsx`)
9
+ - ✅ 支持 Vue 文件中的 JSX 语法
10
+ - ✅ 支持外部模板文件 (`<template src="xxx.html">`)
9
11
  - ✅ 兼容 Vite 4.x 和 5.x 版本
10
12
  - ✅ 可配置的日志输出
11
13
  - ✅ 支持 ESM 和 CommonJS 导入方式
14
+ - ✅ 自动跳过 `node_modules` 文件
12
15
 
13
- ## 安装
16
+ ## 📦 安装
14
17
 
15
18
  ```bash
16
19
  # npm
@@ -23,181 +26,211 @@ yarn add @meituan-nocode/vite-plugin-nocode-compiler --dev
23
26
  pnpm add @meituan-nocode/vite-plugin-nocode-compiler -D
24
27
  ```
25
28
 
26
- ## 在测试项目中引入和使用
29
+ ## 🔧 快速开始
27
30
 
28
- ### 1. 安装依赖
31
+ ### 基础配置
29
32
 
30
- 首先确保安装了必要的依赖:
33
+ 在项目的 `vite.config.js` 或 `vite.config.ts` 中配置插件:
31
34
 
32
- ```bash
33
- # 安装 vite-plugin-nocode-compiler
34
- npm install @meituan-nocode/vite-plugin-nocode-compiler --save-dev
35
-
36
- # 确保安装了 vite
37
- npm install vite --save-dev
38
- ```
39
-
40
- ### 2. 配置 Vite
41
-
42
- 在测试项目的根目录创建或修改 `vite.config.js` 或 `vite.config.ts` 文件:
43
-
44
- #### ESM 方式 (推荐)
45
-
46
- ```js
47
- // vite.config.js / vite.config.ts
35
+ ```typescript
36
+ // vite.config.ts
48
37
  import { defineConfig } from 'vite';
49
- import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
50
- // 或者使用默认导出
51
- // import NocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
38
+ import componentCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
52
39
 
53
40
  export default defineConfig({
54
41
  plugins: [
55
- NocodeCompiler({
56
- enableLogging: true, // 开启日志,方便调试
42
+ componentCompiler({
43
+ enableLogging: true, // 开发时建议开启日志
57
44
  }),
58
45
  ],
59
46
  });
60
47
  ```
61
48
 
62
- #### CommonJS 方式
49
+ ### CommonJS 配置
63
50
 
64
- ```js
51
+ ```javascript
65
52
  // vite.config.js
66
53
  const { defineConfig } = require('vite');
67
- const { NocodeCompiler } = require('@meituan-nocode/vite-plugin-nocode-compiler');
54
+ const componentCompiler = require('@meituan-nocode/vite-plugin-nocode-compiler').default;
68
55
 
69
56
  module.exports = defineConfig({
70
57
  plugins: [
71
- NocodeCompiler({
72
- enableLogging: true, // 开启日志,方便调试
58
+ componentCompiler({
59
+ enableLogging: true,
73
60
  }),
74
61
  ],
75
62
  });
76
63
  ```
77
64
 
78
- ### 3. 运行测试项目
65
+ ## ⚙️ 配置选项
79
66
 
80
- 配置完成后,可以通过以下命令启动测试项目:
67
+ | 选项 | 类型 | 默认值 | 描述 |
68
+ | --------------- | --------- | ------- | ------------------------------------------------------ |
69
+ | `enableLogging` | `boolean` | `false` | 是否启用日志输出,开启后会输出详细的处理过程和调试信息 |
70
+ | `rootPath` | `string` | - | 项目根路径,用于生成相对路径标识 |
81
71
 
82
- ```bash
83
- # 开发模式
84
- npx vite
72
+ ### 配置示例
85
73
 
86
- # 或构建
87
- npx vite build
74
+ ```typescript
75
+ // 完整配置示例
76
+ export default defineConfig({
77
+ plugins: [
78
+ componentCompiler({
79
+ enableLogging: process.env.NODE_ENV === 'development',
80
+ rootPath: process.cwd(),
81
+ }),
82
+ ],
83
+ });
88
84
  ```
89
85
 
90
- ### 4. 验证插件是否正常工作
86
+ ## 📁 处理的文件类型
91
87
 
92
- 如果启用了 `enableLogging: true`,在构建过程中会看到插件的日志输出,包括检测到的框架类型和处理的文件信息。
88
+ ### Vue 文件
93
89
 
94
- ## 使用方法详解
90
+ - `.vue` 单文件组件的 `<template>` 部分
91
+ - Vue 文件中的 JSX/TSX `<script>` 部分
92
+ - 外部模板文件 `<template src="xxx.html">`
95
93
 
96
- ### ESM 导入 (推荐)
94
+ ### React 文件
97
95
 
98
- ```js
99
- // vite.config.js / vite.config.ts
100
- import { defineConfig } from 'vite';
101
- import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
102
- // 或者使用默认导入
103
- // import NocodeCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
96
+ - `.jsx` 文件
97
+ - `.tsx` 文件
98
+ - 包含 JSX 语法的 `.js` 和 `.ts` 文件
104
99
 
105
- export default defineConfig({
106
- plugins: [
107
- NocodeCompiler({
108
- enableLogging: true,
109
- // 其他配置选项
110
- }),
111
- ],
112
- });
113
- ```
100
+ ### 文件处理逻辑
114
101
 
115
- ### CommonJS 导入
102
+ 插件会根据文件扩展名和 Vite 查询参数智能判断文件类型:
116
103
 
117
- ```js
118
- // vite.config.js
119
- const { defineConfig } = require('vite');
120
- const { NocodeCompiler } = require('@meituan-nocode/vite-plugin-nocode-compiler');
121
- // 或者使用默认导入并解构
122
- // const pkg = require('@meituan-nocode/vite-plugin-nocode-compiler');
123
- // const { NocodeCompiler } = pkg;
104
+ ```typescript
105
+ // Vue 文件中的 JSX 处理
106
+ // App.vue?type=script&lang.tsx
107
+ // App.vue?isJsx
124
108
 
125
- module.exports = defineConfig({
126
- plugins: [
127
- NocodeCompiler({
128
- enableLogging: true,
129
- // 其他配置选项
130
- }),
131
- ],
132
- });
109
+ // Vue 模板处理
110
+ // App.vue?type=template
111
+
112
+ // 外部模板处理
113
+ // template.html?type=template&vue
133
114
  ```
134
115
 
135
- ## 配置选项
116
+ ## 🎯 工作原理
136
117
 
137
- | 选项 | 类型 | 默认值 | 描述 |
138
- | --------------- | --------- | ------- | ------------------------------------------------------ |
139
- | `enableLogging` | `boolean` | `false` | 是否启用日志输出,开启后会输出详细的处理过程和调试信息 |
118
+ 插件会在构建过程中为符合条件的元素添加以下属性:
140
119
 
141
- ## 处理的文件类型
120
+ ```html
121
+ <!-- 处理前 -->
122
+ <div class="container">
123
+ <button>Click me</button>
124
+ </div>
142
125
 
143
- 插件会处理以下文件类型:
126
+ <!-- 处理后 -->
127
+ <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">
128
+ <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>
129
+ </div>
130
+ ```
144
131
 
145
- - Vue 文件: `.vue` 文件
146
- - JSX/TSX 文件: `.jsx`, `.tsx` 文件
147
- - 包含 JSX 语法的 JS/TS 文件: `.js`, `.ts` 文件
132
+ ### 添加的属性说明
148
133
 
149
- ## 依赖关系
134
+ - `data-nocode-id`: 元素的唯一标识符(格式:`文件路径:行号:列号`)
135
+ - `data-nocode-path`: 相对文件路径
136
+ - `data-nocode-line`: 元素在文件中的行号
137
+ - `data-nocode-col`: 元素在文件中的列号
138
+ - `data-nocode-array`: (可选)当元素在 `v-for` 或 `map` 循环中时,标识数组名称
150
139
 
151
- 该插件依赖于 `@meituan-nocode/nocode-compiler-core` 包,它提供了核心的编译逻辑:
140
+ ## 🏗️ 在 Monorepo 项目中使用
152
141
 
153
- - Vue 组件编译器 (`VueCompiler`)
154
- - JSX 组件编译器 (`JSXCompiler`)
155
- - 代码转换器 (`CodeTransformer`)
142
+ monorepo 项目中,建议在共享配置中定义插件:
156
143
 
157
- ## 在 monorepo 项目中使用
144
+ ```typescript
145
+ // packages/shared/vite-config.ts
146
+ import { defineConfig } from 'vite';
147
+ import componentCompiler from '@meituan-nocode/vite-plugin-nocode-compiler';
148
+
149
+ export const createViteConfig = (options: { enableLogging?: boolean } = {}) => {
150
+ return defineConfig({
151
+ plugins: [
152
+ componentCompiler({
153
+ enableLogging: options.enableLogging ?? process.env.NODE_ENV === 'development',
154
+ }),
155
+ ],
156
+ });
157
+ };
158
+
159
+ // 子项目中使用
160
+ // packages/app-a/vite.config.ts
161
+ import { createViteConfig } from '@shared/vite-config';
162
+
163
+ export default createViteConfig({ enableLogging: true });
164
+ ```
158
165
 
159
- monorepo 项目中,可以在各子项目的 `vite.config.js` 中分别配置插件:
166
+ ## 🐛 调试和故障排除
160
167
 
161
- ```js
162
- // 子项目的 vite.config.js
163
- import { defineConfig } from 'vite';
164
- import { NocodeCompiler } from '@meituan-nocode/vite-plugin-nocode-compiler';
168
+ ### 启用调试日志
165
169
 
170
+ ```typescript
171
+ // vite.config.ts
166
172
  export default defineConfig({
167
173
  plugins: [
168
- NocodeCompiler({
169
- enableLogging: true,
174
+ componentCompiler({
175
+ enableLogging: true, // 开启详细日志
170
176
  }),
171
177
  ],
172
178
  });
173
179
  ```
174
180
 
175
- ## 常见问题
181
+ 开启后,构建时会输出类似日志:
182
+
183
+ ```
184
+ [vite-plugin-nocode-compiler] Processing Vue file: src/App.vue
185
+ [vue-compiler] File processing complete 5
186
+ [vite-plugin-nocode-compiler] Processing JSX file: src/components/Button.tsx
187
+ [jsx-compiler] File processing complete 3
188
+ ```
176
189
 
177
- ### Q: 如何确认插件正在正常工作?
190
+ ### 常见问题
178
191
 
179
- A: 开启 `enableLogging` 选项,构建时会输出详细的处理日志,包括检测到的框架类型和处理的文件。
192
+ #### Q: 插件没有生效怎么办?
180
193
 
181
- ### Q: 插件处理哪些文件类型?
194
+ A: 检查以下几点:
182
195
 
183
- A: 插件会处理以下文件类型:
196
+ 1. 确认插件已正确安装和配置
197
+ 2. 确保 `enforce: 'pre'` 设置正确(插件已内置)
198
+ 3. 检查文件是否在 `node_modules` 中(插件会自动跳过)
199
+ 4. 开启 `enableLogging` 查看是否有处理日志
184
200
 
185
- - Vue 框架: `.vue` 文件
186
- - React 框架: `.jsx`, `.tsx` 文件,以及包含 JSX 语法的 `.js`, `.ts` 文件
201
+ #### Q: 某些文件没有被处理?
187
202
 
188
- ### Q: 如何在 monorepo 项目中使用?
203
+ A: 可能的原因:
189
204
 
190
- A: 在各子项目的 `vite.config.js` 中分别配置插件即可。如果子项目共享配置,确保正确设置相关选项。
205
+ - 文件在 `node_modules` 目录下
206
+ - 文件类型不支持(如纯 CSS 文件)
207
+ - Vue 文件的 `<style>` 部分(插件只处理模板和脚本)
191
208
 
192
- ### Q: 如何排查插件不工作的问题?
209
+ #### Q: 如何排除特定文件?
193
210
 
194
- A:
211
+ A: 目前插件没有内置排除选项,但可以通过 Vite 的 `optimizeDeps` 或自定义插件来实现:
212
+
213
+ ```typescript
214
+ export default defineConfig({
215
+ plugins: [
216
+ componentCompiler(),
217
+ // 自定义插件排除特定文件
218
+ {
219
+ name: 'exclude-files',
220
+ transform(code, id) {
221
+ if (id.includes('excluded-folder')) {
222
+ return null; // 跳过处理
223
+ }
224
+ },
225
+ },
226
+ ],
227
+ });
228
+ ```
195
229
 
196
- 1. 确保 `vite.config.js` 中正确导入和配置了插件
197
- 2. 开启 `enableLogging: true` 查看详细日志
198
- 3. 检查项目中是否有需要处理的 Vue 或 JSX/TSX 文件
199
- 4. 确认 Vite 版本兼容性(支持 Vite 4.x 和 5.x)
230
+ ## 📚 依赖关系
200
231
 
201
- ## 许可证
232
+ 该插件依赖于以下核心包:
202
233
 
203
- MIT
234
+ - `@meituan-nocode/nocode-compiler-core`: 提供核心编译逻辑
235
+ - `VueCompiler`: Vue 组件编译器
236
+ - `JSXCompiler`: JSX 组件编译器
package/dist/index.cjs ADDED
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ componentCompiler: () => componentCompiler,
24
+ default: () => index_default
25
+ });
26
+ module.exports = __toCommonJS(index_exports);
27
+ var import_nocode_compiler_core = require("@meituan-nocode/nocode-compiler-core");
28
+
29
+ // src/utils.ts
30
+ var JsFileExtList = [".js", ".ts", ".mjs", ".mts", ".jsx", ".tsx"];
31
+ function isJsTypeFile(file) {
32
+ return JsFileExtList.some((ext) => file.endsWith(ext));
33
+ }
34
+
35
+ // src/index.ts
36
+ function componentCompiler(options = {}) {
37
+ options = {
38
+ enableLogging: false,
39
+ ...options
40
+ };
41
+ const vueCompiler = new import_nocode_compiler_core.VueCompiler(options);
42
+ const jsxCompiler = new import_nocode_compiler_core.JSXCompiler(options);
43
+ return {
44
+ name: "vite-plugin-nocode-compiler",
45
+ enforce: "pre",
46
+ async transform(code, id) {
47
+ if (id.includes("node_modules")) {
48
+ return code;
49
+ }
50
+ const [_completePath, query] = id.split("?", 2);
51
+ let filePath = _completePath;
52
+ const params = new URLSearchParams(query);
53
+ const isJsTypeFileResult = isJsTypeFile(filePath);
54
+ const isVueFile = filePath.endsWith(".vue");
55
+ const isHtmlFile = filePath.endsWith(".html");
56
+ const type = params.get("type");
57
+ const lang = params.get("lang");
58
+ const isTemplateType = type === "template";
59
+ const isScriptType = type === "script";
60
+ const isJsxLang = lang === "tsx" || lang === "jsx";
61
+ const isRawType = params.get("raw") !== null;
62
+ if (isVueFile && isScriptType && isJsxLang) {
63
+ return jsxCompiler.compile(code, filePath) || code;
64
+ }
65
+ if (isVueFile && isTemplateType) {
66
+ return vueCompiler.compile(code, filePath) || code;
67
+ }
68
+ if (isHtmlFile && isTemplateType && params.has("vue")) {
69
+ return vueCompiler.compile(code, filePath) || code;
70
+ }
71
+ if (isJsTypeFileResult && !isVueFile) {
72
+ return jsxCompiler.compile(code, filePath) || code;
73
+ }
74
+ if (isVueFile && !type && !isRawType) {
75
+ return vueCompiler.compile(code, filePath) || code;
76
+ }
77
+ return code;
78
+ }
79
+ };
80
+ }
81
+ var index_default = componentCompiler;
82
+ // Annotate the CommonJS export names for ESM import in node:
83
+ 0 && (module.exports = {
84
+ componentCompiler
85
+ });
@@ -0,0 +1,15 @@
1
+ interface NocodeCompilerOptions {
2
+ enableLogging?: boolean;
3
+ rootPath?: string;
4
+ }
5
+ /**
6
+ * Vite插件
7
+ * 用于在构建过程中处理Vue和React组件,添加nocode相关的标记
8
+ */
9
+ declare function componentCompiler(options?: NocodeCompilerOptions): {
10
+ name: string;
11
+ enforce: "pre";
12
+ transform(code: string, id: string): Promise<string>;
13
+ };
14
+
15
+ export { type NocodeCompilerOptions, componentCompiler, componentCompiler as default };
package/dist/index.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- export interface NocodeCompilerOptions {
1
+ interface NocodeCompilerOptions {
2
2
  enableLogging?: boolean;
3
- entryFileMarker?: boolean;
3
+ rootPath?: string;
4
4
  }
5
5
  /**
6
6
  * Vite插件
7
7
  * 用于在构建过程中处理Vue和React组件,添加nocode相关的标记
8
- * 兼容 Vite 4.x 和 5.x 版本
9
8
  */
10
- export declare function NocodeCompiler(options?: NocodeCompilerOptions): {
9
+ declare function componentCompiler(options?: NocodeCompilerOptions): {
11
10
  name: string;
12
11
  enforce: "pre";
13
- transform(code: string, id: string): Promise<string | null>;
12
+ transform(code: string, id: string): Promise<string>;
14
13
  };
15
- export default NocodeCompiler;
14
+
15
+ export { type NocodeCompilerOptions, componentCompiler, componentCompiler as default };
package/dist/index.js CHANGED
@@ -1,103 +1,60 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
35
- Object.defineProperty(exports, "__esModule", { value: true });
36
- exports.NocodeCompiler = NocodeCompiler;
37
- const compilerCore = __importStar(require("@meituan-nocode/nocode-compiler-core"));
38
- const { CodeTransformer } = compilerCore;
39
- const utils_1 = require("./utils");
40
- // 检查是否安装了@vue/compiler-dom
41
- let vueCompilerAvailable = false;
42
- try {
43
- require('@vue/compiler-dom');
44
- vueCompilerAvailable = true;
45
- }
46
- catch (error) {
47
- console.warn('[vite-plugin-nocode-compiler] @vue/compiler-dom not found. Vue compilation will be skipped.');
1
+ // src/index.ts
2
+ import { JSXCompiler, VueCompiler } from "@meituan-nocode/nocode-compiler-core";
3
+
4
+ // src/utils.ts
5
+ var JsFileExtList = [".js", ".ts", ".mjs", ".mts", ".jsx", ".tsx"];
6
+ function isJsTypeFile(file) {
7
+ return JsFileExtList.some((ext) => file.endsWith(ext));
48
8
  }
49
- /**
50
- * Vite插件
51
- * 用于在构建过程中处理Vue和React组件,添加nocode相关的标记
52
- * 兼容 Vite 4.x 和 5.x 版本
53
- */
54
- function NocodeCompiler(options = {}) {
55
- options = {
56
- enableLogging: false,
57
- entryFileMarker: false,
58
- ...options,
59
- };
60
- // 创建代码转换器实例
61
- const codeTransformer = new CodeTransformer(options);
62
- return {
63
- name: 'vite-plugin-nocode-compiler',
64
- enforce: 'pre',
65
- async transform(code, id) {
66
- // 跳过node_modules
67
- if (id.includes('node_modules')) {
68
- return null;
69
- }
70
- const [_completePath, query] = id.split('?', 2); // 当前文件的绝对路径
71
- let filePath = _completePath;
72
- const params = new URLSearchParams(query);
73
- let fileType = '';
74
- 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'))) {
75
- // jsx 代码
76
- fileType = 'jsx';
77
- }
78
- else if (filePath.endsWith('.html') && params.get('type') === 'template' && params.has('vue')) {
79
- // <template src="xxx.html"></template>
80
- fileType = 'vue';
81
- }
82
- else if (filePath.endsWith('.vue') && params.get('type') !== 'style' && params.get('raw') === null) {
83
- // vue 代码
84
- fileType = 'vue';
85
- }
86
- // 如果是Vue文件但@vue/compiler-dom不可用,跳过处理
87
- if (fileType === 'vue' && !vueCompilerAvailable) {
88
- console.warn(`[vite-plugin-nocode-compiler] Skipping Vue file processing for ${filePath} due to missing @vue/compiler-dom`);
89
- return code;
90
- }
91
- if (fileType) {
92
- return codeTransformer.transformCode({
93
- content: code,
94
- filePath,
95
- fileType,
96
- });
97
- }
98
- return code;
99
- },
100
- };
9
+
10
+ // src/index.ts
11
+ function componentCompiler(options = {}) {
12
+ options = {
13
+ enableLogging: false,
14
+ ...options
15
+ };
16
+ const vueCompiler = new VueCompiler(options);
17
+ const jsxCompiler = new JSXCompiler(options);
18
+ return {
19
+ name: "vite-plugin-nocode-compiler",
20
+ enforce: "pre",
21
+ async transform(code, id) {
22
+ if (id.includes("node_modules")) {
23
+ return code;
24
+ }
25
+ const [_completePath, query] = id.split("?", 2);
26
+ let filePath = _completePath;
27
+ const params = new URLSearchParams(query);
28
+ const isJsTypeFileResult = isJsTypeFile(filePath);
29
+ const isVueFile = filePath.endsWith(".vue");
30
+ const isHtmlFile = filePath.endsWith(".html");
31
+ const type = params.get("type");
32
+ const lang = params.get("lang");
33
+ const isTemplateType = type === "template";
34
+ const isScriptType = type === "script";
35
+ const isJsxLang = lang === "tsx" || lang === "jsx";
36
+ const isRawType = params.get("raw") !== null;
37
+ if (isVueFile && isScriptType && isJsxLang) {
38
+ return jsxCompiler.compile(code, filePath) || code;
39
+ }
40
+ if (isVueFile && isTemplateType) {
41
+ return vueCompiler.compile(code, filePath) || code;
42
+ }
43
+ if (isHtmlFile && isTemplateType && params.has("vue")) {
44
+ return vueCompiler.compile(code, filePath) || code;
45
+ }
46
+ if (isJsTypeFileResult && !isVueFile) {
47
+ return jsxCompiler.compile(code, filePath) || code;
48
+ }
49
+ if (isVueFile && !type && !isRawType) {
50
+ return vueCompiler.compile(code, filePath) || code;
51
+ }
52
+ return code;
53
+ }
54
+ };
101
55
  }
102
- // 添加默认导出,使 ESM 导入更方便
103
- exports.default = NocodeCompiler;
56
+ var index_default = componentCompiler;
57
+ export {
58
+ componentCompiler,
59
+ index_default as default
60
+ };
package/package.json CHANGED
@@ -1,32 +1,33 @@
1
1
  {
2
2
  "name": "@meituan-nocode/vite-plugin-nocode-compiler",
3
- "version": "0.1.0-beta.20-z",
4
- "description": "nocode compiler plugin",
3
+ "version": "0.1.0-beta.22-z",
4
+ "description": "Vite plugin for nocode compiler",
5
5
  "type": "module",
6
- "main": "dist/index.cjs.js",
7
- "module": "dist/index.es.js",
8
- "types": "dist/index.d.ts",
9
6
  "exports": {
10
7
  ".": {
11
- "require": "./dist/index.cjs.js",
12
- "import": "./dist/index.es.js",
13
- "types": "./dist/index.d.ts"
14
- }
8
+ "import": "./dist/index.js",
9
+ "require": "./dist/index.cjs"
10
+ },
11
+ "./package.json": "./package.json"
15
12
  },
13
+ "main": "./dist/index.cjs",
14
+ "types": "./dist/index.d.ts",
15
+ "module": "./dist/index.js",
16
16
  "files": [
17
17
  "dist"
18
18
  ],
19
19
  "scripts": {
20
- "dev": "tsc --watch",
21
- "build": "tsc",
20
+ "dev": "tsup --watch",
21
+ "build": "tsup",
22
22
  "prepublishOnly": "npm run build"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@types/node": "^20.0.0",
26
26
  "typescript": "^5.0.0",
27
- "vite": "^4.5.14"
27
+ "vite": "^4.5.14",
28
+ "tsup": "8.5.0"
28
29
  },
29
30
  "dependencies": {
30
- "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.20-z"
31
+ "@meituan-nocode/nocode-compiler-core": "0.1.0-beta.22-z"
31
32
  }
32
33
  }
package/dist/index.cjs.js DELETED
@@ -1 +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.es.js DELETED
@@ -1,30 +0,0 @@
1
- import * as u from "@meituan-nocode/nocode-compiler-core";
2
- const c = [".js", ".ts", ".mjs", ".mts", ".jsx", ".tsx"], f = ["isJsx", "isTsx", "lang.jsx", "lang.tsx"];
3
- function p(n) {
4
- return c.some((r) => n.endsWith(r));
5
- }
6
- const { CodeTransformer: x } = u;
7
- function d(n = {}) {
8
- const r = new x(n);
9
- return {
10
- name: "vite-plugin-nocode-compiler",
11
- enforce: "pre",
12
- async transform(o, l) {
13
- if (l.includes("node_modules"))
14
- return null;
15
- const [i, a] = l.split("?", 2);
16
- let t = i;
17
- const e = new URLSearchParams(a);
18
- let s = "";
19
- 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({
20
- content: o,
21
- filePath: t,
22
- fileType: s
23
- }) : o;
24
- }
25
- };
26
- }
27
- export {
28
- d as NocodeCompiler,
29
- d as default
30
- };
package/dist/utils.d.ts DELETED
@@ -1,9 +0,0 @@
1
- export declare const JsFileExtList: string[];
2
- export declare const jsxParamList: string[];
3
- export declare function isJsTypeFile(file: string): boolean;
4
- /**
5
- * 规范化路径,将反斜杠转换为正斜杠
6
- * @param filePath 文件路径
7
- * @returns 规范化后的路径
8
- */
9
- export declare function normalizePath(filePath: string): string;
package/dist/utils.js DELETED
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.jsxParamList = exports.JsFileExtList = void 0;
4
- exports.isJsTypeFile = isJsTypeFile;
5
- exports.normalizePath = normalizePath;
6
- exports.JsFileExtList = ['.js', '.ts', '.mjs', '.mts', '.jsx', '.tsx'];
7
- exports.jsxParamList = ['isJsx', 'isTsx', 'lang.jsx', 'lang.tsx'];
8
- // 是否为 JS 类型的文件
9
- function isJsTypeFile(file) {
10
- return exports.JsFileExtList.some(ext => file.endsWith(ext));
11
- }
12
- /**
13
- * 规范化路径,将反斜杠转换为正斜杠
14
- * @param filePath 文件路径
15
- * @returns 规范化后的路径
16
- */
17
- function normalizePath(filePath) {
18
- return filePath.replace(/\\/g, '/');
19
- }