Skip to content

Commit 709ec4a

Browse files
cangzhangcangzhang
committed
feat: pass params to webview.
1 parent 7b14191 commit 709ec4a

File tree

6 files changed

+267
-193
lines changed

6 files changed

+267
-193
lines changed

‎package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"description": "Cat Coding - A Webview API Sample",
44
"version": "0.0.1",
55
"publisher": "cangzhang",
6+
"license": "MIT",
67
"engines": {
78
"vscode": "^1.47.0"
89
},
@@ -58,9 +59,11 @@
5859
"lint": "eslint . --ext .ts,.tsx"
5960
},
6061
"dependencies": {
62+
"@risingstack/react-easy-state": "^6.3.0",
6163
"got": "^11.7.0",
62-
"react": "^16.14.0",
63-
"react-dom": "^16.14.0"
64+
"ky": "^0.24.0",
65+
"react": "^17.0.0",
66+
"react-dom": "^17.0.0"
6467
},
6568
"devDependencies": {
6669
"@types/react": "^16.9.53",

‎src/extension.ts

Lines changed: 158 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import * as path from 'path';
44
import { ListProvider } from './tree';
55

66
export function activate(context: vscode.ExtensionContext) {
7-
context.subscriptions.push(
8-
vscode.commands.registerCommand('catCoding.show', () => {
9-
CatCodingPanel.createOrShow(context);
10-
})
7+
context.subscriptions.push(
8+
vscode.commands.registerCommand('catCoding.show', () => {
9+
CatCodingPanel.createOrShow(context);
10+
})
1111
);
1212

1313
context.subscriptions.push(
1414
vscode.commands.registerCommand('catCoding.openConvertPage', k => {
1515
CatCodingPanel.createOrShow(context);
16-
// CatCodingPanel.currentPanel?.webview.postMessage()
16+
CatCodingPanel.currentPanel?.broadcast(`UPDATE_CURRENCY`, k);
1717
})
1818
);
1919

@@ -22,178 +22,178 @@ export function activate(context: vscode.ExtensionContext) {
2222
new ListProvider(``)
2323
);
2424

25-
if (vscode.window.registerWebviewPanelSerializer) {
26-
// Make sure we register a serializer in activation event
27-
vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
28-
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
29-
CatCodingPanel.revive(webviewPanel, context.extensionUri, context.extensionPath);
30-
}
31-
});
32-
}
25+
if (vscode.window.registerWebviewPanelSerializer) {
26+
// Make sure we register a serializer in activation event
27+
vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
28+
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
29+
CatCodingPanel.revive(webviewPanel, context.extensionUri, context.extensionPath);
30+
}
31+
});
32+
}
3333
}
3434

3535
/**
3636
* Manages cat coding webview panels
3737
*/
3838
class CatCodingPanel {
39-
/**
40-
* Track the currently panel. Only allow a single panel to exist at a time.
41-
*/
42-
public static currentPanel: CatCodingPanel | undefined;
43-
44-
public static readonly viewType = 'catCoding';
45-
46-
private readonly _panel: vscode.WebviewPanel;
47-
private readonly _extensionUri: vscode.Uri;
48-
private readonly _extensionPath: string;
49-
private _disposables: vscode.Disposable[] = [];
50-
51-
public static createOrShow(context: vscode.ExtensionContext) {
52-
const { extensionUri, extensionPath } = context;
53-
const column = vscode.window.activeTextEditor
54-
? vscode.window.activeTextEditor.viewColumn
55-
: undefined;
56-
57-
// If we already have a panel, show it.
58-
if (CatCodingPanel.currentPanel) {
59-
CatCodingPanel.currentPanel._panel.reveal(column);
60-
return;
61-
}
62-
63-
// Otherwise, create a new panel.
64-
const panel = vscode.window.createWebviewPanel(
65-
CatCodingPanel.viewType,
66-
'Cat Coding',
67-
column || vscode.ViewColumn.One,
68-
{
69-
// Enable javascript in the webview
70-
enableScripts: true,
71-
72-
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'out')]
73-
}
74-
);
75-
76-
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
77-
}
78-
79-
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
80-
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
81-
}
82-
83-
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
84-
this._panel = panel;
85-
this._extensionUri = extensionUri;
86-
this._extensionPath = extensionPath;
87-
88-
// Set the webview's initial html content
89-
this._update();
90-
91-
// Listen for when the panel is disposed
92-
// This happens when the user closes the panel or when the panel is closed programatically
93-
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
94-
95-
// Update the content based on view changes
96-
this._panel.onDidChangeViewState(
97-
e => {
98-
if (this._panel.visible) {
99-
this._update();
100-
}
101-
},
102-
null,
103-
this._disposables
104-
);
105-
106-
// Handle messages from the webview
107-
this._panel.webview.onDidReceiveMessage(
108-
message => {
109-
switch (message.command) {
110-
case 'alert':
111-
vscode.window.showErrorMessage(message.text);
112-
return;
113-
}
114-
},
115-
null,
116-
this._disposables
117-
);
118-
}
119-
120-
public doRefactor() {
121-
// Send a message to the webview webview.
122-
// You can send any JSON serializable data.
123-
this._panel.webview.postMessage({ command: 'refactor' });
124-
}
125-
126-
public dispose() {
127-
CatCodingPanel.currentPanel = undefined;
128-
129-
// Clean up our resources
130-
this._panel.dispose();
131-
132-
while (this._disposables.length) {
133-
const x = this._disposables.pop();
134-
if (x) {
135-
x.dispose();
136-
}
137-
}
138-
}
139-
140-
private _update() {
141-
const webview = this._panel.webview;
142-
143-
// Vary the webview's content based on where it is located in the editor.
144-
switch (this._panel.viewColumn) {
145-
case vscode.ViewColumn.Two:
146-
this._updateForCat(webview);
147-
return;
148-
149-
case vscode.ViewColumn.Three:
150-
this._updateForCat(webview);
151-
return;
152-
153-
case vscode.ViewColumn.One:
154-
default:
155-
this._updateForCat(webview);
156-
return;
157-
}
158-
}
159-
160-
private _updateForCat(webview: vscode.Webview) {
161-
this._panel.title = `Coding cat ${Date.now()}`;
162-
this._panel.webview.html = this._getHtmlForWebview(webview);
163-
}
164-
165-
private _getHtmlForWebview(webview: vscode.Webview) {
166-
const reactAppPathOnDisk = vscode.Uri.file(
167-
path.join(this._extensionPath, "out/webviews/main.js")
168-
);
169-
const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });
170-
console.log(reactAppUri);
171-
172-
return `<!DOCTYPE html>
39+
/**
40+
* Track the currently panel. Only allow a single panel to exist at a time.
41+
*/
42+
public static currentPanel: CatCodingPanel | undefined;
43+
44+
public static readonly viewType = 'catCoding';
45+
46+
private readonly _panel: vscode.WebviewPanel;
47+
private readonly _extensionUri: vscode.Uri;
48+
private readonly _extensionPath: string;
49+
private _disposables: vscode.Disposable[] = [];
50+
51+
public static createOrShow(context: vscode.ExtensionContext) {
52+
const { extensionUri, extensionPath } = context;
53+
const column = vscode.window.activeTextEditor
54+
? vscode.window.activeTextEditor.viewColumn
55+
: undefined;
56+
57+
// If we already have a panel, show it.
58+
if (CatCodingPanel.currentPanel) {
59+
CatCodingPanel.currentPanel._panel.reveal(column);
60+
return;
61+
}
62+
63+
// Otherwise, create a new panel.
64+
const panel = vscode.window.createWebviewPanel(
65+
CatCodingPanel.viewType,
66+
'Cat Coding',
67+
column || vscode.ViewColumn.One,
68+
{
69+
// Enable javascript in the webview
70+
enableScripts: true,
71+
72+
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'out')]
73+
}
74+
);
75+
76+
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
77+
}
78+
79+
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
80+
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
81+
}
82+
83+
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
84+
this._panel = panel;
85+
this._extensionUri = extensionUri;
86+
this._extensionPath = extensionPath;
87+
88+
// Set the webview's initial html content
89+
this._update();
90+
91+
// Listen for when the panel is disposed
92+
// This happens when the user closes the panel or when the panel is closed programatically
93+
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
94+
95+
// Update the content based on view changes
96+
this._panel.onDidChangeViewState(
97+
e => {
98+
if (this._panel.visible) {
99+
this._update();
100+
}
101+
},
102+
null,
103+
this._disposables
104+
);
105+
106+
// Handle messages from the webview
107+
this._panel.webview.onDidReceiveMessage(
108+
message => {
109+
switch (message.command) {
110+
case 'alert':
111+
vscode.window.showErrorMessage(message.text);
112+
return;
113+
}
114+
},
115+
null,
116+
this._disposables
117+
);
118+
}
119+
120+
public doRefactor() {
121+
// Send a message to the webview webview.
122+
// You can send any JSON serializable data.
123+
this._panel.webview.postMessage({ command: 'refactor' });
124+
}
125+
126+
public broadcast(type: string, value: any) {
127+
this._panel.webview.postMessage({
128+
type,
129+
value,
130+
});
131+
}
132+
133+
public dispose() {
134+
CatCodingPanel.currentPanel = undefined;
135+
136+
// Clean up our resources
137+
this._panel.dispose();
138+
139+
while (this._disposables.length) {
140+
const x = this._disposables.pop();
141+
if (x) {
142+
x.dispose();
143+
}
144+
}
145+
}
146+
147+
private _update() {
148+
const webview = this._panel.webview;
149+
150+
// Vary the webview's content based on where it is located in the editor.
151+
switch (this._panel.viewColumn) {
152+
case vscode.ViewColumn.Two:
153+
this._updateForCat(webview);
154+
return;
155+
156+
case vscode.ViewColumn.Three:
157+
this._updateForCat(webview);
158+
return;
159+
160+
case vscode.ViewColumn.One:
161+
default:
162+
this._updateForCat(webview);
163+
return;
164+
}
165+
}
166+
167+
private _updateForCat(webview: vscode.Webview) {
168+
this._panel.title = `Coding cat ${Date.now()}`;
169+
this._panel.webview.html = this._getHtmlForWebview(webview);
170+
}
171+
172+
private _getHtmlForWebview(webview: vscode.Webview) {
173+
const appPathOnDisk = vscode.Uri.file(
174+
path.join(this._extensionPath, "out/webviews/main.js")
175+
);
176+
const appUri = appPathOnDisk.with({ scheme: "vscode-resource" });
177+
178+
return `<!DOCTYPE html>
173179
<html lang="en">
174180
<head>
175181
<meta charset="UTF-8">
176182
<meta name="viewport" content="width=device-width, initial-scale=1.0">
177183
<title>Coding Cat</title>
178184
179185
<meta http-equiv="Content-Security-Policy"
180-
content="default-src 'none';
186+
content="default-src 'unsafe-inline';
181187
img-src https:;
182-
script-src 'unsafe-eval' 'unsafe-inline' vscode-resource:;
188+
script-src 'unsafe-eval' 'unsafe-inline' vscode-resource:;
189+
connect-src 'self' https:;
183190
style-src vscode-resource: 'unsafe-inline';">
184-
185-
<script>
186-
window.addEventListener('message', event => {
187-
const message = event.data; // The JSON data our extension sent
188-
console.log(message);
189-
});
190-
</script>
191191
</head>
192192
<body>
193193
<div id="root"></div>
194194
195-
<script src="${reactAppUri}"></script>
195+
<script src="${appUri}"></script>
196196
</body>
197197
</html>`;
198-
}
198+
}
199199
}

0 commit comments

Comments
 (0)