@tomjs/vite-plugin-vscode 3.2.1 → 4.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/README.md +70 -25
- package/README.zh_CN.md +68 -28
- package/dist/client.global.js +82 -92
- package/dist/index.d.mts +1 -12
- package/dist/index.d.ts +1 -12
- package/dist/index.js +10 -5
- package/dist/index.mjs +11 -6
- package/dist/webview.d.mts +3 -3
- package/dist/webview.d.ts +3 -3
- package/dist/webview.js +1 -5
- package/dist/webview.mjs +1 -5
- package/env.d.ts +25 -15
- package/package.json +27 -36
package/README.md
CHANGED
|
@@ -83,9 +83,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
|
|
|
83
83
|
});
|
|
84
84
|
|
|
85
85
|
// Vite development mode and production mode inject different webview codes to reduce development work
|
|
86
|
-
panel.webview.html =
|
|
87
|
-
|
|
88
|
-
:
|
|
86
|
+
panel.webview.html = __getWebviewHtml__({
|
|
87
|
+
// vite dev mode
|
|
88
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
89
|
+
// vite prod mode
|
|
90
|
+
webview,
|
|
91
|
+
context,
|
|
92
|
+
inputName: 'index',
|
|
93
|
+
injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
|
|
94
|
+
});
|
|
89
95
|
```
|
|
90
96
|
|
|
91
97
|
- `package.json`
|
|
@@ -137,19 +143,20 @@ export default defineConfig({
|
|
|
137
143
|
});
|
|
138
144
|
```
|
|
139
145
|
|
|
140
|
-
###
|
|
146
|
+
### **getWebviewHtml**
|
|
141
147
|
|
|
142
148
|
See [vue-import](./examples/vue-import) example
|
|
143
149
|
|
|
144
150
|
- `vite.config.ts`
|
|
145
151
|
|
|
146
152
|
```ts
|
|
153
|
+
import { defineConfig } from 'vite';
|
|
147
154
|
import path from 'node:path';
|
|
148
155
|
import vscode from '@tomjs/vite-plugin-vscode';
|
|
149
156
|
|
|
150
157
|
export default defineConfig({
|
|
158
|
+
plugins: [vscode()],
|
|
151
159
|
build: {
|
|
152
|
-
plugins: [vscode()]
|
|
153
160
|
rollupOptions: {
|
|
154
161
|
// https://cn.vitejs.dev/guide/build.html#multi-page-app
|
|
155
162
|
input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
|
|
@@ -166,39 +173,71 @@ export default defineConfig({
|
|
|
166
173
|
- page one
|
|
167
174
|
|
|
168
175
|
```ts
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
:
|
|
176
|
+
__getWebviewHtml__({
|
|
177
|
+
// vite dev mode
|
|
178
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
179
|
+
// vite prod mode
|
|
180
|
+
webview,
|
|
181
|
+
context,
|
|
182
|
+
});
|
|
172
183
|
```
|
|
173
184
|
|
|
174
185
|
- page two
|
|
175
186
|
|
|
176
187
|
```ts
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
:
|
|
188
|
+
__getWebviewHtml__({
|
|
189
|
+
// vite dev mode
|
|
190
|
+
serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
|
|
191
|
+
// vite prod mode
|
|
192
|
+
webview,
|
|
193
|
+
context,
|
|
194
|
+
inputName: 'index2',
|
|
195
|
+
});
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
- A single page uses different parameters to achieve different functions
|
|
199
|
+
|
|
200
|
+
```ts
|
|
201
|
+
__getWebviewHtml__({
|
|
202
|
+
// vite dev mode
|
|
203
|
+
serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
|
|
204
|
+
// vite prod mode
|
|
205
|
+
webview,
|
|
206
|
+
context,
|
|
207
|
+
injectCode: `<script>window.__id__=666;</script>`,
|
|
208
|
+
});
|
|
180
209
|
```
|
|
181
210
|
|
|
182
211
|
**getWebviewHtml** Description
|
|
183
212
|
|
|
184
213
|
```ts
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
214
|
+
interface WebviewHtmlOptions {
|
|
215
|
+
/**
|
|
216
|
+
* `[vite serve]` The url of the vite dev server. Please use `process.env.VITE_DEV_SERVER_URL`
|
|
217
|
+
*/
|
|
218
|
+
serverUrl?: string;
|
|
219
|
+
/**
|
|
220
|
+
* `[vite build]` The Webview instance of the extension.
|
|
221
|
+
*/
|
|
222
|
+
webview: Webview;
|
|
223
|
+
/**
|
|
224
|
+
* `[vite build]` The ExtensionContext instance of the extension.
|
|
225
|
+
*/
|
|
226
|
+
context: ExtensionContext;
|
|
227
|
+
/**
|
|
228
|
+
* `[vite build]` vite build.rollupOptions.input name. Default is `index`.
|
|
229
|
+
*/
|
|
230
|
+
inputName?: string;
|
|
231
|
+
/**
|
|
232
|
+
* `[vite build]` Inject code into the afterbegin of the head element.
|
|
233
|
+
*/
|
|
234
|
+
injectCode?: string;
|
|
235
|
+
}
|
|
190
236
|
|
|
191
237
|
/**
|
|
192
|
-
*
|
|
193
|
-
* @param webview The WebviewPanel instance of the extension.
|
|
194
|
-
* @param context The ExtensionContext instance of the extension.
|
|
195
|
-
* @param inputName vite build.rollupOptions.input name. Default is `index`.
|
|
238
|
+
* Gets the html of webview
|
|
196
239
|
*/
|
|
197
|
-
function __getWebviewHtml__(
|
|
198
|
-
webview: Webview,
|
|
199
|
-
context: ExtensionContext,
|
|
200
|
-
inputName?: string,
|
|
201
|
-
): string;
|
|
240
|
+
function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
|
|
202
241
|
```
|
|
203
242
|
|
|
204
243
|
### Warning
|
|
@@ -398,6 +437,12 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
|
|
|
398
437
|
|
|
399
438
|
## Important Notes
|
|
400
439
|
|
|
440
|
+
### v4.0.0
|
|
441
|
+
|
|
442
|
+
**Breaking Updates:**
|
|
443
|
+
|
|
444
|
+
- Merge the `__getWebviewHtml__` method for development and production into one, see [getWebviewHtml](#getwebviewhtml)
|
|
445
|
+
|
|
401
446
|
### v3.0.0
|
|
402
447
|
|
|
403
448
|
**Breaking Updates:**
|
package/README.zh_CN.md
CHANGED
|
@@ -83,13 +83,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
|
|
|
83
83
|
});
|
|
84
84
|
|
|
85
85
|
// vite 开发模式和生产模式注入不同的webview代码,减少开发工作
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
panel.webview.html = __getWebviewHtml__({
|
|
87
|
+
// vite 开发模式
|
|
88
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
89
|
+
// vite 生产模式
|
|
90
|
+
webview,
|
|
91
|
+
context,
|
|
92
|
+
inputName: 'index',
|
|
93
|
+
injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
|
|
94
|
+
});
|
|
93
95
|
```
|
|
94
96
|
|
|
95
97
|
- `package.json`
|
|
@@ -152,8 +154,8 @@ import path from 'node:path';
|
|
|
152
154
|
import vscode from '@tomjs/vite-plugin-vscode';
|
|
153
155
|
|
|
154
156
|
export default defineConfig({
|
|
157
|
+
plugins: [vscode()],
|
|
155
158
|
build: {
|
|
156
|
-
plugins: [vscode()]
|
|
157
159
|
rollupOptions: {
|
|
158
160
|
// https://cn.vitejs.dev/guide/build.html#multi-page-app
|
|
159
161
|
input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
|
|
@@ -170,39 +172,71 @@ export default defineConfig({
|
|
|
170
172
|
- 页面一
|
|
171
173
|
|
|
172
174
|
```ts
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
:
|
|
175
|
+
__getWebviewHtml__({
|
|
176
|
+
// vite 开发模式
|
|
177
|
+
serverUrl: process.env.VITE_DEV_SERVER_URL,
|
|
178
|
+
// vite 生产模式
|
|
179
|
+
webview,
|
|
180
|
+
context,
|
|
181
|
+
});
|
|
176
182
|
```
|
|
177
183
|
|
|
178
184
|
- 页面二
|
|
179
185
|
|
|
180
186
|
```ts
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
:
|
|
187
|
+
__getWebviewHtml__({
|
|
188
|
+
// vite 开发模式
|
|
189
|
+
serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
|
|
190
|
+
// vite 生产模式
|
|
191
|
+
webview,
|
|
192
|
+
context,
|
|
193
|
+
inputName: 'index2',
|
|
194
|
+
});
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
- 单个页面通过不同参数来实现不同功能
|
|
198
|
+
|
|
199
|
+
```ts
|
|
200
|
+
__getWebviewHtml__({
|
|
201
|
+
// vite 开发模式
|
|
202
|
+
serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
|
|
203
|
+
// vite 生产模式
|
|
204
|
+
webview,
|
|
205
|
+
context,
|
|
206
|
+
injectCode: `<script>window.__id__=666;</script>`,
|
|
207
|
+
});
|
|
184
208
|
```
|
|
185
209
|
|
|
186
210
|
**getWebviewHtml** 说明
|
|
187
211
|
|
|
188
212
|
```ts
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
213
|
+
interface WebviewHtmlOptions {
|
|
214
|
+
/**
|
|
215
|
+
* `[vite serve]` vite开发服务器的url, 请用 `process.env.VITE_DEV_SERVER_URL`
|
|
216
|
+
*/
|
|
217
|
+
serverUrl?: string;
|
|
218
|
+
/**
|
|
219
|
+
* `[vite build]` 扩展的 Webview 实例
|
|
220
|
+
*/
|
|
221
|
+
webview: Webview;
|
|
222
|
+
/**
|
|
223
|
+
* `[vite build]` 扩展的 ExtensionContext 实例
|
|
224
|
+
*/
|
|
225
|
+
context: ExtensionContext;
|
|
226
|
+
/**
|
|
227
|
+
* `[vite build]` vite build.rollupOptions.input 设置的名称. 默认 `index`.
|
|
228
|
+
*/
|
|
229
|
+
inputName?: string;
|
|
230
|
+
/**
|
|
231
|
+
* `[vite build]` 向 head 元素的结束前注入代码 <head>--inject--
|
|
232
|
+
*/
|
|
233
|
+
injectCode?: string;
|
|
234
|
+
}
|
|
194
235
|
|
|
195
236
|
/**
|
|
196
|
-
*
|
|
197
|
-
* @param webview 扩展的 Webview 实例
|
|
198
|
-
* @param context 扩展的 ExtensionContext 实例
|
|
199
|
-
* @param inputName vite build.rollupOptions.input 设置的名称. 默认 `index`.
|
|
237
|
+
* 获取webview的html
|
|
200
238
|
*/
|
|
201
|
-
function __getWebviewHtml__(
|
|
202
|
-
webview: Webview,
|
|
203
|
-
context: ExtensionContext,
|
|
204
|
-
inputName?: string,
|
|
205
|
-
): string;
|
|
239
|
+
function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
|
|
206
240
|
```
|
|
207
241
|
|
|
208
242
|
### 警告
|
|
@@ -407,6 +441,12 @@ pnpm build
|
|
|
407
441
|
|
|
408
442
|
## 重要说明
|
|
409
443
|
|
|
444
|
+
### v4.0.0
|
|
445
|
+
|
|
446
|
+
**破坏性更新:**
|
|
447
|
+
|
|
448
|
+
- 开发和生产的 `__getWebviewHtml__` 方法合并为同一个,参考 [getWebviewHtml](#getwebviewhtml)
|
|
449
|
+
|
|
410
450
|
### v3.0.0
|
|
411
451
|
|
|
412
452
|
**破坏性更新:**
|
package/dist/client.global.js
CHANGED
|
@@ -1,103 +1,93 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
(() => {
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
5
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
3
|
// src/webview/client.ts
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
if (window.top === window.self) {
|
|
5
|
+
throw new Error("[vscode:client]: must run in vscode webview");
|
|
6
|
+
}
|
|
7
|
+
var TAG = "[@tomjs:vscode:client] ";
|
|
8
|
+
patchAcquireVsCodeApi();
|
|
9
|
+
function onDomReady(callback) {
|
|
10
|
+
if (document.readyState === "interactive" || document.readyState === "complete") {
|
|
11
|
+
callback();
|
|
12
|
+
} else {
|
|
13
|
+
document.addEventListener("DOMContentLoaded", callback);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
function patchInitData(data) {
|
|
17
|
+
onDomReady(() => {
|
|
18
|
+
console.log(TAG, "patch client style");
|
|
19
|
+
const { style, body, root } = data;
|
|
20
|
+
document.documentElement.style.cssText = root.cssText;
|
|
21
|
+
document.body.className = body.className;
|
|
22
|
+
Object.keys(body.dataset).forEach((key) => {
|
|
23
|
+
document.body.dataset[key] = body.dataset[key];
|
|
24
|
+
});
|
|
25
|
+
const defaultStyles = document.createElement("style");
|
|
26
|
+
defaultStyles.id = "_defaultStyles";
|
|
27
|
+
defaultStyles.textContent = style;
|
|
28
|
+
document.head.appendChild(defaultStyles);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
|
|
32
|
+
function patchAcquireVsCodeApi() {
|
|
33
|
+
class AcquireVsCodeApi {
|
|
34
|
+
postMessage(message) {
|
|
35
|
+
console.log(TAG, "mock acquireVsCodeApi.postMessage:", message);
|
|
36
|
+
window.parent.postMessage({ type: POST_MESSAGE_TYPE, data: message }, "*");
|
|
13
37
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
callback();
|
|
19
|
-
} else {
|
|
20
|
-
document.addEventListener("DOMContentLoaded", callback);
|
|
21
|
-
}
|
|
38
|
+
getState() {
|
|
39
|
+
console.log(TAG, "mock acquireVsCodeApi.getState");
|
|
40
|
+
const state = sessionStorage.getItem("vscodeState");
|
|
41
|
+
return state ? JSON.parse(state) : void 0;
|
|
22
42
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
document.documentElement.style.cssText = root.cssText;
|
|
28
|
-
document.body.className = body.className;
|
|
29
|
-
Object.keys(body.dataset).forEach((key) => {
|
|
30
|
-
document.body.dataset[key] = body.dataset[key];
|
|
31
|
-
});
|
|
32
|
-
const defaultStyles = document.createElement("style");
|
|
33
|
-
defaultStyles.id = "_defaultStyles";
|
|
34
|
-
defaultStyles.textContent = style;
|
|
35
|
-
document.head.appendChild(defaultStyles);
|
|
36
|
-
});
|
|
43
|
+
setState(newState) {
|
|
44
|
+
console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
|
|
45
|
+
sessionStorage.setItem("vscodeState", JSON.stringify(newState));
|
|
46
|
+
return newState;
|
|
37
47
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const state = sessionStorage.getItem("vscodeState");
|
|
48
|
-
return state ? JSON.parse(state) : void 0;
|
|
49
|
-
}
|
|
50
|
-
setState(newState) {
|
|
51
|
-
console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
|
|
52
|
-
sessionStorage.setItem("vscodeState", JSON.stringify(newState));
|
|
53
|
-
return newState;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
console.log(TAG, "patch acquireVsCodeApi");
|
|
57
|
-
let api;
|
|
58
|
-
window.acquireVsCodeApi = () => {
|
|
59
|
-
if (!api) {
|
|
60
|
-
api = new AcquireVsCodeApi();
|
|
61
|
-
return api;
|
|
62
|
-
} else {
|
|
63
|
-
return api;
|
|
64
|
-
}
|
|
65
|
-
};
|
|
48
|
+
}
|
|
49
|
+
console.log(TAG, "patch acquireVsCodeApi");
|
|
50
|
+
let api;
|
|
51
|
+
window.acquireVsCodeApi = () => {
|
|
52
|
+
if (!api) {
|
|
53
|
+
api = new AcquireVsCodeApi();
|
|
54
|
+
return api;
|
|
55
|
+
} else {
|
|
56
|
+
return api;
|
|
66
57
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
document.execCommand("selectAll");
|
|
89
|
-
} else if (key === "c") {
|
|
90
|
-
document.execCommand("copy");
|
|
91
|
-
} else if (key === "v") {
|
|
92
|
-
document.execCommand("paste");
|
|
93
|
-
} else if (key === "x") {
|
|
94
|
-
document.execCommand("cut");
|
|
95
|
-
} else if (key === "z") {
|
|
96
|
-
document.execCommand("undo");
|
|
97
|
-
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
var INIT_TYPE = "[vscode:extension]:init";
|
|
61
|
+
window.addEventListener("message", (e) => {
|
|
62
|
+
const { type, data } = e.data || {};
|
|
63
|
+
if (!e.origin.startsWith("vscode-webview://") || type !== INIT_TYPE) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
patchInitData(data);
|
|
67
|
+
});
|
|
68
|
+
var KEYBOARD_EVENT_TYPE = "[vscode:client]:commands";
|
|
69
|
+
var isMac = navigator.userAgent.indexOf("Macintosh") >= 0;
|
|
70
|
+
document.addEventListener("keydown", (e) => {
|
|
71
|
+
console.log(e);
|
|
72
|
+
const { metaKey, shiftKey, ctrlKey, altKey, key } = e;
|
|
73
|
+
if (key === "F1") {
|
|
74
|
+
window.parent.postMessage({ type: KEYBOARD_EVENT_TYPE, data: "F1" }, "*");
|
|
75
|
+
} else if (isMac && metaKey && !altKey && !ctrlKey) {
|
|
76
|
+
if (shiftKey) {
|
|
77
|
+
if (key === "z") {
|
|
78
|
+
document.execCommand("redo");
|
|
98
79
|
}
|
|
99
|
-
})
|
|
80
|
+
} else if (key === "a") {
|
|
81
|
+
document.execCommand("selectAll");
|
|
82
|
+
} else if (key === "c") {
|
|
83
|
+
document.execCommand("copy");
|
|
84
|
+
} else if (key === "v") {
|
|
85
|
+
document.execCommand("paste");
|
|
86
|
+
} else if (key === "x") {
|
|
87
|
+
document.execCommand("cut");
|
|
88
|
+
} else if (key === "z") {
|
|
89
|
+
document.execCommand("undo");
|
|
90
|
+
}
|
|
100
91
|
}
|
|
101
92
|
});
|
|
102
|
-
require_client();
|
|
103
93
|
})();
|
package/dist/index.d.mts
CHANGED
|
@@ -69,20 +69,9 @@ interface PluginOptions {
|
|
|
69
69
|
* extension file
|
|
70
70
|
* ```ts
|
|
71
71
|
*function setupHtml(webview: Webview, context: ExtensionContext) {
|
|
72
|
-
*
|
|
73
|
-
* return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
|
|
74
|
-
* }
|
|
75
|
-
* return __getWebviewHtml__(webview, context);
|
|
72
|
+
* return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
|
|
76
73
|
*}
|
|
77
74
|
* ```
|
|
78
|
-
* webview client
|
|
79
|
-
* ```html
|
|
80
|
-
* <html>
|
|
81
|
-
* <head>
|
|
82
|
-
* <script>inject code</script>
|
|
83
|
-
* </head>
|
|
84
|
-
* </html>
|
|
85
|
-
* ```
|
|
86
75
|
*/
|
|
87
76
|
webview?: boolean | string | WebviewOption;
|
|
88
77
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -69,20 +69,9 @@ interface PluginOptions {
|
|
|
69
69
|
* extension file
|
|
70
70
|
* ```ts
|
|
71
71
|
*function setupHtml(webview: Webview, context: ExtensionContext) {
|
|
72
|
-
*
|
|
73
|
-
* return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
|
|
74
|
-
* }
|
|
75
|
-
* return __getWebviewHtml__(webview, context);
|
|
72
|
+
* return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
|
|
76
73
|
*}
|
|
77
74
|
* ```
|
|
78
|
-
* webview client
|
|
79
|
-
* ```html
|
|
80
|
-
* <html>
|
|
81
|
-
* <head>
|
|
82
|
-
* <script>inject code</script>
|
|
83
|
-
* </head>
|
|
84
|
-
* </html>
|
|
85
|
-
* ```
|
|
86
75
|
*/
|
|
87
76
|
webview?: boolean | string | WebviewOption;
|
|
88
77
|
/**
|
package/dist/index.js
CHANGED
|
@@ -3,10 +3,10 @@ var _fs = require('fs'); var _fs2 = _interopRequireDefault(_fs);
|
|
|
3
3
|
var _os = require('os'); var _os2 = _interopRequireDefault(_os);
|
|
4
4
|
var _path = require('path'); var _path2 = _interopRequireDefault(_path);
|
|
5
5
|
var _process = require('process');
|
|
6
|
+
var _node = require('@tomjs/node');
|
|
6
7
|
var _lodashmerge = require('lodash.merge'); var _lodashmerge2 = _interopRequireDefault(_lodashmerge);
|
|
7
8
|
var _nodehtmlparser = require('node-html-parser');
|
|
8
9
|
var _tsup = require('tsup');
|
|
9
|
-
var _node = require('@tomjs/node');
|
|
10
10
|
|
|
11
11
|
// src/constants.ts
|
|
12
12
|
var PLUGIN_NAME = "tomjs:vscode";
|
|
@@ -153,7 +153,7 @@ function genProdWebviewCode(cache, webview) {
|
|
|
153
153
|
webview = Object.assign({}, webview);
|
|
154
154
|
const prodCacheFolder = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", prodCachePkgName);
|
|
155
155
|
_node.emptyDirSync.call(void 0, prodCacheFolder);
|
|
156
|
-
const destFile = _path2.default.join(prodCacheFolder, "index.
|
|
156
|
+
const destFile = _path2.default.join(prodCacheFolder, "index.js");
|
|
157
157
|
function handleHtmlCode(html) {
|
|
158
158
|
const root = _nodehtmlparser.parse.call(void 0, html);
|
|
159
159
|
const head = root.querySelector("head");
|
|
@@ -188,7 +188,7 @@ function genProdWebviewCode(cache, webview) {
|
|
|
188
188
|
);
|
|
189
189
|
const code = (
|
|
190
190
|
/* js */
|
|
191
|
-
`import {
|
|
191
|
+
`import { Uri } from 'vscode';
|
|
192
192
|
|
|
193
193
|
${cacheCode}
|
|
194
194
|
|
|
@@ -201,10 +201,15 @@ function uuid() {
|
|
|
201
201
|
return text;
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
export default function getWebviewHtml(
|
|
204
|
+
export default function getWebviewHtml(options){
|
|
205
|
+
const { webview, context, inputName, injectCode } = options || {};
|
|
205
206
|
const nonce = uuid();
|
|
206
207
|
const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
|
|
207
|
-
|
|
208
|
+
let html = htmlCode[inputName || 'index'] || '';
|
|
209
|
+
if (injectCode) {
|
|
210
|
+
html = html.replace('<head>', '<head>'+ injectCode);
|
|
211
|
+
}
|
|
212
|
+
|
|
208
213
|
return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
|
|
209
214
|
}
|
|
210
215
|
`
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.7.26_postcss@8.4.
|
|
1
|
+
// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.7.26_postcss@8.4.49_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
|
|
2
2
|
import { fileURLToPath } from "url";
|
|
3
3
|
import path from "path";
|
|
4
4
|
var getFilename = () => fileURLToPath(import.meta.url);
|
|
@@ -10,10 +10,10 @@ import fs from "fs";
|
|
|
10
10
|
import os from "os";
|
|
11
11
|
import path2 from "path";
|
|
12
12
|
import { cwd } from "process";
|
|
13
|
+
import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
|
|
13
14
|
import merge from "lodash.merge";
|
|
14
15
|
import { parse as htmlParser } from "node-html-parser";
|
|
15
16
|
import { build as tsupBuild } from "tsup";
|
|
16
|
-
import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
|
|
17
17
|
|
|
18
18
|
// src/constants.ts
|
|
19
19
|
var PLUGIN_NAME = "tomjs:vscode";
|
|
@@ -160,7 +160,7 @@ function genProdWebviewCode(cache, webview) {
|
|
|
160
160
|
webview = Object.assign({}, webview);
|
|
161
161
|
const prodCacheFolder = path2.join(cwd(), "node_modules", prodCachePkgName);
|
|
162
162
|
emptyDirSync(prodCacheFolder);
|
|
163
|
-
const destFile = path2.join(prodCacheFolder, "index.
|
|
163
|
+
const destFile = path2.join(prodCacheFolder, "index.js");
|
|
164
164
|
function handleHtmlCode(html) {
|
|
165
165
|
const root = htmlParser(html);
|
|
166
166
|
const head = root.querySelector("head");
|
|
@@ -195,7 +195,7 @@ function genProdWebviewCode(cache, webview) {
|
|
|
195
195
|
);
|
|
196
196
|
const code = (
|
|
197
197
|
/* js */
|
|
198
|
-
`import {
|
|
198
|
+
`import { Uri } from 'vscode';
|
|
199
199
|
|
|
200
200
|
${cacheCode}
|
|
201
201
|
|
|
@@ -208,10 +208,15 @@ function uuid() {
|
|
|
208
208
|
return text;
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
export default function getWebviewHtml(
|
|
211
|
+
export default function getWebviewHtml(options){
|
|
212
|
+
const { webview, context, inputName, injectCode } = options || {};
|
|
212
213
|
const nonce = uuid();
|
|
213
214
|
const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
|
|
214
|
-
|
|
215
|
+
let html = htmlCode[inputName || 'index'] || '';
|
|
216
|
+
if (injectCode) {
|
|
217
|
+
html = html.replace('<head>', '<head>'+ injectCode);
|
|
218
|
+
}
|
|
219
|
+
|
|
215
220
|
return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
|
|
216
221
|
}
|
|
217
222
|
`
|
package/dist/webview.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface
|
|
1
|
+
interface WebviewHtmlOptions {
|
|
2
2
|
/**
|
|
3
3
|
* local server url
|
|
4
4
|
*/
|
|
@@ -8,6 +8,6 @@ interface WebviewHtmlDevOptions {
|
|
|
8
8
|
*
|
|
9
9
|
* @param options serverUrl string or object options
|
|
10
10
|
*/
|
|
11
|
-
declare function getWebviewHtml(options:
|
|
11
|
+
declare function getWebviewHtml(options: WebviewHtmlOptions): string;
|
|
12
12
|
|
|
13
|
-
export {
|
|
13
|
+
export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };
|
package/dist/webview.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface
|
|
1
|
+
interface WebviewHtmlOptions {
|
|
2
2
|
/**
|
|
3
3
|
* local server url
|
|
4
4
|
*/
|
|
@@ -8,6 +8,6 @@ interface WebviewHtmlDevOptions {
|
|
|
8
8
|
*
|
|
9
9
|
* @param options serverUrl string or object options
|
|
10
10
|
*/
|
|
11
|
-
declare function getWebviewHtml(options:
|
|
11
|
+
declare function getWebviewHtml(options: WebviewHtmlOptions): string;
|
|
12
12
|
|
|
13
|
-
export {
|
|
13
|
+
export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };
|
package/dist/webview.js
CHANGED
|
@@ -193,11 +193,7 @@ function getWebviewHtml(options) {
|
|
|
193
193
|
const opts = {
|
|
194
194
|
serverUrl: ""
|
|
195
195
|
};
|
|
196
|
-
|
|
197
|
-
opts.serverUrl = options;
|
|
198
|
-
} else {
|
|
199
|
-
Object.assign(opts, options);
|
|
200
|
-
}
|
|
196
|
+
Object.assign(opts, options);
|
|
201
197
|
return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
|
|
202
198
|
}
|
|
203
199
|
var webview_default = getWebviewHtml;
|
package/dist/webview.mjs
CHANGED
|
@@ -193,11 +193,7 @@ function getWebviewHtml(options) {
|
|
|
193
193
|
const opts = {
|
|
194
194
|
serverUrl: ""
|
|
195
195
|
};
|
|
196
|
-
|
|
197
|
-
opts.serverUrl = options;
|
|
198
|
-
} else {
|
|
199
|
-
Object.assign(opts, options);
|
|
200
|
-
}
|
|
196
|
+
Object.assign(opts, options);
|
|
201
197
|
return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
|
|
202
198
|
}
|
|
203
199
|
var webview_default = getWebviewHtml;
|
package/env.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ExtensionContext, Webview } from 'vscode';
|
|
1
|
+
import type { ExtensionContext, Webview } from 'vscode';
|
|
2
2
|
// Make this a module
|
|
3
3
|
export {};
|
|
4
4
|
declare global {
|
|
@@ -24,21 +24,31 @@ declare global {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
interface WebviewHtmlOptions {
|
|
28
|
+
/**
|
|
29
|
+
* `[vite serve]` The url of the vite dev server. Please use `process.env.VITE_DEV_SERVER_URL`
|
|
30
|
+
*/
|
|
31
|
+
serverUrl?: string;
|
|
32
|
+
/**
|
|
33
|
+
* `[vite build]` The Webview instance of the extension.
|
|
34
|
+
*/
|
|
35
|
+
webview: Webview;
|
|
36
|
+
/**
|
|
37
|
+
* `[vite build]` The ExtensionContext instance of the extension.
|
|
38
|
+
*/
|
|
39
|
+
context: ExtensionContext;
|
|
40
|
+
/**
|
|
41
|
+
* `[vite build]` vite build.rollupOptions.input name. Default is `index`.
|
|
42
|
+
*/
|
|
43
|
+
inputName?: string;
|
|
44
|
+
/**
|
|
45
|
+
* `[vite build]` Inject code into the afterbegin of the head element.
|
|
46
|
+
*/
|
|
47
|
+
injectCode?: string;
|
|
48
|
+
}
|
|
32
49
|
|
|
33
50
|
/**
|
|
34
|
-
*
|
|
35
|
-
* @param webview The Webview instance of the extension.
|
|
36
|
-
* @param context The ExtensionContext instance of the extension.
|
|
37
|
-
* @param inputName vite build.rollupOptions.input name. Default is `index`.
|
|
51
|
+
* Gets the html of webview
|
|
38
52
|
*/
|
|
39
|
-
function __getWebviewHtml__(
|
|
40
|
-
webview: Webview,
|
|
41
|
-
context: ExtensionContext,
|
|
42
|
-
inputName?: string,
|
|
43
|
-
): string;
|
|
53
|
+
function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
|
|
44
54
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tomjs/vite-plugin-vscode",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vite",
|
|
@@ -23,24 +23,12 @@
|
|
|
23
23
|
"types": "./dist/index.d.ts",
|
|
24
24
|
"exports": {
|
|
25
25
|
".": {
|
|
26
|
-
"require":
|
|
27
|
-
|
|
28
|
-
"types": "./dist/index.d.ts"
|
|
29
|
-
},
|
|
30
|
-
"import": {
|
|
31
|
-
"default": "./dist/index.mjs",
|
|
32
|
-
"types": "./dist/index.d.mts"
|
|
33
|
-
}
|
|
26
|
+
"require": "./dist/index.js",
|
|
27
|
+
"import": "./dist/index.mjs"
|
|
34
28
|
},
|
|
35
29
|
"./webview": {
|
|
36
|
-
"require":
|
|
37
|
-
|
|
38
|
-
"types": "./dist/webview.d.ts"
|
|
39
|
-
},
|
|
40
|
-
"import": {
|
|
41
|
-
"default": "./dist/webview.mjs",
|
|
42
|
-
"types": "./dist/webview.d.mts"
|
|
43
|
-
}
|
|
30
|
+
"require": "./dist/webview.js",
|
|
31
|
+
"import": "./dist/webview.mjs"
|
|
44
32
|
},
|
|
45
33
|
"./client": "./dist/client.global.js",
|
|
46
34
|
"./env": "./env.d.ts"
|
|
@@ -61,36 +49,39 @@
|
|
|
61
49
|
"url": "git+https://github.com/tomjs/vite-plugin-vscode.git"
|
|
62
50
|
},
|
|
63
51
|
"dependencies": {
|
|
64
|
-
"@tomjs/node": "^2.2.
|
|
65
|
-
"dayjs": "^1.11.
|
|
52
|
+
"@tomjs/node": "^2.2.3",
|
|
53
|
+
"dayjs": "^1.11.13",
|
|
66
54
|
"execa": "^5.1.1",
|
|
67
55
|
"kolorist": "^1.8.0",
|
|
68
56
|
"lodash.clonedeep": "^4.5.0",
|
|
69
57
|
"lodash.merge": "^4.6.2",
|
|
70
|
-
"node-html-parser": "^6.1.
|
|
58
|
+
"node-html-parser": "^6.1.13",
|
|
71
59
|
"tsup": "7.2.0"
|
|
72
60
|
},
|
|
73
61
|
"devDependencies": {
|
|
74
|
-
"@commitlint/cli": "^
|
|
75
|
-
"@tomjs/commitlint": "^
|
|
76
|
-
"@tomjs/eslint": "^1.
|
|
77
|
-
"@tomjs/prettier": "^1.
|
|
78
|
-
"@tomjs/stylelint": "^2.
|
|
79
|
-
"@tomjs/tsconfig": "^1.
|
|
62
|
+
"@commitlint/cli": "^19.6.0",
|
|
63
|
+
"@tomjs/commitlint": "^3.3.0",
|
|
64
|
+
"@tomjs/eslint": "^4.1.0",
|
|
65
|
+
"@tomjs/prettier": "^1.4.1",
|
|
66
|
+
"@tomjs/stylelint": "^2.6.1",
|
|
67
|
+
"@tomjs/tsconfig": "^1.7.1",
|
|
80
68
|
"@types/lodash.clonedeep": "^4.5.9",
|
|
81
69
|
"@types/lodash.merge": "^4.6.9",
|
|
82
|
-
"@types/node": "18.19.
|
|
70
|
+
"@types/node": "18.19.67",
|
|
71
|
+
"@vitejs/plugin-vue": "^5.1.4",
|
|
83
72
|
"cross-env": "^7.0.3",
|
|
84
|
-
"eslint": "^
|
|
85
|
-
"
|
|
86
|
-
"
|
|
73
|
+
"eslint": "^9.16.0",
|
|
74
|
+
"globals": "^15.13.0",
|
|
75
|
+
"husky": "^9.1.7",
|
|
76
|
+
"lint-staged": "^15.2.10",
|
|
87
77
|
"npm-run-all": "^4.1.5",
|
|
88
|
-
"prettier": "^3.
|
|
89
|
-
"rimraf": "^
|
|
90
|
-
"stylelint": "^16.
|
|
91
|
-
"tsx": "^4.
|
|
78
|
+
"prettier": "^3.4.2",
|
|
79
|
+
"rimraf": "^6.0.1",
|
|
80
|
+
"stylelint": "^16.11.0",
|
|
81
|
+
"tsx": "^4.19.2",
|
|
92
82
|
"typescript": "~5.3.3",
|
|
93
|
-
"vite": "5.4.
|
|
83
|
+
"vite": "^5.4.11",
|
|
84
|
+
"vue-tsc": "^2.1.10"
|
|
94
85
|
},
|
|
95
86
|
"peerDependencies": {
|
|
96
87
|
"vite": ">=2"
|
|
@@ -100,7 +91,7 @@
|
|
|
100
91
|
"build": "pnpm clean && tsup",
|
|
101
92
|
"clean": "rimraf ./dist",
|
|
102
93
|
"lint": "run-s lint:eslint lint:stylelint lint:prettier",
|
|
103
|
-
"lint:eslint": "eslint \"{src,scripts,examples}/**/*.ts\" *.{cjs,ts} --fix --cache",
|
|
94
|
+
"lint:eslint": "eslint \"{src,scripts,examples}/**/*.{tsx,cjs,ts,vue}\" *.{cjs,ts} --fix --cache",
|
|
104
95
|
"lint:stylelint": "stylelint \"examples/**/*.{css,scss,less,vue,html}\" --fix --cache",
|
|
105
96
|
"lint:prettier": "prettier --write ."
|
|
106
97
|
}
|