@tomjs/vite-plugin-vscode 5.2.1 → 6.0.0

package/README.md

@@ -82,13 +82,15 @@ Setting `recommended` will modify some preset configurations. See [PluginOptions
 code snippet, more code see examples
 
 ```ts
+import { getWebviewHtml } from 'virtual:vscode';
+
 const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
   enableScripts: true,
   localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
 });
 
 // Vite development mode and production mode inject different webview codes to reduce development work
-panel.webview.html = __getWebviewHtml__({
+panel.webview.html = getWebviewHtml({
   // vite dev mode
   serverUrl: process.env.VITE_DEV_SERVER_URL,
   // vite prod mode
@@ -178,7 +180,9 @@ export default defineConfig({
 - page one
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite dev mode
   serverUrl: process.env.VITE_DEV_SERVER_URL,
   // vite prod mode
@@ -190,7 +194,9 @@ __getWebviewHtml__({
 - page two
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite dev mode
   serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
   // vite prod mode
@@ -203,7 +209,9 @@ __getWebviewHtml__({
 - A single page uses different parameters to achieve different functions
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite dev mode
   serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
   // vite prod mode
@@ -238,11 +246,6 @@ interface WebviewHtmlOptions {
    */
   injectCode?: string;
 }
-
-/**
- * Gets the html of webview
- */
-function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 ```
 
 ### Warning
@@ -253,10 +256,6 @@ When using the `acquireVsCodeApi().getState()` method of [@types/vscode-webview]
 const value = await acquireVsCodeApi().getState();
 ```
 
-## Documentation
-
-- [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
 
 ### PluginOptions
@@ -275,18 +274,6 @@ The `recommended` option is used to set the default configuration and behavior,
 - The output directory is based on the `build.outDir` parameter of `vite`, and outputs `extension` and `src` to `dist/extension` and `dist/webview` respectively.
 - Other behaviors to be implemented
 
-#### Webview
-
-Inject [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) into vscode extension code and web client code, so that `webview` can support `HMR` during the development stage.
-
-- vite serve
-  - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode/webview';` at the top of the file that calls the `__getWebviewHtml__` method
-  - web: Add `<script>` tag to index.html and inject `@tomjs/vite-plugin-vscode/client` code
-- vite build
-  - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` at the top of the file that calls the `__getWebviewHtml__` method
-
-If is string, will set inject method name. Default is `__getWebviewHtml__`.
-
 #### devtools
 
 During development, support standalone development tool applications for `react` and `vue`, enabled by default.
@@ -443,6 +430,38 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
 ## Important Notes
 
+### v6.0.0
+
+**Breaking Updates:**
+
+Change the global `__getWebviewHtml__` method to a virtual module method called `import { getWebviewHtml } from 'virtual:vscode';`.
+
+before:
+
+```ts
+__getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+});
+```
+
+after：
+
+```ts
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+});
+```
+
 ### v5.0.0
 
 **Breaking Updates:**

package/README.zh_CN.md

@@ -82,13 +82,15 @@ npm i @tomjs/vite-plugin-vscode -D
 代码片段，更多配置看示例
 
 ```ts
+import { getWebviewHtml } from 'virtual:vscode';
+
 const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
   enableScripts: true,
   localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
 });
 
 // vite 开发模式和生产模式注入不同的webview代码，减少开发工作
-panel.webview.html = __getWebviewHtml__({
+panel.webview.html = getWebviewHtml({
   // vite 开发模式
   serverUrl: process.env.VITE_DEV_SERVER_URL,
   // vite 生产模式
@@ -177,7 +179,9 @@ export default defineConfig({
 - 页面一
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite 开发模式
   serverUrl: process.env.VITE_DEV_SERVER_URL,
   // vite 生产模式
@@ -189,7 +193,9 @@ __getWebviewHtml__({
 - 页面二
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite 开发模式
   serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
   // vite 生产模式
@@ -202,7 +208,9 @@ __getWebviewHtml__({
 - 单个页面通过不同参数来实现不同功能
 
 ```ts
-__getWebviewHtml__({
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
   // vite 开发模式
   serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
   // vite 生产模式
@@ -237,11 +245,6 @@ interface WebviewHtmlOptions {
    */
   injectCode?: string;
 }
-
-/**
- * 获取webview的html
- */
-function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 ```
 
 ### 警告
@@ -252,10 +255,6 @@ function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 const value = await acquireVsCodeApi().getState();
 ```
 
-## 文档
-
-- [unpkg.com](https://www.unpkg.com/) 提供的 [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts).
-
 ## 参数
 
 ### PluginOptions
@@ -275,18 +274,6 @@ const value = await acquireVsCodeApi().getState();
 
 - 其他待实现的行为
 
-#### Webview
-
-在 vscode 扩展代码和 web 客户端代码中注入 [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview)，使 `webview` 在开发阶段能够支持 `HMR`。
-
-- vite serve
-  - extension: 在调用 `__getWebviewHtml__` 方法的文件顶部注入 `import __getWebviewHtml__ from '@tomjs/vscode-extension-webview';`
-  - web: 在 index.html 中添加 `<script>` 标签，注入 `@tomjs/vscode-extension-webview/client` 代码
-- vite build
-  - extension: 在调用 `__getWebviewHtml__` 方法的文件顶部注入 `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';`
-
-如果为字符串，则设置注入方法名，默认为 `__getWebviewHtml__`。
-
 #### devtools
 
 开发阶段，支持 `react` 和 `vue` 的独立开发工具应用，默认开启。
@@ -308,7 +295,6 @@ const value = await acquireVsCodeApi().getState();
 
 | 参数名 | 类型     | 默认值                                                                                                                                                           | 说明             |
 | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
-| name   | `string` | `__getWebviewHtml__`                                                                                                                                             | 注入的方法名     |
 | csp    | `string` | `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">` | webview 的 `CSP` |
 
 - `{{cspSource}}`: [webview.cspSource](https://code.visualstudio.com/api/references/vscode-api#Webview)
@@ -447,6 +433,38 @@ pnpm build
 
 ## 重要说明
 
+### v6.0.0
+
+**破坏性更新：**
+
+全局的 `__getWebviewHtml__` 方法改为 `import { getWebviewHtml } from 'virtual:vscode';` 这种虚拟模块方式调用。
+
+之前:
+
+```ts
+__getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+});
+```
+
+之后：
+
+```ts
+import { getWebviewHtml } from 'virtual:vscode';
+
+getWebviewHtml({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+});
+```
+
 ### v5.0.0
 
 **破坏性更新：**

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import { UserConfig } from "tsdown";
+import { InlineConfig } from "tsdown";
 import { PluginOption } from "vite";
 
 //#region src/types.d.ts
 /**
  * vscode extension options. See [tsdown](https://tsdown.dev/) and [Config Options](https://tsdown.dev/reference/config-options) for more information.
  */
-interface ExtensionOptions extends Omit<UserConfig, 'entry' | 'format' | 'outDir' | 'watch'> {
+interface ExtensionOptions extends Omit<InlineConfig, 'entry' | 'format' | 'outDir' | 'watch'> {
   /**
    * The extension entry file.
    * @default "extension/index.ts"
@@ -27,10 +27,6 @@ interface ExtensionOptions extends Omit<UserConfig, 'entry' | 'format' | 'outDir
  * vscode webview options.
  */
 interface WebviewOption {
-  /**
-   * The method name to inject. Default is `__getWebviewHtml__`
-   */
-  name?: string;
   /**
    * The CSP meta for the webview. Default is `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`
    */
@@ -49,22 +45,17 @@ interface PluginOptions {
    */
   recommended?: boolean;
   /**
-   * Inject code into vscode extension code and web client code, so that webview can support HMR during the development stage.
-   *
-   * - vite serve
-   *   - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode/webview';` at the top of the file that calls the `__getWebviewHtml__` method
-   *   - web: Add `<script>` tag to index.html and inject `@tomjs/vite-plugin-vscode/client` code
-   * - vite build
-   *   - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` at the top of the file that calls the `__getWebviewHtml__` method
-   *
-   * If is string, will set inject method name. Default is '__getWebviewHtml__'.
+   * During development, inject code into both `vscode extension code` and `web page` code to support `HMR`;
    *
+   * During production builds, inject the final generated `index.html` code into the `vscode extension code` to minimize manual effort.
    *
    * @example
    * extension file
    * ```ts
+   *import {getWebviewHtml} from 'virtual:vscode';
+   *
    *function setupHtml(webview: Webview, context: ExtensionContext) {
-   *  return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
+   *  return getWebviewHtml({serverUrl:process.env.VITE_DEV_SERVER_URL, webview, context});
    *}
    * ```
    */

package/dist/index.js

@@ -1,9 +1,8 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import fs from "node:fs";
-import os from "node:os";
 import { cwd } from "node:process";
-import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
+import { readFileSync, readJsonSync } from "@tomjs/node";
 import { execa } from "execa";
 import merge from "lodash.merge";
 import { parse } from "node-html-parser";
@@ -19,8 +18,8 @@ const __dirname = /* @__PURE__ */ getDirname();
 //#region src/constants.ts
 const PLUGIN_NAME = "tomjs:vscode";
 const ORG_NAME = "@tomjs";
-const PACKAGE_NAME = "@tomjs/vite-plugin-vscode";
-const WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
+const VIRTUAL_MODULE_ID = "virtual:vscode";
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
 
 //#endregion
 //#region src/logger.ts
@@ -92,9 +91,7 @@ function preMergeOptions(options) {
 			treeshake: !isDev,
 			publint: false,
 			config: false,
-			outExtensions() {
-				return { js: ".js" };
-			},
+			fixedExtension: false,
 			external: ["vscode"]
 		}
 	}, options);
@@ -116,19 +113,10 @@ function preMergeOptions(options) {
 	}
 	if (!isDev && !opt.skipNodeModulesBundle && !opt.noExternal) opt.noExternal = Object.keys(pkg.dependencies || {}).concat(Object.keys(pkg.peerDependencies || {}));
 	opts.extension = opt;
-	if (opts.webview !== false) {
-		let name = WEBVIEW_METHOD_NAME;
-		if (typeof opts.webview === "string") name = opts.webview ?? WEBVIEW_METHOD_NAME;
-		opts.webview = Object.assign({ name }, opts.webview);
-	}
 	return opts;
 }
-const prodCachePkgName = `${PACKAGE_NAME}-inject`;
 function genProdWebviewCode(cache, webview) {
 	webview = Object.assign({}, webview);
-	const prodCacheFolder = path.join(cwd(), "node_modules", prodCachePkgName);
-	emptyDirSync(prodCacheFolder);
-	const destFile = path.join(prodCacheFolder, "index.js");
 	function handleHtmlCode(html) {
 		const root = parse(html);
 		const head = root.querySelector("head");
@@ -150,7 +138,7 @@ function genProdWebviewCode(cache, webview) {
 		}
 		return root.removeWhitespace().toString();
 	}
-	const code = `import { Uri } from 'vscode';
+	return `import { Uri } from 'vscode';
 
 ${`const htmlCode = {
     ${Object.keys(cache).map((s) => `'${s}': \`${handleHtmlCode(cache[s])}\`,`).join("\n")}
@@ -177,12 +165,6 @@ export default function getWebviewHtml(options){
   return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
 }
   `;
-	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);
@@ -208,8 +190,8 @@ function useVSCodePlugin(options) {
 			rollupOptions: { output: rollupOutput }
 		} };
 	};
-	let devWebviewClient;
-	if (opts.webview) devWebviewClient = readFileSync(path.join(__dirname, "client.iife.js"));
+	let devWebviewClientCode;
+	let devWebviewVirtualCode;
 	let resolvedConfig;
 	const prodHtmlCache = {};
 	let devtoolsFlag = false;
@@ -221,6 +203,10 @@ function useVSCodePlugin(options) {
 		},
 		configResolved(config) {
 			resolvedConfig = config;
+			if (opts.webview) {
+				devWebviewClientCode = readFileSync(path.join(__dirname, "client.iife.js"));
+				devWebviewVirtualCode = readFileSync(path.join(__dirname, "webview.js"));
+			}
 		},
 		configureServer(server) {
 			if (!server || !server.httpServer) return;
@@ -246,10 +232,11 @@ function useVSCodePlugin(options) {
 					logLevel: logLevel ?? "silent",
 					plugins: !webview ? [] : [{
 						name: `${ORG_NAME}:vscode:inject`,
-						transform(code, id) {
-							if (id.includes("node_modules")) return;
-							if (code.includes(`${webview.name}(`)) return `import ${webview.name} from '${PACKAGE_NAME}/webview';\n${code}`;
-							return code;
+						resolveId(id) {
+							if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;
+						},
+						load(id) {
+							if (id === RESOLVED_VIRTUAL_MODULE_ID) return devWebviewVirtualCode;
 						}
 					}],
 					async onSuccess(config, signal) {
@@ -275,7 +262,7 @@ function useVSCodePlugin(options) {
 					logger.warn("Only support react-devtools and vue-devtools!");
 				}
 			}
-			return html.replace(/<head>/i, `<head><script>${devWebviewClient}<\/script>`);
+			return html.replace(/<head>/i, `<head><script>${devWebviewClientCode}<\/script>`);
 		}
 	}, {
 		name: "@tomjs:vscode",
@@ -293,9 +280,9 @@ function useVSCodePlugin(options) {
 			return html;
 		},
 		closeBundle() {
-			let webviewPath;
+			let webviewVirtualCode;
 			const webview = opts?.webview;
-			if (webview) webviewPath = genProdWebviewCode(prodHtmlCache, webview);
+			if (webview) webviewVirtualCode = genProdWebviewCode(prodHtmlCache, webview);
 			let outDir = resolvedConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
 			if (outDir.startsWith("/")) outDir = outDir.substring(1);
 			const env = {
@@ -309,10 +296,11 @@ function useVSCodePlugin(options) {
 				logLevel: logLevel ?? "silent",
 				plugins: !webview ? [] : [{
 					name: `${ORG_NAME}:vscode:inject`,
-					transform(code, id) {
-						if (id.includes("node_modules")) return;
-						if (code.includes(`${webview.name}(`)) return `import ${webview.name} from "${webviewPath}";\n${code}`;
-						return code;
+					resolveId(id) {
+						if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;
+					},
+					load(id) {
+						if (id === RESOLVED_VIRTUAL_MODULE_ID) return webviewVirtualCode;
 					}
 				}],
 				async onSuccess(config, signal) {

package/dist/webview.js

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

package/env-webview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Inject some methods such as `getWebviewHtml`
+ */
+declare module 'virtual:vscode' {
+  import type { ExtensionContext, Webview } from 'vscode';
+
+  export interface WebviewHtmlOptions {
+    /**
+     * `[vite serve]` The url of the vite dev server. Please use `process.env.VITE_DEV_SERVER_URL`
+     */
+    serverUrl?: string;
+    /**
+     * `[vite build]` The Webview instance of the extension.
+     */
+    webview: Webview;
+    /**
+     * `[vite build]` The ExtensionContext instance of the extension.
+     */
+    context: ExtensionContext;
+    /**
+     * `[vite build]` vite build.rollupOptions.input name. Default is `index`.
+     */
+    inputName?: string;
+    /**
+     * `[vite build]` Inject code into the afterbegin of the head element.
+     */
+    injectCode?: string;
+  }
+
+  /**
+   * Get the html of the webview.
+   *
+   * @param options
+   */
+  export const getWebviewHtml: (options?: WebviewHtmlOptions) => string;
+
+  export default getWebviewHtml;
+}

package/env.d.ts

@@ -1,4 +1,6 @@
-import type { ExtensionContext, Webview } from 'vscode';
+/// <reference types="./env-webview.d.ts" />
+import type { WebviewHtmlOptions } from 'virtual:vscode';
+
 // Make this a module
 export {};
 declare global {
@@ -24,31 +26,25 @@ declare global {
     }
   }
 
-  interface WebviewHtmlOptions {
-    /**
-     * `[vite serve]` The url of the vite dev server. Please use `process.env.VITE_DEV_SERVER_URL`
-     */
-    serverUrl?: string;
-    /**
-     * `[vite build]` The Webview instance of the extension.
-     */
-    webview: Webview;
-    /**
-     * `[vite build]` The ExtensionContext instance of the extension.
-     */
-    context: ExtensionContext;
-    /**
-     * `[vite build]` vite build.rollupOptions.input name. Default is `index`.
-     */
-    inputName?: string;
-    /**
-     * `[vite build]` Inject code into the afterbegin of the head element.
-     */
-    injectCode?: string;
-  }
-
   /**
-   * Gets the html of webview
+   * Gets the html of webview. It's deprecated. Please use `import { getWebviewHtml } from 'virtual:vscode';`.
+   *
+   * @example
+   *  import type { ExtensionContext, Webview } from 'vscode';
+   *  import { getWebviewHtml } from 'virtual:vscode';
+   *  import { window } from 'vscode';
+   *
+   *  export class WebviewHelper {
+   *    public static setupHtml(webview: Webview, context: ExtensionContext) {
+   *      return getWebviewHtml({
+   *        serverUrl: process.env.VITE_DEV_SERVER_URL,
+   *        webview,
+   *        context,
+   *        injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
+   *    });
+   *  }
+   *
+   * @deprecated
    */
   function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
   "type": "module",
-  "version": "5.2.1",
+  "version": "6.0.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "author": {
     "name": "Tom Gao",
@@ -21,8 +21,7 @@
     "extension",
     "webview",
     "esm",
-    "cjs",
-    "mjs"
+    "cjs"
   ],
   "exports": {
     ".": "./dist/index.js",
@@ -33,8 +32,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "env.d.ts"
+    "*.d.ts",
+    "dist"
   ],
   "engines": {
     "node": ">=18.19"
@@ -44,27 +43,24 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
+    "@types/vscode": "^1.56.0",
     "vite": ">=2"
   },
   "dependencies": {
     "@tomjs/logger": "^1.4.0",
     "@tomjs/node": "^2.2.3",
-    "dayjs": "^1.11.19",
     "execa": "^9.6.1",
-    "kolorist": "^1.8.0",
-    "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "node-html-parser": "^7.0.1",
     "tsdown": "~0.18.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^6.7.1",
+    "@antfu/eslint-config": "^6.7.3",
     "@commitlint/cli": "^20.2.0",
     "@tomjs/commitlint": "^5.0.0",
     "@tomjs/eslint": "^6.0.0",
     "@tomjs/stylelint": "^7.0.0",
     "@tomjs/tsconfig": "^2.2.0",
-    "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.19.27",
     "@vitejs/plugin-vue": "^6.0.3",