@tomjs/vite-plugin-vscode 6.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +12 -7
  2. package/README.zh_CN.md +12 -7
  3. package/dist/index.d.ts +3 -2
  4. package/dist/index.js +56 -21
  5. package/package.json +10 -12
package/README.md CHANGED
@@ -286,12 +286,12 @@ const value = await acquireVsCodeApi().getState();
286
286
 
287
287
  ### PluginOptions
288
288
 
289
- | Property | Type | Default | Description |
290
- | ----------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
291
- | recommended | `boolean` | `true` | This option is intended to provide recommended default parameters and behavior. |
292
- | extension | [ExtensionOptions](#ExtensionOptions) | | Configuration options for the vscode extension. |
293
- | webview | `boolean` \| [WebviewOption](#WebviewOption) | `true` | Inject html code |
294
- | 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 |
289
+ | Property | Type | Default | Description |
290
+ | ----------- | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
291
+ | recommended | `boolean` | `true` | This option is intended to provide recommended default parameters and behavior. |
292
+ | extension | [ExtensionOptions](#ExtensionOptions) | | Configuration options for the vscode extension. |
293
+ | webview | `boolean` \| [WebviewOption](#WebviewOption) | `true` | Inject html code |
294
+ | devtools | `boolean` \| `number` | `false` | Inject script code is used for debugging in [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) or [vue-devtools](https://devtools.vuejs.org/guide/standalone), and the port can be customized. |
295
295
 
296
296
  #### Notice
297
297
 
@@ -406,7 +406,7 @@ Run `Debug Extension` through `vscode` to debug. For debugging tools, refer to [
406
406
  "background": {
407
407
  "activeOnStart": true,
408
408
  "beginsPattern": "^.*extension build start*$",
409
- "endsPattern": "^.*extension (build|rebuild) success.*$"
409
+ "endsPattern": "^.*extension build success.*$"
410
410
  }
411
411
  },
412
412
  "isBackground": true,
@@ -446,6 +446,7 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
446
446
  - [vue](./examples/vue): Simple vue example.
447
447
  - [vue-esm](./examples/vue-esm): Simple vue (ESM Extension) example.
448
448
  - [vue-import](./examples/vue-import): Dynamic import() and multi-page examples.
449
+ - [vue-vite8](./examples/vue-rolldown): [vite8](https://vite.dev/) example.
449
450
 
450
451
  ## Related
451
452
 
@@ -455,6 +456,10 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
455
456
 
456
457
  ## Important Notes
457
458
 
459
+ ### v7.0.0
460
+
461
+ Change the default value of the parameter `devtools` to `false`.
462
+
458
463
  ### v6.0.0
459
464
 
460
465
  **Breaking Updates:**
package/README.zh_CN.md CHANGED
@@ -285,12 +285,12 @@ const value = await acquireVsCodeApi().getState();
285
285
 
286
286
  ### PluginOptions
287
287
 
288
- | 参数名 | 类型 | 默认值 | 说明 |
289
- | ----------- | -------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
290
- | recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
291
- | extension | [ExtensionOptions](#ExtensionOptions) | | vscode extension 可选配置 |
292
- | webview | `boolean` \| [WebviewOption](#WebviewOption) | `true` | 注入 html 代码 |
293
- | devtools | `boolean` | `true` | 注入 script 代码用于 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 或 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 调试 |
288
+ | 参数名 | 类型 | 默认值 | 说明 |
289
+ | ----------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
290
+ | recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
291
+ | extension | [ExtensionOptions](#ExtensionOptions) | | vscode extension 可选配置 |
292
+ | webview | `boolean` \| [WebviewOption](#WebviewOption) | `true` | 注入 html 代码 |
293
+ | devtools | `boolean` \| `number` | `false` | 注入 script 代码用于 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 或 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 调试，可自定义端口 |
294
294
 
295
295
  #### Notice
296
296
 
@@ -406,7 +406,7 @@ const value = await acquireVsCodeApi().getState();
406
406
  "background": {
407
407
  "activeOnStart": true,
408
408
  "beginsPattern": "^.*extension build start*$",
409
- "endsPattern": "^.*extension (build|rebuild) success.*$"
409
+ "endsPattern": "^.*extension build success.*$"
410
410
  }
411
411
  },
412
412
  "isBackground": true,
@@ -450,6 +450,7 @@ pnpm build
450
450
  - [vue](./examples/vue)：简单的 vue 示例。
451
451
  - [vue-esm](./examples/vue-esm)：简单的 vue（ESM 扩展）示例。
452
452
  - [vue-import](./examples/vue-import)：动态 import() 和多页面示例。
453
+ - [vue-vite8](./examples/vue-rolldown): [vite8](https://cn.vite.dev/) 示例。
453
454
 
454
455
  ## 关联
455
456
 
@@ -459,6 +460,10 @@ pnpm build
459
460
 
460
461
  ## 重要说明
461
462
 
463
+ ### v7.0.0
464
+
465
+ 参数 `devtools` 默认值改为 `false`
466
+
462
467
  ### v6.0.0
463
468
 
464
469
  **破坏性更新：**
package/dist/index.d.ts CHANGED
@@ -69,9 +69,10 @@ interface PluginOptions {
69
69
  * - true:
70
70
  * - react: inject `<script src="http://localhost:8097"></script>`
71
71
  * - vue: inject `<script src="http://localhost:8098"></script>`
72
- * @default true
72
+ * - `number`: custom port
73
+ * @default false
73
74
  */
74
- devtools?: boolean;
75
+ devtools?: boolean | number;
75
76
  }
76
77
  //#endregion
77
78
  //#region src/index.d.ts
package/dist/index.js CHANGED
@@ -6,10 +6,11 @@ import { readFileSync, readJsonSync } from "@tomjs/node";
6
6
  import { execa } from "execa";
7
7
  import merge from "lodash.merge";
8
8
  import { parse } from "node-html-parser";
9
+ import colors from "picocolors";
9
10
  import { build } from "tsdown";
10
- import Logger from "@tomjs/logger";
11
+ import { createLogger } from "vite";
11
12
 
12
- //#region node_modules/.pnpm/tsdown@0.18.4_publint@0.3.16_synckit@0.11.11_typescript@5.9.3_vue-tsc@3.2.1_typescript@5.9.3_/node_modules/tsdown/esm-shims.js
13
+ //#region node_modules/.pnpm/tsdown@0.19.0_publint@0.3.16_synckit@0.11.11_typescript@5.9.3_vue-tsc@3.2.1_typescript@5.9.3_/node_modules/tsdown/esm-shims.js
13
14
  const getFilename = () => fileURLToPath(import.meta.url);
14
15
  const getDirname = () => path.dirname(getFilename());
15
16
  const __dirname = /* @__PURE__ */ getDirname();
@@ -23,12 +24,28 @@ const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
23
24
 
24
25
  //#endregion
25
26
  //#region src/logger.ts
26
- function createLogger() {
27
- return new Logger({
27
+ function createLogger$1(logLevel) {
28
+ const logger$1 = createLogger(logLevel, {
28
29
  prefix: `[${PLUGIN_NAME}]`,
29
- time: true
30
+ allowClearScreen: true
30
31
  });
32
+ [
33
+ "info",
34
+ "warn",
35
+ "warnOnce",
36
+ "error"
37
+ ].forEach((level) => {
38
+ const _level = logger$1[level];
39
+ logger$1[level] = (msg, options) => {
40
+ _level(msg, Object.assign({
41
+ timestamp: true,
42
+ clear: false
43
+ }, options));
44
+ };
45
+ });
46
+ return logger$1;
31
47
  }
48
+ const logger = createLogger$1();
32
49
 
33
50
  //#endregion
34
51
  //#region src/utils.ts
@@ -66,7 +83,6 @@ function resolveServerUrl(server) {
66
83
  //#endregion
67
84
  //#region src/index.ts
68
85
  const isDev = process.env.NODE_ENV === "development";
69
- const logger = createLogger();
70
86
  function getPkg() {
71
87
  const pkgFile = path.resolve(process.cwd(), "package.json");
72
88
  if (!fs.existsSync(pkgFile)) throw new Error("Main file is not specified, and no package.json found");
@@ -170,7 +186,7 @@ export default getWebviewHtml;
170
186
  }
171
187
  function useVSCodePlugin(options) {
172
188
  const opts = preMergeOptions(options);
173
- const handleConfig = (config) => {
189
+ const handleConfig = (config, isRolldown) => {
174
190
  let outDir = config?.build?.outDir || "dist";
175
191
  opts.extension ??= {};
176
192
  if (opts.recommended) {
@@ -178,18 +194,22 @@ function useVSCodePlugin(options) {
178
194
  outDir = path.resolve(outDir, "webview");
179
195
  }
180
196
  const assetsDir = config?.build?.assetsDir || "assets";
181
- const output = {
197
+ const outputDefault = {
182
198
  chunkFileNames: `${assetsDir}/[name].js`,
183
199
  entryFileNames: `${assetsDir}/[name].js`,
184
200
  assetFileNames: `${assetsDir}/[name].[ext]`
185
201
  };
186
- let rollupOutput = config?.build?.rollupOptions?.output ?? {};
187
- if (Array.isArray(rollupOutput)) rollupOutput.map((s) => Object.assign(s, output));
188
- else rollupOutput = Object.assign({}, rollupOutput, output);
202
+ const outputOptions = {};
203
+ const buildConfig = config.build || {};
204
+ const optKey = isRolldown ? "rolldownOptions" : ["rolldownOptions", "rollupOptions"].find((s) => buildConfig[s]) || "rollupOptions";
205
+ let output = buildConfig[optKey]?.output || {};
206
+ if (Array.isArray(output)) output.map((s) => Object.assign(s, outputDefault));
207
+ else output = Object.assign({}, output, outputDefault);
208
+ outputOptions[optKey] = Object.assign(outputOptions[optKey] || {}, { output });
189
209
  return { build: {
190
210
  outDir,
191
211
  sourcemap: isDev ? true : config?.build?.sourcemap,
192
- rollupOptions: { output: rollupOutput }
212
+ ...outputOptions
193
213
  } };
194
214
  };
195
215
  let devWebviewClientCode;
@@ -201,7 +221,7 @@ function useVSCodePlugin(options) {
201
221
  name: "@tomjs:vscode",
202
222
  apply: "serve",
203
223
  config(config) {
204
- return handleConfig(config);
224
+ return handleConfig(config, this && "rolldownVersion" in this.meta);
205
225
  },
206
226
  configResolved(config) {
207
227
  resolvedConfig = config;
@@ -218,9 +238,10 @@ function useVSCodePlugin(options) {
218
238
  VITE_DEV_SERVER_URL: resolveServerUrl(server)
219
239
  };
220
240
  logger.info("extension build start");
221
- let buildCount = 0;
222
241
  const webview = opts?.webview;
223
242
  const { onSuccess: _onSuccess, ignoreWatch, logLevel, watchFiles, ...tsdownOptions } = opts.extension || {};
243
+ const entryDir = path.dirname(tsdownOptions.entry);
244
+ let buildFlag = false;
224
245
  await build(merge(tsdownOptions, {
225
246
  watch: watchFiles ?? (opts.recommended ? ["extension"] : true),
226
247
  ignoreWatch: [
@@ -239,6 +260,13 @@ function useVSCodePlugin(options) {
239
260
  },
240
261
  load(id) {
241
262
  if (id === RESOLVED_VIRTUAL_MODULE_ID) return devWebviewVirtualCode;
263
+ },
264
+ watchChange(id, e) {
265
+ let event = "";
266
+ if (e.event === "update") event = colors.green(e.event);
267
+ else if (e.event === "delete") event = colors.red(e.event);
268
+ else event = colors.blue(e.event);
269
+ logger.info(`${event} ${colors.dim(path.relative(entryDir, id))}`);
242
270
  }
243
271
  }],
244
272
  async onSuccess(config, signal) {
@@ -246,18 +274,25 @@ function useVSCodePlugin(options) {
246
274
  if (typeof _onSuccess === "string") await execa(_onSuccess);
247
275
  else if (typeof _onSuccess === "function") await _onSuccess(config, signal);
248
276
  }
249
- if (buildCount++ > 1) logger.info("extension rebuild success");
250
- else logger.info("extension build success");
251
- }
277
+ if (!buildFlag) {
278
+ buildFlag = true;
279
+ logger.info("extension build success");
280
+ }
281
+ },
282
+ buildOptions: {}
252
283
  }));
253
284
  });
254
285
  },
255
286
  transformIndexHtml(html) {
256
287
  if (!opts.webview) return html;
257
- if (opts.devtools ?? true) {
288
+ const devtools = opts.devtools;
289
+ if (devtools) {
258
290
  let port;
259
- if (resolvedConfig.plugins.find((s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name))) port = 8097;
260
- else if (resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name))) port = 8098;
291
+ if (typeof devtools === "number") port = devtools;
292
+ else if (devtools === true) {
293
+ if (resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name))) port = 8098;
294
+ else if (resolvedConfig.plugins.find((s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name))) port = 8097;
295
+ }
261
296
  if (port) html = html.replace(/<head>/i, `<head><script src="http://localhost:${port}"><\/script>`);
262
297
  else if (!devtoolsFlag) {
263
298
  devtoolsFlag = true;
@@ -271,7 +306,7 @@ function useVSCodePlugin(options) {
271
306
  apply: "build",
272
307
  enforce: "post",
273
308
  config(config) {
274
- return handleConfig(config);
309
+ return handleConfig(config, this && "rolldownVersion" in this.meta);
275
310
  },
276
311
  configResolved(config) {
277
312
  resolvedConfig = config;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tomjs/vite-plugin-vscode",
3
3
  "type": "module",
4
- "version": "6.1.0",
4
+ "version": "7.0.0",
5
5
  "description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
6
6
  "author": {
7
7
  "name": "Tom Gao",
@@ -50,23 +50,22 @@
50
50
  "vite": ">=2"
51
51
  },
52
52
  "dependencies": {
53
- "@tomjs/logger": "^1.4.0",
54
53
  "@tomjs/node": "^2.2.3",
55
54
  "execa": "^9.6.1",
56
55
  "lodash.merge": "^4.6.2",
57
- "node-html-parser": "^7.0.1",
58
- "tsdown": "~0.18.4"
56
+ "node-html-parser": "^7.0.2",
57
+ "picocolors": "^1.1.1",
58
+ "tsdown": "~0.19.0"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@antfu/eslint-config": "^6.7.3",
62
- "@commitlint/cli": "^20.2.0",
62
+ "@commitlint/cli": "^20.3.1",
63
63
  "@tomjs/commitlint": "^5.0.0",
64
- "@tomjs/eslint": "^6.3.0",
65
- "@tomjs/stylelint": "^7.0.0",
66
- "@tomjs/tsconfig": "^3.0.1",
64
+ "@tomjs/eslint": "^6.5.0",
65
+ "@tomjs/stylelint": "^7.1.1",
66
+ "@tomjs/tsconfig": "^3.2.0",
67
67
  "@types/lodash.merge": "^4.6.9",
68
- "@types/node": "^20.19.27",
69
- "@vitejs/plugin-vue": "^6.0.3",
68
+ "@types/node": "^20.19.28",
70
69
  "cross-env": "^10.1.0",
71
70
  "eslint": "^9.39.2",
72
71
  "globals": "^16.5.0",
@@ -78,8 +77,7 @@
78
77
  "stylelint": "^16.26.1",
79
78
  "tsx": "^4.21.0",
80
79
  "typescript": "~5.9.3",
81
- "vite": "^7.3.0",
82
- "vue-tsc": "^3.2.1"
80
+ "vite": "^7.3.1"
83
81
  },
84
82
  "scripts": {
85
83
  "dev": "pnpm clean && tsdown --watch",