@tomjs/vite-plugin-vscode 2.3.0 → 2.4.0

package/README.md

@@ -6,7 +6,7 @@
 
 > Use `vue`/`react` to develop [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel), supporting `esm` and `cjs`.
 
-In development mode, inject the code of [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) into `vscode extension code` and `web page code`, use To support `HMR`; during production build, the final generated `index.html` code is injected into `vscode extension code` to reduce the workload.
+In development mode, inject the same code of [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) into `vscode extension code` and `web page code`, use To support `HMR`; during production build, the final generated `index.html` code is injected into `vscode extension code` to reduce the workload.
 
 ## Features
 
@@ -27,7 +27,7 @@ pnpm add @tomjs/vite-plugin-vscode -D
 yarn add @tomjs/vite-plugin-vscode -D
 
 # npm
-npm i @tomjs/vite-plugin-vscode --save-dev
+npm i @tomjs/vite-plugin-vscode -D
 ```
 
 ## Usage

package/README.zh_CN.md

@@ -6,7 +6,7 @@
 
 > 用 `vue`/`react` 来开发 [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel) ，支持 `esm` 和 `cjs`。
 
-在开发模式时，给 `vscode 扩展代码` 和 `web 页面代码`中注入 [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) 的代码，用来支持 `HMR`；生产构建时，将最终生成的`index.html` 代码注入到 `vscode 扩展代码` 中，减少工作量。
+在开发模式时，给 `vscode 扩展代码` 和 `web 页面代码`中注入 [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) 相同的代码，用来支持 `HMR`；生产构建时，将最终生成的`index.html` 代码注入到 `vscode 扩展代码` 中，减少工作量。
 
 ## 特性
 
@@ -27,7 +27,7 @@ pnpm add @tomjs/vite-plugin-vscode -D
 yarn add @tomjs/vite-plugin-vscode -D
 
 # npm
-npm i @tomjs/vite-plugin-vscode --save-dev
+npm i @tomjs/vite-plugin-vscode -D
 ```
 
 ## 使用说明

package/dist/client.global.js

@@ -0,0 +1,92 @@
+"use strict";
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // src/webview/client.ts
+  var require_client = __commonJS({
+    "src/webview/client.ts"() {
+      if (window.top === window.self) {
+        return;
+      }
+      var TAG = "[@tomjs:vscode:client] ";
+      patchAcquireVsCodeApi();
+      function onDomReady(callback) {
+        if (document.readyState === "interactive" || document.readyState === "complete") {
+          callback();
+        } else {
+          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];
+        });
+        const defaultStyles = document.createElement("style");
+        defaultStyles.id = "_defaultStyles";
+        defaultStyles.textContent = style;
+        document.head.appendChild(defaultStyles);
+      }
+      function patchAcquireVsCodeApi() {
+        class AcquireVsCodeApi {
+          postMessage(message) {
+            console.log(TAG + " acquireVsCodeApi.postMessage:", message);
+            window.parent.postMessage({ type: "[vscode:client]:postMessage", data: message }, "*");
+          }
+          getState() {
+            console.log(TAG + " acquireVsCodeApi.getState");
+            return getStateData();
+          }
+          setState(newState) {
+            console.log(TAG + " acquireVsCodeApi.setState:", newState);
+            setStateData(newState);
+            window.parent.postMessage({ type: "[vscode:client]:setSate", data: newState }, "*");
+          }
+        }
+        console.log(TAG + "patch acquireVsCodeApi");
+        let api;
+        window.acquireVsCodeApi = () => {
+          if (!api) {
+            api = new AcquireVsCodeApi();
+            return api;
+          } else {
+            return api;
+          }
+        };
+      }
+      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)) {
+          return;
+        }
+        onDomReady(function() {
+          if (type === INIT_TYPE) {
+            patchInitData(data);
+          } else if (type === GET_STATE_TYPE) {
+            localStorage.setItem("vscode.state", JSON.stringify(data));
+          }
+        });
+      });
+    }
+  });
+  require_client();
+})();

package/dist/index.js

@@ -1,16 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/index.ts
 var _fs = require('fs'); var _fs2 = _interopRequireDefault(_fs);
+var _os = require('os'); var _os2 = _interopRequireDefault(_os);
 var _path = require('path'); var _path2 = _interopRequireDefault(_path);
 var _process = require('process');
 var _lodashclonedeep = require('lodash.clonedeep'); var _lodashclonedeep2 = _interopRequireDefault(_lodashclonedeep);
 var _lodashmerge = require('lodash.merge'); var _lodashmerge2 = _interopRequireDefault(_lodashmerge);
 var _nodehtmlparser = require('node-html-parser');
 var _tsup = require('tsup');
+var _node = require('@tomjs/node');
 
 // src/constants.ts
 var PLUGIN_NAME = "tomjs:vscode";
 var PACKAGE_NAME = "@tomjs/vite-plugin-vscode";
-var WEBVIEW_PACKAGE_NAME = "@tomjs/vscode-extension-webview";
 var WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
 
 // src/logger.ts
@@ -56,22 +57,6 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
-var _child_process = require('child_process');
-
-var _module = require('module');
-
-
-function readJson(path3) {
-  if (_fs2.default.existsSync(path3)) {
-    return JSON.parse(_fs2.default.readFileSync(path3, "utf8"));
-  }
-}
-function emptyPath(dest) {
-  if (_fs2.default.existsSync(dest)) {
-    _fs2.default.rmSync(dest, { recursive: true });
-  }
-  _fs2.default.mkdirSync(dest, { recursive: true });
-}
 function resolveHostname(hostname) {
   const loopbackHosts = /* @__PURE__ */ new Set([
     "localhost",
@@ -91,46 +76,11 @@ function resolveServerUrl(server) {
     const options = server.config.server;
     const protocol = options.https ? "https" : "http";
     const devBase = server.config.base;
-    const path3 = typeof options.open === "string" ? options.open : devBase;
-    const url = path3.startsWith("http") ? path3 : `${protocol}://${hostname}:${port}${path3}`;
+    const path2 = typeof options.open === "string" ? options.open : devBase;
+    const url = path2.startsWith("http") ? path2 : `${protocol}://${hostname}:${port}${path2}`;
     return url;
   }
 }
-function getWebviewNpmPath() {
-  let npmPath = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", WEBVIEW_PACKAGE_NAME);
-  if (!_fs2.default.existsSync(npmPath)) {
-    try {
-      const res = _child_process.spawnSync.call(void 0, 
-        process.platform === "win32" ? "pnpm.cmd" : "pnpm",
-        ["list", "--dev", "--depth=1", "--json"],
-        {
-          // stdio: ['inherit', 'ignore'],
-          cwd: process.cwd(),
-          encoding: "utf-8"
-        }
-      );
-      if (res.status === 0 && res.stdout) {
-        const list = JSON.parse(res.stdout.trim());
-        if (list.length === 0) {
-          return;
-        }
-        const self = (list[0].devDependencies || {})[PACKAGE_NAME];
-        if (!self) {
-          return;
-        }
-        const dep = self.dependencies[WEBVIEW_PACKAGE_NAME];
-        if (dep) {
-          npmPath = dep.path;
-        }
-      }
-    } catch (e) {
-      npmPath = "";
-    }
-    if (npmPath) {
-      return _path2.default.join(npmPath, "dist");
-    }
-  }
-}
 
 // src/index.ts
 var isDev = process.env.NODE_ENV === "development";
@@ -140,7 +90,7 @@ function getPkg() {
   if (!_fs2.default.existsSync(pkgFile)) {
     throw new Error("Main file is not specified, and no package.json found");
   }
-  const pkg = readJson(pkgFile);
+  const pkg = _node.readJsonSync.call(void 0, pkgFile);
   if (!pkg.main) {
     throw new Error("Main file is not specified, please check package.json");
   }
@@ -183,9 +133,7 @@ function preMergeOptions(options) {
   } else {
     opt.minify ??= true;
   }
-  opt.external = ["vscode", WEBVIEW_PACKAGE_NAME].concat(
-    _nullishCoalesce(opt.external, () => ( []))
-  );
+  opt.external = ["vscode"].concat(_nullishCoalesce(opt.external, () => ( [])));
   if (!opt.skipNodeModulesBundle) {
     opt.noExternal = Object.keys(pkg.dependencies || {}).concat(
       Object.keys(pkg.peerDependencies || {})
@@ -205,7 +153,7 @@ var prodCachePkgName = `${PACKAGE_NAME}-inject`;
 function genProdWebviewCode(cache, webview) {
   webview = Object.assign({}, webview);
   const prodCacheFolder = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", prodCachePkgName);
-  emptyPath(prodCacheFolder);
+  _node.emptyDirSync.call(void 0, prodCacheFolder);
   const destFile = _path2.default.join(prodCacheFolder, "index.ts");
   function handleHtmlCode(html) {
     const root = _nodehtmlparser.parse.call(void 0, html);
@@ -263,7 +211,13 @@ export default function getWebviewHtml(webview: Webview, context: ExtensionConte
   `
   );
   _fs2.default.writeFileSync(destFile, code, { encoding: "utf8" });
-  return destFile.replaceAll("\\", "/");
+  return fixWindowsPath(destFile);
+}
+function fixWindowsPath(webviewPath) {
+  if (_os2.default.platform() === "win32") {
+    webviewPath = webviewPath.replaceAll("\\", "/");
+  }
+  return webviewPath;
 }
 function useVSCodePlugin(options) {
   const opts = preMergeOptions(options);
@@ -297,21 +251,9 @@ function useVSCodePlugin(options) {
       }
     };
   };
-  let webviewClient;
-  let webviewNpmPath;
+  let devWebviewClient;
   if (opts.webview) {
-    webviewNpmPath = getWebviewNpmPath();
-    if (!webviewNpmPath || !_fs2.default.existsSync(webviewNpmPath)) {
-      logger.warn(`[${WEBVIEW_PACKAGE_NAME}] is not installed, please install it first!`);
-    } else {
-      const fileName = "client.global.js";
-      const clientFile = _path2.default.join(webviewNpmPath, fileName);
-      if (!_fs2.default.existsSync(clientFile)) {
-        logger.warn(`[${fileName}] is does not exist, please update the package!`);
-      } else {
-        webviewClient = _fs2.default.readFileSync(clientFile, "utf-8");
-      }
-    }
+    devWebviewClient = _node.readFileSync.call(void 0, _path2.default.join(__dirname, "client.global.js"));
   }
   let buildConfig;
   const prodHtmlCache = {};
@@ -349,7 +291,7 @@ function useVSCodePlugin(options) {
                       const file = _fs2.default.readFileSync(args.path, "utf-8");
                       if (file.includes(`${webview.name}(`)) {
                         return {
-                          contents: `import ${webview.name} from '@tomjs/vscode-extension-webview';
+                          contents: `import ${webview.name} from '${PACKAGE_NAME}/webview';
 ` + file,
                           loader: "ts"
                         };
@@ -374,10 +316,10 @@ function useVSCodePlugin(options) {
         });
       },
       transformIndexHtml(html) {
-        if (!opts.webview || !webviewClient) {
+        if (!opts.webview) {
           return html;
         }
-        return html.replace(/<\/title>/i, `</title><script>${webviewClient}</script>`);
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
     {

package/dist/index.mjs

@@ -1,16 +1,24 @@
+// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.3.100_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
+import { fileURLToPath } from "url";
+import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
 // src/index.ts
-import fs2 from "fs";
+import fs from "fs";
+import os from "os";
 import path2 from "path";
-import { cwd as cwd2 } from "process";
+import { cwd } from "process";
 import cloneDeep from "lodash.clonedeep";
 import merge from "lodash.merge";
 import { parse as htmlParser } from "node-html-parser";
 import { build as tsupBuild } from "tsup";
+import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
 
 // src/constants.ts
 var PLUGIN_NAME = "tomjs:vscode";
 var PACKAGE_NAME = "@tomjs/vite-plugin-vscode";
-var WEBVIEW_PACKAGE_NAME = "@tomjs/vscode-extension-webview";
 var WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
 
 // src/logger.ts
@@ -56,21 +64,6 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
-import { spawnSync } from "child_process";
-import fs from "fs";
-import path from "path";
-import { cwd } from "process";
-function readJson(path3) {
-  if (fs.existsSync(path3)) {
-    return JSON.parse(fs.readFileSync(path3, "utf8"));
-  }
-}
-function emptyPath(dest) {
-  if (fs.existsSync(dest)) {
-    fs.rmSync(dest, { recursive: true });
-  }
-  fs.mkdirSync(dest, { recursive: true });
-}
 function resolveHostname(hostname) {
   const loopbackHosts = /* @__PURE__ */ new Set([
     "localhost",
@@ -95,51 +88,16 @@ function resolveServerUrl(server) {
     return url;
   }
 }
-function getWebviewNpmPath() {
-  let npmPath = path.join(cwd(), "node_modules", WEBVIEW_PACKAGE_NAME);
-  if (!fs.existsSync(npmPath)) {
-    try {
-      const res = spawnSync(
-        process.platform === "win32" ? "pnpm.cmd" : "pnpm",
-        ["list", "--dev", "--depth=1", "--json"],
-        {
-          // stdio: ['inherit', 'ignore'],
-          cwd: process.cwd(),
-          encoding: "utf-8"
-        }
-      );
-      if (res.status === 0 && res.stdout) {
-        const list = JSON.parse(res.stdout.trim());
-        if (list.length === 0) {
-          return;
-        }
-        const self = (list[0].devDependencies || {})[PACKAGE_NAME];
-        if (!self) {
-          return;
-        }
-        const dep = self.dependencies[WEBVIEW_PACKAGE_NAME];
-        if (dep) {
-          npmPath = dep.path;
-        }
-      }
-    } catch {
-      npmPath = "";
-    }
-    if (npmPath) {
-      return path.join(npmPath, "dist");
-    }
-  }
-}
 
 // src/index.ts
 var isDev = process.env.NODE_ENV === "development";
 var logger = createLogger();
 function getPkg() {
   const pkgFile = path2.resolve(process.cwd(), "package.json");
-  if (!fs2.existsSync(pkgFile)) {
+  if (!fs.existsSync(pkgFile)) {
     throw new Error("Main file is not specified, and no package.json found");
   }
-  const pkg = readJson(pkgFile);
+  const pkg = readJsonSync(pkgFile);
   if (!pkg.main) {
     throw new Error("Main file is not specified, please check package.json");
   }
@@ -182,9 +140,7 @@ function preMergeOptions(options) {
   } else {
     opt.minify ??= true;
   }
-  opt.external = ["vscode", WEBVIEW_PACKAGE_NAME].concat(
-    opt.external ?? []
-  );
+  opt.external = ["vscode"].concat(opt.external ?? []);
   if (!opt.skipNodeModulesBundle) {
     opt.noExternal = Object.keys(pkg.dependencies || {}).concat(
       Object.keys(pkg.peerDependencies || {})
@@ -203,8 +159,8 @@ function preMergeOptions(options) {
 var prodCachePkgName = `${PACKAGE_NAME}-inject`;
 function genProdWebviewCode(cache, webview) {
   webview = Object.assign({}, webview);
-  const prodCacheFolder = path2.join(cwd2(), "node_modules", prodCachePkgName);
-  emptyPath(prodCacheFolder);
+  const prodCacheFolder = path2.join(cwd(), "node_modules", prodCachePkgName);
+  emptyDirSync(prodCacheFolder);
   const destFile = path2.join(prodCacheFolder, "index.ts");
   function handleHtmlCode(html) {
     const root = htmlParser(html);
@@ -261,8 +217,14 @@ export default function getWebviewHtml(webview: Webview, context: ExtensionConte
 }
   `
   );
-  fs2.writeFileSync(destFile, code, { encoding: "utf8" });
-  return destFile.replaceAll("\\", "/");
+  fs.writeFileSync(destFile, code, { encoding: "utf8" });
+  return fixWindowsPath(destFile);
+}
+function fixWindowsPath(webviewPath) {
+  if (os.platform() === "win32") {
+    webviewPath = webviewPath.replaceAll("\\", "/");
+  }
+  return webviewPath;
 }
 function useVSCodePlugin(options) {
   const opts = preMergeOptions(options);
@@ -296,21 +258,9 @@ function useVSCodePlugin(options) {
       }
     };
   };
-  let webviewClient;
-  let webviewNpmPath;
+  let devWebviewClient;
   if (opts.webview) {
-    webviewNpmPath = getWebviewNpmPath();
-    if (!webviewNpmPath || !fs2.existsSync(webviewNpmPath)) {
-      logger.warn(`[${WEBVIEW_PACKAGE_NAME}] is not installed, please install it first!`);
-    } else {
-      const fileName = "client.global.js";
-      const clientFile = path2.join(webviewNpmPath, fileName);
-      if (!fs2.existsSync(clientFile)) {
-        logger.warn(`[${fileName}] is does not exist, please update the package!`);
-      } else {
-        webviewClient = fs2.readFileSync(clientFile, "utf-8");
-      }
-    }
+    devWebviewClient = readFileSync(path2.join(__dirname, "client.global.js"));
   }
   let buildConfig;
   const prodHtmlCache = {};
@@ -345,10 +295,10 @@ function useVSCodePlugin(options) {
                   name: "@tomjs:vscode:inject",
                   setup(build) {
                     build.onLoad({ filter: /\.ts$/ }, async (args) => {
-                      const file = fs2.readFileSync(args.path, "utf-8");
+                      const file = fs.readFileSync(args.path, "utf-8");
                       if (file.includes(`${webview.name}(`)) {
                         return {
-                          contents: `import ${webview.name} from '@tomjs/vscode-extension-webview';
+                          contents: `import ${webview.name} from '${PACKAGE_NAME}/webview';
 ` + file,
                           loader: "ts"
                         };
@@ -373,10 +323,10 @@ function useVSCodePlugin(options) {
         });
       },
       transformIndexHtml(html) {
-        if (!opts.webview || !webviewClient) {
+        if (!opts.webview) {
           return html;
         }
-        return html.replace(/<\/title>/i, `</title><script>${webviewClient}</script>`);
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
     {
@@ -403,7 +353,7 @@ function useVSCodePlugin(options) {
         if (webview) {
           webviewPath = genProdWebviewCode(prodHtmlCache, webview);
         }
-        let outDir = buildConfig.build.outDir.replace(cwd2(), "").replaceAll("\\", "/");
+        let outDir = buildConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
           outDir = outDir.substring(1);
         }
@@ -422,7 +372,7 @@ function useVSCodePlugin(options) {
                 name: "@tomjs:vscode:inject",
                 setup(build) {
                   build.onLoad({ filter: /\.ts$/ }, async (args) => {
-                    const file = fs2.readFileSync(args.path, "utf-8");
+                    const file = fs.readFileSync(args.path, "utf-8");
                     if (file.includes(`${webview.name}(`)) {
                       return {
                         contents: `import ${webview.name} from \`${webviewPath}\`;

package/dist/webview.d.mts

@@ -0,0 +1,13 @@
+interface WebviewHtmlDevOptions {
+    /**
+     * local server url
+     */
+    serverUrl: string;
+}
+/**
+ *
+ * @param options serverUrl string or object options
+ */
+declare function getHtml(options: string | WebviewHtmlDevOptions): string;
+
+export { WebviewHtmlDevOptions, getHtml as default, getHtml };

package/dist/webview.d.ts

@@ -0,0 +1,13 @@
+interface WebviewHtmlDevOptions {
+    /**
+     * local server url
+     */
+    serverUrl: string;
+}
+/**
+ *
+ * @param options serverUrl string or object options
+ */
+declare function getHtml(options: string | WebviewHtmlDevOptions): string;
+
+export { WebviewHtmlDevOptions, getHtml as default, getHtml };

package/dist/webview.js

@@ -0,0 +1,165 @@
+"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;
+      }
+
+      .outer {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+
+    <script type="module" id="webview-patch">
+      const TAG = '[@tomjs:vscode:extension] ';
+
+      function onDomReady(callback) {
+        if (document.readyState === 'interactive' || document.readyState === 'complete') {
+          callback();
+        } else {
+          document.addEventListener('DOMContentLoaded', callback);
+        }
+      }
+
+      let vsCodeApi;
+
+      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];
+        });
+
+        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;
+      }
+
+      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) {
+              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>
+</html>
+`;
+
+// src/webview/webview.ts
+function getHtml(options) {
+  const opts = {
+    serverUrl: ""
+  };
+  if (typeof options === "string") {
+    opts.serverUrl = options;
+  } else {
+    Object.assign(opts, options);
+  }
+  return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
+}
+var webview_default = getHtml;
+
+
+
+exports.default = webview_default; exports.getHtml = getHtml;

package/dist/webview.mjs

@@ -0,0 +1,165 @@
+// 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;
+      }
+
+      .outer {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+
+    <script type="module" id="webview-patch">
+      const TAG = '[@tomjs:vscode:extension] ';
+
+      function onDomReady(callback) {
+        if (document.readyState === 'interactive' || document.readyState === 'complete') {
+          callback();
+        } else {
+          document.addEventListener('DOMContentLoaded', callback);
+        }
+      }
+
+      let vsCodeApi;
+
+      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];
+        });
+
+        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;
+      }
+
+      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) {
+              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>
+</html>
+`;
+
+// src/webview/webview.ts
+function getHtml(options) {
+  const opts = {
+    serverUrl: ""
+  };
+  if (typeof options === "string") {
+    opts.serverUrl = options;
+  } else {
+    Object.assign(opts, options);
+  }
+  return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
+}
+var webview_default = getHtml;
+export {
+  webview_default as default,
+  getHtml
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",
@@ -23,10 +23,27 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
+      "require": {
+        "default": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "import": {
+        "default": "./dist/index.mjs",
+        "types": "./dist/index.d.mts"
+      }
+    },
+    "./webview": {
+      "require": {
+        "default": "./dist/webview.js",
+        "types": "./dist/webview.d.ts"
+      },
+      "import": {
+        "default": "./dist/webview.mjs",
+        "types": "./dist/webview.d.mts"
+      }
+    },
+    "./client": "./dist/client.global.js",
+    "./env": "./env.d.ts"
   },
   "files": [
     "dist",
@@ -44,8 +61,10 @@
     "url": "git+https://github.com/tomjs/vite-plugin-vscode.git"
   },
   "dependencies": {
+    "@tomjs/node": "^2.2.0",
     "@tomjs/vscode-extension-webview": "^1.2.0",
     "dayjs": "^1.11.10",
+    "execa": "^5.1.1",
     "kolorist": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
@@ -77,8 +96,9 @@
     "vite": ">=2"
   },
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
+    "dev": "pnpm clean && tsup --watch",
+    "build": "pnpm clean && tsup",
+    "clean": "rimraf ./dist",
     "lint": "run-s lint:eslint lint:stylelint lint:prettier",
     "lint:eslint": "eslint \"{src,scripts,examples}/**/*.ts\" *.{js,cjs,ts} --fix --cache",
     "lint:stylelint": "stylelint \"examples/**/*.{css,scss,less,vue,html}\" --fix --cache",