Skip to content

Commit 7fcd05d

Browse files
tczaganytczagany
committed
first commit
0 parents  commit 7fcd05d

File tree

9 files changed

+279
-0
lines changed

9 files changed

+279
-0
lines changed

‎.vscode/launch.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Run Extension",
6+
"type": "extensionHost",
7+
"request": "launch",
8+
"args": [
9+
"--extensionDevelopmentPath=${workspaceFolder}"
10+
],
11+
"outFiles": [
12+
"${workspaceFolder}/out/**/*.js"
13+
],
14+
"preLaunchTask": "${defaultBuildTask}"
15+
},
16+
{
17+
"name": "Extension Tests",
18+
"type": "extensionHost",
19+
"request": "launch",
20+
"args": [
21+
"--extensionDevelopmentPath=${workspaceFolder}",
22+
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
23+
],
24+
"outFiles": [
25+
"${workspaceFolder}/out/test/**/*.js"
26+
],
27+
"preLaunchTask": "${defaultBuildTask}"
28+
}
29+
]
30+
}

‎.vscode/settings.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"files.exclude": {
3+
"out": false
4+
},
5+
"search.exclude": {
6+
"out": true
7+
},
8+
"typescript.tsc.autoDetect": "off"
9+
}

‎.vscode/tasks.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"type": "npm",
6+
"script": "watch",
7+
"problemMatcher": "$tsc-watch",
8+
"isBackground": true,
9+
"presentation": {
10+
"reveal": "never"
11+
},
12+
"group": {
13+
"kind": "build",
14+
"isDefault": true
15+
}
16+
}
17+
]
18+
}

‎media/main.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Get access to the VS Code API from within the webview context
2+
const vscode = acquireVsCodeApi();
3+
4+
// Just like a regular webpage we need to wait for the webview
5+
// DOM to load before we can reference any of the HTML elements
6+
// or toolkit components
7+
window.addEventListener("load", main);
8+
9+
// Main function that gets executed once the webview DOM loads
10+
function main() {
11+
const howdyButton = document.getElementById("howdy");
12+
howdyButton.addEventListener("click", handleHowdyClick);
13+
}
14+
15+
// Callback function that is executed when the howdy button is clicked
16+
function handleHowdyClick() {
17+
// Some quick background:
18+
//
19+
// Webviews are sandboxed environments where abritrary HTML, CSS, and
20+
// JavaScript can be executed and rendered (i.e. it's basically an iframe).
21+
//
22+
// Because of this sandboxed nature, VS Code uses a mechanism of message
23+
// passing to get data from the extension context (i.e. src/extension.ts)
24+
// to the webview context (this file), all while maintaining security.
25+
//
26+
// vscode.postMessage() is the API that can be used to pass data from
27+
// the webview context back to the extension context––you can think of
28+
// this like sending data from the frontend to the backend of the extension.
29+
//
30+
// Note: If you instead want to send data from the extension context to the
31+
// webview context (i.e. backend to frontend), you can find documentation for
32+
// that here:
33+
//
34+
// https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-an-extension-to-a-webview
35+
//
36+
// The main thing to note is that postMessage() takes an object as a parameter.
37+
// This means arbitrary data (key-value pairs) can be added to the object
38+
// and then accessed when the message is recieved in the extension context.
39+
//
40+
// For example, the below object could also look like this:
41+
//
42+
// {
43+
// command: "hello",
44+
// text: "Hey there partner! 🤠",
45+
// random: ["arbitrary", "data"],
46+
// }
47+
//
48+
vscode.postMessage({
49+
command: "hello",
50+
text: "Hey there partner! 🤠",
51+
});
52+
}

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "cc-vizzu",
3+
"displayName": "Code Counter Vizzu",
4+
"description": "Source code statistics with animated vizualization.",
5+
"version": "0.0.1",
6+
"engines": {
7+
"vscode": "^1.46.0"
8+
},
9+
"categories": [
10+
"Other"
11+
],
12+
"activationEvents": [
13+
"onCommand:ccVizzu.show"
14+
],
15+
"main": "./out/extension.js",
16+
"contributes": {
17+
"commands": [
18+
{
19+
"command": "ccVizzu.show",
20+
"title": "ccVizzu: Show"
21+
}
22+
]
23+
},
24+
"scripts": {
25+
"vscode:prepublish": "npm run compile",
26+
"compile": "tsc -p ./",
27+
"watch": "tsc -watch -p ./",
28+
"pretest": "npm run compile && npm run lint",
29+
"lint": "eslint src --ext ts"
30+
},
31+
"devDependencies": {
32+
"@types/glob": "^7.1.3",
33+
"@types/node": "^12.11.7",
34+
"@types/vscode": "^1.46.0",
35+
"@typescript-eslint/eslint-plugin": "^4.14.1",
36+
"@typescript-eslint/parser": "^4.14.1",
37+
"eslint": "^7.19.0",
38+
"glob": "^7.1.6",
39+
"prettier": "^2.2.1",
40+
"typescript": "^4.1.3",
41+
"vscode-test": "^1.5.0"
42+
},
43+
"dependencies": {
44+
"@vscode/webview-ui-toolkit": "^0.9.1"
45+
}
46+
}

‎src/extension.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { commands, ExtensionContext } from "vscode";
2+
import { CCVizzuPanel } from "./panels/CCVizzuPanel";
3+
4+
export function activate(context: ExtensionContext) {
5+
const showCommand = commands.registerCommand("ccVizzu.show", () => {
6+
CCVizzuPanel.render(context.extensionUri);
7+
});
8+
9+
context.subscriptions.push(showCommand);
10+
}

‎src/panels/CCVizzuPanel.ts

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Disposable, Webview, WebviewPanel, window, Uri, ViewColumn } from "vscode";
2+
import { getUri } from "../utilities/getUri";
3+
4+
export class CCVizzuPanel {
5+
public static currentPanel: CCVizzuPanel | undefined;
6+
private readonly _panel: WebviewPanel;
7+
private _disposables: Disposable[] = [];
8+
9+
private constructor(panel: WebviewPanel, extensionUri: Uri) {
10+
this._panel = panel;
11+
this._panel.onDidDispose(this.dispose, null, this._disposables);
12+
this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
13+
this._setWebviewMessageListener(this._panel.webview);
14+
}
15+
16+
public static render(extensionUri: Uri) {
17+
if (CCVizzuPanel.currentPanel) {
18+
CCVizzuPanel.currentPanel._panel.reveal(ViewColumn.One);
19+
} else {
20+
const panel = window.createWebviewPanel(
21+
"showHelloWorld",
22+
"Hello World",
23+
ViewColumn.One,
24+
{
25+
enableScripts: true,
26+
}
27+
);
28+
CCVizzuPanel.currentPanel = new CCVizzuPanel(panel, extensionUri);
29+
}
30+
}
31+
32+
public dispose() {
33+
CCVizzuPanel.currentPanel = undefined;
34+
this._panel.dispose();
35+
while (this._disposables.length) {
36+
const disposable = this._disposables.pop();
37+
if (disposable) {
38+
disposable.dispose();
39+
}
40+
}
41+
}
42+
43+
private _getWebviewContent(webview: Webview, extensionUri: Uri) {
44+
const toolkitUri = getUri(webview, extensionUri, [
45+
"node_modules",
46+
"@vscode",
47+
"webview-ui-toolkit",
48+
"dist",
49+
"toolkit.js",
50+
]);
51+
const mainUri = getUri(webview, extensionUri, ["media", "main.js"]);
52+
53+
return /*html*/ `
54+
<!DOCTYPE html>
55+
<html lang="en">
56+
<head>
57+
<meta charset="UTF-8">
58+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
59+
<script type="module" src="${toolkitUri}"></script>
60+
<script type="module" src="${mainUri}"></script>
61+
<title>Hello World</title>
62+
</head>
63+
<body>
64+
<h1>Hello World!</h1>
65+
<vscode-button id="howdy">Howdy!</vscode-button>
66+
</body>
67+
</html>
68+
`;
69+
}
70+
71+
private _setWebviewMessageListener(webview: Webview) {
72+
webview.onDidReceiveMessage(
73+
(message: any) => {
74+
const command = message.command;
75+
const text = message.text;
76+
77+
switch (command) {
78+
case "hello":
79+
window.showInformationMessage(text);
80+
return;
81+
}
82+
},
83+
undefined,
84+
this._disposables
85+
);
86+
}
87+
}

‎src/utilities/getUri.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Uri, Webview } from "vscode";
2+
3+
export function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
4+
return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
5+
}

‎tsconfig.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "es6",
5+
"outDir": "out",
6+
"lib": [
7+
"es6",
8+
"dom"
9+
],
10+
"sourceMap": true,
11+
"rootDir": "src",
12+
"strict": true /* enable all strict type-checking options */
13+
/* Additional Checks */
14+
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
15+
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
16+
// "noUnusedParameters": true, /* Report errors on unused parameters. */
17+
},
18+
"exclude": [
19+
"node_modules",
20+
".vscode-test"
21+
]
22+
}

0 commit comments

Comments
 (0)