[add] message button
This commit is contained in:
parent
dd624939a8
commit
2ac081bfbf
101
package-lock.json
generated
101
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ext1",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.10",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -46,6 +46,39 @@
|
||||
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
|
||||
"dev": true
|
||||
},
|
||||
"@microsoft/fast-element": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.7.0.tgz",
|
||||
"integrity": "sha512-2qpAWuiOSdQfH/XdO8ZtVhlvQVCjHlojWUPoGbvHJDizBccZib+4uGReG87RIBp2Fi0s7ngYPRUioS1Lr+Xe0A=="
|
||||
},
|
||||
"@microsoft/fast-foundation": {
|
||||
"version": "2.32.3",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.32.3.tgz",
|
||||
"integrity": "sha512-9yC6IYAjgtX6CU8HDmfHncfL+cqEoCV8BEv6i3VPYhjviGVxPpqCta4x5GrtaqeSfJ+Cdu6ZqQFGTJrvypfSLQ==",
|
||||
"requires": {
|
||||
"@microsoft/fast-element": "^1.7.0",
|
||||
"@microsoft/fast-web-utilities": "^5.1.0",
|
||||
"tabbable": "^5.2.0",
|
||||
"tslib": "^1.13.0"
|
||||
}
|
||||
},
|
||||
"@microsoft/fast-react-wrapper": {
|
||||
"version": "0.1.26",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.26.tgz",
|
||||
"integrity": "sha512-oFIdwmmy/CEosXCXh5fyPys+A3TOIzOaDgPsewuNYHxCq0oefWY0y5WuOyA9M+FcC9jQI+XfrPoHHUb4bWFxuQ==",
|
||||
"requires": {
|
||||
"@microsoft/fast-element": "^1.7.0",
|
||||
"@microsoft/fast-foundation": "^2.32.3"
|
||||
}
|
||||
},
|
||||
"@microsoft/fast-web-utilities": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.1.0.tgz",
|
||||
"integrity": "sha512-S2PCxI4XqtIxLM1N7i/NuIAgx+mJM01+mDzyB3vZlYibAkOT0bzp5YZCp+coXowokSin/nK5T2kqShMXEzI6Jg==",
|
||||
"requires": {
|
||||
"exenv-es6": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -231,6 +264,16 @@
|
||||
"unzipper": "^0.10.11"
|
||||
}
|
||||
},
|
||||
"@vscode/webview-ui-toolkit": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.9.0.tgz",
|
||||
"integrity": "sha512-F67LSz0yURKqPomSZA4xTu9d8VC+MtjlpCk2KygX8m2R3tvTSOjpntQ/6U1gjPVG0Pmw1m3YB2Yhhyo8E/c0zw==",
|
||||
"requires": {
|
||||
"@microsoft/fast-element": "^1.6.2",
|
||||
"@microsoft/fast-foundation": "^2.30.0",
|
||||
"@microsoft/fast-react-wrapper": "^0.1.18"
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
|
||||
@ -706,6 +749,11 @@
|
||||
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
|
||||
"dev": true
|
||||
},
|
||||
"exenv-es6": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.0.0.tgz",
|
||||
"integrity": "sha512-fcG/TX8Ruv9Ma6PBaiNsUrHRJzVzuFMP6LtPn/9iqR+nr9mcLeEOGzXQGLC5CVQSXGE98HtzW2mTZkrCA3XrDg=="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -1033,6 +1081,11 @@
|
||||
"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
|
||||
"dev": true
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
|
||||
@ -1095,6 +1148,14 @@
|
||||
"is-unicode-supported": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"lru-cache": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||
@ -1217,6 +1278,11 @@
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
@ -1309,6 +1375,16 @@
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"dev": true
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"punycode": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||
@ -1330,6 +1406,21 @@
|
||||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
|
||||
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
|
||||
@ -1491,6 +1582,11 @@
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"tabbable": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.2.1.tgz",
|
||||
"integrity": "sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ=="
|
||||
},
|
||||
"text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
@ -1515,8 +1611,7 @@
|
||||
"tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||
},
|
||||
"tsutils": {
|
||||
"version": "3.21.0",
|
||||
|
||||
31
package.json
31
package.json
@ -1,22 +1,22 @@
|
||||
{
|
||||
"name": "ext1",
|
||||
"displayName": "Ext1",
|
||||
"displayName": "apb1",
|
||||
"description": "a test extension",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"private": true,
|
||||
"publisher": "quodatum",
|
||||
"engines": {
|
||||
"vscode": "^1.63.0"
|
||||
},
|
||||
"icon": "resources/ext1.png",
|
||||
"homepage": "https://git.quodatum.duckdns.org/apb/ext1",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.quodatum.duckdns.org/apb/ext1.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://git.quodatum.duckdns.org/apb/ext1/issues"
|
||||
},
|
||||
"homepage": "https://git.quodatum.duckdns.org/apb/ext1",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.quodatum.duckdns.org/apb/ext1.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://git.quodatum.duckdns.org/apb/ext1/issues"
|
||||
},
|
||||
"categories": [
|
||||
"Other"
|
||||
],
|
||||
@ -24,7 +24,8 @@
|
||||
"onCommand:ext1.helloWorld",
|
||||
"onCommand:ext1.pick",
|
||||
"onCommand:ext1.debug",
|
||||
"onCommand:ext1.newDoc"
|
||||
"onCommand:ext1.newDoc",
|
||||
"onCommand:ext1.panel"
|
||||
],
|
||||
"main": "./out/extension.js",
|
||||
"contributes": {
|
||||
@ -44,6 +45,10 @@
|
||||
{
|
||||
"command": "ext1.newDoc",
|
||||
"title": "apb: newdocument"
|
||||
},
|
||||
{
|
||||
"command": "ext1.panel",
|
||||
"title": "apb: show panel"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -67,5 +72,9 @@
|
||||
"mocha": "^9.1.3",
|
||||
"typescript": "^4.5.4",
|
||||
"@vscode/test-electron": "^2.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vscode/webview-ui-toolkit": "^0.9.0",
|
||||
"react": "^16.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// The module 'vscode' contains the VS Code extensibility API
|
||||
// Import the module and reference it with the alias vscode in your code below
|
||||
import {
|
||||
commands, languages, window, workspace,WorkspaceFolder, ExtensionContext, Memento,
|
||||
TextEditor, TextEditorSelectionChangeEvent, TextEditorSelectionChangeKind, DiagnosticCollection, Uri
|
||||
commands, window, workspace,WorkspaceFolder, ExtensionContext, Uri
|
||||
} from "vscode";
|
||||
import { MainPanel } from "./panels/MainPanel";
|
||||
|
||||
// this method is called when your extension is activated
|
||||
// your extension is activated the very first time the command is executed
|
||||
@ -13,6 +13,7 @@ export function activate(context: ExtensionContext) {
|
||||
// This line of code will only be executed once when your extension is activated
|
||||
console.log('Congratulations, your extension "ext1" is now active!');
|
||||
|
||||
// simple pop-up
|
||||
function helloHandler() {
|
||||
let path: string;
|
||||
if (!workspace.workspaceFolders) {
|
||||
@ -24,9 +25,7 @@ export function activate(context: ExtensionContext) {
|
||||
path = root.uri.fsPath;
|
||||
} else {
|
||||
path="count?";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
window.showInformationMessage('Hello World!' + path);
|
||||
}
|
||||
@ -38,7 +37,7 @@ export function activate(context: ExtensionContext) {
|
||||
});
|
||||
}
|
||||
|
||||
function commandHandler(name: string = 'world') {
|
||||
function debugHandler(name: string = 'world') {
|
||||
console.log(`Hello ${name}!!!`);
|
||||
}
|
||||
|
||||
@ -50,10 +49,15 @@ export function activate(context: ExtensionContext) {
|
||||
await window.showTextDocument(doc, { preview: false });
|
||||
}
|
||||
}
|
||||
commands.registerCommand('ext1.helloWorld', helloHandler);
|
||||
commands.registerCommand('ext1.pick', pickHandler);
|
||||
|
||||
commands.registerCommand('ext1.newDoc', newDocHandler);
|
||||
|
||||
const a=commands.registerCommand('ext1.helloWorld', helloHandler);
|
||||
const b=commands.registerCommand('ext1.pick', pickHandler);
|
||||
const c=commands.registerCommand('ext1.debug', debugHandler);
|
||||
const d=commands.registerCommand('ext1.newDoc', newDocHandler);
|
||||
const e=commands.registerCommand("ext1.panel", () => {
|
||||
MainPanel.render(context.extensionUri);
|
||||
});
|
||||
context.subscriptions.push(a,b,c,d,e);
|
||||
|
||||
}
|
||||
|
||||
|
||||
15
src/media/main.js
Normal file
15
src/media/main.js
Normal file
@ -0,0 +1,15 @@
|
||||
const vscode = acquireVsCodeApi();
|
||||
|
||||
window.addEventListener("load", main);
|
||||
|
||||
function main() {
|
||||
const howdyButton = document.getElementById("howdy");
|
||||
howdyButton.addEventListener("click", handleHowdyClick);
|
||||
}
|
||||
|
||||
function handleHowdyClick() {
|
||||
vscode.postMessage({
|
||||
command: "hello",
|
||||
text: "Hey there partner! 🤠",
|
||||
});
|
||||
}
|
||||
85
src/panels/MainPanel.ts
Normal file
85
src/panels/MainPanel.ts
Normal file
@ -0,0 +1,85 @@
|
||||
// https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/docs/getting-started.md
|
||||
import * as vscode from "vscode";
|
||||
import { getUri } from "../utilities/getUri";
|
||||
|
||||
export class MainPanel {
|
||||
public static currentPanel: MainPanel | undefined;
|
||||
private readonly _panel: vscode.WebviewPanel;
|
||||
private _disposables: vscode.Disposable[] = [];
|
||||
|
||||
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
|
||||
this._panel = panel;
|
||||
this._panel.onDidDispose(this.dispose, null, this._disposables);
|
||||
this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
|
||||
this._setWebviewMessageListener(this._panel.webview);
|
||||
};
|
||||
|
||||
public static render(extensionUri: vscode.Uri) {
|
||||
if (MainPanel.currentPanel) {
|
||||
MainPanel.currentPanel._panel.reveal(vscode.ViewColumn.One);
|
||||
} else {
|
||||
const panel = vscode.window.createWebviewPanel("helloworld", "ext1 panel", vscode.ViewColumn.One, {
|
||||
enableScripts: true,
|
||||
});
|
||||
|
||||
MainPanel.currentPanel = new MainPanel(panel, extensionUri);
|
||||
}
|
||||
};
|
||||
|
||||
public dispose() {
|
||||
MainPanel.currentPanel = undefined;
|
||||
this._panel.dispose();
|
||||
while (this._disposables.length) {
|
||||
const disposable = this._disposables.pop();
|
||||
if (disposable) {
|
||||
disposable.dispose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private _getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri) {
|
||||
const toolkitUri = getUri(webview, extensionUri, [
|
||||
"node_modules",
|
||||
"@vscode",
|
||||
"webview-ui-toolkit",
|
||||
"dist",
|
||||
"toolkit.js",
|
||||
]);
|
||||
|
||||
const mainUri = getUri(webview, extensionUri, ["media","main.js"]);
|
||||
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
|
||||
return /*html*/ `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="${toolkitUri}"></script>
|
||||
<script type="module" src="${mainUri}"></script>
|
||||
<title>Ext1 main!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Main ..!</h1>
|
||||
<vscode-button id="howdy">Howdy!</vscode-button>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
};
|
||||
|
||||
private _setWebviewMessageListener(webview: vscode.Webview) {
|
||||
webview.onDidReceiveMessage(
|
||||
(message: any) => {
|
||||
const command = message.command;
|
||||
const text = message.text;
|
||||
|
||||
switch (command) {
|
||||
case "hello":
|
||||
vscode.window.showInformationMessage(text);
|
||||
return;
|
||||
}
|
||||
},
|
||||
undefined,
|
||||
this._disposables
|
||||
);
|
||||
}
|
||||
}
|
||||
5
src/utilities/getUri.ts
Normal file
5
src/utilities/getUri.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { Uri, Webview } from "vscode";
|
||||
|
||||
export function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
|
||||
return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user