@tomjs/vite-plugin-vscode 3.2.1 → 4.1.0

package/README.md

@@ -13,11 +13,16 @@ In development mode, inject the same code of [@tomjs/vscode-extension-webview](h
 - Use [tsup](https://github.com/egoist/tsup) to quickly build `extension code`
 - Simple configuration, focus on business
 - Support `esm` and `cjs`
+- Support ESM extension (vscode `v1.100.0+`)
 - Support webview `HMR`
 - Support `acquireVsCodeApi` of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview)
 - Support [Multi-Page App](https://vitejs.dev/guide/build.html#multi-page-app)
 - Supports `vue` and `react` and other [frameworks](https://cn.vitejs.dev/guide/#trying-vite-online) supported by `vite`
 
+### ESM extension
+
+The NodeJS extension host now (`v1.100.0+`) supports extensions that use JavaScript-modules (ESM). All it needs is the `"type": "module"` entry in your extension's `package.json` file. With that, the JavaScript code can use `import` and `export` statements, including the special module `import('vscode')`.
+
 ## Install
 
 ```bash
@@ -83,9 +88,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
 });
 
 // Vite development mode and production mode inject different webview codes to reduce development work
-panel.webview.html = process.env.VITE_DEV_SERVER_URL
-  ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
-  : __getWebviewHtml__(webview, context);
+panel.webview.html = __getWebviewHtml__({
+  // vite dev mode
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite prod mode
+  webview,
+  context,
+  inputName: 'index',
+  injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
+});
 ```
 
 - `package.json`
@@ -137,19 +148,20 @@ export default defineConfig({
 });
 ```
 
-### Multi-page application
+### **getWebviewHtml**
 
 See [vue-import](./examples/vue-import) example
 
 - `vite.config.ts`
 
 ```ts
+import { defineConfig } from 'vite';
 import path from 'node:path';
 import vscode from '@tomjs/vite-plugin-vscode';
 
 export default defineConfig({
+  plugins: [vscode()],
   build: {
-    plugins: [vscode()]
     rollupOptions: {
       // https://cn.vitejs.dev/guide/build.html#multi-page-app
       input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
@@ -166,39 +178,71 @@ export default defineConfig({
 - page one
 
 ```ts
-process.env.VITE_DEV_SERVER_URL
-  ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
-  : __getWebviewHtml__(webview, context);
+__getWebviewHtml__({
+  // vite dev mode
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite prod mode
+  webview,
+  context,
+});
 ```
 
 - page two
 
 ```ts
-process.env.VITE_DEV_SERVER_URL
-  ? __getWebviewHtml__(`${process.env.VITE_DEV_SERVER_URL}/index2.html`)
-  : __getWebviewHtml__(webview, context, 'index2');
+__getWebviewHtml__({
+  // vite dev mode
+  serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
+  // vite prod mode
+  webview,
+  context,
+  inputName: 'index2',
+});
+```
+
+- A single page uses different parameters to achieve different functions
+
+```ts
+__getWebviewHtml__({
+  // vite dev mode
+  serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
+  // vite prod mode
+  webview,
+  context,
+  injectCode: `<script>window.__id__=666;</script>`,
+});
 ```
 
 **getWebviewHtml** Description
 
 ```ts
-/**
- *  `[vite serve]` Gets the html of webview in development mode.
- * @param options serverUrl: The url of the vite dev server.
- */
-function __getWebviewHtml__(options?: string | { serverUrl: string }): string;
+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;
+}
 
 /**
- *  `[vite build]` Gets the html of webview in production mode.
- * @param webview The WebviewPanel instance of the extension.
- * @param context The ExtensionContext instance of the extension.
- * @param inputName vite build.rollupOptions.input name. Default is `index`.
+ * Gets the html of webview
  */
-function __getWebviewHtml__(
-  webview: Webview,
-  context: ExtensionContext,
-  inputName?: string,
-): string;
+function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 ```
 
 ### Warning
@@ -388,6 +432,7 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
 - [react](./examples/react): Simple react example.
 - [vue](./examples/vue): Simple vue example.
+- [vue-esm](./examples/vue-esm): Simple vue (ESM Extension) example.
 - [vue-import](./examples/vue-import): Dynamic import() and multi-page examples.
 
 ## Related
@@ -398,6 +443,12 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
 ## Important Notes
 
+### v4.0.0
+
+**Breaking Updates:**
+
+- Merge the `__getWebviewHtml__` method for development and production into one, see [getWebviewHtml](#getwebviewhtml)
+
 ### v3.0.0
 
 **Breaking Updates:**

package/README.zh_CN.md

@@ -13,11 +13,16 @@
 - 使用 [tsup](https://github.com/egoist/tsup) 快速构建 `扩展代码`
 - 配置简单，专注业务
 - 支持 `esm`和 `cjs`
+- 支持 ESM 扩展（vscode `v1.100.0+`）
 - 支持 webview `HMR`
 - 支持 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 的 `acquireVsCodeApi`
 - 支持[多页面应用](https://cn.vitejs.dev/guide/build.html#multi-page-app)
 - 支持 `vue` 、`react` 等其他 `vite` 支持的[框架](https://cn.vitejs.dev/guide/#trying-vite-online)
 
+### ESM 扩展
+
+NodeJS 扩展现在(`v1.100.0+`)支持使用 JavaScript 模块 (ESM) 的扩展。它只需要在扩展的 `package.json` 文件中添加 `"type": "module"` 条目即可。这样，JavaScript 代码就可以使用 `import` 和 `export` 语句，包括特殊的模块 `import('vscode')`
+
 ## 安装
 
 ```bash
@@ -83,13 +88,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
 });
 
 // vite 开发模式和生产模式注入不同的webview代码，减少开发工作
-function getHtml(webview: Webview, context: ExtensionContext) {
-  process.env.VITE_DEV_SERVER_URL
-    ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
-    : __getWebviewHtml__(webview, context);
-}
-
-panel.webview.html = getHtml(webview, context);
+panel.webview.html = __getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+  inputName: 'index',
+  injectCode: `<script>window.__FLAG1__=666;window.__FLAG2__=888;</script>`,
+});
 ```
 
 - `package.json`
@@ -152,8 +159,8 @@ import path from 'node:path';
 import vscode from '@tomjs/vite-plugin-vscode';
 
 export default defineConfig({
+  plugins: [vscode()],
   build: {
-    plugins: [vscode()]
     rollupOptions: {
       // https://cn.vitejs.dev/guide/build.html#multi-page-app
       input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
@@ -170,39 +177,71 @@ export default defineConfig({
 - 页面一
 
 ```ts
-process.env.VITE_DEV_SERVER_URL
-  ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
-  : __getWebviewHtml__(webview, context);
+__getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: process.env.VITE_DEV_SERVER_URL,
+  // vite 生产模式
+  webview,
+  context,
+});
 ```
 
 - 页面二
 
 ```ts
-process.env.VITE_DEV_SERVER_URL
-  ? __getWebviewHtml__(`${process.env.VITE_DEV_SERVER_URL}/index2.html`)
-  : __getWebviewHtml__(webview, context, 'index2');
+__getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,
+  // vite 生产模式
+  webview,
+  context,
+  inputName: 'index2',
+});
+```
+
+- 单个页面通过不同参数来实现不同功能
+
+```ts
+__getWebviewHtml__({
+  // vite 开发模式
+  serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,
+  // vite 生产模式
+  webview,
+  context,
+  injectCode: `<script>window.__id__=666;</script>`,
+});
 ```
 
 **getWebviewHtml** 说明
 
 ```ts
-/**
- *  `[vite serve]` 在开发模式获取webview的html
- * @param options serverUrl: vite开发服务器的url
- */
-function __getWebviewHtml__(options?: string | { serverUrl: string }): string;
+interface WebviewHtmlOptions {
+  /**
+   * `[vite serve]` vite开发服务器的url, 请用 `process.env.VITE_DEV_SERVER_URL`
+   */
+  serverUrl?: string;
+  /**
+   * `[vite build]` 扩展的 Webview 实例
+   */
+  webview: Webview;
+  /**
+   * `[vite build]` 扩展的 ExtensionContext 实例
+   */
+  context: ExtensionContext;
+  /**
+   * `[vite build]` vite build.rollupOptions.input 设置的名称. 默认 `index`.
+   */
+  inputName?: string;
+  /**
+   * `[vite build]` 向 head 元素的结束前注入代码 <head>--inject--
+   */
+  injectCode?: string;
+}
 
 /**
- *   `[vite build]` 在生产模式获取webview的html
- * @param webview 扩展的 Webview 实例
- * @param context 扩展的 ExtensionContext 实例
- * @param inputName vite build.rollupOptions.input 设置的名称. 默认 `index`.
+ * 获取webview的html
  */
-function __getWebviewHtml__(
-  webview: Webview,
-  context: ExtensionContext,
-  inputName?: string,
-): string;
+function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 ```
 
 ### 警告
@@ -397,6 +436,7 @@ pnpm build
 
 - [react](./examples/react)：简单的 react 示例。
 - [vue](./examples/vue)：简单的 vue 示例。
+- [vue-esm](./examples/vue-esm)：简单的 vue（ESM 扩展）示例。
 - [vue-import](./examples/vue-import)：动态 import() 和多页面示例。
 
 ## 关联
@@ -407,6 +447,12 @@ pnpm build
 
 ## 重要说明
 
+### v4.0.0
+
+**破坏性更新：**
+
+- 开发和生产的 `__getWebviewHtml__` 方法合并为同一个，参考 [getWebviewHtml](#getwebviewhtml)
+
 ### v3.0.0
 
 **破坏性更新：**

package/dist/client.global.js

@@ -1,103 +1,93 @@
 "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;
+  if (window.top === window.self) {
+    throw new Error("[vscode:client]: must run in vscode webview");
+  }
+  var TAG = "[@tomjs:vscode:client] ";
+  patchAcquireVsCodeApi();
+  function onDomReady(callback) {
+    if (document.readyState === "interactive" || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  function patchInitData(data) {
+    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);
+    });
+  }
+  var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
+  function patchAcquireVsCodeApi() {
+    class AcquireVsCodeApi {
+      postMessage(message) {
+        console.log(TAG, "mock acquireVsCodeApi.postMessage:", message);
+        window.parent.postMessage({ type: POST_MESSAGE_TYPE, data: message }, "*");
       }
-      var TAG = "[@tomjs:vscode:client] ";
-      patchAcquireVsCodeApi();
-      function onDomReady(callback) {
-        if (document.readyState === "interactive" || document.readyState === "complete") {
-          callback();
-        } else {
-          document.addEventListener("DOMContentLoaded", callback);
-        }
+      getState() {
+        console.log(TAG, "mock acquireVsCodeApi.getState");
+        const state = sessionStorage.getItem("vscodeState");
+        return state ? JSON.parse(state) : void 0;
       }
-      function patchInitData(data) {
-        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);
-        });
+      setState(newState) {
+        console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
+        sessionStorage.setItem("vscodeState", JSON.stringify(newState));
+        return newState;
       }
-      var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
-      function patchAcquireVsCodeApi() {
-        class AcquireVsCodeApi {
-          postMessage(message) {
-            console.log(TAG, "mock acquireVsCodeApi.postMessage:", message);
-            window.parent.postMessage({ type: POST_MESSAGE_TYPE, data: message }, "*");
-          }
-          getState() {
-            console.log(TAG, "mock acquireVsCodeApi.getState");
-            const state = sessionStorage.getItem("vscodeState");
-            return state ? JSON.parse(state) : void 0;
-          }
-          setState(newState) {
-            console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
-            sessionStorage.setItem("vscodeState", JSON.stringify(newState));
-            return newState;
-          }
-        }
-        console.log(TAG, "patch acquireVsCodeApi");
-        let api;
-        window.acquireVsCodeApi = () => {
-          if (!api) {
-            api = new AcquireVsCodeApi();
-            return api;
-          } else {
-            return api;
-          }
-        };
+    }
+    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";
-      window.addEventListener("message", (e) => {
-        const { type, data } = e.data || {};
-        if (!e.origin.startsWith("vscode-webview://") || type !== INIT_TYPE) {
-          return;
-        }
-        patchInitData(data);
-      });
-      var KEYBOARD_EVENT_TYPE = "[vscode:client]:commands";
-      var isMac = navigator.userAgent.indexOf("Macintosh") >= 0;
-      document.addEventListener("keydown", (e) => {
-        console.log(e);
-        const { metaKey, shiftKey, ctrlKey, altKey, key } = e;
-        if (key === "F1") {
-          window.parent.postMessage({ type: KEYBOARD_EVENT_TYPE, data: "F1" }, "*");
-        } else if (isMac && metaKey && !altKey && !ctrlKey) {
-          if (shiftKey) {
-            if (key === "z") {
-              document.execCommand("redo");
-            }
-          } else if (key === "a") {
-            document.execCommand("selectAll");
-          } else if (key === "c") {
-            document.execCommand("copy");
-          } else if (key === "v") {
-            document.execCommand("paste");
-          } else if (key === "x") {
-            document.execCommand("cut");
-          } else if (key === "z") {
-            document.execCommand("undo");
-          }
+    };
+  }
+  var INIT_TYPE = "[vscode:extension]:init";
+  window.addEventListener("message", (e) => {
+    const { type, data } = e.data || {};
+    if (!e.origin.startsWith("vscode-webview://") || type !== INIT_TYPE) {
+      return;
+    }
+    patchInitData(data);
+  });
+  var KEYBOARD_EVENT_TYPE = "[vscode:client]:commands";
+  var isMac = navigator.userAgent.indexOf("Macintosh") >= 0;
+  document.addEventListener("keydown", (e) => {
+    console.log(e);
+    const { metaKey, shiftKey, ctrlKey, altKey, key } = e;
+    if (key === "F1") {
+      window.parent.postMessage({ type: KEYBOARD_EVENT_TYPE, data: "F1" }, "*");
+    } else if (isMac && metaKey && !altKey && !ctrlKey) {
+      if (shiftKey) {
+        if (key === "z") {
+          document.execCommand("redo");
         }
-      });
+      } else if (key === "a") {
+        document.execCommand("selectAll");
+      } else if (key === "c") {
+        document.execCommand("copy");
+      } else if (key === "v") {
+        document.execCommand("paste");
+      } else if (key === "x") {
+        document.execCommand("cut");
+      } else if (key === "z") {
+        document.execCommand("undo");
+      }
     }
   });
-  require_client();
 })();

package/dist/index.d.mts

@@ -69,20 +69,9 @@ interface PluginOptions {
      * extension file
      * ```ts
      *function setupHtml(webview: Webview, context: ExtensionContext) {
-     *  if (process.env.VITE_DEV_SERVER_URL) {
-     *    return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
-     *  }
-     *  return __getWebviewHtml__(webview, context);
+     *  return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
      *}
      * ```
-     * webview client
-     * ```html
-     * <html>
-     *  <head>
-     *    <script>inject code</script>
-     *  </head>
-     * </html>
-     * ```
      */
     webview?: boolean | string | WebviewOption;
     /**

package/dist/index.d.ts

@@ -69,20 +69,9 @@ interface PluginOptions {
      * extension file
      * ```ts
      *function setupHtml(webview: Webview, context: ExtensionContext) {
-     *  if (process.env.VITE_DEV_SERVER_URL) {
-     *    return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
-     *  }
-     *  return __getWebviewHtml__(webview, context);
+     *  return __getWebviewHtml__({serverUrl:WebviewHtmlOptions, webview, context});
      *}
      * ```
-     * webview client
-     * ```html
-     * <html>
-     *  <head>
-     *    <script>inject code</script>
-     *  </head>
-     * </html>
-     * ```
      */
     webview?: boolean | string | WebviewOption;
     /**

package/dist/index.js

@@ -3,10 +3,10 @@ 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 _node = require('@tomjs/node');
 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";
@@ -97,6 +97,7 @@ function getPkg() {
 }
 function preMergeOptions(options) {
   const pkg = getPkg();
+  const format = pkg.type === "module" ? "esm" : "cjs";
   const opts = _lodashmerge2.default.call(void 0, 
     {
       webview: true,
@@ -105,8 +106,8 @@ function preMergeOptions(options) {
       extension: {
         entry: "extension/index.ts",
         outDir: "dist-extension",
-        target: ["es2019", "node14"],
-        format: "cjs",
+        target: format === "esm" ? ["node18"] : ["es2019", "node14"],
+        format,
         shims: true,
         clean: true,
         dts: false,
@@ -153,7 +154,7 @@ function genProdWebviewCode(cache, webview) {
   webview = Object.assign({}, webview);
   const prodCacheFolder = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", prodCachePkgName);
   _node.emptyDirSync.call(void 0, prodCacheFolder);
-  const destFile = _path2.default.join(prodCacheFolder, "index.ts");
+  const destFile = _path2.default.join(prodCacheFolder, "index.js");
   function handleHtmlCode(html) {
     const root = _nodehtmlparser.parse.call(void 0, html);
     const head = root.querySelector("head");
@@ -188,7 +189,7 @@ function genProdWebviewCode(cache, webview) {
   );
   const code = (
     /* js */
-    `import { ExtensionContext, Uri, Webview } from 'vscode';
+    `import { Uri } from 'vscode';
 
 ${cacheCode}
 
@@ -201,10 +202,15 @@ function uuid() {
   return text;
 }
 
-export default function getWebviewHtml(webview: Webview, context: ExtensionContext, inputName?:string){
+export default function getWebviewHtml(options){
+  const { webview, context, inputName, injectCode } = options || {};
   const nonce = uuid();
   const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
-  const html = htmlCode[inputName || 'index'] || '';
+  let html = htmlCode[inputName || 'index'] || '';
+  if (injectCode) {
+    html = html.replace('<head>', '<head>'+ injectCode);
+  }
+
   return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
 }
   `

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.7.26_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
+// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.11.24_postcss@8.4.49_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);
@@ -10,10 +10,10 @@ import fs from "fs";
 import os from "os";
 import path2 from "path";
 import { cwd } from "process";
+import { emptyDirSync, readFileSync, readJsonSync } from "@tomjs/node";
 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";
@@ -104,6 +104,7 @@ function getPkg() {
 }
 function preMergeOptions(options) {
   const pkg = getPkg();
+  const format = pkg.type === "module" ? "esm" : "cjs";
   const opts = merge(
     {
       webview: true,
@@ -112,8 +113,8 @@ function preMergeOptions(options) {
       extension: {
         entry: "extension/index.ts",
         outDir: "dist-extension",
-        target: ["es2019", "node14"],
-        format: "cjs",
+        target: format === "esm" ? ["node18"] : ["es2019", "node14"],
+        format,
         shims: true,
         clean: true,
         dts: false,
@@ -160,7 +161,7 @@ function genProdWebviewCode(cache, webview) {
   webview = Object.assign({}, webview);
   const prodCacheFolder = path2.join(cwd(), "node_modules", prodCachePkgName);
   emptyDirSync(prodCacheFolder);
-  const destFile = path2.join(prodCacheFolder, "index.ts");
+  const destFile = path2.join(prodCacheFolder, "index.js");
   function handleHtmlCode(html) {
     const root = htmlParser(html);
     const head = root.querySelector("head");
@@ -195,7 +196,7 @@ function genProdWebviewCode(cache, webview) {
   );
   const code = (
     /* js */
-    `import { ExtensionContext, Uri, Webview } from 'vscode';
+    `import { Uri } from 'vscode';
 
 ${cacheCode}
 
@@ -208,10 +209,15 @@ function uuid() {
   return text;
 }
 
-export default function getWebviewHtml(webview: Webview, context: ExtensionContext, inputName?:string){
+export default function getWebviewHtml(options){
+  const { webview, context, inputName, injectCode } = options || {};
   const nonce = uuid();
   const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
-  const html = htmlCode[inputName || 'index'] || '';
+  let html = htmlCode[inputName || 'index'] || '';
+  if (injectCode) {
+    html = html.replace('<head>', '<head>'+ injectCode);
+  }
+
   return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
 }
   `

package/dist/webview.d.mts

@@ -1,4 +1,4 @@
-interface WebviewHtmlDevOptions {
+interface WebviewHtmlOptions {
     /**
      * local server url
      */
@@ -8,6 +8,6 @@ interface WebviewHtmlDevOptions {
  *
  * @param options serverUrl string or object options
  */
-declare function getWebviewHtml(options: string | WebviewHtmlDevOptions): string;
+declare function getWebviewHtml(options: WebviewHtmlOptions): string;
 
-export { WebviewHtmlDevOptions, getWebviewHtml as default, getWebviewHtml };
+export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };

package/dist/webview.d.ts

@@ -1,4 +1,4 @@
-interface WebviewHtmlDevOptions {
+interface WebviewHtmlOptions {
     /**
      * local server url
      */
@@ -8,6 +8,6 @@ interface WebviewHtmlDevOptions {
  *
  * @param options serverUrl string or object options
  */
-declare function getWebviewHtml(options: string | WebviewHtmlDevOptions): string;
+declare function getWebviewHtml(options: WebviewHtmlOptions): string;
 
-export { WebviewHtmlDevOptions, getWebviewHtml as default, getWebviewHtml };
+export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };

package/dist/webview.js

@@ -193,11 +193,7 @@ function getWebviewHtml(options) {
   const opts = {
     serverUrl: ""
   };
-  if (typeof options === "string") {
-    opts.serverUrl = options;
-  } else {
-    Object.assign(opts, options);
-  }
+  Object.assign(opts, options);
   return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
 }
 var webview_default = getWebviewHtml;

package/dist/webview.mjs

@@ -193,11 +193,7 @@ function getWebviewHtml(options) {
   const opts = {
     serverUrl: ""
   };
-  if (typeof options === "string") {
-    opts.serverUrl = options;
-  } else {
-    Object.assign(opts, options);
-  }
+  Object.assign(opts, options);
   return template_default.replace(new RegExp("{{serverUrl}}", "g"), opts.serverUrl);
 }
 var webview_default = getWebviewHtml;

package/env.d.ts

@@ -1,4 +1,4 @@
-import { ExtensionContext, Webview } from 'vscode';
+import type { ExtensionContext, Webview } from 'vscode';
 // Make this a module
 export {};
 declare global {
@@ -24,21 +24,31 @@ declare global {
     }
   }
 
-  /**
-   *  `[vite serve]` Gets the html of webview in development mode.
-   * @param options serverUrl: The url of the vite dev server.
-   */
-  function __getWebviewHtml__(options?: string | { serverUrl: string }): string;
+  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;
+  }
 
   /**
-   *  `[vite build]` Gets the html of webview in production mode.
-   * @param webview The Webview instance of the extension.
-   * @param context The ExtensionContext instance of the extension.
-   * @param inputName vite build.rollupOptions.input name. Default is `index`.
+   * Gets the html of webview
    */
-  function __getWebviewHtml__(
-    webview: Webview,
-    context: ExtensionContext,
-    inputName?: string,
-  ): string;
+  function __getWebviewHtml__(options?: WebviewHtmlOptions): string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "3.2.1",
+  "version": "4.1.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",
@@ -23,24 +23,12 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      },
-      "import": {
-        "default": "./dist/index.mjs",
-        "types": "./dist/index.d.mts"
-      }
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
     },
     "./webview": {
-      "require": {
-        "default": "./dist/webview.js",
-        "types": "./dist/webview.d.ts"
-      },
-      "import": {
-        "default": "./dist/webview.mjs",
-        "types": "./dist/webview.d.mts"
-      }
+      "require": "./dist/webview.js",
+      "import": "./dist/webview.mjs"
     },
     "./client": "./dist/client.global.js",
     "./env": "./env.d.ts"
@@ -61,36 +49,39 @@
     "url": "git+https://github.com/tomjs/vite-plugin-vscode.git"
   },
   "dependencies": {
-    "@tomjs/node": "^2.2.0",
-    "dayjs": "^1.11.10",
+    "@tomjs/node": "^2.2.3",
+    "dayjs": "^1.11.13",
     "execa": "^5.1.1",
     "kolorist": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
-    "node-html-parser": "^6.1.12",
+    "node-html-parser": "^6.1.13",
     "tsup": "7.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.4",
-    "@tomjs/commitlint": "^2.1.2",
-    "@tomjs/eslint": "^1.2.2",
-    "@tomjs/prettier": "^1.1.1",
-    "@tomjs/stylelint": "^2.2.0",
-    "@tomjs/tsconfig": "^1.3.0",
+    "@commitlint/cli": "^19.6.0",
+    "@tomjs/commitlint": "^3.3.0",
+    "@tomjs/eslint": "^4.1.0",
+    "@tomjs/prettier": "^1.4.1",
+    "@tomjs/stylelint": "^2.6.1",
+    "@tomjs/tsconfig": "^1.7.1",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "18.19.55",
+    "@types/node": "18.19.67",
+    "@vitejs/plugin-vue": "^5.2.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
+    "eslint": "^9.16.0",
+    "globals": "^15.13.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.10",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.2",
-    "rimraf": "^5.0.5",
-    "stylelint": "^16.1.0",
-    "tsx": "^4.7.0",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "stylelint": "^16.11.0",
+    "tsx": "^4.19.2",
     "typescript": "~5.3.3",
-    "vite": "5.4.8"
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {
     "vite": ">=2"
@@ -100,7 +91,7 @@
     "build": "pnpm clean && tsup",
     "clean": "rimraf ./dist",
     "lint": "run-s lint:eslint lint:stylelint lint:prettier",
-    "lint:eslint": "eslint \"{src,scripts,examples}/**/*.ts\" *.{cjs,ts} --fix --cache",
+    "lint:eslint": "eslint \"{src,scripts,examples}/**/*.{tsx,cjs,ts,vue}\" *.{cjs,ts} --fix --cache",
     "lint:stylelint": "stylelint \"examples/**/*.{css,scss,less,vue,html}\" --fix --cache",
     "lint:prettier": "prettier --write ."
   }