@tomjs/vite-plugin-vscode 1.2.0 → 1.3.0

package/README.md

@@ -88,7 +88,7 @@ private _getWebviewContent(webview: Webview, extensionUri: Uri) {
 
     if (process.env.VITE_DEV_SERVER_URL) {
       // @ts-ignore
-      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+      return __getWebviewHtml__({ serverUrl: process.env.VITE_DEV_SERVER_URL });
     }
 
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
@@ -223,9 +223,17 @@ Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/
 
 `vscode extension` use.
 
-| Variable              | Description                |
-| --------------------- | -------------------------- |
-| `VITE_DEV_SERVER_URL` | The url of the dev server. |
+- `development` mode
+
+| Variable              | Description                     |
+| --------------------- | ------------------------------- |
+| `VITE_DEV_SERVER_URL` | The url of the vite dev server. |
+
+- `production` mode
+
+| Variable | Description |
+| --- | --- |
+| `VITE_DIST_FILES` | All js files in the dist directory, excluding index.js. It's to be a json string. |
 
 ## Debug
 
@@ -299,5 +307,6 @@ pnpm build
 
 Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
-- [react](./examples/react)
-- [vue](./examples/vue)
+- [react](./examples/react): simple react example.
+- [vue](./examples/vue): simple vue example.
+- [vue-import](./examples/vue-import): dynamic import() example.

package/README.zh_CN.md

@@ -80,15 +80,15 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
 ```ts
 private _getWebviewContent(webview: Webview, extensionUri: Uri) {
     // The CSS file from the Vue build output
-    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
+    const stylesUri = getUri(webview, extensionUri, ['dist/webview/assets/index.css']);
     // The JS file from the Vue build output
-    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
+    const scriptUri = getUri(webview, extensionUri, ['dist/webview/assets/index.js']);
 
     const nonce = uuid();
 
     if (process.env.VITE_DEV_SERVER_URL) {
       // @ts-ignore
-      return __getWebviewHtml({ serverUrl: process.env.VITE_DEV_SERVER_URL });
+      return __getWebviewHtml__({ serverUrl: process.env.VITE_DEV_SERVER_URL });
     }
 
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
@@ -140,15 +140,6 @@ export default defineConfig({
     }),
     vscode(),
   ],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
 });
 ```
 
@@ -164,15 +155,6 @@ import react from '@vitejs/plugin-react-swc';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), vscode()],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
 });
 ```
 
@@ -222,9 +204,17 @@ export default defineConfig({
 
 `vscode extension` 使用
 
+- `development` 模式
+
 | 变量                  | 描述                  |
 | --------------------- | --------------------- |
-| `VITE_DEV_SERVER_URL` | Vite 开发服务器的 URL |
+| `VITE_DEV_SERVER_URL` | vite开发服务器的url。 |
+
+- `production` 模式
+
+| 变量              | 描述                                                            |
+| ----------------- | --------------------------------------------------------------- |
+| `VITE_DIST_FILES` | dist目录下的所有js文件，不包括index.js。 它是一个 json 字符串。 |
 
 ## Debug
 
@@ -298,5 +288,6 @@ pnpm build
 
 打开 [examples](./examples) 目录，有 `vue` 和 `react` 示例。
 
-- [react](./examples/react)
-- [vue](./examples/vue)
+- [react](./examples/react)：简单的 react 示例。
+- [vue](./examples/vue)：简单的 vue 示例。
+- [vue-import](./examples/vue-import)：动态 import() 示例。

package/dist/index.js

@@ -9,7 +9,7 @@ var _tsup = require('tsup');
 // src/constants.ts
 var PLUGIN_NAME = "@tomjs:vscode";
 var WEBVIEW_PACKAGE_NAME = "@tomjs/vscode-extension-webview";
-var WEBVIEW_METHOD_NAME = "__getWebviewHtml";
+var WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
 
 // src/logger.ts
 var _dayjs = require('dayjs'); var _dayjs2 = _interopRequireDefault(_dayjs);
@@ -146,20 +146,42 @@ function preMergeOptions(options) {
   opts.webview = _nullishCoalesce(opts.webview, () => ( WEBVIEW_METHOD_NAME));
   return opts;
 }
+function readAllFiles(dir) {
+  return _fs2.default.readdirSync(dir).reduce((files, file) => {
+    const name = _path2.default.join(dir, file);
+    const isDir = _fs2.default.statSync(name).isDirectory();
+    return isDir ? [...files, ...readAllFiles(name)] : [...files, name];
+  }, []);
+}
 function useVSCodePlugin(options) {
   const opts = preMergeOptions(options);
   const handleConfig = (config) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     let outDir = ((_a = config == null ? void 0 : config.build) == null ? void 0 : _a.outDir) || "dist";
     opts.extension ??= {};
     if (opts.recommended) {
       opts.extension.outDir = _path2.default.resolve(outDir, "extension");
       outDir = _path2.default.resolve(outDir, "webview");
     }
+    const assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) || "assets";
+    const output = {
+      chunkFileNames: `${assetsDir}/[name].js`,
+      entryFileNames: `${assetsDir}/[name].js`,
+      assetFileNames: `${assetsDir}/[name].[ext]`
+    };
+    let rollupOutput = _nullishCoalesce(((_d = (_c = config == null ? void 0 : config.build) == null ? void 0 : _c.rollupOptions) == null ? void 0 : _d.output), () => ( {}));
+    if (Array.isArray(rollupOutput)) {
+      rollupOutput.map((s) => Object.assign(s, output));
+    } else {
+      rollupOutput = Object.assign({}, rollupOutput, output);
+    }
     return {
       build: {
         outDir,
-        sourcemap: isDev ? true : (_b = config == null ? void 0 : config.build) == null ? void 0 : _b.sourcemap
+        sourcemap: isDev ? true : (_e = config == null ? void 0 : config.build) == null ? void 0 : _e.sourcemap,
+        rollupOptions: {
+          output: rollupOutput
+        }
       }
     };
   };
@@ -179,6 +201,7 @@ function useVSCodePlugin(options) {
       }
     }
   }
+  let buildConfig;
   return [
     {
       name: "@tomjs:vscode",
@@ -249,8 +272,26 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        buildConfig = config;
+      },
       closeBundle() {
-        _tsup.build.call(void 0, opts.extension);
+        const { outDir } = buildConfig.build;
+        const cwd2 = process.cwd();
+        const allFiles = readAllFiles(outDir).filter((file) => file.endsWith(".js") && !file.endsWith("index.js")).map((s) => s.replace(cwd2, "").replaceAll("\\", "/").substring(1));
+        const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
+        _tsup.build.call(void 0, 
+          _lodashmerge2.default.call(void 0, tsupOptions, {
+            env: {
+              VITE_DIST_FILES: JSON.stringify(allFiles)
+            },
+            async onSuccess() {
+              if (typeof _onSuccess === "function") {
+                await _onSuccess();
+              }
+            }
+          })
+        );
       }
     }
   ];

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { build as tsupBuild } from "tsup";
 // src/constants.ts
 var PLUGIN_NAME = "@tomjs:vscode";
 var WEBVIEW_PACKAGE_NAME = "@tomjs/vscode-extension-webview";
-var WEBVIEW_METHOD_NAME = "__getWebviewHtml";
+var WEBVIEW_METHOD_NAME = "__getWebviewHtml__";
 
 // src/logger.ts
 import dayjs from "dayjs";
@@ -145,20 +145,42 @@ function preMergeOptions(options) {
   opts.webview = opts.webview ?? WEBVIEW_METHOD_NAME;
   return opts;
 }
+function readAllFiles(dir) {
+  return fs2.readdirSync(dir).reduce((files, file) => {
+    const name = path.join(dir, file);
+    const isDir = fs2.statSync(name).isDirectory();
+    return isDir ? [...files, ...readAllFiles(name)] : [...files, name];
+  }, []);
+}
 function useVSCodePlugin(options) {
   const opts = preMergeOptions(options);
   const handleConfig = (config) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     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");
     }
+    const assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) || "assets";
+    const output = {
+      chunkFileNames: `${assetsDir}/[name].js`,
+      entryFileNames: `${assetsDir}/[name].js`,
+      assetFileNames: `${assetsDir}/[name].[ext]`
+    };
+    let rollupOutput = ((_d = (_c = config == null ? void 0 : config.build) == null ? void 0 : _c.rollupOptions) == null ? void 0 : _d.output) ?? {};
+    if (Array.isArray(rollupOutput)) {
+      rollupOutput.map((s) => Object.assign(s, output));
+    } else {
+      rollupOutput = Object.assign({}, rollupOutput, output);
+    }
     return {
       build: {
         outDir,
-        sourcemap: isDev ? true : (_b = config == null ? void 0 : config.build) == null ? void 0 : _b.sourcemap
+        sourcemap: isDev ? true : (_e = config == null ? void 0 : config.build) == null ? void 0 : _e.sourcemap,
+        rollupOptions: {
+          output: rollupOutput
+        }
       }
     };
   };
@@ -178,6 +200,7 @@ function useVSCodePlugin(options) {
       }
     }
   }
+  let buildConfig;
   return [
     {
       name: "@tomjs:vscode",
@@ -248,8 +271,26 @@ function useVSCodePlugin(options) {
       config(config) {
         return handleConfig(config);
       },
+      configResolved(config) {
+        buildConfig = config;
+      },
       closeBundle() {
-        tsupBuild(opts.extension);
+        const { outDir } = buildConfig.build;
+        const cwd2 = process.cwd();
+        const allFiles = readAllFiles(outDir).filter((file) => file.endsWith(".js") && !file.endsWith("index.js")).map((s) => s.replace(cwd2, "").replaceAll("\\", "/").substring(1));
+        const { onSuccess: _onSuccess, ...tsupOptions } = opts.extension || {};
+        tsupBuild(
+          merge(tsupOptions, {
+            env: {
+              VITE_DIST_FILES: JSON.stringify(allFiles)
+            },
+            async onSuccess() {
+              if (typeof _onSuccess === "function") {
+                await _onSuccess();
+              }
+            }
+          })
+        );
       }
     }
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/vite-plugin-vscode",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The vite plugin for vscode extension, supports esm and cjs.",
   "keywords": [
     "vite",