@tomjs/vite-plugin-vscode 2.5.3 → 2.5.5
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 +1 -1
- package/README.zh_CN.md +1 -1
- package/dist/client.global.js +1 -0
- package/dist/webview.js +162 -161
- package/dist/webview.mjs +162 -161
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @tomjs/vite-plugin-vscode
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode)  
|
|
3
|
+
[](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode)   [](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts)
|
|
4
4
|
|
|
5
5
|
**English** | [中文](./README.zh_CN.md)
|
|
6
6
|
|
package/README.zh_CN.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @tomjs/vite-plugin-vscode
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode)  
|
|
3
|
+
[](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode)   [](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts)
|
|
4
4
|
|
|
5
5
|
[English](./README.md) | **中文**
|
|
6
6
|
|
package/dist/client.global.js
CHANGED
package/dist/webview.js
CHANGED
|
@@ -1,189 +1,190 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/webview/template.html
|
|
2
2
|
var template_default = `<!doctype html>
|
|
3
3
|
<html lang="en">
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
#webview-patch-iframe {
|
|
20
|
-
width: 100%;
|
|
21
|
-
height: 100%;
|
|
22
|
-
border: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.outer {
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
overflow: hidden;
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
31
|
-
|
|
32
|
-
<script type="module" id="webview-patch">
|
|
33
|
-
const TAG = '[@tomjs:vscode:extension] ';
|
|
34
|
-
|
|
35
|
-
function onDomReady(callback, doc) {
|
|
36
|
-
const _doc = doc || document
|
|
37
|
-
if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
|
|
38
|
-
callback();
|
|
39
|
-
} else {
|
|
40
|
-
_doc.addEventListener('DOMContentLoaded', callback);
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<style>
|
|
9
|
+
html,
|
|
10
|
+
body {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
overflow: hidden;
|
|
41
16
|
}
|
|
42
|
-
}
|
|
43
17
|
|
|
44
|
-
|
|
18
|
+
#webview-patch-iframe {
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
border: none;
|
|
22
|
+
}
|
|
45
23
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
24
|
+
.outer {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
50
30
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const dataset = {};
|
|
54
|
-
Object.keys(document.body.dataset).forEach(key => {
|
|
55
|
-
dataset[key] = document.body.dataset[key];
|
|
56
|
-
});
|
|
31
|
+
<script type="module" id="webview-patch">
|
|
32
|
+
const TAG = '[@tomjs:vscode:extension] ';
|
|
57
33
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
root: {
|
|
65
|
-
cssText: document.documentElement.style.cssText,
|
|
66
|
-
},
|
|
67
|
-
body: {
|
|
68
|
-
dataset: dataset,
|
|
69
|
-
className: document.body.className,
|
|
70
|
-
role: document.body.getAttribute('role'),
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
'*',
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function observeAttributeChanges(element, attributeName, callback) {
|
|
79
|
-
const observer = new MutationObserver(function (mutationsList) {
|
|
80
|
-
for (let mutation of mutationsList) {
|
|
81
|
-
if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
|
|
82
|
-
callback(mutation.target.getAttribute(attributeName));
|
|
83
|
-
}
|
|
34
|
+
function onDomReady(callback, doc) {
|
|
35
|
+
const _doc = doc || document;
|
|
36
|
+
if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
|
|
37
|
+
callback();
|
|
38
|
+
} else {
|
|
39
|
+
_doc.addEventListener('DOMContentLoaded', callback);
|
|
84
40
|
}
|
|
85
|
-
});
|
|
86
|
-
observer.observe(element, { attributes: true });
|
|
87
|
-
return observer;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// message handler
|
|
91
|
-
let iframeLoaded = false;
|
|
92
|
-
const cacheMessages = [];
|
|
93
|
-
|
|
94
|
-
function handleMessage(e) {
|
|
95
|
-
const iframe = document.getElementById('webview-patch-iframe');
|
|
96
|
-
if (!iframeLoaded || !iframe) {
|
|
97
|
-
return;
|
|
98
41
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
getApi().postMessage(data);
|
|
106
|
-
} else if (type === '[vscode:client]:getState') {
|
|
107
|
-
iframe.contentWindow.postMessage(
|
|
108
|
-
{
|
|
109
|
-
type: '[vscode:client]:getState',
|
|
110
|
-
data: getApi().getState(),
|
|
111
|
-
},
|
|
112
|
-
'*',
|
|
113
|
-
);
|
|
114
|
-
} else if (type === '[vscode:client]:setState') {
|
|
115
|
-
getApi().setState(data);
|
|
116
|
-
}
|
|
42
|
+
|
|
43
|
+
let vsCodeApi;
|
|
44
|
+
|
|
45
|
+
function getApi() {
|
|
46
|
+
if (vsCodeApi) return vsCodeApi;
|
|
47
|
+
return (vsCodeApi = acquireVsCodeApi());
|
|
117
48
|
}
|
|
118
|
-
}
|
|
119
49
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
50
|
+
function sendInitData(iframe) {
|
|
51
|
+
console.log(TAG + 'init data');
|
|
52
|
+
const dataset = {};
|
|
53
|
+
Object.keys(document.body.dataset).forEach(key => {
|
|
54
|
+
dataset[key] = document.body.dataset[key];
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
iframe.contentWindow.postMessage(
|
|
58
|
+
{
|
|
59
|
+
type: '[vscode:extension]:init',
|
|
60
|
+
data: {
|
|
61
|
+
state: getApi().getState(),
|
|
62
|
+
style: document.getElementById('_defaultStyles').innerHTML,
|
|
63
|
+
root: {
|
|
64
|
+
cssText: document.documentElement.style.cssText,
|
|
65
|
+
},
|
|
66
|
+
body: {
|
|
67
|
+
dataset: dataset,
|
|
68
|
+
className: document.body.className,
|
|
69
|
+
role: document.body.getAttribute('role'),
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
'*',
|
|
74
|
+
);
|
|
124
75
|
}
|
|
125
|
-
handleMessage(event);
|
|
126
|
-
});
|
|
127
76
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
77
|
+
function observeAttributeChanges(element, attributeName, callback) {
|
|
78
|
+
const observer = new MutationObserver(function (mutationsList) {
|
|
79
|
+
for (let mutation of mutationsList) {
|
|
80
|
+
if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
|
|
81
|
+
callback(mutation.target.getAttribute(attributeName));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
observer.observe(element, { attributes: true });
|
|
86
|
+
return observer;
|
|
132
87
|
}
|
|
133
88
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
89
|
+
// message handler
|
|
90
|
+
let iframeLoaded = false;
|
|
91
|
+
const cacheMessages = [];
|
|
92
|
+
|
|
93
|
+
function handleMessage(e) {
|
|
94
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
95
|
+
if (!iframeLoaded || !iframe) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
if (e.origin.startsWith('vscode-webview://')) {
|
|
99
|
+
iframe.contentWindow.postMessage(e.data, '*');
|
|
100
|
+
} else if ('{{serverUrl}}'.startsWith(e.origin)) {
|
|
101
|
+
const { type, data } = e.data;
|
|
102
|
+
console.log(TAG + ' received:', e.data);
|
|
103
|
+
if (type === '[vscode:client]:postMessage') {
|
|
104
|
+
getApi().postMessage(data);
|
|
105
|
+
} else if (type === '[vscode:client]:getState') {
|
|
106
|
+
iframe.contentWindow.postMessage(
|
|
107
|
+
{
|
|
108
|
+
type: '[vscode:client]:getState',
|
|
109
|
+
data: getApi().getState(),
|
|
110
|
+
},
|
|
111
|
+
'*',
|
|
112
|
+
);
|
|
113
|
+
} else if (type === '[vscode:client]:setState') {
|
|
114
|
+
getApi().setState(data);
|
|
115
|
+
}
|
|
140
116
|
}
|
|
141
117
|
}
|
|
142
|
-
isCacheWorking = false;
|
|
143
|
-
}, 50);
|
|
144
|
-
|
|
145
|
-
onDomReady(function () {
|
|
146
|
-
/** @type {HTMLIFrameElement} */
|
|
147
|
-
const iframe = document.getElementById('webview-patch-iframe');
|
|
148
|
-
observeAttributeChanges(document.body, 'class', function (className) {
|
|
149
|
-
sendInitData(iframe);
|
|
150
|
-
});
|
|
151
118
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
119
|
+
window.addEventListener('message', function (event) {
|
|
120
|
+
if (event.origin.startsWith('vscode-webview://')) {
|
|
121
|
+
cacheMessages.push(event);
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
handleMessage(event);
|
|
125
|
+
});
|
|
156
126
|
|
|
127
|
+
let isCacheWorking = false;
|
|
128
|
+
setInterval(() => {
|
|
129
|
+
if (isCacheWorking) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
157
132
|
|
|
158
|
-
|
|
159
|
-
iframeLoaded
|
|
133
|
+
isCacheWorking = true;
|
|
134
|
+
if (iframeLoaded) {
|
|
135
|
+
let event = cacheMessages.shift();
|
|
136
|
+
while (event) {
|
|
137
|
+
handleMessage(event);
|
|
138
|
+
event = cacheMessages.shift();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
isCacheWorking = false;
|
|
142
|
+
}, 50);
|
|
160
143
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
144
|
+
onDomReady(function () {
|
|
145
|
+
/** @type {HTMLIFrameElement} */
|
|
146
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
147
|
+
observeAttributeChanges(document.body, 'class', function (className) {
|
|
148
|
+
sendInitData(iframe);
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
onDomReady(function () {
|
|
152
|
+
iframeLoaded = true;
|
|
153
|
+
sendInitData(iframe);
|
|
154
|
+
}, iframe.contentDocument);
|
|
155
|
+
|
|
156
|
+
iframe.addEventListener('load', function (e) {
|
|
157
|
+
iframeLoaded = true;
|
|
158
|
+
|
|
159
|
+
let interval = setInterval(() => {
|
|
160
|
+
try {
|
|
161
|
+
if (document.getElementById('_defaultStyles')) {
|
|
162
|
+
sendInitData(iframe);
|
|
163
|
+
// addListeners(iframe);
|
|
164
|
+
clearInterval(interval);
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
} catch (e) {
|
|
166
168
|
clearInterval(interval);
|
|
167
|
-
|
|
169
|
+
console.error(e);
|
|
168
170
|
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
console.error(e);
|
|
172
|
-
}
|
|
173
|
-
}, 10);
|
|
171
|
+
}, 10);
|
|
172
|
+
});
|
|
174
173
|
});
|
|
175
|
-
|
|
176
|
-
</
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
174
|
+
</script>
|
|
175
|
+
</head>
|
|
176
|
+
|
|
177
|
+
<body>
|
|
178
|
+
<div class="outer">
|
|
179
|
+
<iframe
|
|
180
|
+
id="webview-patch-iframe"
|
|
181
|
+
frameborder="0"
|
|
182
|
+
sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
|
|
183
|
+
allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
|
|
184
|
+
src="{{serverUrl}}"
|
|
185
|
+
></iframe>
|
|
186
|
+
</div>
|
|
187
|
+
</body>
|
|
187
188
|
</html>
|
|
188
189
|
`;
|
|
189
190
|
|
package/dist/webview.mjs
CHANGED
|
@@ -1,189 +1,190 @@
|
|
|
1
1
|
// src/webview/template.html
|
|
2
2
|
var template_default = `<!doctype html>
|
|
3
3
|
<html lang="en">
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
#webview-patch-iframe {
|
|
20
|
-
width: 100%;
|
|
21
|
-
height: 100%;
|
|
22
|
-
border: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.outer {
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
overflow: hidden;
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
31
|
-
|
|
32
|
-
<script type="module" id="webview-patch">
|
|
33
|
-
const TAG = '[@tomjs:vscode:extension] ';
|
|
34
|
-
|
|
35
|
-
function onDomReady(callback, doc) {
|
|
36
|
-
const _doc = doc || document
|
|
37
|
-
if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
|
|
38
|
-
callback();
|
|
39
|
-
} else {
|
|
40
|
-
_doc.addEventListener('DOMContentLoaded', callback);
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<style>
|
|
9
|
+
html,
|
|
10
|
+
body {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
overflow: hidden;
|
|
41
16
|
}
|
|
42
|
-
}
|
|
43
17
|
|
|
44
|
-
|
|
18
|
+
#webview-patch-iframe {
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
border: none;
|
|
22
|
+
}
|
|
45
23
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
24
|
+
.outer {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
}
|
|
29
|
+
</style>
|
|
50
30
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const dataset = {};
|
|
54
|
-
Object.keys(document.body.dataset).forEach(key => {
|
|
55
|
-
dataset[key] = document.body.dataset[key];
|
|
56
|
-
});
|
|
31
|
+
<script type="module" id="webview-patch">
|
|
32
|
+
const TAG = '[@tomjs:vscode:extension] ';
|
|
57
33
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
root: {
|
|
65
|
-
cssText: document.documentElement.style.cssText,
|
|
66
|
-
},
|
|
67
|
-
body: {
|
|
68
|
-
dataset: dataset,
|
|
69
|
-
className: document.body.className,
|
|
70
|
-
role: document.body.getAttribute('role'),
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
'*',
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function observeAttributeChanges(element, attributeName, callback) {
|
|
79
|
-
const observer = new MutationObserver(function (mutationsList) {
|
|
80
|
-
for (let mutation of mutationsList) {
|
|
81
|
-
if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
|
|
82
|
-
callback(mutation.target.getAttribute(attributeName));
|
|
83
|
-
}
|
|
34
|
+
function onDomReady(callback, doc) {
|
|
35
|
+
const _doc = doc || document;
|
|
36
|
+
if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
|
|
37
|
+
callback();
|
|
38
|
+
} else {
|
|
39
|
+
_doc.addEventListener('DOMContentLoaded', callback);
|
|
84
40
|
}
|
|
85
|
-
});
|
|
86
|
-
observer.observe(element, { attributes: true });
|
|
87
|
-
return observer;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// message handler
|
|
91
|
-
let iframeLoaded = false;
|
|
92
|
-
const cacheMessages = [];
|
|
93
|
-
|
|
94
|
-
function handleMessage(e) {
|
|
95
|
-
const iframe = document.getElementById('webview-patch-iframe');
|
|
96
|
-
if (!iframeLoaded || !iframe) {
|
|
97
|
-
return;
|
|
98
41
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
getApi().postMessage(data);
|
|
106
|
-
} else if (type === '[vscode:client]:getState') {
|
|
107
|
-
iframe.contentWindow.postMessage(
|
|
108
|
-
{
|
|
109
|
-
type: '[vscode:client]:getState',
|
|
110
|
-
data: getApi().getState(),
|
|
111
|
-
},
|
|
112
|
-
'*',
|
|
113
|
-
);
|
|
114
|
-
} else if (type === '[vscode:client]:setState') {
|
|
115
|
-
getApi().setState(data);
|
|
116
|
-
}
|
|
42
|
+
|
|
43
|
+
let vsCodeApi;
|
|
44
|
+
|
|
45
|
+
function getApi() {
|
|
46
|
+
if (vsCodeApi) return vsCodeApi;
|
|
47
|
+
return (vsCodeApi = acquireVsCodeApi());
|
|
117
48
|
}
|
|
118
|
-
}
|
|
119
49
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
50
|
+
function sendInitData(iframe) {
|
|
51
|
+
console.log(TAG + 'init data');
|
|
52
|
+
const dataset = {};
|
|
53
|
+
Object.keys(document.body.dataset).forEach(key => {
|
|
54
|
+
dataset[key] = document.body.dataset[key];
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
iframe.contentWindow.postMessage(
|
|
58
|
+
{
|
|
59
|
+
type: '[vscode:extension]:init',
|
|
60
|
+
data: {
|
|
61
|
+
state: getApi().getState(),
|
|
62
|
+
style: document.getElementById('_defaultStyles').innerHTML,
|
|
63
|
+
root: {
|
|
64
|
+
cssText: document.documentElement.style.cssText,
|
|
65
|
+
},
|
|
66
|
+
body: {
|
|
67
|
+
dataset: dataset,
|
|
68
|
+
className: document.body.className,
|
|
69
|
+
role: document.body.getAttribute('role'),
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
'*',
|
|
74
|
+
);
|
|
124
75
|
}
|
|
125
|
-
handleMessage(event);
|
|
126
|
-
});
|
|
127
76
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
77
|
+
function observeAttributeChanges(element, attributeName, callback) {
|
|
78
|
+
const observer = new MutationObserver(function (mutationsList) {
|
|
79
|
+
for (let mutation of mutationsList) {
|
|
80
|
+
if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
|
|
81
|
+
callback(mutation.target.getAttribute(attributeName));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
observer.observe(element, { attributes: true });
|
|
86
|
+
return observer;
|
|
132
87
|
}
|
|
133
88
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
89
|
+
// message handler
|
|
90
|
+
let iframeLoaded = false;
|
|
91
|
+
const cacheMessages = [];
|
|
92
|
+
|
|
93
|
+
function handleMessage(e) {
|
|
94
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
95
|
+
if (!iframeLoaded || !iframe) {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
if (e.origin.startsWith('vscode-webview://')) {
|
|
99
|
+
iframe.contentWindow.postMessage(e.data, '*');
|
|
100
|
+
} else if ('{{serverUrl}}'.startsWith(e.origin)) {
|
|
101
|
+
const { type, data } = e.data;
|
|
102
|
+
console.log(TAG + ' received:', e.data);
|
|
103
|
+
if (type === '[vscode:client]:postMessage') {
|
|
104
|
+
getApi().postMessage(data);
|
|
105
|
+
} else if (type === '[vscode:client]:getState') {
|
|
106
|
+
iframe.contentWindow.postMessage(
|
|
107
|
+
{
|
|
108
|
+
type: '[vscode:client]:getState',
|
|
109
|
+
data: getApi().getState(),
|
|
110
|
+
},
|
|
111
|
+
'*',
|
|
112
|
+
);
|
|
113
|
+
} else if (type === '[vscode:client]:setState') {
|
|
114
|
+
getApi().setState(data);
|
|
115
|
+
}
|
|
140
116
|
}
|
|
141
117
|
}
|
|
142
|
-
isCacheWorking = false;
|
|
143
|
-
}, 50);
|
|
144
|
-
|
|
145
|
-
onDomReady(function () {
|
|
146
|
-
/** @type {HTMLIFrameElement} */
|
|
147
|
-
const iframe = document.getElementById('webview-patch-iframe');
|
|
148
|
-
observeAttributeChanges(document.body, 'class', function (className) {
|
|
149
|
-
sendInitData(iframe);
|
|
150
|
-
});
|
|
151
118
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
119
|
+
window.addEventListener('message', function (event) {
|
|
120
|
+
if (event.origin.startsWith('vscode-webview://')) {
|
|
121
|
+
cacheMessages.push(event);
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
handleMessage(event);
|
|
125
|
+
});
|
|
156
126
|
|
|
127
|
+
let isCacheWorking = false;
|
|
128
|
+
setInterval(() => {
|
|
129
|
+
if (isCacheWorking) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
157
132
|
|
|
158
|
-
|
|
159
|
-
iframeLoaded
|
|
133
|
+
isCacheWorking = true;
|
|
134
|
+
if (iframeLoaded) {
|
|
135
|
+
let event = cacheMessages.shift();
|
|
136
|
+
while (event) {
|
|
137
|
+
handleMessage(event);
|
|
138
|
+
event = cacheMessages.shift();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
isCacheWorking = false;
|
|
142
|
+
}, 50);
|
|
160
143
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
144
|
+
onDomReady(function () {
|
|
145
|
+
/** @type {HTMLIFrameElement} */
|
|
146
|
+
const iframe = document.getElementById('webview-patch-iframe');
|
|
147
|
+
observeAttributeChanges(document.body, 'class', function (className) {
|
|
148
|
+
sendInitData(iframe);
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
onDomReady(function () {
|
|
152
|
+
iframeLoaded = true;
|
|
153
|
+
sendInitData(iframe);
|
|
154
|
+
}, iframe.contentDocument);
|
|
155
|
+
|
|
156
|
+
iframe.addEventListener('load', function (e) {
|
|
157
|
+
iframeLoaded = true;
|
|
158
|
+
|
|
159
|
+
let interval = setInterval(() => {
|
|
160
|
+
try {
|
|
161
|
+
if (document.getElementById('_defaultStyles')) {
|
|
162
|
+
sendInitData(iframe);
|
|
163
|
+
// addListeners(iframe);
|
|
164
|
+
clearInterval(interval);
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
} catch (e) {
|
|
166
168
|
clearInterval(interval);
|
|
167
|
-
|
|
169
|
+
console.error(e);
|
|
168
170
|
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
console.error(e);
|
|
172
|
-
}
|
|
173
|
-
}, 10);
|
|
171
|
+
}, 10);
|
|
172
|
+
});
|
|
174
173
|
});
|
|
175
|
-
|
|
176
|
-
</
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
174
|
+
</script>
|
|
175
|
+
</head>
|
|
176
|
+
|
|
177
|
+
<body>
|
|
178
|
+
<div class="outer">
|
|
179
|
+
<iframe
|
|
180
|
+
id="webview-patch-iframe"
|
|
181
|
+
frameborder="0"
|
|
182
|
+
sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
|
|
183
|
+
allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
|
|
184
|
+
src="{{serverUrl}}"
|
|
185
|
+
></iframe>
|
|
186
|
+
</div>
|
|
187
|
+
</body>
|
|
187
188
|
</html>
|
|
188
189
|
`;
|
|
189
190
|
|