@jiangzhongxi0322/messagechannel 1.0.0 → 1.0.2

package/examples/command-webview-sample/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "command-webview-sample",
+	"description": "Cat Coding - A Webview API Sample",
+	"version": "0.0.5",
+	"publisher": "walker",
+	"private": true,
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Microsoft/vscode-extension-samples"
+	},
+	"engines": {
+		"vscode": "^1.74.0"
+	},
+	"categories": [
+		"Other"
+	],
+	"activationEvents": [
+		"onWebviewPanel:catCoding"
+	],
+	"main": "./out/extension.js",
+	"contributes": {
+		"commands": [
+			{
+				"command": "catCoding.start",
+				"title": "Start cat coding session",
+				"category": "Cat Coding"
+			},
+			{
+				"command": "catCoding.doRefactor",
+				"title": "Do some refactoring",
+				"category": "Cat Coding"
+			}
+		]
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run compile",
+		"compile": "tsc -p ./",
+		"lint": "eslint \"src/**/*.ts\"",
+		"watch": "tsc -w -p ./"
+	},
+	"devDependencies": {
+		"@types/node": "^18",
+		"@types/vscode": "^1.73.0",
+		"@types/vscode-webview": "^1.57.0",
+		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/parser": "^6.7.0",
+		"eslint": "^8.26.0",
+		"typescript": "^5.4.2"
+	}
+}

package/examples/command-webview-sample/src/extension.ts

@@ -0,0 +1,227 @@
+import * as vscode from 'vscode';
+import MessageChannel from './messageChannel';
+
+const mc = MessageChannel();
+const cats = {
+	'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
+	'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
+	'Testing Cat': 'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif'
+};
+
+export function activate(context: vscode.ExtensionContext) {
+	mc.initiator(CatCodingPanel.viewType);
+	context.subscriptions.push(
+		vscode.commands.registerCommand('catCoding.start', () => {
+			CatCodingPanel.createOrShow(context.extensionUri);
+			mc.setCarrier((CatCodingPanel.currentPanel as any)._panel.webview);
+		})
+	);
+
+	if (vscode.window.registerWebviewPanelSerializer) {
+		// Make sure we register a serializer in activation event
+		vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
+			async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
+				console.log(`Got state: ${state}`);
+				// Reset the webview options so we use latest uri for `localResourceRoots`.
+				webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
+				CatCodingPanel.revive(webviewPanel, context.extensionUri);
+			}
+		});
+	}
+}
+
+function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
+	return {
+		// Enable javascript in the webview
+		enableScripts: true,
+
+		// And restrict the webview to only loading content from our extension's `media` directory.
+		localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'media')]
+	};
+}
+
+/**
+ * Manages cat coding webview panels
+ */
+class CatCodingPanel {
+	/**
+	 * Track the currently panel. Only allow a single panel to exist at a time.
+	 */
+	public static currentPanel: CatCodingPanel | undefined;
+
+	public static readonly viewType = 'catCoding';
+
+	private readonly _panel: vscode.WebviewPanel;
+	private readonly _extensionUri: vscode.Uri;
+	private _disposables: vscode.Disposable[] = [];
+
+	public static createOrShow(extensionUri: vscode.Uri) {
+		const column = vscode.window.activeTextEditor
+			? vscode.window.activeTextEditor.viewColumn
+			: undefined;
+
+		// If we already have a panel, show it.
+		if (CatCodingPanel.currentPanel) {
+			CatCodingPanel.currentPanel._panel.reveal(column);
+			return;
+		}
+
+		// Otherwise, create a new panel.
+		const panel = vscode.window.createWebviewPanel(
+			CatCodingPanel.viewType,
+			'Cat Coding',
+			column || vscode.ViewColumn.One,
+			getWebviewOptions(extensionUri),
+		);
+
+		CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri);
+	}
+
+	public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
+		CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri);
+	}
+
+	private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
+		this._panel = panel;
+		this._extensionUri = extensionUri;
+
+		// Set the webview's initial html content
+		this._update();
+
+		// Listen for when the panel is disposed
+		// This happens when the user closes the panel or when the panel is closed programmatically
+		this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+
+		// Update the content based on view changes
+		this._panel.onDidChangeViewState(
+			e => {
+				if (this._panel.visible) {
+					this._update();
+				}
+			},
+			null,
+			this._disposables
+		);
+
+		// Handle messages from the webview
+		this._panel.webview.onDidReceiveMessage(
+			message => {
+				switch (message.command) {
+					case 'alert':
+						vscode.window.showErrorMessage(message.text);
+						return;
+				}
+			},
+			null,
+			this._disposables
+		);
+	}
+
+	public doRefactor() {
+		// Send a message to the webview webview.
+		// You can send any JSON serializable data.
+		this._panel.webview.postMessage({ command: 'refactor' });
+	}
+
+	public dispose() {
+		CatCodingPanel.currentPanel = undefined;
+
+		// Clean up our resources
+		this._panel.dispose();
+
+		while (this._disposables.length) {
+			const x = this._disposables.pop();
+			if (x) {
+				x.dispose();
+			}
+		}
+	}
+
+	private _update() {
+		const webview = this._panel.webview;
+
+		// Vary the webview's content based on where it is located in the editor.
+		switch (this._panel.viewColumn) {
+			case vscode.ViewColumn.Two:
+				this._updateForCat(webview, 'Compiling Cat');
+				return;
+
+			case vscode.ViewColumn.Three:
+				this._updateForCat(webview, 'Testing Cat');
+				return;
+
+			case vscode.ViewColumn.One:
+			default:
+				this._updateForCat(webview, 'Coding Cat');
+				return;
+		}
+	}
+
+	private _updateForCat(webview: vscode.Webview, catName: keyof typeof cats) {
+		this._panel.title = catName;
+		this._panel.webview.html = this._getHtmlForWebview(webview, cats[catName]);
+	}
+
+	private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) {
+		// Local path to main script run in the webview
+		const scriptPathOnDisk = vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js');
+
+		// And the uri we use to load this script in the webview
+		const scriptUri = webview.asWebviewUri(scriptPathOnDisk);
+
+		// Local path to css styles
+		const styleResetPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css');
+		const stylesPathMainPath = vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css');
+
+		// Uri to load styles into webview
+		const stylesResetUri = webview.asWebviewUri(styleResetPath);
+		const stylesMainUri = webview.asWebviewUri(stylesPathMainPath);
+
+		// Use a nonce to only allow specific scripts to be run
+		const nonce = getNonce();
+
+		return `<!DOCTYPE html>
+			<html lang="en">
+			<head>
+				<meta charset="UTF-8">
+
+				<!--
+					Use a content security policy to only allow loading images from https or from our extension directory,
+					and only allow scripts that have a specific nonce.
+				-->
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
+
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+				<link href="${stylesResetUri}" rel="stylesheet">
+				<link href="${stylesMainUri}" rel="stylesheet">
+
+				<title>Cat Coding</title>
+			</head>
+			<body>
+				此处输入需要反馈的数据：<input style="border: 1px solid #ccc; padding: 4px; border-radius: 4px;" placeholder="请输入反馈内容"/>
+				<button>反馈</button>
+
+				<script nonce="${nonce}">
+					const result = document.querySelector('input').value;
+					document.querySelector('button').addEventListener('click', (args) => {
+						const result = document.querySelector('input').value;
+						feedbackResult && feedbackResult(result);
+					});
+					window.mc = (${MessageChannel.toString()})();
+					window.mc.setCarrier();
+					window.mc.initiator();
+				</script>
+			</body>
+			</html>`;
+	}
+}
+
+function getNonce() {
+	let text = '';
+	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	for (let i = 0; i < 32; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+	return text;
+}

package/{src/messageChennel.ts → examples/command-webview-sample/src/messageChannel.ts}

@@ -4,22 +4,24 @@ interface Event {
   typename?: string;
   key?: string;
   channelId: string;
-  data: FeedbackData;
-}
-interface FeedbackData {
-  code: 0 | 1 | 2;
-  msg: string;
   data: any;
 }
+
 // 每个vscode的node端和webview都分别拥有一个MessageChannel返回的对象，因为他们是不同载体
 // 同一webview如果打开了多个文档，各个文档也应该有不同的载体
 declare const window: any;
 
 const MessageChannel = () => {
-  let cachedCarrier: vscode.Webview;
+  let cachedCarrier: vscode.Webview | null;
   let dispose: vscode.Disposable;
 
-  const setCarrier = (carrier: any) => {
+  /**
+   * @carrier 在vscode的webviewProvider以及webview的web内都调用这个接口，设置发送和接受事件的载体
+   * webviewProvider示例：CI.setCarrier(webviewView.webview); // 在最早获取到webview的地方
+   * webview的react项目示例：CI.setCarrier(); // 在根组件
+   * carrier如果为空，则清空之前的载体
+  */
+  const setCarrier = (carrier?: null | vscode.Webview) => {
     if (carrier === undefined) {
       cachedCarrier = (window as any).acquireVsCodeApi();
       (window as any).addEventListener('message', (event: any) => {
@@ -31,7 +33,7 @@ const MessageChannel = () => {
       dispose.dispose();
     }
     cachedCarrier = carrier;
-    if (carrier === null) {
+    if (cachedCarrier === null) {
       return;
     }
     dispose = cachedCarrier.onDidReceiveMessage((event) =>
@@ -44,16 +46,15 @@ const MessageChannel = () => {
   } = {};
 
   const messageHandler = async (event: Event) => {
-    const { data: feedbackData, typename } = event;
-    const data = feedbackData.data;
+    const { data, typename } = event;
     const isTalkInExtension = typename && subscribers[typename];
     if (isTalkInExtension) {
       subscribers[typename as string].forEach((resolver) => {
-        resolver(feedbackData);
+        resolver(data);
       });
       return;
     }
-    const isTalkToExtension = typename && data?.viewType;
+    const isTalkToExtension = typename && (data as any)?.viewType;
     if(isTalkToExtension) {
       const activeTargetExtension = async (extensionId: string) => {
         const targetExtension = vscode.extensions.getExtension(extensionId);
@@ -86,15 +87,20 @@ const MessageChannel = () => {
     }
 
   };
+  /**
+   * typename: 消息类型，消息的发布和订阅都依赖这个typename
+   * subscriber：收到消息后把消息传递给subscriber
+   * once：一次性订阅，收到消息后就把订阅者移除
+  */
   const subscribe = (
     typename: string,
-    subscriber: (data: FeedbackData) => any,
+    subscriber: (data: any) => any,
     once = false
   ) => {
     if (!subscriber || !(subscriber instanceof Function)) {
       return;
     }
-    const resolver = (data: FeedbackData) => {
+    const resolver = (data: any) => {
       const result = subscriber(data);
       if (result !== undefined) {
         if (result instanceof Promise) {
@@ -128,18 +134,25 @@ const MessageChannel = () => {
     };
   };
 
-  const publish = (typename: string, msg?: any) => {
+  /**
+   * typename: 消息类型，消息的发布和订阅都依赖这个typename
+   * msg：消息发布时带的参数
+  */
+  const publish = (typename: string, data?: any) => {
     try {
       cachedCarrier?.postMessage({
         typename: typename,
-        data: msg,
+        data: data,
       });
     } catch (error) {0;}
   };
 
 
- // vscode.WebviewViewProvider的静态方法中调用
-  const initiator = (viewType: string) => {
+ /**
+  * 如果要唤醒其余插件的webview，则双方插件的provider、web都要调用这个函数初始化
+  * viewType：provider传递WebviewProvieder的viewType，web则不用传递参数
+ */
+  const initiator = (viewType?: string) => {
     // for node
     if(viewType) {
       vscode.commands.registerCommand(`to_${viewType}`, async (args) => {
@@ -178,7 +191,7 @@ const MessageChannel = () => {
       });
       return;
     }
-    publish('webviewRenderDone', null);
+    publish('webviewRenderDone');
     subscribe('clickAnyElement', (data) => {
       const clickAnyElement = async (data: any) => {
         const selectorList = data?.selector;
@@ -222,12 +235,12 @@ const MessageChannel = () => {
   const pubWithSub = async (
     typename: string,
     msg: any,
-    subscriber?: (data: FeedbackData) => any
+    subscriber?: (data: any) => any
   ) => {
     publish(typename, msg);
 
     return new Promise((resolve) => {
-      const removeSubscribe = subscribe(typename, (data: FeedbackData) => {
+      const removeSubscribe = subscribe(typename, (data: any) => {
         if (subscriber) {
           subscriber(data);
         } else {

package/examples/command-webview-sample/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es2020",
+		"lib": ["es2020", "dom"],
+		"outDir": "out",
+		"sourceMap": true,
+		"strict": true,
+		"rootDir": "src"
+	},
+	"exclude": ["node_modules", ".vscode-test"]
+}

package/examples/publish-webview-sample/.eslintrc.js

@@ -0,0 +1,20 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	plugins: [
+		'@typescript-eslint',
+	],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+	],
+	rules: {
+		'semi': [2, "always"],
+		'@typescript-eslint/no-unused-vars': 0,
+		'@typescript-eslint/no-explicit-any': 0,
+		'@typescript-eslint/explicit-module-boundary-types': 0,
+		'@typescript-eslint/no-non-null-assertion': 0,
+	}
+};

package/examples/publish-webview-sample/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

package/examples/publish-webview-sample/.vscode/launch.json

@@ -0,0 +1,18 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+			"outFiles": ["${workspaceFolder}/out/**/*.js"],
+			"preLaunchTask": "npm: watch"
+		}
+	]
+}

package/examples/publish-webview-sample/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.insertSpaces": false
+}

package/examples/publish-webview-sample/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

package/examples/publish-webview-sample/README.md

@@ -0,0 +1,24 @@
+# Calico Colors — Webview View API Sample
+
+Demonstrates VS Code's [webview view API](https://github.com/microsoft/vscode/issues/46585). This includes:
+
+- Contributing a webview based view to the explorer.
+- Posting messages from an extension to a webview view
+- Posting message from a webview to an extension  
+- Persisting state in the view.
+- Contributing commands to the view title.
+
+## VS Code API
+
+### `vscode` module
+
+- [`window.registerWebviewViewProvider`](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewViewProvider)
+
+## Running the example
+
+- Open this example in VS Code 1.49+
+- `npm install`
+- `npm run watch` or `npm run compile`
+- `F5` to start debugging
+
+In the explorer, expand the `Calico Colors` view.

package/examples/publish-webview-sample/media/main.css

@@ -0,0 +1,54 @@
+body {
+	background-color: transparent;
+}
+
+.color-list {
+	list-style: none;
+	padding: 0;
+}
+
+.color-entry {
+	width: 100%;
+	display: flex;
+	margin-bottom: 0.4em;
+	border: 1px solid var(--vscode-input-border);
+}
+
+.color-preview {
+	width: 2em;
+	height: 2em;
+}
+
+.color-preview:hover {
+	outline: inset white;
+}
+
+.color-input {
+	display: block;
+	flex: 1;
+	width: 100%;
+	color: var(--vscode-input-foreground);
+	background-color: var(--vscode-input-background);
+	border: none;
+	padding: 0 0.6em;
+}
+
+.add-color-button {
+	display: block;
+	border: none;
+	margin: 0 auto;
+}
+.command-webview {
+	border-top: 1px solid #3c3c3c;
+	margin-top: 15px;
+}
+h2 {
+	font-weight: bold;
+}
+.send-message {
+	margin-top: 16px;
+	display: flex;
+}
+.response-message {
+	display: flex;
+}

package/examples/publish-webview-sample/media/main.js

@@ -0,0 +1,100 @@
+//@ts-check
+
+// This script will be run within the webview itself
+// It cannot access the main VS Code APIs directly.
+(function () {
+    const vscode = acquireVsCodeApi();
+
+    const oldState = vscode.getState() || { colors: [] };
+
+    /** @type {Array<{ value: string }>} */
+    let colors = oldState.colors;
+
+    updateColorList(colors);
+
+    document.querySelector('.add-color-button').addEventListener('click', () => {
+        addColor();
+    });
+
+    // Handle messages sent from the extension to the webview
+    window.addEventListener('message', event => {
+        const message = event.data; // The json data that the extension sent
+        switch (message.type) {
+            case 'addColor':
+                {
+                    addColor();
+                    break;
+                }
+            case 'clearColors':
+                {
+                    colors = [];
+                    updateColorList(colors);
+                    break;
+                }
+
+        }
+    });
+
+    /**
+     * @param {Array<{ value: string }>} colors
+     */
+    function updateColorList(colors) {
+        const ul = document.querySelector('.color-list');
+        ul.textContent = '';
+        for (const color of colors) {
+            const li = document.createElement('li');
+            li.className = 'color-entry';
+
+            const colorPreview = document.createElement('div');
+            colorPreview.className = 'color-preview';
+            colorPreview.style.backgroundColor = `#${color.value}`;
+            colorPreview.addEventListener('click', () => {
+                onColorClicked(color.value);
+            });
+            li.appendChild(colorPreview);
+
+            const input = document.createElement('input');
+            input.className = 'color-input';
+            input.type = 'text';
+            input.value = color.value;
+            input.addEventListener('change', (e) => {
+                const value = e.target.value;
+                if (!value) {
+                    // Treat empty value as delete
+                    colors.splice(colors.indexOf(color), 1);
+                } else {
+                    color.value = value;
+                }
+                updateColorList(colors);
+            });
+            li.appendChild(input);
+
+            ul.appendChild(li);
+        }
+
+        // Update the saved state
+        vscode.setState({ colors: colors });
+    }
+
+    /** 
+     * @param {string} color 
+     */
+    function onColorClicked(color) {
+        vscode.postMessage({ type: 'colorSelected', value: color });
+    }
+
+    /**
+     * @returns string
+     */
+    function getNewCalicoColor() {
+        const colors = ['020202', 'f1eeee', 'a85b20', 'daab70', 'efcb99'];
+        return colors[Math.floor(Math.random() * colors.length)];
+    }
+
+    function addColor() {
+        colors.push({ value: getNewCalicoColor() });
+        updateColorList(colors);
+    }
+}());
+
+