@tomjs/vite-plugin-vscode 2.6.0 → 3.1.0

package/README.md

@@ -14,6 +14,7 @@ In development mode, inject the same code of [@tomjs/vscode-extension-webview](h
 - Simple configuration, focus on business
 - Support `esm` and `cjs`
 - 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`
 
@@ -221,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.
 
@@ -239,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.
@@ -384,3 +393,11 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 - [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): Some utilities to simplify the development of [VSCode Extensions](https://marketplace.visualstudio.com/VSCode).
 - [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): Some development tools to simplify the development of [vscode extensions](https://marketplace.visualstudio.com/VSCode).
 - [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/vscode-webview): Optimize the `postMessage` issue between `webview` page and [vscode extensions](https://marketplace.visualstudio.com/VSCode)
+
+## Important Notes
+
+### v3.0.0
+
+**Breaking Updates:**
+
+- The simulated `acquireVsCodeApi` is consistent with the `acquireVsCodeApi` of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview), and `sessionStorage.getItem` and `sessionStorage.setItem` are used to implement `getState` and `setState`.

package/README.zh_CN.md

@@ -14,6 +14,7 @@
 - 配置简单，专注业务
 - 支持 `esm`和 `cjs`
 - 支持 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)
 
@@ -225,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`。以下默认的前提条件是使用推荐的 [项目结构](#目录结构)。
 
@@ -234,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`。
 
@@ -244,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)，添加了一些默认值，方便使用。
@@ -291,6 +300,8 @@ const value = await acquireVsCodeApi().getState();
 
 ## Debug
 
+### 扩展调试
+
 通过 `vscode` 运行 `Debug Extension` 调试，调试工具参考 [官方文档](https://code.visualstudio.com/docs/editor/debugging)
 
 `launch.json` 配置如下：
@@ -367,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`
+
 ## 示例
 
 先执行以下命令安装依赖，并生成库文件：
@@ -387,3 +402,11 @@ pnpm build
 - [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): 一些实用工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
 - [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): 一些开发工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
 - [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/vscode-webview): 优化 `webview` 页面与 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的 `postMessage` 问题
+
+## 重要说明
+
+### v3.0.0
+
+**破坏性更新：**
+
+- 模拟的 `acquireVsCodeApi` 与 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 的 `acquireVsCodeApi` 保持一致，改用 `sessionStorage.getItem` 和 `sessionStorage.setItem` 来实现 `getState` 和 `setState`。

package/dist/client.global.js

@@ -35,8 +35,6 @@
           document.head.appendChild(defaultStyles);
         });
       }
-      var GET_STATE_TYPE = "[vscode:client]:getState";
-      var SET_STATE_TYPE = "[vscode:client]:setState";
       var POST_MESSAGE_TYPE = "[vscode:client]:postMessage";
       function patchAcquireVsCodeApi() {
         class AcquireVsCodeApi {
@@ -46,31 +44,12 @@
           }
           getState() {
             console.log(TAG, "mock acquireVsCodeApi.getState");
-            return new Promise((resolve, reject) => {
-              function post() {
-                window.parent.postMessage({ type: GET_STATE_TYPE }, "*");
-              }
-              const timeoutId = setTimeout(() => {
-                window.removeEventListener("message", receive);
-                reject(new Error("Timeout"));
-              }, 2e3);
-              function receive(e) {
-                var _a, _b;
-                console.log(e);
-                if (!e.origin.startsWith("vscode-webview://") || ((_a = e.data) == null ? void 0 : _a.type) !== GET_STATE_TYPE) {
-                  return;
-                }
-                window.removeEventListener("message", receive);
-                clearTimeout(timeoutId);
-                resolve((_b = e.data) == null ? void 0 : _b.data);
-              }
-              window.addEventListener("message", receive);
-              post();
-            });
+            const state = sessionStorage.getItem("vscodeState");
+            return state ? JSON.parse(state) : void 0;
           }
           setState(newState) {
             console.log(TAG, "mock acquireVsCodeApi.setState:", newState);
-            window.parent.postMessage({ type: SET_STATE_TYPE, data: newState }, "*");
+            sessionStorage.setItem("vscodeState", JSON.stringify(newState));
             return newState;
           }
         }

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Plugin } from 'vite';
+import { PluginOption } from 'vite';
 import { Options } from 'tsup';
 
 /**
@@ -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,8 +88,16 @@ 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): Plugin[];
+declare function useVSCodePlugin(options?: PluginOptions): PluginOption;
 
 export { ExtensionOptions, PluginOptions, WebviewOption, useVSCodePlugin as default, useVSCodePlugin };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'vite';
+import { PluginOption } from 'vite';
 import { Options } from 'tsup';
 
 /**
@@ -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,8 +88,16 @@ 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): Plugin[];
+declare function useVSCodePlugin(options?: PluginOptions): PluginOption;
 
 export { ExtensionOptions, PluginOptions, WebviewOption, useVSCodePlugin as default, useVSCodePlugin };

package/dist/index.js

@@ -3,7 +3,6 @@ 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);
 var _lodashmerge = require('lodash.merge'); var _lodashmerge2 = _interopRequireDefault(_lodashmerge);
 var _nodehtmlparser = require('node-html-parser');
 var _tsup = require('tsup');
@@ -119,7 +118,7 @@ function preMergeOptions(options) {
         skipNodeModulesBundle: isDev
       }
     },
-    _lodashclonedeep2.default.call(void 0, options)
+    options
   );
   const opt = opts.extension || {};
   ["entry", "format"].forEach((prop) => {
@@ -255,7 +254,7 @@ 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 = {};
   return [
     {
@@ -264,6 +263,9 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        resolvedConfig = config;
+      },
       configureServer(server) {
         var _a;
         if (!server || !server.httpServer) {
@@ -319,6 +321,24 @@ 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 {
+            logger.warn("Only support react or vue!");
+          }
+        }
         return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
@@ -330,7 +350,7 @@ function useVSCodePlugin(options) {
         return handleConfig(config);
       },
       configResolved(config) {
-        buildConfig = config;
+        resolvedConfig = config;
       },
       transformIndexHtml(html, ctx) {
         var _a;
@@ -346,12 +366,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

@@ -1,4 +1,4 @@
-// node_modules/.pnpm/tsup@7.2.0_@swc+core@1.3.100_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.7.26_postcss@8.4.32_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,7 +10,6 @@ import fs from "fs";
 import os from "os";
 import path2 from "path";
 import { cwd } 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";
@@ -126,7 +125,7 @@ function preMergeOptions(options) {
         skipNodeModulesBundle: isDev
       }
     },
-    cloneDeep(options)
+    options
   );
   const opt = opts.extension || {};
   ["entry", "format"].forEach((prop) => {
@@ -262,7 +261,7 @@ function useVSCodePlugin(options) {
   if (opts.webview) {
     devWebviewClient = readFileSync(path2.join(__dirname, "client.global.js"));
   }
-  let buildConfig;
+  let resolvedConfig;
   const prodHtmlCache = {};
   return [
     {
@@ -271,6 +270,9 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        resolvedConfig = config;
+      },
       configureServer(server) {
         var _a;
         if (!server || !server.httpServer) {
@@ -326,6 +328,24 @@ 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 {
+            logger.warn("Only support react or vue!");
+          }
+        }
         return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       }
     },
@@ -337,7 +357,7 @@ function useVSCodePlugin(options) {
         return handleConfig(config);
       },
       configResolved(config) {
-        buildConfig = config;
+        resolvedConfig = config;
       },
       transformIndexHtml(html, ctx) {
         var _a;
@@ -353,12 +373,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/dist/webview.js

@@ -102,16 +102,6 @@ var template_default = `<!doctype html>
           console.log(TAG + ' received:', e.data);
           if (type === '[vscode:client]:postMessage') {
             getApi().postMessage(data);
-          } else if (type === '[vscode:client]:getState') {
-            iframe.contentWindow.postMessage(
-              {
-                type: '[vscode:client]:getState',
-                data: getApi().getState(),
-              },
-              '*',
-            );
-          } else if (type === '[vscode:client]:setState') {
-            getApi().setState(data);
           }
         }
       }

package/dist/webview.mjs

@@ -102,16 +102,6 @@ var template_default = `<!doctype html>
           console.log(TAG + ' received:', e.data);
           if (type === '[vscode:client]:postMessage') {
             getApi().postMessage(data);
-          } else if (type === '[vscode:client]:getState') {
-            iframe.contentWindow.postMessage(
-              {
-                type: '[vscode:client]:getState',
-                data: getApi().getState(),
-              },
-              '*',
-            );
-          } else if (type === '[vscode:client]:setState') {
-            getApi().setState(data);
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "2.6.0",
+  "version": "3.1.0",
   "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
   "keywords": [
     "vite",
@@ -79,7 +79,7 @@
     "@tomjs/tsconfig": "^1.3.0",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^18.19.7",
+    "@types/node": "18.19.55",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "husky": "^8.0.3",
@@ -89,7 +89,8 @@
     "rimraf": "^5.0.5",
     "stylelint": "^16.1.0",
     "tsx": "^4.7.0",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "vite": "5.4.8"
   },
   "peerDependencies": {
     "vite": ">=2"