@tomjs/vite-plugin-hbuilderx 1.0.0
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/CHANGELOG.md +5 -0
- package/LICENSE +21 -0
- package/README.md +351 -0
- package/dist/client.iife.js +42 -0
- package/dist/index.d.ts +82 -0
- package/dist/index.js +336 -0
- package/dist/webview.d.ts +14 -0
- package/dist/webview.js +18 -0
- package/env-hbuilderx.d.ts +36 -0
- package/env.d.ts +24 -0
- package/eslint.config.mjs +6 -0
- package/package.json +64 -0
- package/src/constants.ts +4 -0
- package/src/index.ts +420 -0
- package/src/logger.ts +9 -0
- package/src/types.ts +81 -0
- package/src/utils.ts +36 -0
- package/src/webview/client.ts +47 -0
- package/src/webview/global.d.ts +4 -0
- package/src/webview/template.html +90 -0
- package/src/webview/webview.ts +25 -0
- package/src/webview/window.d.ts +9 -0
- package/tsconfig.json +15 -0
- package/tsconfig.web.json +9 -0
- package/tsdown.config.ts +38 -0
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-PRESENT Tom Gao<tom@tomgao.cc>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
# @tomjs/vite-plugin-hbuilderx
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@tomjs/vite-plugin-hbuilderx)   [](https://www.jsdocs.io/package/@tomjs/vite-plugin-hbuilderx)
|
|
4
|
+
|
|
5
|
+
> 为 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 开发 [插件](https://hx.dcloud.net.cn/ExtensionTutorial/README) 提供 [vite](https://cn.vitejs.dev/) 插件，可以用 `vue`/`react` 来开发 [WebView视图](https://hx.dcloud.net.cn/ExtensionDocs/Api/windows/createWebView) 和 [WebView页面的对话框](https://hx.dcloud.net.cn/ExtensionDocs/Api/windows/createWebViewDialog)。
|
|
6
|
+
|
|
7
|
+
在开发模式时，使用 `iframe` 加载 `vue`/`react` 服务，在 `iframe` 和 `parent` 之间模拟 `hbuilderx.postMessage`等方法，用来支持 `HMR`；生产构建时，将最终生成的 `index.html` 代码注入到 `插件代码` 中，减少工作量。
|
|
8
|
+
|
|
9
|
+
## 特性
|
|
10
|
+
|
|
11
|
+
- 使用 [tsdown](https://tsdown.dev/zh-CN/) 快速构建 `插件代码`
|
|
12
|
+
- 配置简单，专注业务
|
|
13
|
+
- 支持 webview `HMR`
|
|
14
|
+
- 支持[多页面应用](https://cn.vitejs.dev/guide/build.html#multi-page-app)
|
|
15
|
+
- 支持 `vue` 、`react` 等其他 `vite` 支持的[框架](https://cn.vitejs.dev/guide/#trying-vite-online)
|
|
16
|
+
|
|
17
|
+
## 安装
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# pnpm
|
|
21
|
+
pnpm add -D @tomjs/vite-plugin-hbuilderx
|
|
22
|
+
|
|
23
|
+
# yarn
|
|
24
|
+
yarn add -D @tomjs/vite-plugin-hbuilderx
|
|
25
|
+
|
|
26
|
+
# npm
|
|
27
|
+
npm add -D @tomjs/vite-plugin-hbuilderx
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 使用说明
|
|
31
|
+
|
|
32
|
+
### 推荐约定
|
|
33
|
+
|
|
34
|
+
设置 `recommended` 参数为 `true` 会修改一些预置配置，详细查看 [PluginOptions](#pluginoptions) 和 `recommended` 参数说明。
|
|
35
|
+
|
|
36
|
+
#### 目录结构
|
|
37
|
+
|
|
38
|
+
- 默认情况下，`recommended:true` 会根据如下目录结构作为约定
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|--extension // extension code
|
|
42
|
+
| |--index.ts
|
|
43
|
+
|--src // front-end code
|
|
44
|
+
| |--App.vue
|
|
45
|
+
| |--main.ts
|
|
46
|
+
|--index.html
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
- 零配置，默认 dist 输出目录
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|--dist
|
|
53
|
+
| |--extension
|
|
54
|
+
| | |--index.js
|
|
55
|
+
| | |--index.js.map
|
|
56
|
+
| |--webview
|
|
57
|
+
| | |--index.html
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
- 如果你想修改 `extension` 源码目录为 `src`，可以设置 `{ extension: { entry: 'src/index.ts' } }`
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
|--src // extension code
|
|
64
|
+
| |--index.ts
|
|
65
|
+
|--webview // front-end code
|
|
66
|
+
| |--App.vue
|
|
67
|
+
| |--main.ts
|
|
68
|
+
|--index.html
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### extension
|
|
72
|
+
|
|
73
|
+
代码片段，更多配置看示例
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import { ExtensionContext, WebviewPanel } from 'hbuilderx';
|
|
77
|
+
import { getWebviewHtml } from 'virtual:hbuilderx';
|
|
78
|
+
|
|
79
|
+
function createWebView(webviewPanel: WebViewPanel, context: ExtensionContext) {
|
|
80
|
+
// vite 开发模式和生产模式注入不同的webview代码，减少开发工作
|
|
81
|
+
webviewPanel.webview.html = getWebviewHtml({
|
|
82
|
+
// vite 开发模式 iframe 嵌入页面
|
|
83
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
84
|
+
// vite 生产模式 将html代码注入到插件中
|
|
85
|
+
// 来自插件激活时的上下文
|
|
86
|
+
context,
|
|
87
|
+
inputName: 'index',
|
|
88
|
+
// 向 head 元素的结束前注入代码 <head>--inject--
|
|
89
|
+
injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const panel = window.createWebView('showHelloWorld', {
|
|
94
|
+
enableScripts: true,
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
createWebView(panel, context);
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
- `package.json`
|
|
101
|
+
|
|
102
|
+
```json
|
|
103
|
+
{
|
|
104
|
+
"main": "dist/extension/index.js"
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### vue
|
|
109
|
+
|
|
110
|
+
- `vite.config.ts`
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
import hbuilderx from '@tomjs/vite-plugin-hbuilderx';
|
|
114
|
+
import vue from '@vitejs/plugin-vue';
|
|
115
|
+
import { defineConfig } from 'vite';
|
|
116
|
+
|
|
117
|
+
// https://vitejs.dev/config/
|
|
118
|
+
export default defineConfig({
|
|
119
|
+
plugins: [
|
|
120
|
+
vue(),
|
|
121
|
+
hbuilderx(),
|
|
122
|
+
// 修改插件源码入口路径，同时修改`index.html`入口文件路径
|
|
123
|
+
// hbuilderx({ extension: { entry: 'src/index.ts' } }),
|
|
124
|
+
],
|
|
125
|
+
build: {
|
|
126
|
+
// 将图片等静态资源文件转换为 base64
|
|
127
|
+
assetsInlineLimit: 1024 * 100,
|
|
128
|
+
},
|
|
129
|
+
});
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### react
|
|
133
|
+
|
|
134
|
+
- `vite.config.ts`
|
|
135
|
+
|
|
136
|
+
```ts
|
|
137
|
+
import hbuilderx from '@tomjs/vite-plugin-hbuilderx';
|
|
138
|
+
import react from '@vitejs/plugin-react-swc';
|
|
139
|
+
import { defineConfig } from 'vite';
|
|
140
|
+
|
|
141
|
+
// https://vitejs.dev/config/
|
|
142
|
+
export default defineConfig({
|
|
143
|
+
plugins: [react(), hbuilderx()],
|
|
144
|
+
});
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### 多页面
|
|
148
|
+
|
|
149
|
+
#### 多页面应用
|
|
150
|
+
|
|
151
|
+
可查看 [ext-web-vue-multiple](./examples/ext-web-vue-multiple) 示例
|
|
152
|
+
|
|
153
|
+
- `vite.config.ts`
|
|
154
|
+
|
|
155
|
+
```ts
|
|
156
|
+
import path from 'node:path';
|
|
157
|
+
import hbuilderx from '@tomjs/vite-plugin-hbuilderx';
|
|
158
|
+
|
|
159
|
+
export default defineConfig({
|
|
160
|
+
plugins: [hbuilderx()],
|
|
161
|
+
build: {
|
|
162
|
+
rollupOptions: {
|
|
163
|
+
// https://cn.vitejs.dev/guide/build.html#multi-page-app
|
|
164
|
+
input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
|
|
165
|
+
// 也可自定义名称
|
|
166
|
+
// input:{
|
|
167
|
+
// 'index': path.resolve(__dirname, 'index.html'),
|
|
168
|
+
// 'index2': path.resolve(__dirname, 'index2.html'),
|
|
169
|
+
// }
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
- 页面一
|
|
176
|
+
|
|
177
|
+
```ts
|
|
178
|
+
import { ExtensionContext, WebviewPanel } from 'hbuilderx';
|
|
179
|
+
import { getWebviewHtml } from 'virtual:hbuilderx';
|
|
180
|
+
|
|
181
|
+
function createWebView(webviewPanel: WebViewPanel, context: ExtensionContext) {
|
|
182
|
+
webviewPanel.webview.html = getWebviewHtml({
|
|
183
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
184
|
+
context,
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
- 页面二
|
|
190
|
+
|
|
191
|
+
```ts
|
|
192
|
+
import { ExtensionContext, WebviewPanel } from 'hbuilderx';
|
|
193
|
+
import { getWebviewHtml } from 'virtual:hbuilderx';
|
|
194
|
+
|
|
195
|
+
function createWebView(webviewPanel: WebViewPanel, context: ExtensionContext) {
|
|
196
|
+
webviewPanel.webview.html = getWebviewHtml({
|
|
197
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
198
|
+
context,
|
|
199
|
+
// 页面input名称
|
|
200
|
+
inputName: 'index2',
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
#### 单页面传参
|
|
206
|
+
|
|
207
|
+
单个页面通过 URL 传参和注入代码实现传参，前端需要做兼容处理
|
|
208
|
+
|
|
209
|
+
- 插件代码 `extension.ts`
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
import { ExtensionContext, WebviewPanel } from 'hbuilderx';
|
|
213
|
+
import { getWebviewHtml } from 'virtual:hbuilderx';
|
|
214
|
+
|
|
215
|
+
function createWebView(webviewPanel: WebViewPanel, context: ExtensionContext) {
|
|
216
|
+
webviewPanel.webview.html = getWebviewHtml({
|
|
217
|
+
injectCode: `<script>window.__id__=666;</script>`,
|
|
218
|
+
serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
|
|
219
|
+
context,
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
- 页面简易实现，根据实际情况自行实现
|
|
225
|
+
|
|
226
|
+
```ts
|
|
227
|
+
import qs from 'query-string';
|
|
228
|
+
|
|
229
|
+
export function getParams(key: string) {
|
|
230
|
+
return window[`__${key}__`] || qs.parse(location.search)[key];
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**virtual:hbuilderx** 说明
|
|
235
|
+
|
|
236
|
+
```ts
|
|
237
|
+
interface WebviewHtmlOptions {
|
|
238
|
+
/**
|
|
239
|
+
* `[vite serve]` vite开发服务器的url, 请用 `process.env.VITE_DEV_SERVER_URL`
|
|
240
|
+
*/
|
|
241
|
+
serverUrl?: string;
|
|
242
|
+
/**
|
|
243
|
+
* `[vite build]` 插件的 ExtensionContext 实例
|
|
244
|
+
*/
|
|
245
|
+
context: ExtensionContext;
|
|
246
|
+
/**
|
|
247
|
+
* `[vite build]` vite build.rollupOptions.input 设置的名称. 默认 `index`.
|
|
248
|
+
*/
|
|
249
|
+
inputName?: string;
|
|
250
|
+
/**
|
|
251
|
+
* `[vite build]` 向 head 元素的结束前注入代码 <head>--inject--
|
|
252
|
+
*/
|
|
253
|
+
injectCode?: string;
|
|
254
|
+
}
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
## 参数
|
|
258
|
+
|
|
259
|
+
### PluginOptions
|
|
260
|
+
|
|
261
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
262
|
+
| ----------- | -------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
263
|
+
| recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
|
|
264
|
+
| extension | [ExtensionOptions](#ExtensionOptions) | | hbuilderx extension 可选配置 |
|
|
265
|
+
| webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | 注入 html 代码 |
|
|
266
|
+
| devtools | `boolean` | `false` | 注入 script 代码用于 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 或 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 调试 |
|
|
267
|
+
|
|
268
|
+
#### Notice
|
|
269
|
+
|
|
270
|
+
`recommended` 选项用于设置默认配置和行为，几乎可以达到零配置使用，默认为 `true` 。如果你要自定义配置，请设置它为`false`。以下默认的前提条件是使用推荐的 [项目结构](#目录结构)。
|
|
271
|
+
|
|
272
|
+
- 输出目录根据 `vite` 的 `build.outDir` 参数， 将 `extension`、`src` 分别输出到 `dist/extension`、`dist/webview`
|
|
273
|
+
|
|
274
|
+
- 其他待实现的行为
|
|
275
|
+
|
|
276
|
+
#### devtools
|
|
277
|
+
|
|
278
|
+
开发阶段，支持 `react` 和 `vue` 的独立开发工具应用，默认不开启。
|
|
279
|
+
|
|
280
|
+
- `react`: 注入 `<script src="http://localhost:8097"></script>`，支持 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)
|
|
281
|
+
- `vue`: 注入 `<script src="http://localhost:8098"></script>`，支持 [vue-devtools](https://devtools.vuejs.org/guide/standalone)
|
|
282
|
+
|
|
283
|
+
### ExtensionOptions
|
|
284
|
+
|
|
285
|
+
继承自 [tsdown](https://tsdown.dev/zh-CN/) 的 [Options](https://tsdown.dev/zh-CN/reference/api/Interface.Options)，添加了一些默认值，方便使用。
|
|
286
|
+
|
|
287
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
288
|
+
| ---------- | -------------------- | --------------------- | ------------------------ |
|
|
289
|
+
| entry | `string` | `extension/index.ts` | 入口文件 |
|
|
290
|
+
| outDir | `string` | `dist-extension/main` | 输出文件夹 |
|
|
291
|
+
| watchFiles | `string`\/`string[]` | `` | 开发时监听插件代码的文件 |
|
|
292
|
+
|
|
293
|
+
### WebviewOption
|
|
294
|
+
|
|
295
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
296
|
+
| ---------- | -------- | -------------------------- | ------ |
|
|
297
|
+
| refreshKey | `string` | 开发模式时刷新页面的快捷键 | `"F6"` |
|
|
298
|
+
|
|
299
|
+
### 补充说明
|
|
300
|
+
|
|
301
|
+
- `extension` 未配置相关参数时的默认值，目前 `HBuilderX 插件` 不支持 `sourcemap`
|
|
302
|
+
|
|
303
|
+
| 参数 | 开发模式默认值 | 生产模式默认值 |
|
|
304
|
+
| --------- | -------------- | -------------- |
|
|
305
|
+
| sourcemap | `true` | `false` |
|
|
306
|
+
| minify | `false` | `true` |
|
|
307
|
+
|
|
308
|
+
## 环境变量
|
|
309
|
+
|
|
310
|
+
`hbuilderx extension` 使用
|
|
311
|
+
|
|
312
|
+
- `development` 模式
|
|
313
|
+
|
|
314
|
+
| 变量 | 描述 |
|
|
315
|
+
| --------------------- | ------------------- |
|
|
316
|
+
| `VITE_DEV_SERVER_URL` | vite开发服务器的url |
|
|
317
|
+
|
|
318
|
+
- `production` 模式
|
|
319
|
+
|
|
320
|
+
| 变量 | 描述 |
|
|
321
|
+
| ------------------- | ------------------------- |
|
|
322
|
+
| `VITE_WEBVIEW_DIST` | vite webview 页面输出路径 |
|
|
323
|
+
|
|
324
|
+
## Debug
|
|
325
|
+
|
|
326
|
+
查看官网的[如何调试插件？](https://hx.dcloud.net.cn/ExtensionTutorial/HowToDebug)
|
|
327
|
+
|
|
328
|
+
### 网页调试
|
|
329
|
+
|
|
330
|
+
- 可以使用 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 和 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 的独立应用调试 `webview`
|
|
331
|
+
- `vue` 项目可以使用 [vite-plugin-vue-devtools](https://devtools.vuejs.org/guide/vite-plugin) 这个 `vite` 插件直接在页面调试
|
|
332
|
+
- 可以使用 `Google Chrome`，在地址栏输入 `chrome://inspect/#devices` 访问。如果 `Remote Target` 不显示，打开 `HBuilderX` 调试插件的控制台，查看会看到 `DevTools listening on ws://127.0.0.1:9500/devtools/browser/e964a967-04da-48f2-8656-9ba933f39e59`, 配置 `Discover network targets` 对应的 `localhost:9500` 即可。
|
|
333
|
+
|
|
334
|
+
## 示例
|
|
335
|
+
|
|
336
|
+
先执行以下命令安装依赖，并生成库文件：
|
|
337
|
+
|
|
338
|
+
```bash
|
|
339
|
+
pnpm install
|
|
340
|
+
pnpm build
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
打开 [examples](./examples) 目录，有 `vue` 和 `react` 示例。
|
|
344
|
+
|
|
345
|
+
- [ext-web-react](./examples/ext-web-react/README.md): 使用 [vite](https://cn.vite.dev/) + [typescript](https://www.typescriptlang.org/zh/) + [react](https://react.docschina.org/) 创建 `webview` 插件
|
|
346
|
+
- [ext-web-vue](./examples/ext-web-vue/README.md): 使用 [vite](https://cn.vite.dev/) + [typescript](https://www.typescriptlang.org/zh/) + [vue](https://cn.vuejs.org/) 创建 `webview` 插件
|
|
347
|
+
|
|
348
|
+
## 关联
|
|
349
|
+
|
|
350
|
+
- [@tomjs/hbuilderx](https://npmjs.com/package/@tomjs/hbuilderx): 为 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 的 [插件](https://hx.dcloud.net.cn/ExtensionTutorial/README) 开发提供所需的 `types`、`API`，方便结合 [typescript](https://www.typescriptlang.org/zh/)、[tsdown](https://tsdown.dev/zh-CN/)、[vite](https://cn.vitejs.dev/) 等现代化工具使用。
|
|
351
|
+
- [@tomjs/hbuilderx-cli](https://npmjs.com/package/@tomjs/hbuilderx-cli): 为 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 开发 [插件](https://hx.dcloud.net.cn/ExtensionTutorial/README) 提供便利的 `cli` 工具，根据 `package.json` 中的 `contributes` 配置，为 `hbuilderx` 的 `命令`、`视图` 等 `API` 提供 `id` 提示。
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
(function() {
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
//#region src/webview/client.ts
|
|
5
|
+
if (window.top === window.self) throw new Error("[hbuilderx:client]: must run in hbuilderx webview");
|
|
6
|
+
const POST_MESSAGE_TYPE = "[hbuilderx:client]:postMessage";
|
|
7
|
+
console.log("[@tomjs:hbuilderx:client]: init");
|
|
8
|
+
const msgListeners = [];
|
|
9
|
+
window.hbuilderx = window.hbuilderx || function() {
|
|
10
|
+
function postMessage(data) {
|
|
11
|
+
window.parent.postMessage({
|
|
12
|
+
type: POST_MESSAGE_TYPE,
|
|
13
|
+
data
|
|
14
|
+
}, "*");
|
|
15
|
+
}
|
|
16
|
+
function dispatchMessage(message) {
|
|
17
|
+
for (let i = 0; i < msgListeners.length; i++) {
|
|
18
|
+
const listener = msgListeners[i];
|
|
19
|
+
if (typeof listener === "function") listener(message);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function onDidReceiveMessage(callback) {
|
|
23
|
+
msgListeners.push(callback);
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
postMessage,
|
|
27
|
+
dispatchMessage,
|
|
28
|
+
onDidReceiveMessage
|
|
29
|
+
};
|
|
30
|
+
}();
|
|
31
|
+
window.addEventListener("message", (e) => {
|
|
32
|
+
for (let i = 0; i < msgListeners.length; i++) {
|
|
33
|
+
const listener = msgListeners[i];
|
|
34
|
+
if (typeof listener === "function") listener(e.data);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
document.addEventListener("keydown", (e) => {
|
|
38
|
+
if (e.key === (window.TOMJS_REFRESH_KEY || "F6")) window.location.reload();
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
//#endregion
|
|
42
|
+
})();
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { InlineConfig } from "tsdown";
|
|
2
|
+
import { PluginOption } from "vite";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* hbuilderx 插件配置. 查看 [tsdown](https://tsdown.dev/) 和 [Config Options](https://tsdown.dev/reference/config-options) 获取更多信息.
|
|
7
|
+
*/
|
|
8
|
+
interface ExtensionOptions extends Omit<InlineConfig, 'entry' | 'format' | 'outDir' | 'watch'> {
|
|
9
|
+
/**
|
|
10
|
+
* 插件入口文件.
|
|
11
|
+
* @default "extension/index.ts"
|
|
12
|
+
*/
|
|
13
|
+
entry?: string;
|
|
14
|
+
/**
|
|
15
|
+
* 插件编译后文件输出目录. 默认 `dist-extension`.
|
|
16
|
+
*
|
|
17
|
+
* @default "dist-extension"
|
|
18
|
+
*/
|
|
19
|
+
outDir?: string;
|
|
20
|
+
/**
|
|
21
|
+
* `tsdown`默认监听当前工作目录。可以设置需要监听的文件，这可能会提高性能。
|
|
22
|
+
*
|
|
23
|
+
* 如果未指定值，则 `recommended` 参数为 `true` 时的默认值为 `["extension"]`，否则为 `tsdown` 默认行为
|
|
24
|
+
*/
|
|
25
|
+
watchFiles?: string | string[];
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* hbuilderx webview 配置.
|
|
29
|
+
*/
|
|
30
|
+
interface WebviewOption {
|
|
31
|
+
/**
|
|
32
|
+
* 刷新页面的按键，如 F5/F6
|
|
33
|
+
* @default "F6"
|
|
34
|
+
*/
|
|
35
|
+
refreshKey?: string;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* vite 插件配置.
|
|
39
|
+
*/
|
|
40
|
+
interface PluginOptions {
|
|
41
|
+
/**
|
|
42
|
+
* 推荐标识. 默认为 `true`.
|
|
43
|
+
* 如果是 `true`, 将会有如下默认行为:
|
|
44
|
+
* - 将会同步修改 `extension/webview` 的输出目录
|
|
45
|
+
* - 如果 vite build.outDir 是 'dist', 将会修改`插件/webview` 目录为 `dist/extension` 和 `dist/webview`
|
|
46
|
+
* @default true
|
|
47
|
+
*/
|
|
48
|
+
recommended?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* 在开发过程中，将代码注入到 `hbuilderx 扩展代码` 和 `web页面` 代码中，以支持 `HMR`；
|
|
51
|
+
*
|
|
52
|
+
* 在生产构建过程中，将最终生成的 `index.html` 代码注入到 `hbuilderx 扩展代码` 中，以最大限度地减少开发工作。
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* extension file
|
|
56
|
+
* ```ts
|
|
57
|
+
*import {getWebviewHtml} from 'virtual:hbuilderx';
|
|
58
|
+
*
|
|
59
|
+
*function setupHtml(webview: Webview, context: ExtensionContext) {
|
|
60
|
+
* return getWebviewHtml({serverUrl:process.env.VITE_DEV_SERVER_URL, context});
|
|
61
|
+
*}
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
webview?: boolean | WebviewOption;
|
|
65
|
+
/**
|
|
66
|
+
* 插件配置
|
|
67
|
+
*/
|
|
68
|
+
extension?: ExtensionOptions;
|
|
69
|
+
/**
|
|
70
|
+
* 是否开启 devtools. 注入 `<script src="http://localhost:<devtools-port>"></script>` 到 webview 端. 默认是 `false`.
|
|
71
|
+
* - `true`:
|
|
72
|
+
* - react: 注入 `<script src="http://localhost:8097"></script>`
|
|
73
|
+
* - vue: 注入 `<script src="http://localhost:8098"></script>`
|
|
74
|
+
* @default false
|
|
75
|
+
*/
|
|
76
|
+
devtools?: boolean | number;
|
|
77
|
+
}
|
|
78
|
+
//#endregion
|
|
79
|
+
//#region src/index.d.ts
|
|
80
|
+
declare function useHBuilderxPlugin(options?: PluginOptions): PluginOption;
|
|
81
|
+
//#endregion
|
|
82
|
+
export { ExtensionOptions, PluginOptions, WebviewOption, useHBuilderxPlugin as default, useHBuilderxPlugin };
|