@jiangzhongxi0322/messagechannel 1.0.0 → 1.0.2

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

@@ -0,0 +1,71 @@
+{
+	"name": "publish-webview-sample",
+	"description": "Calico Colors - A Webview View API Sample",
+	"version": "0.1.8",
+	"publisher": "walker",
+	"private": true,
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Microsoft/vscode-extension-samples"
+	},
+	"engines": {
+		"vscode": "^1.74.0"
+	},
+	"extensionKind": [
+		"ui",
+		"workspace"
+	],
+	"categories": [
+		"Other"
+	],
+	"activationEvents": [],
+	"main": "./out/extension.js",
+	"contributes": {
+		"views": {
+			"explorer": [
+				{
+					"type": "webview",
+					"id": "calicoColors.colorsView",
+					"name": "Calico Colors",
+					"icon": "media/icon.png"
+				}
+			]
+		},
+		"commands": [
+			{
+				"command": "calicoColors.addColor",
+				"category": "Calico Colors",
+				"title": "Add Color"
+			},
+			{
+				"command": "calicoColors.clearColors",
+				"category": "Calico Colors",
+				"title": "Clear Colors",
+				"icon": "$(clear-all)"
+			}
+		],
+		"menus": {
+			"view/title": [
+				{
+					"command": "calicoColors.clearColors",
+					"group": "navigation",
+					"when": "view == calicoColors.colorsView"
+				}
+			]
+		}
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run compile",
+		"compile": "tsc -p ./",
+		"lint": "eslint \"src/**/*.ts\"",
+		"watch": "tsc -w -p ./"
+	},
+	"devDependencies": {
+		"@types/vscode": "^1.73.0",
+		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/parser": "^6.7.0",
+		"eslint": "^8.32.0",
+		"typescript": "^5.4.2"
+	}
+}

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

@@ -0,0 +1,170 @@
+import * as vscode from 'vscode';
+import MessageChannel from './messageChannel';
+
+const mc = MessageChannel();
+
+export function activate(context: vscode.ExtensionContext) {
+
+	const provider = new ColorsViewProvider(context.extensionUri);
+
+	mc.initiator(ColorsViewProvider.viewType);
+
+	context.subscriptions.push(
+		vscode.window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider));
+
+	context.subscriptions.push(
+		vscode.commands.registerCommand('calicoColors.addColor', () => {
+			provider.addColor();
+		}));
+
+	context.subscriptions.push(
+		vscode.commands.registerCommand('calicoColors.clearColors', () => {
+			provider.clearColors();
+		}));
+}
+
+class ColorsViewProvider implements vscode.WebviewViewProvider {
+
+	public static readonly viewType = 'calicoColors.colorsView';
+
+	private _view?: vscode.WebviewView;
+
+	constructor(
+		private readonly _extensionUri: vscode.Uri,
+	) { }
+
+	public resolveWebviewView(
+		webviewView: vscode.WebviewView,
+		context: vscode.WebviewViewResolveContext,
+		_token: vscode.CancellationToken,
+	) {
+		this._view = webviewView;
+		mc.setCarrier(webviewView.webview);
+		webviewView.webview.options = {
+			// Allow scripts in the webview
+			enableScripts: true,
+
+			localResourceRoots: [
+				this._extensionUri
+			]
+		};
+
+		webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
+
+		webviewView.webview.onDidReceiveMessage(data => {
+			switch (data.type) {
+				case 'colorSelected':
+					{
+						vscode.window.activeTextEditor?.insertSnippet(new vscode.SnippetString(`#${data.value}`));
+						break;
+					}
+			}
+		});
+	}
+
+	public addColor() {
+		if (this._view) {
+			this._view.show?.(true); // `show` is not implemented in 1.49 but is for 1.50 insiders
+			this._view.webview.postMessage({ type: 'addColor' });
+		}
+	}
+
+	public clearColors() {
+		if (this._view) {
+			this._view.webview.postMessage({ type: 'clearColors' });
+		}
+	}
+
+	private _getHtmlForWebview(webview: vscode.Webview) {
+		// Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
+		const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'));
+
+		// Do the same for the stylesheet.
+		const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
+		const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css'));
+		const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
+
+		// Use a nonce to only allow a specific script 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 styles from our extension directory,
+					and only allow scripts that have a specific nonce.
+					(See the 'webview-sample' extension sample for img-src content security policy examples)
+				-->
+				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; 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 Colors</title>
+			</head>
+			<body>
+				<ul class="color-list">
+				</ul>
+
+				
+				<div class="url-webview">
+					<h2>url-webview</h2>
+					<div class="send-message">
+						<input type="text" placeholder="请输入发送的数据" />
+						<button>发送</button>
+					</div>
+					<div class="response-message">发送对象反馈的数据:<div>暂无</div></div>
+				</div>
+
+				<div class="command-webview">
+					<h2>command-webview</h2>
+					<div class="send-message">
+						<input type="text" placeholder="请输入发送的数据" />
+						<button>发送</button>
+					</div>
+					<div class="response-message">发送对象反馈的数据:<div>暂无</div></div>
+				</div>
+
+				<script nonce="${nonce}">
+					window.mc = (${MessageChannel.toString()})()
+					window.mc.setCarrier();
+					document.querySelector('.url-webview button').addEventListener('click', () => {
+						const input = document.querySelector('.url-webview .send-message input');
+						const value = input.value;
+						window.mc.pubWithSub('walker.response-url-webview-sample', 
+						{ 
+							viewType: 'catCustoms.catScratch',
+							source: 'D:\\\\project\\\\vscode\\\\vscode-extension-samples\\\\url-webview-sample\\\\exampleFiles\\\\example.cscratch',
+							selector: ['input'],
+							payload: value
+						},
+						(data) => {
+							document.querySelector('.url-webview .response-message').innerText = data;
+						});
+					});
+					document.querySelector('.command-webview button').addEventListener('click', () => {
+						const input = document.querySelector('.command-webview .send-message input');
+						const value = input.value;
+						window.mc.pubWithSub('walker.command-webview-sample', { viewType: 'catCoding', source: 'catCoding.start', selector: ['input'], payload: value }, (data) => {
+							document.querySelector('.command-webview .response-message').innerText = data;
+						});
+					});
+				</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/examples/publish-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/publish-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/url-webview-sample/.eslintignore

@@ -0,0 +1 @@
+media/*.js

package/examples/url-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/url-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/url-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: compile"
+		}
+	]
+}

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

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

package/examples/url-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/url-webview-sample/README.md

@@ -0,0 +1,25 @@
+# Cat Customs - Custom Editor API Samples
+
+![Paw draw editor ](documentation/example.png)
+
+Demonstrates VS Code's [custom editor API](https://code.visualstudio.com/api/extension-guides/custom-editors) using two custom editors:
+
+- Cat Scratch — Uses the finalized custom text editor api to provide a custom editor for `.cscratch` files (which are just json files)
+- Paw Draw - Uses the binary custom editor api to provide a custom editor for `.pawdraw` files (which are just png files with a different file extension).
+
+## VS Code API
+
+### `vscode` module
+
+- [`window.registerCustomEditorProvider`](https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider)
+- [`CustomTextEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomTextEditor)
+- [`CustomEditor`](https://code.visualstudio.com/api/references/vscode-api#CustomEditor)
+
+## Running the example
+
+- Open this example in VS Code 1.46+
+- `npm install`
+- `npm run watch` or `npm run compile`
+- `F5` to start debugging
+
+Open the example files from the `exampleFiles` directory.

package/examples/url-webview-sample/exampleFiles/example.cscratch

@@ -0,0 +1,14 @@
+{
+  "scratches": [
+    {
+      "id": "8lYOoWqz2rHtPuhvnZ43eMx1mG6WnFrm",
+      "text": "😸",
+      "created": 1584577931699
+    },
+    {
+      "id": "aZ57bJUEaXZ5wuBAX6NfGuj85Y6iw84N",
+      "text": "😻",
+      "created": 1584577933329
+    }
+  ]
+}

package/examples/url-webview-sample/exampleFiles/log/python-kaleido-case-api.exe.log

@@ -0,0 +1 @@
+工程管理插件 python-kaleido-case-api.exe 开始服务时间：2025/11/18 17:02:22

package/examples/url-webview-sample/exampleFiles/log/python-request.exe.log

@@ -0,0 +1 @@
+工程管理插件 python-request.exe 开始服务时间：2025/11/18 17:02:28

package/examples/url-webview-sample/exampleFiles/pump/config/default.json

@@ -0,0 +1 @@
+{}

package/examples/url-webview-sample/exampleFiles/test_cases/log/output_202511181702.log

@@ -0,0 +1,6 @@
+2025-11-18 17:02:28,916 - d:\project\新版画图工具\messageChannel\examples\url-webview-sample\exampleFiles\test_cases\log\output_202511181702.log
+2025-11-18 17:02:28,916 - 约束求解执行文件路径：d:\software\vscode各个版本\kaleidoscope-win10精简版\KaleidoApi\RFS\src\fsm\constraint_problem_solving\Requirement_diagram_analysis.exe
+2025-11-18 17:02:28,951 - C++ server started with PID: 22952
+2025-11-18 17:02:28,959 - output: Server is listening on http://localhost:58930
+2025-11-18 17:02:28,960 - Log monitoring started in a separate thread.
+2025-11-18 17:02:28,960 - Error: C++ server exited with code None