@jiangzhongxi0322/messagechannel 1.0.0 → 1.0.1

package/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/dist/messageChennel.d.ts

@@ -1,15 +0,0 @@
-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;