@tomjs/vite-plugin-vscode 2.4.0 → 2.5.0

package/README.md

@@ -1,6 +1,6 @@
 # @tomjs/vite-plugin-vscode
 
-[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-vscode)](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-vscode) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-vscode) [![Docs](https://www.paka.dev/badges/v0/cute.svg)](https://www.paka.dev/npm/@tomjs/vite-plugin-vscode)
+[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-vscode)](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-vscode) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-vscode)
 
 **English** | [中文](./README.zh_CN.md)
 
@@ -200,9 +200,16 @@ function __getWebviewHtml__(
 ): string;
 ```
 
+### Warning
+
+When using the `acquireVsCodeApi().getState()` method of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview), you must use `await` to call it. Since `acquireVsCodeApi` is a simulated implementation of this method by the plugin, it is inconsistent with the original method. I am very sorry. If you have other solutions, please share them. Thank you very much.
+
+```ts
+const value = await acquireVsCodeApi().getState();
+```
+
 ## Documentation
 
-- [API Documentation](https://paka.dev/npm/@tomjs/vite-plugin-vscode) provided by [paka.dev](https://paka.dev).
 - [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).
 
 ## Parameters
@@ -371,3 +378,9 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 - [react](./examples/react): Simple react example.
 - [vue](./examples/vue): Simple vue example.
 - [vue-import](./examples/vue-import): Dynamic import() and multi-page examples.
+
+## Related
+
+- [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): Some utilities to simplify the development of [VSCode Extensions](https://marketplace.visualstudio.com/VSCode).
+- [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): Some development tools to simplify the development of [vscode extensions](https://marketplace.visualstudio.com/VSCode).
+- [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/webview): Optimize the `postMessage` issue between `webview` page and [vscode extensions](https://marketplace.visualstudio.com/VSCode)

package/README.zh_CN.md

@@ -1,6 +1,6 @@
 # @tomjs/vite-plugin-vscode
 
-[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-vscode)](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-vscode) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-vscode) [![Docs](https://www.paka.dev/badges/v0/cute.svg)](https://www.paka.dev/npm/@tomjs/vite-plugin-vscode)
+[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-vscode)](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-vscode) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-vscode)
 
 [English](./README.md) | **中文**
 
@@ -204,9 +204,16 @@ function __getWebviewHtml__(
 ): string;
 ```
 
+### 警告
+
+使用 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 的 `acquireVsCodeApi().getState()` 方法时，要使用 `await` 调用。由于 `acquireVsCodeApi` 是插件对该方法的模拟实现，故与原方法出现不一致性，非常抱歉。如果有其他方案，请分享，非常感谢。
+
+```ts
+const value = await acquireVsCodeApi().getState();
+```
+
 ## 文档
 
-- [paka.dev](https://paka.dev) 提供的 [API文档](https://paka.dev/npm/@tomjs/vite-plugin-vscode).
 - [unpkg.com](https://www.unpkg.com/) 提供的 [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts).
 
 ## 参数
@@ -374,3 +381,9 @@ pnpm build
 - [react](./examples/react)：简单的 react 示例。
 - [vue](./examples/vue)：简单的 vue 示例。
 - [vue-import](./examples/vue-import)：动态 import() 和多页面示例。
+
+## 关联
+
+- [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): 一些实用工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
+- [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): 一些开发工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
+- [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/vscode-webview): 优化 `webview` 页面与 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的 `postMessage` 问题

package/dist/client.global.js

@@ -20,47 +20,60 @@
           document.addEventListener("DOMContentLoaded", callback);
         }
       }
-      function setStateData(data) {
-        localStorage.setItem("vscode.state", JSON.stringify(data));
-      }
-      function getStateData() {
-        try {
-          const v = localStorage.getItem("vscode.state");
-          return v ? JSON.parse(v) : v;
-        } catch (e) {
-        }
-        return;
-      }
       function patchInitData(data) {
-        const { state, style, body, root } = data;
-        setStateData(state);
-        document.documentElement.style.cssText = root.cssText;
-        document.body.className = body.className;
-        Object.keys(body.dataset).forEach((key) => {
-          document.body.dataset[key] = body.dataset[key];
+        onDomReady(() => {
+          console.log(TAG, "patch client style");
+          const { style, body, root } = data;
+          document.documentElement.style.cssText = root.cssText;
+          document.body.className = body.className;
+          Object.keys(body.dataset).forEach((key) => {
+            document.body.dataset[key] = body.dataset[key];
+          });
+          const defaultStyles = document.createElement("style");
+          defaultStyles.id = "_defaultStyles";
+          defaultStyles.textContent = style;
+          document.head.appendChild(defaultStyles);
         });
-        const defaultStyles = document.createElement("style");
-        defaultStyles.id = "_defaultStyles";
-        defaultStyles.textContent = style;
-        document.head.appendChild(defaultStyles);
       }
+      var GET_STATE_TYPE = "[vscode:client]:getState";
+      var SET_STATE_TYPE = "[vscode:client]:setState";
+      var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
       function patchAcquireVsCodeApi() {
         class AcquireVsCodeApi {
           postMessage(message) {
-            console.log(TAG + " acquireVsCodeApi.postMessage:", message);
-            window.parent.postMessage({ type: "[vscode:client]:postMessage", data: message }, "*");
+            console.log(TAG, "mock acquireVsCodeApi.postMessage:", message);
+            window.parent.postMessage({ type: POST_MESSAGE_TYPE, data: message }, "*");
           }
           getState() {
-            console.log(TAG + " acquireVsCodeApi.getState");
-            return getStateData();
+            console.log(TAG, "mock acquireVsCodeApi.getState");
+            return new Promise((resolve, reject) => {
+              function post() {
+                window.parent.postMessage({ type: GET_STATE_TYPE }, "*");
+              }
+              const timeoutId = setTimeout(() => {
+                window.removeEventListener("message", receive);
+                reject(new Error("Timeout"));
+              }, 2e3);
+              function receive(e) {
+                var _a, _b;
+                console.log(e);
+                if (!e.origin.startsWith("vscode-webview://") || ((_a = e.data) == null ? void 0 : _a.type) !== GET_STATE_TYPE) {
+                  return;
+                }
+                window.removeEventListener("message", receive);
+                clearTimeout(timeoutId);
+                resolve((_b = e.data) == null ? void 0 : _b.data);
+              }
+              window.addEventListener("message", receive);
+              post();
+            });
           }
           setState(newState) {
-            console.log(TAG + " acquireVsCodeApi.setState:", newState);
-            setStateData(newState);
-            window.parent.postMessage({ type: "[vscode:client]:setSate", data: newState }, "*");
+            console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
+            window.parent.postMessage({ type: SET_STATE_TYPE, data: newState }, "*");
           }
         }
-        console.log(TAG + "patch acquireVsCodeApi");
+        console.log(TAG, "patch acquireVsCodeApi");
         let api;
         window.acquireVsCodeApi = () => {
           if (!api) {
@@ -72,19 +85,12 @@
         };
       }
       var INIT_TYPE = "[vscode:extension]:init";
-      var GET_STATE_TYPE = "[vscode:extension]:state";
       window.addEventListener("message", (e) => {
         const { type, data } = e.data || {};
-        if (!e.origin.startsWith("vscode-webview://") || ![INIT_TYPE, GET_STATE_TYPE].includes(type)) {
+        if (!e.origin.startsWith("vscode-webview://") || type !== INIT_TYPE) {
           return;
         }
-        onDomReady(function() {
-          if (type === INIT_TYPE) {
-            patchInitData(data);
-          } else if (type === GET_STATE_TYPE) {
-            localStorage.setItem("vscode.state", JSON.stringify(data));
-          }
-        });
+        patchInitData(data);
       });
     }
   });

package/dist/webview.js

@@ -1,148 +1,189 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/webview/template.html
 var template_default = `<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
 
-      #webview-patch-iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    #webview-patch-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .outer {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  </style>
+
+  <script type="module" id="webview-patch">
+    const TAG = '[@tomjs:vscode:extension] ';
+
+    function onDomReady(callback, doc) {
+      const _doc = doc || document
+      if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
+        callback();
+      } else {
+        _doc.addEventListener('DOMContentLoaded', callback);
       }
+    }
 
-      .outer {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    </style>
+    let vsCodeApi;
 
-    <script type="module" id="webview-patch">
-      const TAG = '[@tomjs:vscode:extension] ';
+    function getApi() {
+      if (vsCodeApi) return vsCodeApi;
+      return (vsCodeApi = acquireVsCodeApi());
+    }
+
+    function sendInitData(iframe) {
+      console.log(TAG + 'init data');
+      const dataset = {};
+      Object.keys(document.body.dataset).forEach(key => {
+        dataset[key] = document.body.dataset[key];
+      });
 
-      function onDomReady(callback) {
-        if (document.readyState === 'interactive' || document.readyState === 'complete') {
-          callback();
-        } else {
-          document.addEventListener('DOMContentLoaded', callback);
+      iframe.contentWindow.postMessage(
+        {
+          type: '[vscode:extension]:init',
+          data: {
+            state: getApi().getState(),
+            style: document.getElementById('_defaultStyles').innerHTML,
+            root: {
+              cssText: document.documentElement.style.cssText,
+            },
+            body: {
+              dataset: dataset,
+              className: document.body.className,
+              role: document.body.getAttribute('role'),
+            },
+          },
+        },
+        '*',
+      );
+    }
+
+    function observeAttributeChanges(element, attributeName, callback) {
+      const observer = new MutationObserver(function (mutationsList) {
+        for (let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
+            callback(mutation.target.getAttribute(attributeName));
+          }
         }
+      });
+      observer.observe(element, { attributes: true });
+      return observer;
+    }
+
+    // message handler
+    let iframeLoaded = false;
+    const cacheMessages = [];
+
+    function handleMessage(e) {
+      const iframe = document.getElementById('webview-patch-iframe');
+      if (!iframeLoaded || !iframe) {
+        return;
       }
-
-      let vsCodeApi;
-
-      function getApi() {
-        if (vsCodeApi) return vsCodeApi;
-        return (vsCodeApi = acquireVsCodeApi());
+      if (e.origin.startsWith('vscode-webview://')) {
+        iframe.contentWindow.postMessage(e.data, '*');
+      } else if ('{{serverUrl}}'.startsWith(e.origin)) {
+        const { type, data } = e.data;
+        console.log(TAG + ' received:', e.data);
+        if (type === '[vscode:client]:postMessage') {
+          getApi().postMessage(data);
+        } else if (type === '[vscode:client]:getState') {
+          iframe.contentWindow.postMessage(
+            {
+              type: '[vscode:client]:getState',
+              data: getApi().getState(),
+            },
+            '*',
+          );
+        } else if (type === '[vscode:client]:setState') {
+          getApi().setState(data);
+        }
       }
+    }
 
-      function sendInitData(iframe) {
-        console.log(TAG + 'init data');
-        const dataset = {};
-        Object.keys(document.body.dataset).forEach(key => {
-          dataset[key] = document.body.dataset[key];
-        });
-
-        iframe.contentWindow.postMessage(
-          {
-            type: '[vscode:extension]:init',
-            data: {
-              state: getApi().getState(),
-              style: document.getElementById('_defaultStyles').innerHTML,
-              root: {
-                cssText: document.documentElement.style.cssText,
-              },
-              body: {
-                dataset: dataset,
-                className: document.body.className,
-                role: document.body.getAttribute('role'),
-              },
-            },
-          },
-          '*',
-        );
+    window.addEventListener('message', function (event) {
+      if (event.origin.startsWith('vscode-webview://')) {
+        cacheMessages.push(event);
+        return;
       }
+      handleMessage(event);
+    });
 
-      function addListeners(iframe) {
-        window.addEventListener('message', function (e) {
-          if (e.origin.startsWith('vscode-webview://')) {
-            iframe.contentWindow.postMessage(e.data, '*');
-          } else if ('{{serverUrl}}'.startsWith(e.origin)) {
-            const { type, data } = e.data;
-            if (type === '[vscode:client]:postMessage') {
-              getApi().postMessage(data);
-            } else if (type === '[vscode:client]:getState') {
-              iframe.contentWindow.postMessage(
-                {
-                  type: '[vscode:extension]:getState',
-                  data: getApi().getState(),
-                },
-                '*',
-              );
-            } else if (type === '[vscode:client]:setState') {
-              getApi().setState(data);
-            }
-          }
-        });
+    let isCacheWorking = false;
+    setInterval(() => {
+      if (isCacheWorking) {
+        return;
       }
 
-      function observeAttributeChanges(element, attributeName, callback) {
-        const observer = new MutationObserver(function (mutationsList) {
-          for (let mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
-              callback(mutation.target.getAttribute(attributeName));
-            }
-          }
-        });
-        observer.observe(element, { attributes: true });
-        return observer;
+      isCacheWorking = true;
+      if (iframeLoaded) {
+        let event = cacheMessages.shift()
+        while (event) {
+          handleMessage(event);
+          event = cacheMessages.shift()
+        }
       }
+      isCacheWorking = false;
+    }, 50);
+
+    onDomReady(function () {
+      /**  @type {HTMLIFrameElement} */
+      const iframe = document.getElementById('webview-patch-iframe');
+      observeAttributeChanges(document.body, 'class', function (className) {
+        sendInitData(iframe);
+      });
 
       onDomReady(function () {
-        const iframe = document.getElementById('webview-patch-iframe');
-        observeAttributeChanges(document.body, 'class', function (className) {
-          sendInitData(iframe);
-        });
-        iframe.addEventListener('load', function (e) {
-          let interval = setInterval(() => {
-            try {
-              if (document.getElementById('_defaultStyles')) {
-                sendInitData(iframe);
-                addListeners(iframe);
-                clearInterval(interval);
-                return;
-              }
-            } catch (e) {
+        iframeLoaded = true;
+        sendInitData(iframe);
+      }, iframe.contentDocument);
+
+
+      iframe.addEventListener('load', function (e) {
+        iframeLoaded = true;
+
+        let interval = setInterval(() => {
+          try {
+            if (document.getElementById('_defaultStyles')) {
+              sendInitData(iframe);
+              // addListeners(iframe);
               clearInterval(interval);
-              console.error(e);
+              return;
             }
-          }, 10);
-        });
+          } catch (e) {
+            clearInterval(interval);
+            console.error(e);
+          }
+        }, 10);
       });
-    </script>
-  </head>
-
-  <body>
-    <div class="outer">
-      <iframe
-        id="webview-patch-iframe"
-        frameborder="0"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
-        allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
-        src="{{serverUrl}}"
-      ></iframe>
-    </div>
-  </body>
+    });
+  </script>
+</head>
+
+<body>
+  <div class="outer">
+    <iframe id="webview-patch-iframe" frameborder="0"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
+      allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write" src="{{serverUrl}}"></iframe>
+  </div>
+</body>
+
 </html>
 `;
 

package/dist/webview.mjs

@@ -1,148 +1,189 @@
 // src/webview/template.html
 var template_default = `<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
 
-      #webview-patch-iframe {
-        width: 100%;
-        height: 100%;
-        border: none;
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
 
-      .outer {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    </style>
+    #webview-patch-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
 
-    <script type="module" id="webview-patch">
-      const TAG = '[@tomjs:vscode:extension] ';
+    .outer {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  </style>
 
-      function onDomReady(callback) {
-        if (document.readyState === 'interactive' || document.readyState === 'complete') {
-          callback();
-        } else {
-          document.addEventListener('DOMContentLoaded', callback);
-        }
+  <script type="module" id="webview-patch">
+    const TAG = '[@tomjs:vscode:extension] ';
+
+    function onDomReady(callback, doc) {
+      const _doc = doc || document
+      if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {
+        callback();
+      } else {
+        _doc.addEventListener('DOMContentLoaded', callback);
       }
+    }
 
-      let vsCodeApi;
+    let vsCodeApi;
 
-      function getApi() {
-        if (vsCodeApi) return vsCodeApi;
-        return (vsCodeApi = acquireVsCodeApi());
-      }
+    function getApi() {
+      if (vsCodeApi) return vsCodeApi;
+      return (vsCodeApi = acquireVsCodeApi());
+    }
+
+    function sendInitData(iframe) {
+      console.log(TAG + 'init data');
+      const dataset = {};
+      Object.keys(document.body.dataset).forEach(key => {
+        dataset[key] = document.body.dataset[key];
+      });
 
-      function sendInitData(iframe) {
-        console.log(TAG + 'init data');
-        const dataset = {};
-        Object.keys(document.body.dataset).forEach(key => {
-          dataset[key] = document.body.dataset[key];
-        });
-
-        iframe.contentWindow.postMessage(
-          {
-            type: '[vscode:extension]:init',
-            data: {
-              state: getApi().getState(),
-              style: document.getElementById('_defaultStyles').innerHTML,
-              root: {
-                cssText: document.documentElement.style.cssText,
-              },
-              body: {
-                dataset: dataset,
-                className: document.body.className,
-                role: document.body.getAttribute('role'),
-              },
+      iframe.contentWindow.postMessage(
+        {
+          type: '[vscode:extension]:init',
+          data: {
+            state: getApi().getState(),
+            style: document.getElementById('_defaultStyles').innerHTML,
+            root: {
+              cssText: document.documentElement.style.cssText,
+            },
+            body: {
+              dataset: dataset,
+              className: document.body.className,
+              role: document.body.getAttribute('role'),
             },
           },
-          '*',
-        );
-      }
+        },
+        '*',
+      );
+    }
 
-      function addListeners(iframe) {
-        window.addEventListener('message', function (e) {
-          if (e.origin.startsWith('vscode-webview://')) {
-            iframe.contentWindow.postMessage(e.data, '*');
-          } else if ('{{serverUrl}}'.startsWith(e.origin)) {
-            const { type, data } = e.data;
-            if (type === '[vscode:client]:postMessage') {
-              getApi().postMessage(data);
-            } else if (type === '[vscode:client]:getState') {
-              iframe.contentWindow.postMessage(
-                {
-                  type: '[vscode:extension]:getState',
-                  data: getApi().getState(),
-                },
-                '*',
-              );
-            } else if (type === '[vscode:client]:setState') {
-              getApi().setState(data);
-            }
+    function observeAttributeChanges(element, attributeName, callback) {
+      const observer = new MutationObserver(function (mutationsList) {
+        for (let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
+            callback(mutation.target.getAttribute(attributeName));
           }
-        });
+        }
+      });
+      observer.observe(element, { attributes: true });
+      return observer;
+    }
+
+    // message handler
+    let iframeLoaded = false;
+    const cacheMessages = [];
+
+    function handleMessage(e) {
+      const iframe = document.getElementById('webview-patch-iframe');
+      if (!iframeLoaded || !iframe) {
+        return;
       }
+      if (e.origin.startsWith('vscode-webview://')) {
+        iframe.contentWindow.postMessage(e.data, '*');
+      } else if ('{{serverUrl}}'.startsWith(e.origin)) {
+        const { type, data } = e.data;
+        console.log(TAG + ' received:', e.data);
+        if (type === '[vscode:client]:postMessage') {
+          getApi().postMessage(data);
+        } else if (type === '[vscode:client]:getState') {
+          iframe.contentWindow.postMessage(
+            {
+              type: '[vscode:client]:getState',
+              data: getApi().getState(),
+            },
+            '*',
+          );
+        } else if (type === '[vscode:client]:setState') {
+          getApi().setState(data);
+        }
+      }
+    }
 
-      function observeAttributeChanges(element, attributeName, callback) {
-        const observer = new MutationObserver(function (mutationsList) {
-          for (let mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
-              callback(mutation.target.getAttribute(attributeName));
-            }
-          }
-        });
-        observer.observe(element, { attributes: true });
-        return observer;
+    window.addEventListener('message', function (event) {
+      if (event.origin.startsWith('vscode-webview://')) {
+        cacheMessages.push(event);
+        return;
+      }
+      handleMessage(event);
+    });
+
+    let isCacheWorking = false;
+    setInterval(() => {
+      if (isCacheWorking) {
+        return;
+      }
+
+      isCacheWorking = true;
+      if (iframeLoaded) {
+        let event = cacheMessages.shift()
+        while (event) {
+          handleMessage(event);
+          event = cacheMessages.shift()
+        }
       }
+      isCacheWorking = false;
+    }, 50);
+
+    onDomReady(function () {
+      /**  @type {HTMLIFrameElement} */
+      const iframe = document.getElementById('webview-patch-iframe');
+      observeAttributeChanges(document.body, 'class', function (className) {
+        sendInitData(iframe);
+      });
 
       onDomReady(function () {
-        const iframe = document.getElementById('webview-patch-iframe');
-        observeAttributeChanges(document.body, 'class', function (className) {
-          sendInitData(iframe);
-        });
-        iframe.addEventListener('load', function (e) {
-          let interval = setInterval(() => {
-            try {
-              if (document.getElementById('_defaultStyles')) {
-                sendInitData(iframe);
-                addListeners(iframe);
-                clearInterval(interval);
-                return;
-              }
-            } catch (e) {
+        iframeLoaded = true;
+        sendInitData(iframe);
+      }, iframe.contentDocument);
+
+
+      iframe.addEventListener('load', function (e) {
+        iframeLoaded = true;
+
+        let interval = setInterval(() => {
+          try {
+            if (document.getElementById('_defaultStyles')) {
+              sendInitData(iframe);
+              // addListeners(iframe);
               clearInterval(interval);
-              console.error(e);
+              return;
             }
-          }, 10);
-        });
+          } catch (e) {
+            clearInterval(interval);
+            console.error(e);
+          }
+        }, 10);
       });
-    </script>
-  </head>
-
-  <body>
-    <div class="outer">
-      <iframe
-        id="webview-patch-iframe"
-        frameborder="0"
-        sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
-        allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write"
-        src="{{serverUrl}}"
-      ></iframe>
-    </div>
-  </body>
+    });
+  </script>
+</head>
+
+<body>
+  <div class="outer">
+    <iframe id="webview-patch-iframe" frameborder="0"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"
+      allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write" src="{{serverUrl}}"></iframe>
+  </div>
+</body>
+
 </html>
 `;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",