@tomjs/vite-plugin-vscode 5.2.0 → 5.2.1
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UserConfig } from "tsdown";
|
|
2
2
|
import { PluginOption } from "vite";
|
|
3
3
|
|
|
4
4
|
//#region src/types.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* vscode extension options. See [tsdown](https://tsdown.dev/) and [Config Options](https://tsdown.dev/reference/config-options) for more information.
|
|
7
7
|
*/
|
|
8
|
-
interface ExtensionOptions extends Omit<
|
|
8
|
+
interface ExtensionOptions extends Omit<UserConfig, 'entry' | 'format' | 'outDir' | 'watch'> {
|
|
9
9
|
/**
|
|
10
10
|
* The extension entry file.
|
|
11
11
|
* @default "extension/index.ts"
|
|
@@ -10,7 +10,7 @@ import { parse } from "node-html-parser";
|
|
|
10
10
|
import { build } from "tsdown";
|
|
11
11
|
import Logger from "@tomjs/logger";
|
|
12
12
|
|
|
13
|
-
//#region node_modules/.pnpm/tsdown@0.18.
|
|
13
|
+
//#region node_modules/.pnpm/tsdown@0.18.3_publint@0.3.16_synckit@0.11.11_typescript@5.9.3_vue-tsc@3.2.0_typescript@5.9.3_/node_modules/tsdown/esm-shims.js
|
|
14
14
|
const getFilename = () => fileURLToPath(import.meta.url);
|
|
15
15
|
const getDirname = () => path.dirname(getFilename());
|
|
16
16
|
const __dirname = /* @__PURE__ */ getDirname();
|
|
@@ -232,7 +232,7 @@ function useVSCodePlugin(options) {
|
|
|
232
232
|
logger.info("extension build start");
|
|
233
233
|
let buildCount = 0;
|
|
234
234
|
const webview = opts?.webview;
|
|
235
|
-
const { onSuccess: _onSuccess, ignoreWatch,
|
|
235
|
+
const { onSuccess: _onSuccess, ignoreWatch, logLevel, watchFiles, ...tsdownOptions } = opts.extension || {};
|
|
236
236
|
await build(merge(tsdownOptions, {
|
|
237
237
|
watch: watchFiles ?? (opts.recommended ? ["extension"] : true),
|
|
238
238
|
ignoreWatch: [
|
|
@@ -243,7 +243,7 @@ function useVSCodePlugin(options) {
|
|
|
243
243
|
"dist"
|
|
244
244
|
].concat(Array.isArray(ignoreWatch) ? ignoreWatch : []),
|
|
245
245
|
env,
|
|
246
|
-
|
|
246
|
+
logLevel: logLevel ?? "silent",
|
|
247
247
|
plugins: !webview ? [] : [{
|
|
248
248
|
name: `${ORG_NAME}:vscode:inject`,
|
|
249
249
|
transform(code, id) {
|
|
@@ -303,10 +303,10 @@ function useVSCodePlugin(options) {
|
|
|
303
303
|
VITE_WEBVIEW_DIST: outDir
|
|
304
304
|
};
|
|
305
305
|
logger.info("extension build start");
|
|
306
|
-
const { onSuccess: _onSuccess,
|
|
306
|
+
const { onSuccess: _onSuccess, logLevel, ...tsupOptions } = opts.extension || {};
|
|
307
307
|
build(merge(tsupOptions, {
|
|
308
308
|
env,
|
|
309
|
-
|
|
309
|
+
logLevel: logLevel ?? "silent",
|
|
310
310
|
plugins: !webview ? [] : [{
|
|
311
311
|
name: `${ORG_NAME}:vscode:inject`,
|
|
312
312
|
transform(code, id) {
|
package/dist/webview.js
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
var e=`<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<style>
|
|
8
|
+
html,
|
|
9
|
+
body {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 100%;
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#webview-patch-iframe {
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
border: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.outer {
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
</style>
|
|
29
|
+
|
|
30
|
+
<script type="module" id="webview-patch">
|
|
31
|
+
const TAG = '[@tomjs:vscode:extension] ';
|
|
32
|
+
|
|
33
|
+
function onDomReady(callback, doc) {
|
|
34
|
+
const _doc = doc || document;
|
|
35
|
+
if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
|
|
36
|
+
callback();
|
|
37
|
+
} else {
|
|
38
|
+
_doc.addEventListener('DOMContentLoaded', callback);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
let vsCodeApi;
|
|
43
|
+
|
|
44
|
+
function getApi() {
|
|
45
|
+
if (vsCodeApi) return vsCodeApi;
|
|
46
|
+
return (vsCodeApi = acquireVsCodeApi());
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function sendInitData(iframe) {
|
|
50
|
+
console.log(TAG + 'init data');
|
|
51
|
+
const dataset = {};
|
|
52
|
+
Object.keys(document.body.dataset).forEach((key) => {
|
|
53
|
+
dataset[key] = document.body.dataset[key];
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
iframe.contentWindow.postMessage(
|
|
57
|
+
{
|
|
58
|
+
type: '[vscode:extension]:init',
|
|
59
|
+
data: {
|
|
60
|
+
state: getApi().getState(),
|
|
61
|
+
style: document.getElementById('_defaultStyles').innerHTML,
|
|
62
|
+
root: {
|
|
63
|
+
cssText: document.documentElement.style.cssText,
|
|
64
|
+
},
|
|
65
|
+
body: {
|
|
66
|
+
dataset: dataset,
|
|
67
|
+
className: document.body.className,
|
|
68
|
+
role: document.body.getAttribute('role'),
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
'*',
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function observeAttributeChanges(element, attributeName, callback) {
|
|
77
|
+
const observer = new MutationObserver(function (mutationsList) {
|
|
78
|
+
for (let mutation of mutationsList) {
|
|
79
|
+
if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
|
|
80
|
+
callback(mutation.target.getAttribute(attributeName));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
observer.observe(element, { attributes: true });
|
|
85
|
+
return observer;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// message handler
|
|
89
|
+
let iframeLoaded = false;
|
|
90
|
+
const cacheMessages = [];
|
|
91
|
+
|
|
92
|
+
function handleMessage(e) {
|
|
93
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
94
|
+
if (!iframeLoaded || !iframe) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (e.origin.startsWith('vscode-webview://')) {
|
|
98
|
+
iframe.contentWindow.postMessage(e.data, '*');
|
|
99
|
+
} else if ('{{serverUrl}}'.startsWith(e.origin)) {
|
|
100
|
+
const { type, data } = e.data;
|
|
101
|
+
console.log(TAG + ' received:', e.data);
|
|
102
|
+
if (type === '[vscode:client]:postMessage') {
|
|
103
|
+
getApi().postMessage(data);
|
|
104
|
+
} else if (type === '[vscode:client]:commands') {
|
|
105
|
+
if (data === 'F1') {
|
|
106
|
+
window.dispatchEvent(
|
|
107
|
+
new KeyboardEvent('keydown', {
|
|
108
|
+
key: 'F1',
|
|
109
|
+
keyCode: 112,
|
|
110
|
+
code: 'F1',
|
|
111
|
+
}),
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
window.addEventListener('message', function (event) {
|
|
119
|
+
if (event.origin.startsWith('vscode-webview://')) {
|
|
120
|
+
cacheMessages.push(event);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
handleMessage(event);
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
let isCacheWorking = false;
|
|
127
|
+
setInterval(() => {
|
|
128
|
+
if (isCacheWorking) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
isCacheWorking = true;
|
|
133
|
+
if (iframeLoaded) {
|
|
134
|
+
let event = cacheMessages.shift();
|
|
135
|
+
while (event) {
|
|
136
|
+
handleMessage(event);
|
|
137
|
+
event = cacheMessages.shift();
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
isCacheWorking = false;
|
|
141
|
+
}, 50);
|
|
142
|
+
|
|
143
|
+
onDomReady(function () {
|
|
144
|
+
/** @type {HTMLIFrameElement} */
|
|
145
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
146
|
+
observeAttributeChanges(document.body, 'class', function (className) {
|
|
147
|
+
sendInitData(iframe);
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
onDomReady(function () {
|
|
151
|
+
iframeLoaded = true;
|
|
152
|
+
sendInitData(iframe);
|
|
153
|
+
}, iframe.contentDocument);
|
|
154
|
+
|
|
155
|
+
iframe.addEventListener('load', function (e) {
|
|
156
|
+
iframeLoaded = true;
|
|
157
|
+
|
|
158
|
+
let interval = setInterval(() => {
|
|
159
|
+
try {
|
|
160
|
+
if (document.getElementById('_defaultStyles')) {
|
|
161
|
+
sendInitData(iframe);
|
|
162
|
+
// addListeners(iframe);
|
|
163
|
+
clearInterval(interval);
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
} catch (e) {
|
|
167
|
+
clearInterval(interval);
|
|
168
|
+
console.error(e);
|
|
169
|
+
}
|
|
170
|
+
}, 10);
|
|
171
|
+
});
|
|
172
|
+
});
|
|
173
|
+
<\/script>
|
|
174
|
+
</head>
|
|
175
|
+
|
|
176
|
+
<body>
|
|
177
|
+
<div class="outer">
|
|
178
|
+
<iframe
|
|
179
|
+
id="webview-patch-iframe"
|
|
180
|
+
frameborder="0"
|
|
181
|
+
sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
|
|
182
|
+
allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
|
|
183
|
+
src="{{serverUrl}}"
|
|
184
|
+
></iframe>
|
|
185
|
+
</div>
|
|
186
|
+
</body>
|
|
187
|
+
</html>
|
|
188
|
+
`;function t(t){let n={serverUrl:``};return Object.assign(n,t),e.replace(/\{\{serverUrl\}\}/g,n.serverUrl)}var n=t;export{n as default,t as getWebviewHtml};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tomjs/vite-plugin-vscode",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.2.
|
|
4
|
+
"version": "5.2.1",
|
|
5
5
|
"description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Tom Gao",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"mjs"
|
|
26
26
|
],
|
|
27
27
|
"exports": {
|
|
28
|
-
".": "./dist/index.
|
|
29
|
-
"./webview": "./dist/webview.
|
|
28
|
+
".": "./dist/index.js",
|
|
29
|
+
"./webview": "./dist/webview.js",
|
|
30
30
|
"./client": "./dist/client.iife.js",
|
|
31
31
|
"./env": "./env.d.ts"
|
|
32
32
|
},
|
|
33
|
-
"module": "./dist/index.
|
|
34
|
-
"types": "./dist/index.d.
|
|
33
|
+
"module": "./dist/index.js",
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
35
|
"files": [
|
|
36
36
|
"dist",
|
|
37
37
|
"env.d.ts"
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"lodash.clonedeep": "^4.5.0",
|
|
56
56
|
"lodash.merge": "^4.6.2",
|
|
57
57
|
"node-html-parser": "^7.0.1",
|
|
58
|
-
"tsdown": "~0.18.
|
|
58
|
+
"tsdown": "~0.18.3"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@antfu/eslint-config": "^6.7.1",
|
package/dist/webview.mjs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
//#region src/webview/template.html
|
|
2
|
-
var template_default = "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <style>\n html,\n body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n #webview-patch-iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n\n .outer {\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n </style>\n\n <script type=\"module\" id=\"webview-patch\">\n const TAG = '[@tomjs:vscode:extension] ';\n\n function onDomReady(callback, doc) {\n const _doc = doc || document;\n if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {\n callback();\n } else {\n _doc.addEventListener('DOMContentLoaded', callback);\n }\n }\n\n let vsCodeApi;\n\n function getApi() {\n if (vsCodeApi) return vsCodeApi;\n return (vsCodeApi = acquireVsCodeApi());\n }\n\n function sendInitData(iframe) {\n console.log(TAG + 'init data');\n const dataset = {};\n Object.keys(document.body.dataset).forEach((key) => {\n dataset[key] = document.body.dataset[key];\n });\n\n iframe.contentWindow.postMessage(\n {\n type: '[vscode:extension]:init',\n data: {\n state: getApi().getState(),\n style: document.getElementById('_defaultStyles').innerHTML,\n root: {\n cssText: document.documentElement.style.cssText,\n },\n body: {\n dataset: dataset,\n className: document.body.className,\n role: document.body.getAttribute('role'),\n },\n },\n },\n '*',\n );\n }\n\n function observeAttributeChanges(element, attributeName, callback) {\n const observer = new MutationObserver(function (mutationsList) {\n for (let mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {\n callback(mutation.target.getAttribute(attributeName));\n }\n }\n });\n observer.observe(element, { attributes: true });\n return observer;\n }\n\n // message handler\n let iframeLoaded = false;\n const cacheMessages = [];\n\n function handleMessage(e) {\n const iframe = document.getElementById('webview-patch-iframe');\n if (!iframeLoaded || !iframe) {\n return;\n }\n if (e.origin.startsWith('vscode-webview://')) {\n iframe.contentWindow.postMessage(e.data, '*');\n } else if ('{{serverUrl}}'.startsWith(e.origin)) {\n const { type, data } = e.data;\n console.log(TAG + ' received:', e.data);\n if (type === '[vscode:client]:postMessage') {\n getApi().postMessage(data);\n } else if (type === '[vscode:client]:commands') {\n if (data === 'F1') {\n window.dispatchEvent(\n new KeyboardEvent('keydown', {\n key: 'F1',\n keyCode: 112,\n code: 'F1',\n }),\n );\n }\n }\n }\n }\n\n window.addEventListener('message', function (event) {\n if (event.origin.startsWith('vscode-webview://')) {\n cacheMessages.push(event);\n return;\n }\n handleMessage(event);\n });\n\n let isCacheWorking = false;\n setInterval(() => {\n if (isCacheWorking) {\n return;\n }\n\n isCacheWorking = true;\n if (iframeLoaded) {\n let event = cacheMessages.shift();\n while (event) {\n handleMessage(event);\n event = cacheMessages.shift();\n }\n }\n isCacheWorking = false;\n }, 50);\n\n onDomReady(function () {\n /** @type {HTMLIFrameElement} */\n const iframe = document.getElementById('webview-patch-iframe');\n observeAttributeChanges(document.body, 'class', function (className) {\n sendInitData(iframe);\n });\n\n onDomReady(function () {\n iframeLoaded = true;\n sendInitData(iframe);\n }, iframe.contentDocument);\n\n iframe.addEventListener('load', function (e) {\n iframeLoaded = true;\n\n let interval = setInterval(() => {\n try {\n if (document.getElementById('_defaultStyles')) {\n sendInitData(iframe);\n // addListeners(iframe);\n clearInterval(interval);\n return;\n }\n } catch (e) {\n clearInterval(interval);\n console.error(e);\n }\n }, 10);\n });\n });\n <\/script>\n </head>\n\n <body>\n <div class=\"outer\">\n <iframe\n id=\"webview-patch-iframe\"\n frameborder=\"0\"\n sandbox=\"allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads\"\n allow=\"cross-origin-isolated; autoplay; clipboard-read; clipboard-write\"\n src=\"{{serverUrl}}\"\n ></iframe>\n </div>\n </body>\n</html>\n";
|
|
3
|
-
|
|
4
|
-
//#endregion
|
|
5
|
-
//#region src/webview/webview.ts
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
* @param options serverUrl string or object options
|
|
9
|
-
*/
|
|
10
|
-
function getWebviewHtml(options) {
|
|
11
|
-
const opts = { serverUrl: "" };
|
|
12
|
-
Object.assign(opts, options);
|
|
13
|
-
return template_default.replace(/\{\{serverUrl\}\}/g, opts.serverUrl);
|
|
14
|
-
}
|
|
15
|
-
var webview_default = getWebviewHtml;
|
|
16
|
-
|
|
17
|
-
//#endregion
|
|
18
|
-
export { webview_default as default, getWebviewHtml };
|
|
File without changes
|