@tomjs/vite-plugin-vscode 2.0.1 → 2.2.0

package/README.md

@@ -30,19 +30,15 @@ yarn add @tomjs/vite-plugin-vscode -D
 npm i @tomjs/vite-plugin-vscode --save-dev
 ```
 
-If you use `pnpm` and enable `webview` debugging, you need to additionally install the dependency [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview)
-
-```bash
-pnpm add @tomjs/vscode-extension-webview -D
-```
-
 ## Usage
 
-### Recommended Agreement
+### Recommended
+
+Setting `recommended` will modify some preset configurations. See [PluginOptions](#pluginoptions) and `recommended` parameter descriptions in detail.
 
 #### Directory Structure
 
-- Recommend `extension` and page `src` code directory structure
+- By default, `recommended:true` will be based on the following directory structure as a convention.
 
 ```
 |--extension      // extension code
@@ -50,6 +46,7 @@ pnpm add @tomjs/vscode-extension-webview -D
 |--src            // front-end code
 |  |--App.vue
 |  |--main.ts
+|--index.html
 ```
 
 - Zero configuration, default dist output directory
@@ -63,9 +60,16 @@ pnpm add @tomjs/vscode-extension-webview -D
 |  |  |--index.html
 ```
 
-#### Default configuration and behavior
+- If you want to modify the `extension` source code directory to `src`, you can set `{ extension: { entry: 'src/index.ts' } }`
 
-See [PluginOptions](#pluginoptions) and `recommended` parameter descriptions in detail
+```
+|--src            // extension code
+|  |--index.ts
+|--webview        // front-end code
+|  |--App.vue
+|  |--main.ts
+|--index.html
+```
 
 ### extension
 
@@ -111,6 +115,8 @@ export default defineConfig({
       },
     }),
     vscode(),
+    // Modify the extension source code entry path, and also modify the `index.html` entry file path
+    // vscode({ extension: { entry: 'src/index.ts' } }),
   ],
 });
 ```

package/README.zh_CN.md

@@ -30,19 +30,15 @@ yarn add @tomjs/vite-plugin-vscode -D
 npm i @tomjs/vite-plugin-vscode --save-dev
 ```
 
-如果使用 `pnpm` 且开启 `webview` 调试，需要额外安装[@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) 这个依赖
-
-```bash
-pnpm add @tomjs/vscode-extension-webview -D
-```
-
 ## 使用说明
 
 ### 推荐约定
 
+设置 `recommended` 参数会修改一些预置配置，详细查看 [PluginOptions](#pluginoptions) 和 `recommended` 参数说明。
+
 #### 目录结构
 
-- 推荐 `extension` 和 页面 `src` 代码目录结构
+- 默认情况下，`recommended:true` 会根据如下目录结构作为约定
 
 ```
 |--extension      // extension code
@@ -63,9 +59,15 @@ pnpm add @tomjs/vscode-extension-webview -D
 |  |  |--index.html
 ```
 
-#### 默认配置和行为
+- 如果你想修改 `extension` 源码目录为 `src`，可以设置 `{ extension: { entry: 'src/index.ts' } }`
 
-详细查看 [PluginOptions](#pluginoptions) 和 `recommended` 参数说明
+```
+|--src            // extension code
+|  |--index.ts
+|--webview        // front-end code
+|  |--App.vue
+|  |--main.ts
+```
 
 ### extension
 
@@ -115,6 +117,8 @@ export default defineConfig({
       },
     }),
     vscode(),
+    // 修改扩展源码入口路径，同时修改`index.html`入口文件路径
+    // vscode({ extension: { entry: 'src/index.ts' } }),
   ],
 });
 ```

package/dist/index.js

@@ -8,7 +8,7 @@ var _nodehtmlparser = require('node-html-parser');
 var _tsup = require('tsup');
 
 // src/constants.ts
-var PLUGIN_NAME = "@tomjs:vscode";
+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__";
@@ -56,11 +56,14 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
+var _child_process = require('child_process');
 
 var _module = require('module');
-function readJson(path2) {
-  if (_fs2.default.existsSync(path2)) {
-    return JSON.parse(_fs2.default.readFileSync(path2, "utf8"));
+
+
+function readJson(path3) {
+  if (_fs2.default.existsSync(path3)) {
+    return JSON.parse(_fs2.default.readFileSync(path3, "utf8"));
   }
 }
 function emptyPath(dest) {
@@ -88,11 +91,46 @@ function resolveServerUrl(server) {
     const options = server.config.server;
     const protocol = options.https ? "https" : "http";
     const devBase = server.config.base;
-    const path2 = typeof options.open === "string" ? options.open : devBase;
-    const url = path2.startsWith("http") ? path2 : `${protocol}://${hostname}:${port}${path2}`;
+    const path3 = typeof options.open === "string" ? options.open : devBase;
+    const url = path3.startsWith("http") ? path3 : `${protocol}://${hostname}:${port}${path3}`;
     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";
@@ -259,8 +297,8 @@ function useVSCodePlugin(options) {
   let webviewClient;
   let webviewNpmPath;
   if (opts.webview) {
-    webviewNpmPath = _path2.default.join(_process.cwd.call(void 0, ), "node_modules", WEBVIEW_PACKAGE_NAME, "/dist");
-    if (!_fs2.default.existsSync(webviewNpmPath)) {
+    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";

package/dist/index.mjs

@@ -1,14 +1,14 @@
 // src/index.ts
 import fs2 from "fs";
-import path from "path";
-import { cwd } from "process";
+import path2 from "path";
+import { cwd as cwd2 } 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";
 
 // src/constants.ts
-var PLUGIN_NAME = "@tomjs:vscode";
+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__";
@@ -56,10 +56,13 @@ var createLogger = (tag) => {
 };
 
 // src/utils.ts
+import { spawnSync } from "child_process";
 import fs from "fs";
-function readJson(path2) {
-  if (fs.existsSync(path2)) {
-    return JSON.parse(fs.readFileSync(path2, "utf8"));
+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) {
@@ -87,17 +90,52 @@ function resolveServerUrl(server) {
     const options = server.config.server;
     const protocol = options.https ? "https" : "http";
     const devBase = server.config.base;
-    const path2 = typeof options.open === "string" ? options.open : devBase;
-    const url = path2.startsWith("http") ? path2 : `${protocol}://${hostname}:${port}${path2}`;
+    const path3 = typeof options.open === "string" ? options.open : devBase;
+    const url = path3.startsWith("http") ? path3 : `${protocol}://${hostname}:${port}${path3}`;
     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 = path.resolve(process.cwd(), "package.json");
+  const pkgFile = path2.resolve(process.cwd(), "package.json");
   if (!fs2.existsSync(pkgFile)) {
     throw new Error("Main file is not specified, and no package.json found");
   }
@@ -161,9 +199,9 @@ function preMergeOptions(options) {
 }
 var prodCachePkgName = `${PACKAGE_NAME}-inject`;
 function genProdWebviewCode(cache) {
-  const prodCacheFolder = path.join(cwd(), "node_modules", prodCachePkgName);
+  const prodCacheFolder = path2.join(cwd2(), "node_modules", prodCachePkgName);
   emptyPath(prodCacheFolder);
-  const destFile = path.join(prodCacheFolder, "index.ts");
+  const destFile = path2.join(prodCacheFolder, "index.ts");
   function handleHtmlCode(html) {
     const root = htmlParser(html);
     const head = root.querySelector("head");
@@ -230,8 +268,8 @@ function useVSCodePlugin(options) {
     let outDir = ((_a = config == null ? void 0 : config.build) == null ? void 0 : _a.outDir) || "dist";
     opts.extension ??= {};
     if (opts.recommended) {
-      opts.extension.outDir = path.resolve(outDir, "extension");
-      outDir = path.resolve(outDir, "webview");
+      opts.extension.outDir = path2.resolve(outDir, "extension");
+      outDir = path2.resolve(outDir, "webview");
     }
     const assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) || "assets";
     const output = {
@@ -258,12 +296,12 @@ function useVSCodePlugin(options) {
   let webviewClient;
   let webviewNpmPath;
   if (opts.webview) {
-    webviewNpmPath = path.join(cwd(), "node_modules", WEBVIEW_PACKAGE_NAME, "/dist");
-    if (!fs2.existsSync(webviewNpmPath)) {
+    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 = path.join(webviewNpmPath, fileName);
+      const clientFile = path2.join(webviewNpmPath, fileName);
       if (!fs2.existsSync(clientFile)) {
         logger.warn(`[${fileName}] is does not exist, please update the package!`);
       } else {
@@ -360,7 +398,7 @@ function useVSCodePlugin(options) {
         if (opts.webview) {
           webviewPath = genProdWebviewCode(prodHtmlCache);
         }
-        let outDir = buildConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
+        let outDir = buildConfig.build.outDir.replace(cwd2(), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
           outDir = outDir.substring(1);
         }

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",
     "plugin",
     "vscode",
+    "html",
+    "hmr",
     "extension",
     "webview",
     "esm",