Skip to content

Commit 48e4942

Browse files
cangzhangcangzhang
committed
init.
0 parents  commit 48e4942

17 files changed

+6942
-0
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true

‎.eslintrc.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**@type {import('eslint').Linter.Config} */
2+
// eslint-disable-next-line no-undef
3+
module.exports = {
4+
root: true,
5+
parser: '@typescript-eslint/parser',
6+
plugins: [
7+
'@typescript-eslint',
8+
],
9+
extends: [
10+
'eslint:recommended',
11+
'plugin:@typescript-eslint/recommended',
12+
],
13+
rules: {
14+
'semi': [2, "always"],
15+
'@typescript-eslint/no-unused-vars': 0,
16+
'@typescript-eslint/no-explicit-any': 0,
17+
'@typescript-eslint/explicit-module-boundary-types': 0,
18+
'@typescript-eslint/no-non-null-assertion': 0,
19+
}
20+
};

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.build
2+
build
3+
web_modules/
4+
node_modules/
5+
.idea/
6+
build/
7+
out/

‎.vscode/extensions.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
3+
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
4+
5+
// List of extensions which should be recommended for users of this workspace.
6+
"recommendations": [
7+
"dbaeumer.vscode-eslint"
8+
]
9+
}

‎.vscode/launch.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// A launch configuration that compiles the extension and then opens it inside a new window
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
{
6+
"version": "0.2.0",
7+
"configurations": [
8+
{
9+
"name": "Run Extension",
10+
"type": "extensionHost",
11+
"request": "launch",
12+
"runtimeExecutable": "${execPath}",
13+
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
14+
"outFiles": ["${workspaceFolder}/out/**/*.js"]
15+
}
16+
]
17+
}

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.insertSpaces": false
3+
}

‎.vscode/tasks.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// See https://go.microsoft.com/fwlink/?LinkId=733558
2+
// for the documentation about the tasks.json format
3+
{
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"type": "npm",
8+
"script": "watch",
9+
"problemMatcher": "$tsc-watch",
10+
"isBackground": true,
11+
"presentation": {
12+
"reveal": "never"
13+
},
14+
"group": {
15+
"kind": "build",
16+
"isDefault": true
17+
}
18+
}
19+
]
20+
}

‎README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Cat Coding — A Webview API Sample
2+
3+
Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension-guides/webview). This includes:
4+
5+
- Creating and showing a basic webview.
6+
- Dynamically updating a webview's content.
7+
- Loading local content in a webview.
8+
- Running scripts in a webview.
9+
- Sending message from an extension to a webview.
10+
- Sending messages from a webview to an extension.
11+
- Using a basic content security policy.
12+
- Webview lifecycle and handling dispose.
13+
- Saving and restoring state when the panel goes into the background.
14+
- Serialization and persistence across VS Code reboots.
15+
16+
## VS Code API
17+
18+
### `vscode` module
19+
20+
- [`window.createWebviewPanel`](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)
21+
- [`window.registerWebviewPanelSerializer`](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewPanelSerializer)
22+
23+
## Running the example
24+
25+
- Open this example in VS Code 1.47+
26+
- `npm install`
27+
- `npm run watch` or `npm run compile`
28+
- `F5` to start debugging
29+
30+
Run the `Cat Coding: Start cat coding session` to create the webview.

‎package.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "cat-coding",
3+
"description": "Cat Coding - A Webview API Sample",
4+
"version": "0.0.1",
5+
"publisher": "cangzhang",
6+
"engines": {
7+
"vscode": "^1.47.0"
8+
},
9+
"categories": [
10+
"Other"
11+
],
12+
"activationEvents": [
13+
"onCommand:catCoding.show",
14+
"onWebviewPanel:catCoding"
15+
],
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/microsoft/vscode-extension-samples.git"
19+
},
20+
"main": "./out/extension.js",
21+
"contributes": {
22+
"commands": [
23+
{
24+
"command": "catCoding.show",
25+
"title": "Start cat coding session",
26+
"category": "Cat Coding"
27+
}
28+
]
29+
},
30+
"scripts": {
31+
"vscode:prepublish": "npm run compile",
32+
"compile": "npm-run-all -p compile:*",
33+
"compile:extension": "tsc -p ./src",
34+
"compile:webviews": "webpack --config webpack.config.js",
35+
"watch": "npm-run-all -p watch:*",
36+
"watch:extension": "tsc -watch -p ./src",
37+
"watch:webviews": "webpack --watch --mode development",
38+
"lint": "eslint . --ext .ts,.tsx"
39+
},
40+
"dependencies": {
41+
"react": "^16.14.0",
42+
"react-dom": "^16.14.0"
43+
},
44+
"devDependencies": {
45+
"@types/react": "^16.9.53",
46+
"@types/react-dom": "^16.9.8",
47+
"@types/vscode": "^1.47.0",
48+
"@typescript-eslint/eslint-plugin": "^3.0.2",
49+
"@typescript-eslint/parser": "^3.0.2",
50+
"css-loader": "^5.0.0",
51+
"eslint": "^7.1.0",
52+
"npm-run-all": "^4.1.5",
53+
"style-loader": "^2.0.0",
54+
"ts-loader": "^8.0.5",
55+
"typescript": "^4.0.3",
56+
"webpack": "4",
57+
"webpack-cli": "^4.0.0"
58+
}
59+
}

‎src/extension.ts

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import * as vscode from 'vscode';
2+
import * as path from 'path';
3+
4+
export function activate(context: vscode.ExtensionContext) {
5+
context.subscriptions.push(
6+
vscode.commands.registerCommand('catCoding.show', () => {
7+
CatCodingPanel.createOrShow(context);
8+
})
9+
);
10+
11+
if (vscode.window.registerWebviewPanelSerializer) {
12+
// Make sure we register a serializer in activation event
13+
vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
14+
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
15+
console.log(`Got state: ${state}`);
16+
CatCodingPanel.revive(webviewPanel, context.extensionUri, context.extensionPath);
17+
}
18+
});
19+
}
20+
}
21+
22+
/**
23+
* Manages cat coding webview panels
24+
*/
25+
class CatCodingPanel {
26+
/**
27+
* Track the currently panel. Only allow a single panel to exist at a time.
28+
*/
29+
public static currentPanel: CatCodingPanel | undefined;
30+
31+
public static readonly viewType = 'catCoding';
32+
33+
private readonly _panel: vscode.WebviewPanel;
34+
private readonly _extensionUri: vscode.Uri;
35+
private readonly _extensionPath: string;
36+
private _disposables: vscode.Disposable[] = [];
37+
38+
public static createOrShow(context: vscode.ExtensionContext) {
39+
const { extensionUri, extensionPath } = context;
40+
const column = vscode.window.activeTextEditor
41+
? vscode.window.activeTextEditor.viewColumn
42+
: undefined;
43+
44+
// If we already have a panel, show it.
45+
if (CatCodingPanel.currentPanel) {
46+
CatCodingPanel.currentPanel._panel.reveal(column);
47+
return;
48+
}
49+
50+
// Otherwise, create a new panel.
51+
const panel = vscode.window.createWebviewPanel(
52+
CatCodingPanel.viewType,
53+
'Cat Coding',
54+
column || vscode.ViewColumn.One,
55+
{
56+
// Enable javascript in the webview
57+
enableScripts: true,
58+
59+
localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'out')]
60+
}
61+
);
62+
63+
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
64+
}
65+
66+
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
67+
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri, extensionPath);
68+
}
69+
70+
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri, extensionPath: string) {
71+
this._panel = panel;
72+
this._extensionUri = extensionUri;
73+
this._extensionPath = extensionPath;
74+
75+
// Set the webview's initial html content
76+
this._update();
77+
78+
// Listen for when the panel is disposed
79+
// This happens when the user closes the panel or when the panel is closed programatically
80+
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
81+
82+
// Update the content based on view changes
83+
this._panel.onDidChangeViewState(
84+
e => {
85+
if (this._panel.visible) {
86+
this._update();
87+
}
88+
},
89+
null,
90+
this._disposables
91+
);
92+
93+
// Handle messages from the webview
94+
this._panel.webview.onDidReceiveMessage(
95+
message => {
96+
switch (message.command) {
97+
case 'alert':
98+
vscode.window.showErrorMessage(message.text);
99+
return;
100+
}
101+
},
102+
null,
103+
this._disposables
104+
);
105+
}
106+
107+
public doRefactor() {
108+
// Send a message to the webview webview.
109+
// You can send any JSON serializable data.
110+
this._panel.webview.postMessage({ command: 'refactor' });
111+
}
112+
113+
public dispose() {
114+
CatCodingPanel.currentPanel = undefined;
115+
116+
// Clean up our resources
117+
this._panel.dispose();
118+
119+
while (this._disposables.length) {
120+
const x = this._disposables.pop();
121+
if (x) {
122+
x.dispose();
123+
}
124+
}
125+
}
126+
127+
private _update() {
128+
const webview = this._panel.webview;
129+
130+
// Vary the webview's content based on where it is located in the editor.
131+
switch (this._panel.viewColumn) {
132+
case vscode.ViewColumn.Two:
133+
this._updateForCat(webview);
134+
return;
135+
136+
case vscode.ViewColumn.Three:
137+
this._updateForCat(webview);
138+
return;
139+
140+
case vscode.ViewColumn.One:
141+
default:
142+
this._updateForCat(webview);
143+
return;
144+
}
145+
}
146+
147+
private _updateForCat(webview: vscode.Webview) {
148+
this._panel.title = `Coding cat ${Date.now()}`;
149+
this._panel.webview.html = this._getHtmlForWebview(webview);
150+
}
151+
152+
private _getHtmlForWebview(webview: vscode.Webview) {
153+
const reactAppPathOnDisk = vscode.Uri.file(
154+
path.join(this._extensionPath, "out/webviews/main.js")
155+
);
156+
const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });
157+
console.log(reactAppUri);
158+
159+
return `<!DOCTYPE html>
160+
<html lang="en">
161+
<head>
162+
<meta charset="UTF-8">
163+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
164+
<title>Coding Cat</title>
165+
166+
<meta http-equiv="Content-Security-Policy"
167+
content="default-src 'none';
168+
img-src https:;
169+
script-src 'unsafe-eval' 'unsafe-inline' vscode-resource:;
170+
style-src vscode-resource: 'unsafe-inline';">
171+
172+
<script>
173+
window.acquireVsCodeApi = acquireVsCodeApi;
174+
</script>
175+
</head>
176+
<body>
177+
<div id="root"></div>
178+
179+
<script src="${reactAppUri}"></script>
180+
</body>
181+
</html>`;
182+
}
183+
}
184+
185+
function getNonce() {
186+
let text = '';
187+
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
188+
for (let i = 0; i < 32; i++) {
189+
text += possible.charAt(Math.floor(Math.random() * possible.length));
190+
}
191+
return text;
192+
}

0 commit comments

Comments
 (0)