@tomjs/vite-plugin-vscode 3.0.0 → 3.1.1

package/README.md

@@ -222,15 +222,16 @@ const value = await acquireVsCodeApi().getState();
 | 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` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | Inject html code |
+| devtools | `boolean` | `true` | Inject script code for [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) or [vue-devtools](https://devtools.vuejs.org/guide/standalone) debugging |
 
-**Notice**
+#### Notice
 
 The `recommended` option is used to set the default configuration and behavior, which can be used with almost zero configuration. The default is `true`. If you want to customize the configuration, set it to `false`. The following default prerequisites are to use the recommended [project structure](#directory-structure).
 
 - 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**
+#### 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.
 
@@ -240,6 +241,13 @@ Inject [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extensi
 - 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__`.
 
+#### devtools
+
+During development, support standalone development tool applications for `react` and `vue`, enabled by default.
+
+- `react`: inject `<script src="http://localhost:8097"></script>`, support [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)
+- `vue`: inject `<script src="http://localhost:8098"></script>`, support [vue-devtools](https://devtools.vuejs.org/guide/standalone)
+
 ### ExtensionOptions
 
 Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/), some default values are added for ease of use.

package/README.zh_CN.md

@@ -226,8 +226,9 @@ const value = await acquireVsCodeApi().getState();
 | recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
 | extension | [ExtensionOptions](#ExtensionOptions) |  | vscode extension 可选配置 |
 | webview | `boolean` \| `string` \| [WebviewOption](#WebviewOption) | `__getWebviewHtml__` | 注入 html 代码 |
+| devtools | `boolean` | `true` | 注入 script 代码用于 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 或 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 调试 |
 
-**Notice**
+#### Notice
 
 `recommended` 选项用于设置默认配置和行为，几乎可以达到零配置使用，默认为 `true` 。如果你要自定义配置，请设置它为`false`。以下默认的前提条件是使用推荐的 [项目结构](#目录结构)。
 
@@ -235,7 +236,7 @@ const value = await acquireVsCodeApi().getState();
 
 - 其他待实现的行为
 
-**Webview**
+#### Webview
 
 在 vscode 扩展代码和 web 客户端代码中注入 [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview)，使 `webview` 在开发阶段能够支持 `HMR`。
 
@@ -245,6 +246,13 @@ const value = await acquireVsCodeApi().getState();
 - vite build
   - extension: 在调用 `__getWebviewHtml__` 方法的文件上方注入 `import __getWebviewHtml__ from '@tomjs/vite-plugin-vscode-inject';` 如果为字符串，则设置注入方法名，默认为 `__getWebviewHtml__`。
 
+#### devtools
+
+开发阶段，支持 `react` 和 `vue` 的独立开发工具应用，默认开启。
+
+- `react`: 注入 `<script src="http://localhost:8097"></script>`，支持 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)
+- `vue`: 注入 `<script src="http://localhost:8098"></script>`，支持 [vue-devtools](https://devtools.vuejs.org/guide/standalone)
+
 ### ExtensionOptions
 
 继承自 [tsup](https://tsup.egoist.dev/) 的 [Options](https://paka.dev/npm/tsup)，添加了一些默认值，方便使用。
@@ -292,6 +300,8 @@ const value = await acquireVsCodeApi().getState();
 
 ## Debug
 
+### 扩展调试
+
 通过 `vscode` 运行 `Debug Extension` 调试，调试工具参考 [官方文档](https://code.visualstudio.com/docs/editor/debugging)
 
 `launch.json` 配置如下：
@@ -368,6 +378,10 @@ const value = await acquireVsCodeApi().getState();
 }
 ```
 
+### 网页调试
+
+可以使用 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 和 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 的独立应用调试 `webview`
+
 ## 示例
 
 先执行以下命令安装依赖，并生成库文件：

package/dist/index.d.mts

@@ -56,11 +56,11 @@ interface PluginOptions {
     /**
      * 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
+     * - 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__'.
      *
@@ -88,6 +88,14 @@ interface PluginOptions {
      * extension vite config.
      */
     extension?: ExtensionOptions;
+    /**
+     * Whether to enable devtools. Inject `<script src="http://localhost:<devtools-port>"></script>` into webview client . Default is true.
+     *  - true:
+     *    - react: inject `<script src="http://localhost:8097"></script>`
+     *    - vue: inject `<script src="http://localhost:8098"></script>`
+     * @default true
+     */
+    devtools?: boolean;
 }
 
 declare function useVSCodePlugin(options?: PluginOptions): PluginOption;

package/dist/index.d.ts

@@ -56,11 +56,11 @@ interface PluginOptions {
     /**
      * 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
+     * - 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__'.
      *
@@ -88,6 +88,14 @@ interface PluginOptions {
      * extension vite config.
      */
     extension?: ExtensionOptions;
+    /**
+     * Whether to enable devtools. Inject `<script src="http://localhost:<devtools-port>"></script>` into webview client . Default is true.
+     *  - true:
+     *    - react: inject `<script src="http://localhost:8097"></script>`
+     *    - vue: inject `<script src="http://localhost:8098"></script>`
+     * @default true
+     */
+    devtools?: boolean;
 }
 
 declare function useVSCodePlugin(options?: PluginOptions): PluginOption;

package/dist/index.js

@@ -254,8 +254,9 @@ function useVSCodePlugin(options) {
   if (opts.webview) {
     devWebviewClient = _node.readFileSync.call(void 0, _path2.default.join(__dirname, "client.global.js"));
   }
-  let buildConfig;
+  let resolvedConfig;
   const prodHtmlCache = {};
+  let devtoolsFlag = false;
   return [
     {
       name: "@tomjs:vscode",
@@ -263,6 +264,9 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        resolvedConfig = config;
+      },
       configureServer(server) {
         var _a;
         if (!server || !server.httpServer) {
@@ -318,6 +322,25 @@ function useVSCodePlugin(options) {
         if (!opts.webview) {
           return html;
         }
+        if (_nullishCoalesce(opts.devtools, () => ( true))) {
+          let port;
+          if (resolvedConfig.plugins.find(
+            (s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name)
+          )) {
+            port = 8097;
+          } else if (resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name))) {
+            port = 8098;
+          }
+          if (port) {
+            html = html.replace(
+              /<head>/i,
+              `<head><script src="http://localhost:${port}"></script>`
+            );
+          } else if (!devtoolsFlag) {
+            devtoolsFlag = true;
+            logger.warn("Only support react-devtools and vue-devtools!");
+          }
+        }
         return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
@@ -329,7 +352,7 @@ function useVSCodePlugin(options) {
         return handleConfig(config);
       },
       configResolved(config) {
-        buildConfig = config;
+        resolvedConfig = config;
       },
       transformIndexHtml(html, ctx) {
         var _a;
@@ -345,12 +368,12 @@ function useVSCodePlugin(options) {
         if (webview) {
           webviewPath = genProdWebviewCode(prodHtmlCache, webview);
         }
-        let outDir = buildConfig.build.outDir.replace(_process.cwd.call(void 0, ), "").replaceAll("\\", "/");
+        let outDir = resolvedConfig.build.outDir.replace(_process.cwd.call(void 0, ), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
           outDir = outDir.substring(1);
         }
         const env = {
-          NODE_ENV: buildConfig.mode || "production",
+          NODE_ENV: resolvedConfig.mode || "production",
           VITE_WEBVIEW_DIST: outDir
         };
         logger.info("extension build start");

package/dist/index.mjs

@@ -261,8 +261,9 @@ function useVSCodePlugin(options) {
   if (opts.webview) {
     devWebviewClient = readFileSync(path2.join(__dirname, "client.global.js"));
   }
-  let buildConfig;
+  let resolvedConfig;
   const prodHtmlCache = {};
+  let devtoolsFlag = false;
   return [
     {
       name: "@tomjs:vscode",
@@ -270,6 +271,9 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        resolvedConfig = config;
+      },
       configureServer(server) {
         var _a;
         if (!server || !server.httpServer) {
@@ -325,6 +329,25 @@ function useVSCodePlugin(options) {
         if (!opts.webview) {
           return html;
         }
+        if (opts.devtools ?? true) {
+          let port;
+          if (resolvedConfig.plugins.find(
+            (s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name)
+          )) {
+            port = 8097;
+          } else if (resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name))) {
+            port = 8098;
+          }
+          if (port) {
+            html = html.replace(
+              /<head>/i,
+              `<head><script src="http://localhost:${port}"></script>`
+            );
+          } else if (!devtoolsFlag) {
+            devtoolsFlag = true;
+            logger.warn("Only support react-devtools and vue-devtools!");
+          }
+        }
         return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
@@ -336,7 +359,7 @@ function useVSCodePlugin(options) {
         return handleConfig(config);
       },
       configResolved(config) {
-        buildConfig = config;
+        resolvedConfig = config;
       },
       transformIndexHtml(html, ctx) {
         var _a;
@@ -352,12 +375,12 @@ function useVSCodePlugin(options) {
         if (webview) {
           webviewPath = genProdWebviewCode(prodHtmlCache, webview);
         }
-        let outDir = buildConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
+        let outDir = resolvedConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
         if (outDir.startsWith("/")) {
           outDir = outDir.substring(1);
         }
         const env = {
-          NODE_ENV: buildConfig.mode || "production",
+          NODE_ENV: resolvedConfig.mode || "production",
           VITE_WEBVIEW_DIST: outDir
         };
         logger.info("extension build start");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",