@jiangzhongxi0322/messagechannel 1.0.0

package/dist/messageChennel.d.ts

@@ -0,0 +1,15 @@
+import * as vscode from 'vscode';
+interface FeedbackData {
+    code: 0 | 1 | 2;
+    msg: string;
+    data: any;
+}
+declare const MessageChannel: () => {
+    publish: (typename: string, msg?: any) => void;
+    subscribe: (typename: string, subscriber: (data: FeedbackData) => any, once?: boolean) => (() => void) | undefined;
+    setCarrier: (carrier: any) => void;
+    pubWithSub: (typename: string, msg: any, subscriber?: (data: FeedbackData) => any) => Promise<unknown>;
+    initiator: (viewType: string) => void;
+    getCarrier: () => vscode.Webview;
+};
+export default MessageChannel;

package/dist/messageChennel.js

@@ -0,0 +1,257 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vscode = __importStar(require("vscode"));
+const MessageChannel = () => {
+    let cachedCarrier;
+    let dispose;
+    const setCarrier = (carrier) => {
+        if (carrier === undefined) {
+            cachedCarrier = window.acquireVsCodeApi();
+            window.addEventListener('message', (event) => {
+                messageHandler(event.data);
+            });
+            return;
+        }
+        if (cachedCarrier) {
+            dispose.dispose();
+        }
+        cachedCarrier = carrier;
+        if (carrier === null) {
+            return;
+        }
+        dispose = cachedCarrier.onDidReceiveMessage((event) => messageHandler(event));
+    };
+    const subscribers = {};
+    const messageHandler = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        const { data: feedbackData, typename } = event;
+        const data = feedbackData.data;
+        const isTalkInExtension = typename && subscribers[typename];
+        if (isTalkInExtension) {
+            subscribers[typename].forEach((resolver) => {
+                resolver(feedbackData);
+            });
+            return;
+        }
+        const isTalkToExtension = typename && (data === null || data === void 0 ? void 0 : data.viewType);
+        if (isTalkToExtension) {
+            const activeTargetExtension = (extensionId) => __awaiter(void 0, void 0, void 0, function* () {
+                const targetExtension = vscode.extensions.getExtension(extensionId);
+                if (!targetExtension) {
+                    console.warn(`Extension ${extensionId} not found`);
+                    return;
+                }
+                if (!targetExtension.isActive) {
+                    yield (targetExtension === null || targetExtension === void 0 ? void 0 : targetExtension.activate());
+                }
+                return true;
+            });
+            if (yield activeTargetExtension(typename)) {
+                const commands = yield vscode.commands.getCommands();
+                const commandID = `to_${data.viewType}`;
+                if (commands.includes(commandID)) {
+                    const talkToOtherExtension = () => __awaiter(void 0, void 0, void 0, function* () {
+                        const result = yield vscode.commands.executeCommand(commandID, data);
+                        publish(typename, result);
+                        if (result !== undefined) {
+                            yield talkToOtherExtension();
+                        }
+                    });
+                    yield talkToOtherExtension();
+                }
+                else {
+                    console.warn(`Command ${commandID} not found`);
+                }
+            }
+        }
+    });
+    const subscribe = (typename, subscriber, once = false) => {
+        if (!subscriber || !(subscriber instanceof Function)) {
+            return;
+        }
+        const resolver = (data) => {
+            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 === null || subscriber === void 0 ? void 0 : 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 === null || subscriber === void 0 ? void 0 : subscriber.length) {
+                const i = subscriber.indexOf(resolver);
+                subscriber.splice(i, 1);
+            }
+        };
+    };
+    const publish = (typename, msg) => {
+        try {
+            cachedCarrier === null || cachedCarrier === void 0 ? void 0 : cachedCarrier.postMessage({
+                typename: typename,
+                data: msg,
+            });
+        }
+        catch (error) {
+            0;
+        }
+    };
+    // vscode.WebviewViewProvider的静态方法中调用
+    const initiator = (viewType) => {
+        // for node
+        if (viewType) {
+            vscode.commands.registerCommand(`to_${viewType}`, (args) => __awaiter(void 0, void 0, void 0, function* () {
+                const { source } = args;
+                const openWebview = () => __awaiter(void 0, void 0, void 0, function* () {
+                    const commands = yield vscode.commands.getCommands();
+                    if (commands.includes(source)) {
+                        yield vscode.commands.executeCommand(source);
+                    }
+                    else {
+                        const uri = vscode.Uri.file(source);
+                        if (!uri) {
+                            return;
+                        }
+                        yield 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', null);
+        subscribe('clickAnyElement', (data) => {
+            const clickAnyElement = (data) => __awaiter(void 0, void 0, void 0, function* () {
+                const selectorList = data === null || data === void 0 ? void 0 : data.selector;
+                let index = 0;
+                const timer = setInterval(() => {
+                    var _a;
+                    const allDone = index >= ((selectorList === null || selectorList === void 0 ? void 0 : selectorList.length) || 0);
+                    if (allDone) {
+                        clearInterval(timer);
+                        return;
+                    }
+                    const originSelector = selectorList === null || selectorList === void 0 ? void 0 : selectorList[index];
+                    const i = originSelector === null || originSelector === void 0 ? void 0 : originSelector.split('$')[1];
+                    const selector = originSelector.split('$')[0];
+                    const element = (_a = window.document) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+                    if (selector && element) {
+                        element.dataset['payload'] = data === null || data === void 0 ? void 0 : data.payload;
+                        element === null || element === void 0 ? void 0 : 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 = (typename, msg, subscriber) => __awaiter(void 0, void 0, void 0, function* () {
+        publish(typename, msg);
+        return new Promise((resolve) => {
+            const removeSubscribe = subscribe(typename, (data) => {
+                if (subscriber) {
+                    subscriber(data);
+                }
+                else {
+                    resolve(data);
+                }
+                removeSubscribe && removeSubscribe();
+            });
+        });
+    });
+    return {
+        publish,
+        subscribe,
+        setCarrier,
+        pubWithSub,
+        initiator,
+        getCarrier: () => cachedCarrier,
+    };
+};
+exports.default = MessageChannel;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@jiangzhongxi0322/messagechannel",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A message channel for communication between VSCode extensions and webviews.",
+  "main": "dist/messageChennel.js",
+  "types": "dist/messageChennel.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@types/vscode": "^1.80.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "keywords": ["vscode", "message", "channel", "webview"],
+  "author": "jiangzhongxi0322",
+  "license": "MIT"
+}

package/src/messageChennel.ts

@@ -0,0 +1,251 @@
+import * as vscode from 'vscode';
+
+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 dispose: vscode.Disposable;
+
+  const setCarrier = (carrier: any) => {
+    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 (carrier === null) {
+      return;
+    }
+    dispose = cachedCarrier.onDidReceiveMessage((event) =>
+      messageHandler(event)
+    );
+  };
+
+  const subscribers: {
+    [i: string]: ((data: any) => void)[];
+  } = {};
+
+  const messageHandler = async (event: Event) => {
+    const { data: feedbackData, typename } = event;
+    const data = feedbackData.data;
+    const isTalkInExtension = typename && subscribers[typename];
+    if (isTalkInExtension) {
+      subscribers[typename as string].forEach((resolver) => {
+        resolver(feedbackData);
+      });
+      return;
+    }
+    const isTalkToExtension = typename && data?.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`);
+        }
+      }
+      
+    }
+
+  };
+  const subscribe = (
+    typename: string,
+    subscriber: (data: FeedbackData) => any,
+    once = false
+  ) => {
+    if (!subscriber || !(subscriber instanceof Function)) {
+      return;
+    }
+    const resolver = (data: FeedbackData) => {
+      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);
+      }
+    };
+  };
+
+  const publish = (typename: string, msg?: any) => {
+    try {
+      cachedCarrier?.postMessage({
+        typename: typename,
+        data: msg,
+      });
+    } catch (error) {0;}
+  };
+
+
+ // vscode.WebviewViewProvider的静态方法中调用
+  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', null);
+    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: FeedbackData) => any
+  ) => {
+    publish(typename, msg);
+
+    return new Promise((resolve) => {
+      const removeSubscribe = subscribe(typename, (data: FeedbackData) => {
+        if (subscriber) {
+          subscriber(data);
+        } else {
+          resolve(data);
+        }
+        removeSubscribe && removeSubscribe();
+      });
+    });
+  };
+
+  return {
+    publish,
+    subscribe,
+    setCarrier,
+    pubWithSub,
+    initiator,
+    getCarrier: () => cachedCarrier,
+  };
+};
+
+export default MessageChannel;

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "CommonJS",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "lib": ["es2016", "dom"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}