@jiangzhongxi0322/messagechannel 1.0.0 → 1.0.2

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

@@ -0,0 +1,64 @@
+{
+	"name": "response-url-webview-sample",
+	"displayName": "Response URL Webview Sample",
+	"description": "Custom Editor API Samples",
+	"version": "0.1.0",
+	"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": [],
+	"main": "./out/extension.js",
+	"contributes": {
+		"customEditors": [
+			{
+				"viewType": "catCustoms.catScratch",
+				"displayName": "Cat Scratch",
+				"selector": [
+					{
+						"filenamePattern": "*.cscratch"
+					}
+				]
+			},
+			{
+				"viewType": "catCustoms.pawDraw",
+				"displayName": "Paw Draw",
+				"selector": [
+					{
+						"filenamePattern": "*.pawdraw"
+					}
+				]
+			}
+		],
+		"commands": [
+			{
+				"command": "catCustoms.pawDraw.new",
+				"title": "Create new Paw Draw Document",
+				"category": "Paw Draw"
+			}
+		]
+	},
+	"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",
+		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/parser": "^6.7.0",
+		"eslint": "^8.26.0",
+		"typescript": "^5.4.2"
+	}
+}

package/examples/url-webview-sample/src/catScratchEditor.ts

@@ -0,0 +1,215 @@
+import * as vscode from 'vscode';
+import { getNonce } from './util';
+import MessageChannel from './messageChannel';
+
+const mc = MessageChannel();
+/**
+ * Provider for cat scratch editors.
+ * 
+ * Cat scratch editors are used for `.cscratch` files, which are just json files.
+ * To get started, run this extension and open an empty `.cscratch` file in VS Code.
+ * 
+ * This provider demonstrates:
+ * 
+ * - Setting up the initial webview for a custom editor.
+ * - Loading scripts and styles in a custom editor.
+ * - Synchronizing changes between a text document and a custom editor.
+ */
+export class CatScratchEditorProvider implements vscode.CustomTextEditorProvider {
+
+	public static register(context: vscode.ExtensionContext): vscode.Disposable {
+		mc.initiator(CatScratchEditorProvider.viewType);
+		const provider = new CatScratchEditorProvider(context);
+		const providerRegistration = vscode.window.registerCustomEditorProvider(CatScratchEditorProvider.viewType, provider);
+		return providerRegistration;
+	}
+
+	private static readonly viewType = 'catCustoms.catScratch';
+
+	private static readonly scratchCharacters = ['😸', '😹', '😺', '😻', '😼', '😽', '😾', '🙀', '😿', '🐱'];
+
+	constructor(
+		private readonly context: vscode.ExtensionContext
+	) { }
+
+	/**
+	 * Called when our custom editor is opened.
+	 * 
+	 * 
+	 */
+	public async resolveCustomTextEditor(
+		document: vscode.TextDocument,
+		webviewPanel: vscode.WebviewPanel,
+		_token: vscode.CancellationToken
+	): Promise<void> {
+		mc.setCarrier(webviewPanel.webview);
+		// Setup initial content for the webview
+		webviewPanel.webview.options = {
+			enableScripts: true,
+		};
+		webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
+
+		function updateWebview() {
+			webviewPanel.webview.postMessage({
+				type: 'update',
+				text: document.getText(),
+			});
+		}
+
+		// Hook up event handlers so that we can synchronize the webview with the text document.
+		//
+		// The text document acts as our model, so we have to sync change in the document to our
+		// editor and sync changes in the editor back to the document.
+		// 
+		// Remember that a single text document can also be shared between multiple custom
+		// editors (this happens for example when you split a custom editor)
+
+		const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
+			if (e.document.uri.toString() === document.uri.toString()) {
+				updateWebview();
+			}
+		});
+
+		// Make sure we get rid of the listener when our editor is closed.
+		webviewPanel.onDidDispose(() => {
+			changeDocumentSubscription.dispose();
+		});
+
+		// Receive message from the webview.
+		webviewPanel.webview.onDidReceiveMessage(e => {
+			switch (e.type) {
+				case 'add':
+					this.addNewScratch(document);
+					return;
+
+				case 'delete':
+					this.deleteScratch(document, e.id);
+					return;
+			}
+		});
+
+		updateWebview();
+	}
+
+	/**
+	 * Get the static html used for the editor webviews.
+	 */
+	private getHtmlForWebview(webview: vscode.Webview): string {
+		// Local path to script and css for the webview
+		const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(
+			this.context.extensionUri, 'media', 'catScratch.js'));
+
+		const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(
+			this.context.extensionUri, 'media', 'reset.css'));
+
+		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(
+			this.context.extensionUri, 'media', 'vscode.css'));
+
+		const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(
+			this.context.extensionUri, 'media', 'catScratch.css'));
+
+		// Use a nonce to whitelist which scripts can be run
+		const nonce = getNonce();
+
+		return /* html */`
+			<!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'; img-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
+
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+				<link href="${styleResetUri}" rel="stylesheet" />
+				<link href="${styleVSCodeUri}" rel="stylesheet" />
+				<link href="${styleMainUri}" rel="stylesheet" />
+
+				<title>Cat Scratch</title>
+			</head>
+			<body>
+				此处输入需要反馈的数据：<input style="border: 1px solid #ccc; padding: 4px; border-radius: 4px;" placeholder="请输入反馈内容"/>
+				<button>反馈</button>
+
+				<script nonce="${nonce}">
+				// 示例一
+					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>`;
+	}
+
+	/**
+	 * Add a new scratch to the current document.
+	 */
+	private addNewScratch(document: vscode.TextDocument) {
+		const json = this.getDocumentAsJson(document);
+		const character = CatScratchEditorProvider.scratchCharacters[Math.floor(Math.random() * CatScratchEditorProvider.scratchCharacters.length)];
+		json.scratches = [
+			...(Array.isArray(json.scratches) ? json.scratches : []),
+			{
+				id: getNonce(),
+				text: character,
+				created: Date.now(),
+			}
+		];
+
+		return this.updateTextDocument(document, json);
+	}
+
+	/**
+	 * Delete an existing scratch from a document.
+	 */
+	private deleteScratch(document: vscode.TextDocument, id: string) {
+		const json = this.getDocumentAsJson(document);
+		if (!Array.isArray(json.scratches)) {
+			return;
+		}
+
+		json.scratches = json.scratches.filter((note: any) => note.id !== id);
+
+		return this.updateTextDocument(document, json);
+	}
+
+	/**
+	 * Try to get a current document as json text.
+	 */
+	private getDocumentAsJson(document: vscode.TextDocument): any {
+		const text = document.getText();
+		if (text.trim().length === 0) {
+			return {};
+		}
+
+		try {
+			return JSON.parse(text);
+		} catch {
+			throw new Error('Could not get document as json. Content is not valid json');
+		}
+	}
+
+	/**
+	 * Write out the json to a given document.
+	 */
+	private updateTextDocument(document: vscode.TextDocument, json: any) {
+		const edit = new vscode.WorkspaceEdit();
+
+		// Just replace the entire document every time for this example extension.
+		// A more complete extension should compute minimal edits instead.
+		edit.replace(
+			document.uri,
+			new vscode.Range(0, 0, document.lineCount, 0),
+			JSON.stringify(json, null, 2));
+
+		return vscode.workspace.applyEdit(edit);
+	}
+}

package/examples/url-webview-sample/src/dispose.ts

@@ -0,0 +1,37 @@
+import * as vscode from 'vscode';
+
+export function disposeAll(disposables: vscode.Disposable[]): void {
+	while (disposables.length) {
+		const item = disposables.pop();
+		if (item) {
+			item.dispose();
+		}
+	}
+}
+
+export abstract class Disposable {
+	private _isDisposed = false;
+
+	protected _disposables: vscode.Disposable[] = [];
+
+	public dispose(): any {
+		if (this._isDisposed) {
+			return;
+		}
+		this._isDisposed = true;
+		disposeAll(this._disposables);
+	}
+
+	protected _register<T extends vscode.Disposable>(value: T): T {
+		if (this._isDisposed) {
+			value.dispose();
+		} else {
+			this._disposables.push(value);
+		}
+		return value;
+	}
+
+	protected get isDisposed(): boolean {
+		return this._isDisposed;
+	}
+}

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

@@ -0,0 +1,7 @@
+import * as vscode from 'vscode';
+import { CatScratchEditorProvider } from './catScratchEditor';
+
+export function activate(context: vscode.ExtensionContext) {
+	// Register our custom editor providers
+	context.subscriptions.push(CatScratchEditorProvider.register(context));
+}

package/examples/url-webview-sample/src/messageChannel.ts

@@ -0,0 +1,264 @@
+import * as vscode from 'vscode';
+
+interface Event {
+  typename?: string;
+  key?: string;
+  channelId: string;
+  data: any;
+}
+
+// 每个vscode的node端和webview都分别拥有一个MessageChannel返回的对象，因为他们是不同载体
+// 同一webview如果打开了多个文档，各个文档也应该有不同的载体
+declare const window: any;
+
+const MessageChannel = () => {
+  let cachedCarrier: vscode.Webview | null;
+  let dispose: vscode.Disposable;
+
+  /**
+   * @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) => {
+        messageHandler(event.data);
+      });
+      return;
+    }
+    if (cachedCarrier) {
+      dispose.dispose();
+    }
+    cachedCarrier = carrier;
+    if (cachedCarrier === null) {
+      return;
+    }
+    dispose = cachedCarrier.onDidReceiveMessage((event) =>
+      messageHandler(event)
+    );
+  };
+
+  const subscribers: {
+    [i: string]: ((data: any) => void)[];
+  } = {};
+
+  const messageHandler = async (event: Event) => {
+    const { data, typename } = event;
+    const isTalkInExtension = typename && subscribers[typename];
+    if (isTalkInExtension) {
+      subscribers[typename as string].forEach((resolver) => {
+        resolver(data);
+      });
+      return;
+    }
+    const isTalkToExtension = typename && (data as any)?.viewType;
+    if(isTalkToExtension) {
+      const activeTargetExtension = async (extensionId: string) => {
+        const targetExtension = vscode.extensions.getExtension(extensionId);
+        if(!targetExtension ) {
+          console.warn(`Extension ${extensionId} not found`);
+          return;
+        }
+        if(!targetExtension.isActive) {
+          await targetExtension?.activate();
+        }
+        return true;
+      };
+      if(await activeTargetExtension(typename)) {
+        const commands = await vscode.commands.getCommands();
+        const commandID = `to_${data.viewType}`;
+        if(commands.includes(commandID)) {
+          const talkToOtherExtension = async () => {
+            const result = await vscode.commands.executeCommand(commandID, data);
+            publish(typename, result);
+            if (result !== undefined) {
+              await talkToOtherExtension();
+            }
+          };
+          await talkToOtherExtension();
+        } else {
+          console.warn(`Command ${commandID} not found`);
+        }
+      }
+      
+    }
+
+  };
+  /**
+   * typename: 消息类型，消息的发布和订阅都依赖这个typename
+   * subscriber：收到消息后把消息传递给subscriber
+   * once：一次性订阅，收到消息后就把订阅者移除
+  */
+  const subscribe = (
+    typename: string,
+    subscriber: (data: any) => any,
+    once = false
+  ) => {
+    if (!subscriber || !(subscriber instanceof Function)) {
+      return;
+    }
+    const resolver = (data: any) => {
+      const result = subscriber(data);
+      if (result !== undefined) {
+        if (result instanceof Promise) {
+          result.then((data) => {
+            publish(typename, data);
+          });
+        } else {
+          publish(typename, result);
+        }
+      }
+      if (once) {
+        const subscriber = subscribers[typename];
+        if (subscriber?.length) {
+          const i = subscriber.indexOf(resolver);
+          subscriber.splice(i, 1);
+        }
+      }
+    };
+    const _subscribers = subscribers;
+    if (_subscribers[typename]) {
+      _subscribers[typename].push(resolver);
+    } else {
+      _subscribers[typename] = [resolver];
+    }
+    return () => {
+      const subscriber = subscribers[typename];
+      if (subscriber?.length) {
+        const i = subscriber.indexOf(resolver);
+        subscriber.splice(i, 1);
+      }
+    };
+  };
+
+  /**
+   * typename: 消息类型，消息的发布和订阅都依赖这个typename
+   * msg：消息发布时带的参数
+  */
+  const publish = (typename: string, data?: any) => {
+    try {
+      cachedCarrier?.postMessage({
+        typename: typename,
+        data: data,
+      });
+    } catch (error) {0;}
+  };
+
+
+ /**
+  * 如果要唤醒其余插件的webview，则双方插件的provider、web都要调用这个函数初始化
+  * viewType：provider传递WebviewProvieder的viewType，web则不用传递参数
+ */
+  const initiator = (viewType?: string) => {
+    // for node
+    if(viewType) {
+      vscode.commands.registerCommand(`to_${viewType}`, async (args) => {
+        const { source } = args;
+        const openWebview = async () => {
+          const commands = await vscode.commands.getCommands();
+          if(commands.includes(source)) {
+            await vscode.commands.executeCommand(source);
+          } else {
+            const uri = vscode.Uri.file(source);
+            if(!uri) {
+              return;
+            }
+            await vscode.commands.executeCommand(
+              'vscode.openWith',
+                uri,
+                viewType,
+                vscode.ViewColumn.One
+            );
+          }
+        };
+  
+        return new Promise((resolve) => { // 通过这个返回数据源
+          // 首次打开webview
+          subscribe('webviewRenderDone', () => {
+            pubWithSub('clickAnyElement', args, (data) => {
+              resolve(data);
+            });
+          }, true);
+          // 已经打开过webview
+          pubWithSub('clickAnyElement', args, (data) => {
+            resolve(data);
+          });
+          openWebview();
+        });
+      });
+      return;
+    }
+    publish('webviewRenderDone');
+    subscribe('clickAnyElement', (data) => {
+      const clickAnyElement = async (data: any) => {
+        const selectorList = data?.selector;
+        let index = 0;
+        const timer = setInterval(() => {
+          const allDone = index >= (selectorList?.length || 0);
+          if(allDone) {
+            clearInterval(timer);
+            return;
+          }
+
+          const originSelector = selectorList?.[index];
+          const i = originSelector?.split('$')[1];
+          const selector =originSelector.split('$')[0];
+          const element = (window as any).document?.querySelector(selector);
+
+          if(selector && element) {
+            element.dataset['payload'] = data?.payload;
+            element?.click();
+            index++;
+          }
+        }, 1000);
+      };
+      return new Promise((resolve) => {
+        window.feedbackResult = resolve;
+        clickAnyElement(data);
+      });
+    });
+  };
+/**
+ * key: 唯一key，插件identifier或者消息类型
+ * args: 传递的数据
+ *  {
+ *    viewType: 要打开的webview的类型
+ *    source: webview如果是命令打开则是命令ID，如果是则是文件的绝对路径
+ *    selectorList: 要点击的元素选择器列表
+ *  }
+ * subscribe?: 发布后通过订阅获取反馈数据，如果没有subscribe，则可以通过异步等待获取反馈的数据
+ *  
+*/
+  const pubWithSub = async (
+    typename: string,
+    msg: any,
+    subscriber?: (data: any) => any
+  ) => {
+    publish(typename, msg);
+
+    return new Promise((resolve) => {
+      const removeSubscribe = subscribe(typename, (data: any) => {
+        if (subscriber) {
+          subscriber(data);
+        } else {
+          resolve(data);
+        }
+        removeSubscribe && removeSubscribe();
+      });
+    });
+  };
+
+  return {
+    publish,
+    subscribe,
+    setCarrier,
+    pubWithSub,
+    initiator,
+    getCarrier: () => cachedCarrier,
+  };
+};
+
+export default MessageChannel;

package/examples/url-webview-sample/src/util.ts

@@ -0,0 +1,8 @@
+export 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/examples/url-webview-sample/tsconfig.json

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@jiangzhongxi0322/messagechannel",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "publishConfig": {
     "access": "public"
   },
   "description": "A message channel for communication between VSCode extensions and webviews.",
-  "main": "dist/messageChennel.js",
-  "types": "dist/messageChennel.d.ts",
+  "main": "dist/messageChannel.js",
+  "types": "dist/messageChannel.d.ts",
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build"