@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 +148 -115
- package/dist/index.cjs +85 -0
- package/dist/index.d.cts +15 -0
- package/dist/index.d.ts +6 -6
- package/dist/index.js +58 -101
- package/package.json +14 -13
- package/dist/index.cjs.js +0 -1
- package/dist/index.es.js +0 -30
- package/dist/utils.d.ts +0 -9
- package/dist/utils.js +0 -19
package/README.md
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
# @meituan-nocode/vite-plugin-nocode-compiler
|
|
2
2
|
|
|
3
|
-
Vite
|
|
3
|
+
Vite 插件,用于在构建过程中为 Vue 和 React 组件自动添加属性,支持无代码平台的可视化编辑。
|
|
4
4
|
|
|
5
|
-
## 特性
|
|
5
|
+
## 🚀 特性
|
|
6
6
|
|
|
7
|
-
- ✅ 支持 Vue
|
|
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
|
-
###
|
|
31
|
+
### 基础配置
|
|
29
32
|
|
|
30
|
-
|
|
33
|
+
在项目的 `vite.config.js` 或 `vite.config.ts` 中配置插件:
|
|
31
34
|
|
|
32
|
-
```
|
|
33
|
-
|
|
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
|
|
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
|
-
|
|
56
|
-
enableLogging: true, //
|
|
42
|
+
componentCompiler({
|
|
43
|
+
enableLogging: true, // 开发时建议开启日志
|
|
57
44
|
}),
|
|
58
45
|
],
|
|
59
46
|
});
|
|
60
47
|
```
|
|
61
48
|
|
|
62
|
-
|
|
49
|
+
### CommonJS 配置
|
|
63
50
|
|
|
64
|
-
```
|
|
51
|
+
```javascript
|
|
65
52
|
// vite.config.js
|
|
66
53
|
const { defineConfig } = require('vite');
|
|
67
|
-
const
|
|
54
|
+
const componentCompiler = require('@meituan-nocode/vite-plugin-nocode-compiler').default;
|
|
68
55
|
|
|
69
56
|
module.exports = defineConfig({
|
|
70
57
|
plugins: [
|
|
71
|
-
|
|
72
|
-
enableLogging: true,
|
|
58
|
+
componentCompiler({
|
|
59
|
+
enableLogging: true,
|
|
73
60
|
}),
|
|
74
61
|
],
|
|
75
62
|
});
|
|
76
63
|
```
|
|
77
64
|
|
|
78
|
-
|
|
65
|
+
## ⚙️ 配置选项
|
|
79
66
|
|
|
80
|
-
|
|
67
|
+
| 选项 | 类型 | 默认值 | 描述 |
|
|
68
|
+
| --------------- | --------- | ------- | ------------------------------------------------------ |
|
|
69
|
+
| `enableLogging` | `boolean` | `false` | 是否启用日志输出,开启后会输出详细的处理过程和调试信息 |
|
|
70
|
+
| `rootPath` | `string` | - | 项目根路径,用于生成相对路径标识 |
|
|
81
71
|
|
|
82
|
-
|
|
83
|
-
# 开发模式
|
|
84
|
-
npx vite
|
|
72
|
+
### 配置示例
|
|
85
73
|
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
|
|
86
|
+
## 📁 处理的文件类型
|
|
91
87
|
|
|
92
|
-
|
|
88
|
+
### Vue 文件
|
|
93
89
|
|
|
94
|
-
|
|
90
|
+
- `.vue` 单文件组件的 `<template>` 部分
|
|
91
|
+
- Vue 文件中的 JSX/TSX `<script>` 部分
|
|
92
|
+
- 外部模板文件 `<template src="xxx.html">`
|
|
95
93
|
|
|
96
|
-
###
|
|
94
|
+
### React 文件
|
|
97
95
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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
|
-
|
|
106
|
-
plugins: [
|
|
107
|
-
NocodeCompiler({
|
|
108
|
-
enableLogging: true,
|
|
109
|
-
// 其他配置选项
|
|
110
|
-
}),
|
|
111
|
-
],
|
|
112
|
-
});
|
|
113
|
-
```
|
|
100
|
+
### 文件处理逻辑
|
|
114
101
|
|
|
115
|
-
|
|
102
|
+
插件会根据文件扩展名和 Vite 查询参数智能判断文件类型:
|
|
116
103
|
|
|
117
|
-
```
|
|
118
|
-
//
|
|
119
|
-
|
|
120
|
-
|
|
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
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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
|
-
|
|
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
|
-
|
|
140
|
+
## 🏗️ 在 Monorepo 项目中使用
|
|
152
141
|
|
|
153
|
-
|
|
154
|
-
- JSX 组件编译器 (`JSXCompiler`)
|
|
155
|
-
- 代码转换器 (`CodeTransformer`)
|
|
142
|
+
在 monorepo 项目中,建议在共享配置中定义插件:
|
|
156
143
|
|
|
157
|
-
|
|
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
|
-
|
|
166
|
+
## 🐛 调试和故障排除
|
|
160
167
|
|
|
161
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
190
|
+
### 常见问题
|
|
178
191
|
|
|
179
|
-
|
|
192
|
+
#### Q: 插件没有生效怎么办?
|
|
180
193
|
|
|
181
|
-
|
|
194
|
+
A: 检查以下几点:
|
|
182
195
|
|
|
183
|
-
|
|
196
|
+
1. 确认插件已正确安装和配置
|
|
197
|
+
2. 确保 `enforce: 'pre'` 设置正确(插件已内置)
|
|
198
|
+
3. 检查文件是否在 `node_modules` 中(插件会自动跳过)
|
|
199
|
+
4. 开启 `enableLogging` 查看是否有处理日志
|
|
184
200
|
|
|
185
|
-
|
|
186
|
-
- React 框架: `.jsx`, `.tsx` 文件,以及包含 JSX 语法的 `.js`, `.ts` 文件
|
|
201
|
+
#### Q: 某些文件没有被处理?
|
|
187
202
|
|
|
188
|
-
|
|
203
|
+
A: 可能的原因:
|
|
189
204
|
|
|
190
|
-
|
|
205
|
+
- 文件在 `node_modules` 目录下
|
|
206
|
+
- 文件类型不支持(如纯 CSS 文件)
|
|
207
|
+
- Vue 文件的 `<style>` 部分(插件只处理模板和脚本)
|
|
191
208
|
|
|
192
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
+
});
|
package/dist/index.d.cts
ADDED
|
@@ -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
|
-
|
|
1
|
+
interface NocodeCompilerOptions {
|
|
2
2
|
enableLogging?: boolean;
|
|
3
|
-
|
|
3
|
+
rootPath?: string;
|
|
4
4
|
}
|
|
5
5
|
/**
|
|
6
6
|
* Vite插件
|
|
7
7
|
* 用于在构建过程中处理Vue和React组件,添加nocode相关的标记
|
|
8
|
-
* 兼容 Vite 4.x 和 5.x 版本
|
|
9
8
|
*/
|
|
10
|
-
|
|
9
|
+
declare function componentCompiler(options?: NocodeCompilerOptions): {
|
|
11
10
|
name: string;
|
|
12
11
|
enforce: "pre";
|
|
13
|
-
transform(code: string, id: string): Promise<string
|
|
12
|
+
transform(code: string, id: string): Promise<string>;
|
|
14
13
|
};
|
|
15
|
-
|
|
14
|
+
|
|
15
|
+
export { type NocodeCompilerOptions, componentCompiler, componentCompiler as default };
|
package/dist/index.js
CHANGED
|
@@ -1,103 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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
|
-
|
|
103
|
-
|
|
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.
|
|
4
|
-
"description": "nocode compiler
|
|
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
|
-
"
|
|
12
|
-
"
|
|
13
|
-
|
|
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": "
|
|
21
|
-
"build": "
|
|
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.
|
|
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
|
-
}
|