@tomjs/vite-plugin-vscode 2.2.0 → 2.3.1

package/README.md

@@ -213,7 +213,7 @@ function __getWebviewHtml__(
 | --- | --- | --- | --- |
 | recommended | `boolean` | `true` | This option is intended to provide recommended default parameters and behavior. |
 | extension | [ExtensionOptions](#ExtensionOptions) |  | Configuration options for the vscode extension. |
-| webview | `boolean` | `false` | 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. |
+| webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | Inject html code |
 
 **Notice**
 
@@ -222,6 +222,16 @@ 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/vscode-extension-webview';` above the file that calls the `__getWebviewHtml__` method
+  - web: Add `<script>` tag to index.html and inject `@tomjs/vscode-extension-webview/client` code
+- vite build
+  - extension: Inject `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` above the file that calls the `__getWebviewHtml__` method If is string, will set inject method name. Default is `__getWebviewHtml__`.
+
 ### ExtensionOptions
 
 Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/), some default values are added for ease of use.
@@ -232,6 +242,16 @@ Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/
 | outDir | `string` | `dist-extension/main` | The output directory for the vscode extension file |
 | onSuccess | `() => Promise<void \| undefined \| (() => void \| Promise<void>)>` | `undefined` | A function that will be executed after the build succeeds. |
 
+### WebviewOption
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | `string` | `__getWebviewHtml__` | The inject method name |
+| csp | `string` | `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">` | The `CSP` meta for the webview |
+
+- `{{cspSource}}`: [webview.cspSource](https://code.visualstudio.com/api/references/vscode-api#Webview)
+- `{{nonce}}`: uuid
+
 ### Additional Information
 
 - Default values for `extension` when the relevant parameters are not configured

package/README.zh_CN.md

@@ -46,6 +46,7 @@ npm i @tomjs/vite-plugin-vscode --save-dev
 |--src            // front-end code
 |  |--App.vue
 |  |--main.ts
+|--index.html
 ```
 
 - 零配置，默认 dist 输出目录
@@ -67,6 +68,7 @@ npm i @tomjs/vite-plugin-vscode --save-dev
 |--webview        // front-end code
 |  |--App.vue
 |  |--main.ts
+|--index.html
 ```
 
 ### extension
@@ -215,7 +217,7 @@ function __getWebviewHtml__(
 | --- | --- | --- | --- |
 | recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
 | extension | [ExtensionOptions](#ExtensionOptions) |  | vscode extension 可选配置 |
-| webview | `boolean` | `false` | 在vscode扩展代码和Web客户端代码中注入[@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview)，以便webview在开发阶段可以支持HMR。 |
+| webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | 注入 html 代码 |
 
 **Notice**
 
@@ -225,6 +227,16 @@ function __getWebviewHtml__(
 
 - 其他待实现的行为
 
+**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__`。
+
 ### ExtensionOptions
 
 继承自 [tsup](https://tsup.egoist.dev/) 的 [Options](https://paka.dev/npm/tsup)，添加了一些默认值，方便使用。
@@ -235,6 +247,16 @@ function __getWebviewHtml__(
 | outDir | `string` | `dist-extension/main` | 输出文件夹 |
 | onSuccess | `() => Promise<void \| undefined \| (() => void \| Promise<void>)>` | `undefined` | 构建成功后运行的回调函数 |
 
+### WebviewOption
+
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| 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)
+- `{{nonce}}`: uuid
+
 ### 补充说明
 
 - `extension` 未配置相关参数时的默认值

package/dist/index.d.mts

@@ -28,6 +28,19 @@ interface ExtensionOptions extends Omit<Options, 'entry' | 'format' | 'outDir' |
      */
     onSuccess?: () => Promise<void | undefined | (() => void | Promise<void>)>;
 }
+/**
+ * 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';">`
+     */
+    csp?: string;
+}
 /**
  * vite plugin options.
  */
@@ -70,7 +83,7 @@ interface PluginOptions {
      * </html>
      * ```
      */
-    webview?: boolean | string;
+    webview?: boolean | string | WebviewOption;
     /**
      * extension vite config.
      */

package/dist/index.d.ts

@@ -28,6 +28,19 @@ interface ExtensionOptions extends Omit<Options, 'entry' | 'format' | 'outDir' |
      */
     onSuccess?: () => Promise<void | undefined | (() => void | Promise<void>)>;
 }
+/**
+ * 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';">`
+     */
+    csp?: string;
+}
 /**
  * vite plugin options.
  */
@@ -70,7 +83,7 @@ interface PluginOptions {
      * </html>
      * ```
      */
-    webview?: boolean | string;
+    webview?: boolean | string | WebviewOption;
     /**
      * extension vite config.
      */

package/dist/index.js

@@ -1,5 +1,6 @@
 "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);
@@ -56,11 +57,11 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
-var _child_process = require('child_process');
 
 var _module = require('module');
 
 
+var _execa = require('execa'); var _execa2 = _interopRequireDefault(_execa);
 function readJson(path3) {
   if (_fs2.default.existsSync(path3)) {
     return JSON.parse(_fs2.default.readFileSync(path3, "utf8"));
@@ -96,40 +97,32 @@ function resolveServerUrl(server) {
     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;
-        }
+function getWebviewPnpmPath() {
+  try {
+    const res = _execa2.default.sync("pnpm", ["list", "--dev", "--depth=1", "--json"], {});
+    if (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) {
+        return dep.path;
       }
-    } catch (e) {
-      npmPath = "";
-    }
-    if (npmPath) {
-      return _path2.default.join(npmPath, "dist");
     }
+  } catch (e) {
+  }
+}
+function getWebviewNpmPath() {
+  const npmPath = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", WEBVIEW_PACKAGE_NAME);
+  if (_fs2.default.existsSync(npmPath)) {
+    return npmPath;
   }
+  return getWebviewPnpmPath();
 }
 
 // src/index.ts
@@ -192,14 +185,18 @@ function preMergeOptions(options) {
     );
   }
   opts.extension = opt;
-  if (opts.webview === true) {
-    opts.webview = WEBVIEW_METHOD_NAME;
+  if (opts.webview !== false) {
+    let name = WEBVIEW_METHOD_NAME;
+    if (typeof opts.webview === "string") {
+      name = _nullishCoalesce(opts.webview, () => ( WEBVIEW_METHOD_NAME));
+    }
+    opts.webview = Object.assign({ name }, opts.webview);
   }
-  opts.webview = _nullishCoalesce(opts.webview, () => ( WEBVIEW_METHOD_NAME));
   return opts;
 }
 var prodCachePkgName = `${PACKAGE_NAME}-inject`;
-function genProdWebviewCode(cache) {
+function genProdWebviewCode(cache, webview) {
+  webview = Object.assign({}, webview);
   const prodCacheFolder = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", prodCachePkgName);
   emptyPath(prodCacheFolder);
   const destFile = _path2.default.join(prodCacheFolder, "index.ts");
@@ -209,26 +206,25 @@ function genProdWebviewCode(cache) {
     if (!head) {
       root == null ? void 0 : root.insertAdjacentHTML("beforeend", "<head></head>");
     }
-    head.insertAdjacentHTML(
-      "afterbegin",
-      `
-<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`
-    );
-    const tags = {
-      script: "src",
-      link: "href"
-    };
-    Object.keys(tags).forEach((tag) => {
-      const elements = root.querySelectorAll(tag);
-      elements.forEach((element) => {
-        const attr = element.getAttribute(tags[tag]);
-        if (attr) {
-          element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
-        }
-        element.setAttribute("nonce", "{{nonce}}");
+    const csp = (webview == null ? void 0 : webview.csp) || `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`;
+    head.insertAdjacentHTML("afterbegin", csp);
+    if (csp && csp.includes("{{nonce}}")) {
+      const tags = {
+        script: "src",
+        link: "href"
+      };
+      Object.keys(tags).forEach((tag) => {
+        const elements = root.querySelectorAll(tag);
+        elements.forEach((element) => {
+          const attr = element.getAttribute(tags[tag]);
+          if (attr) {
+            element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
+          }
+          element.setAttribute("nonce", "{{nonce}}");
+        });
       });
-    });
-    return root.toString();
+    }
+    return root.removeWhitespace().toString();
   }
   const cacheCode = (
     /* js */
@@ -255,12 +251,18 @@ export default function getWebviewHtml(webview: Webview, context: ExtensionConte
   const nonce = uuid();
   const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
   const html = htmlCode[inputName || 'index'] || '';
-  return html.replaceAll('{{cspSource}}',webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
+  return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
 }
   `
   );
   _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);
@@ -294,19 +296,22 @@ function useVSCodePlugin(options) {
       }
     };
   };
-  let webviewClient;
-  let webviewNpmPath;
+  let devWebviewClient;
+  let devWebviewPath;
   if (opts.webview) {
-    webviewNpmPath = getWebviewNpmPath();
-    if (!webviewNpmPath || !_fs2.default.existsSync(webviewNpmPath)) {
+    devWebviewPath = getWebviewNpmPath();
+    if (devWebviewPath && _os2.default.platform() === "win32") {
+      devWebviewPath = devWebviewPath.replaceAll("\\", "/");
+    }
+    if (!devWebviewPath || !_fs2.default.existsSync(devWebviewPath)) {
       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);
+      const clientFile = _path2.default.join(devWebviewPath, "dist", 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 = _fs2.default.readFileSync(clientFile, "utf-8");
       }
     }
   }
@@ -331,21 +336,22 @@ function useVSCodePlugin(options) {
           };
           logger.info("extension build start");
           let buildCount = 0;
+          const webview = opts == null ? void 0 : opts.webview;
           const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
           await _tsup.build.call(void 0, 
             _lodashmerge2.default.call(void 0, tsupOptions, {
               watch: true,
               env,
               silent: true,
-              esbuildPlugins: [
+              esbuildPlugins: !webview ? [] : [
                 {
                   name: "@tomjs:vscode:inject",
                   setup(build) {
                     build.onLoad({ filter: /\.ts$/ }, async (args) => {
                       const file = _fs2.default.readFileSync(args.path, "utf-8");
-                      if (file.includes(`${opts.webview}(`)) {
+                      if (file.includes(`${webview.name}(`)) {
                         return {
-                          contents: `import ${opts.webview} from '@tomjs/vscode-extension-webview';
+                          contents: `import ${webview.name} from '${devWebviewPath}';
 ` + file,
                           loader: "ts"
                         };
@@ -370,10 +376,10 @@ function useVSCodePlugin(options) {
         });
       },
       transformIndexHtml(html) {
-        if (!opts.webview || !webviewClient) {
+        if (!opts.webview || !devWebviewClient) {
           return html;
         }
-        return html.replace(/<\/title>/i, `</title><script>${webviewClient}</script>`);
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
     {
@@ -396,8 +402,9 @@ function useVSCodePlugin(options) {
       },
       closeBundle() {
         let webviewPath;
-        if (opts.webview) {
-          webviewPath = genProdWebviewCode(prodHtmlCache);
+        const webview = opts == null ? void 0 : opts.webview;
+        if (webview) {
+          webviewPath = genProdWebviewCode(prodHtmlCache, webview);
         }
         let outDir = buildConfig.build.outDir.replace(_process.cwd.call(void 0, ), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
@@ -413,15 +420,15 @@ function useVSCodePlugin(options) {
           _lodashmerge2.default.call(void 0, tsupOptions, {
             env,
             silent: true,
-            esbuildPlugins: !opts.webview ? [] : [
+            esbuildPlugins: !webview ? [] : [
               {
                 name: "@tomjs:vscode:inject",
                 setup(build) {
                   build.onLoad({ filter: /\.ts$/ }, async (args) => {
                     const file = _fs2.default.readFileSync(args.path, "utf-8");
-                    if (file.includes(`${opts.webview}(`)) {
+                    if (file.includes(`${webview.name}(`)) {
                       return {
-                        contents: `import ${opts.webview} from \`${webviewPath}\`;
+                        contents: `import ${webview.name} from \`${webviewPath}\`;
 ` + file,
                         loader: "ts"
                       };

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/index.ts
 import fs2 from "fs";
+import os from "os";
 import path2 from "path";
 import { cwd as cwd2 } from "process";
 import cloneDeep from "lodash.clonedeep";
@@ -56,10 +57,10 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
-import { spawnSync } from "child_process";
 import fs from "fs";
 import path from "path";
 import { cwd } from "process";
+import execa from "execa";
 function readJson(path3) {
   if (fs.existsSync(path3)) {
     return JSON.parse(fs.readFileSync(path3, "utf8"));
@@ -95,40 +96,32 @@ 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;
-        }
+function getWebviewPnpmPath() {
+  try {
+    const res = execa.sync("pnpm", ["list", "--dev", "--depth=1", "--json"], {});
+    if (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) {
+        return dep.path;
       }
-    } catch {
-      npmPath = "";
-    }
-    if (npmPath) {
-      return path.join(npmPath, "dist");
     }
+  } catch {
+  }
+}
+function getWebviewNpmPath() {
+  const npmPath = path.join(cwd(), "node_modules", WEBVIEW_PACKAGE_NAME);
+  if (fs.existsSync(npmPath)) {
+    return npmPath;
   }
+  return getWebviewPnpmPath();
 }
 
 // src/index.ts
@@ -191,14 +184,18 @@ function preMergeOptions(options) {
     );
   }
   opts.extension = opt;
-  if (opts.webview === true) {
-    opts.webview = WEBVIEW_METHOD_NAME;
+  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);
   }
-  opts.webview = opts.webview ?? WEBVIEW_METHOD_NAME;
   return opts;
 }
 var prodCachePkgName = `${PACKAGE_NAME}-inject`;
-function genProdWebviewCode(cache) {
+function genProdWebviewCode(cache, webview) {
+  webview = Object.assign({}, webview);
   const prodCacheFolder = path2.join(cwd2(), "node_modules", prodCachePkgName);
   emptyPath(prodCacheFolder);
   const destFile = path2.join(prodCacheFolder, "index.ts");
@@ -208,26 +205,25 @@ function genProdWebviewCode(cache) {
     if (!head) {
       root == null ? void 0 : root.insertAdjacentHTML("beforeend", "<head></head>");
     }
-    head.insertAdjacentHTML(
-      "afterbegin",
-      `
-<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`
-    );
-    const tags = {
-      script: "src",
-      link: "href"
-    };
-    Object.keys(tags).forEach((tag) => {
-      const elements = root.querySelectorAll(tag);
-      elements.forEach((element) => {
-        const attr = element.getAttribute(tags[tag]);
-        if (attr) {
-          element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
-        }
-        element.setAttribute("nonce", "{{nonce}}");
+    const csp = (webview == null ? void 0 : webview.csp) || `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';">`;
+    head.insertAdjacentHTML("afterbegin", csp);
+    if (csp && csp.includes("{{nonce}}")) {
+      const tags = {
+        script: "src",
+        link: "href"
+      };
+      Object.keys(tags).forEach((tag) => {
+        const elements = root.querySelectorAll(tag);
+        elements.forEach((element) => {
+          const attr = element.getAttribute(tags[tag]);
+          if (attr) {
+            element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
+          }
+          element.setAttribute("nonce", "{{nonce}}");
+        });
       });
-    });
-    return root.toString();
+    }
+    return root.removeWhitespace().toString();
   }
   const cacheCode = (
     /* js */
@@ -254,12 +250,18 @@ export default function getWebviewHtml(webview: Webview, context: ExtensionConte
   const nonce = uuid();
   const baseUri = webview.asWebviewUri(Uri.joinPath(context.extensionUri, (process.env.VITE_WEBVIEW_DIST || 'dist')));
   const html = htmlCode[inputName || 'index'] || '';
-  return html.replaceAll('{{cspSource}}',webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
+  return html.replaceAll('{{cspSource}}', webview.cspSource).replaceAll('{{nonce}}', nonce).replaceAll('{{baseUri}}', baseUri);
 }
   `
   );
   fs2.writeFileSync(destFile, code, { encoding: "utf8" });
-  return destFile.replaceAll("\\", "/");
+  return fixWindowsPath(destFile);
+}
+function fixWindowsPath(webviewPath) {
+  if (os.platform() === "win32") {
+    webviewPath = webviewPath.replaceAll("\\", "/");
+  }
+  return webviewPath;
 }
 function useVSCodePlugin(options) {
   const opts = preMergeOptions(options);
@@ -293,19 +295,22 @@ function useVSCodePlugin(options) {
       }
     };
   };
-  let webviewClient;
-  let webviewNpmPath;
+  let devWebviewClient;
+  let devWebviewPath;
   if (opts.webview) {
-    webviewNpmPath = getWebviewNpmPath();
-    if (!webviewNpmPath || !fs2.existsSync(webviewNpmPath)) {
+    devWebviewPath = getWebviewNpmPath();
+    if (devWebviewPath && os.platform() === "win32") {
+      devWebviewPath = devWebviewPath.replaceAll("\\", "/");
+    }
+    if (!devWebviewPath || !fs2.existsSync(devWebviewPath)) {
       logger.warn(`[${WEBVIEW_PACKAGE_NAME}] is not installed, please install it first!`);
     } else {
       const fileName = "client.global.js";
-      const clientFile = path2.join(webviewNpmPath, fileName);
+      const clientFile = path2.join(devWebviewPath, "dist", fileName);
       if (!fs2.existsSync(clientFile)) {
         logger.warn(`[${fileName}] is does not exist, please update the package!`);
       } else {
-        webviewClient = fs2.readFileSync(clientFile, "utf-8");
+        devWebviewClient = fs2.readFileSync(clientFile, "utf-8");
       }
     }
   }
@@ -330,21 +335,22 @@ function useVSCodePlugin(options) {
           };
           logger.info("extension build start");
           let buildCount = 0;
+          const webview = opts == null ? void 0 : opts.webview;
           const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
           await tsupBuild(
             merge(tsupOptions, {
               watch: true,
               env,
               silent: true,
-              esbuildPlugins: [
+              esbuildPlugins: !webview ? [] : [
                 {
                   name: "@tomjs:vscode:inject",
                   setup(build) {
                     build.onLoad({ filter: /\.ts$/ }, async (args) => {
                       const file = fs2.readFileSync(args.path, "utf-8");
-                      if (file.includes(`${opts.webview}(`)) {
+                      if (file.includes(`${webview.name}(`)) {
                         return {
-                          contents: `import ${opts.webview} from '@tomjs/vscode-extension-webview';
+                          contents: `import ${webview.name} from '${devWebviewPath}';
 ` + file,
                           loader: "ts"
                         };
@@ -369,10 +375,10 @@ function useVSCodePlugin(options) {
         });
       },
       transformIndexHtml(html) {
-        if (!opts.webview || !webviewClient) {
+        if (!opts.webview || !devWebviewClient) {
           return html;
         }
-        return html.replace(/<\/title>/i, `</title><script>${webviewClient}</script>`);
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
     {
@@ -395,8 +401,9 @@ function useVSCodePlugin(options) {
       },
       closeBundle() {
         let webviewPath;
-        if (opts.webview) {
-          webviewPath = genProdWebviewCode(prodHtmlCache);
+        const webview = opts == null ? void 0 : opts.webview;
+        if (webview) {
+          webviewPath = genProdWebviewCode(prodHtmlCache, webview);
         }
         let outDir = buildConfig.build.outDir.replace(cwd2(), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
@@ -412,15 +419,15 @@ function useVSCodePlugin(options) {
           merge(tsupOptions, {
             env,
             silent: true,
-            esbuildPlugins: !opts.webview ? [] : [
+            esbuildPlugins: !webview ? [] : [
               {
                 name: "@tomjs:vscode:inject",
                 setup(build) {
                   build.onLoad({ filter: /\.ts$/ }, async (args) => {
                     const file = fs2.readFileSync(args.path, "utf-8");
-                    if (file.includes(`${opts.webview}(`)) {
+                    if (file.includes(`${webview.name}(`)) {
                       return {
-                        contents: `import ${opts.webview} from \`${webviewPath}\`;
+                        contents: `import ${webview.name} from \`${webviewPath}\`;
 ` + file,
                         loader: "ts"
                       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",
@@ -46,6 +46,7 @@
   "dependencies": {
     "@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",
@@ -66,7 +67,6 @@
     "eslint": "^8.56.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "np": "^9.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.2",
     "rimraf": "^5.0.5",