@tomjs/vite-plugin-vscode 6.2.0 → 7.1.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.
- package/README.md +15 -6
- package/README.zh_CN.md +12 -7
- package/dist/index.d.ts +3 -2
- package/dist/index.js +15 -13
- package/package.json +2 -2
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`
|
|
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
|
|
|
@@ -431,6 +431,11 @@ Run `Debug Extension` through `vscode` to debug. For debugging tools, refer to [
|
|
|
431
431
|
}
|
|
432
432
|
```
|
|
433
433
|
|
|
434
|
+
### Webpage Debugging
|
|
435
|
+
|
|
436
|
+
- You can use the standalone applications of [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) and [vue-devtools](https://devtools.vuejs.org/guide/standalone) to debug `webview`.
|
|
437
|
+
- For Vue projects, you can use the [vite-plugin-vue-devtools](https://devtools.vuejs.org/guide/vite-plugin) Vite plugin.
|
|
438
|
+
|
|
434
439
|
## Examples
|
|
435
440
|
|
|
436
441
|
First execute the following command to install dependencies and generate library files:
|
|
@@ -456,6 +461,10 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
|
|
|
456
461
|
|
|
457
462
|
## Important Notes
|
|
458
463
|
|
|
464
|
+
### v7.0.0
|
|
465
|
+
|
|
466
|
+
Change the default value of the parameter `devtools` to `false`.
|
|
467
|
+
|
|
459
468
|
### v6.0.0
|
|
460
469
|
|
|
461
470
|
**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) |
|
|
292
|
-
| webview | `boolean` \| [WebviewOption](#WebviewOption) | `true`
|
|
293
|
-
| devtools | `boolean`
|
|
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
|
|
|
@@ -433,7 +433,8 @@ const value = await acquireVsCodeApi().getState();
|
|
|
433
433
|
|
|
434
434
|
### 网页调试
|
|
435
435
|
|
|
436
|
-
可以使用 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 和 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 的独立应用调试 `webview`
|
|
436
|
+
- 可以使用 [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) 和 [vue-devtools](https://devtools.vuejs.org/guide/standalone) 的独立应用调试 `webview`
|
|
437
|
+
- `vue` 项目可以使用 [vite-plugin-vue-devtools](https://devtools.vuejs.org/guide/vite-plugin) 这个 `vite` 插件
|
|
437
438
|
|
|
438
439
|
## 示例
|
|
439
440
|
|
|
@@ -460,6 +461,10 @@ pnpm build
|
|
|
460
461
|
|
|
461
462
|
## 重要说明
|
|
462
463
|
|
|
464
|
+
### v7.0.0
|
|
465
|
+
|
|
466
|
+
参数 `devtools` 默认值改为 `false`
|
|
467
|
+
|
|
463
468
|
### v6.0.0
|
|
464
469
|
|
|
465
470
|
**破坏性更新：**
|
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
|
-
*
|
|
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
|
@@ -10,7 +10,7 @@ import colors from "picocolors";
|
|
|
10
10
|
import { build } from "tsdown";
|
|
11
11
|
import { createLogger } from "vite";
|
|
12
12
|
|
|
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.
|
|
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.2_typescript@5.9.3_/node_modules/tsdown/esm-shims.js
|
|
14
14
|
const getFilename = () => fileURLToPath(import.meta.url);
|
|
15
15
|
const getDirname = () => path.dirname(getFilename());
|
|
16
16
|
const __dirname = /* @__PURE__ */ getDirname();
|
|
@@ -193,19 +193,17 @@ function useVSCodePlugin(options) {
|
|
|
193
193
|
opts.extension.outDir = path.resolve(outDir, "extension");
|
|
194
194
|
outDir = path.resolve(outDir, "webview");
|
|
195
195
|
}
|
|
196
|
-
const assetsDir = config?.build?.assetsDir || "assets";
|
|
197
|
-
const outputDefault = {
|
|
198
|
-
chunkFileNames: `${assetsDir}/[name].js`,
|
|
199
|
-
entryFileNames: `${assetsDir}/[name].js`,
|
|
200
|
-
assetFileNames: `${assetsDir}/[name].[ext]`
|
|
201
|
-
};
|
|
202
196
|
const outputOptions = {};
|
|
203
197
|
const buildConfig = config.build || {};
|
|
204
198
|
const optKey = isRolldown ? "rolldownOptions" : ["rolldownOptions", "rollupOptions"].find((s) => buildConfig[s]) || "rollupOptions";
|
|
199
|
+
const outputDefault = {};
|
|
200
|
+
const inputs = buildConfig[optKey]?.input;
|
|
201
|
+
if (Array.isArray(inputs) && inputs.length === 1) if (isRolldown) outputDefault.codeSplitting = false;
|
|
202
|
+
else outputDefault.inlineDynamicImports = true;
|
|
205
203
|
let output = buildConfig[optKey]?.output || {};
|
|
206
|
-
if (Array.isArray(output)) output.map((s) => Object.assign(
|
|
207
|
-
else output = Object.assign({},
|
|
208
|
-
outputOptions[optKey] = Object.assign(outputOptions[optKey] || {}, { output });
|
|
204
|
+
if (Array.isArray(output)) output.map((s) => Object.assign({}, outputDefault, s));
|
|
205
|
+
else output = Object.assign({}, outputDefault, output);
|
|
206
|
+
outputOptions[optKey] = Object.assign(outputOptions[optKey] || {}, isRolldown ? {} : {}, { output });
|
|
209
207
|
return { build: {
|
|
210
208
|
outDir,
|
|
211
209
|
sourcemap: isDev ? true : config?.build?.sourcemap,
|
|
@@ -285,10 +283,14 @@ function useVSCodePlugin(options) {
|
|
|
285
283
|
},
|
|
286
284
|
transformIndexHtml(html) {
|
|
287
285
|
if (!opts.webview) return html;
|
|
288
|
-
|
|
286
|
+
const devtools = opts.devtools;
|
|
287
|
+
if (devtools) {
|
|
289
288
|
let port;
|
|
290
|
-
if (
|
|
291
|
-
else if (
|
|
289
|
+
if (typeof devtools === "number") port = devtools;
|
|
290
|
+
else if (devtools === true) {
|
|
291
|
+
if (resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name))) port = 8098;
|
|
292
|
+
else if (resolvedConfig.plugins.find((s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name))) port = 8097;
|
|
293
|
+
}
|
|
292
294
|
if (port) html = html.replace(/<head>/i, `<head><script src="http://localhost:${port}"><\/script>`);
|
|
293
295
|
else if (!devtoolsFlag) {
|
|
294
296
|
devtoolsFlag = true;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tomjs/vite-plugin-vscode",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "7.1.0",
|
|
5
5
|
"description": "Use vue/react to develop 'vscode extension webview', supporting esm/cjs",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Tom Gao",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"stylelint": "^16.26.1",
|
|
78
78
|
"tsx": "^4.21.0",
|
|
79
79
|
"typescript": "~5.9.3",
|
|
80
|
-
"vite": "^
|
|
80
|
+
"vite": "^8.0.0-beta.8"
|
|
81
81
|
},
|
|
82
82
|
"scripts": {
|
|
83
83
|
"dev": "pnpm clean && tsdown --watch",
|