Skip to content

Commit 30dc6d9

Browse files
tomgao365tomgao365
committed
feat: Both development and production support vscode extension injection of html code
1 parent 9c21bfc commit 30dc6d9

34 files changed

+803
-808
lines changed

‎README.md

+101-47
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@
44

55
**English** | [中文](./README.zh_CN.md)
66

7-
> The [vite](https://cn.vitejs.dev/) plugin for [vscode extension](https://code.visualstudio.com/api), supports `esm` and `cjs`.
7+
> Use `vue`/`react` to develop [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel), supporting `esm` and `cjs`.
88
9-
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.
9+
In development mode, inject the code of [@tomjs/vscode-extension-webview](https://github.com/tomjs/vscode-extension-webview) into `vscode extension code` and `web page code`, use To support `HMR`; during production build, the final generated `index.html` code is injected into `vscode extension code` to reduce the workload.
1010

1111
## Features
1212

13-
- Fast build `extension` with [tsup](https://github.com/egoist/tsup)
14-
- Little configuration, focus on business
13+
- Use [tsup](https://github.com/egoist/tsup) to quickly build `extension code`
14+
- Simple configuration, focus on business
1515
- Support `esm` and `cjs`
1616
- Support webview `HMR`
17-
- Support `vue` and `react` and other [frameworks](https://vitejs.dev/guide/#trying-vite-online) supported by `vite`
17+
- Support [Multi-Page App](https://vitejs.dev/guide/build.html#multi-page-app)
18+
- Supports `vue` and `react` and other [frameworks](https://cn.vitejs.dev/guide/#trying-vite-online) supported by `vite`
1819

1920
## Install
2021

@@ -75,39 +76,11 @@ const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewCol
7576
enableScripts: true,
7677
localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
7778
});
78-
```
79-
80-
```ts
81-
private _getWebviewContent(webview: Webview, extensionUri: Uri) {
82-
// The CSS file from the Vue build output
83-
const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
84-
// The JS file from the Vue build output
85-
const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
86-
87-
const nonce = uuid();
88-
89-
if (process.env.VITE_DEV_SERVER_URL) {
90-
return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
91-
}
9279

93-
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
94-
return /*html*/ `
95-
<!doctype html>
96-
<html lang="en">
97-
<head>
98-
<meta charset="UTF-8" />
99-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
100-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
101-
<script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
102-
<link rel="stylesheet" crossorigin href="${stylesUri}">
103-
<title>Hello World</title>
104-
</head>
105-
<body>
106-
<div id="app"></div>
107-
</body>
108-
</html>
109-
`;
110-
}
80+
// Vite development mode and production mode inject different webview codes to reduce development work
81+
panel.webview.html = process.env.VITE_DEV_SERVER_URL
82+
? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
83+
: __getWebviewHtml__(webview, context);
11184
```
11285

11386
- `package.json`
@@ -157,6 +130,70 @@ export default defineConfig({
157130
});
158131
```
159132

133+
### Multi-page application
134+
135+
See [vue-import](./examples/vue-import) example
136+
137+
- `vite.config.ts`
138+
139+
```ts
140+
import path from 'node:path';
141+
import vscode from '@tomjs/vite-plugin-vscode';
142+
143+
export default defineConfig({
144+
build: {
145+
plugins: [vscode()]
146+
rollupOptions: {
147+
// https://cn.vitejs.dev/guide/build.html#multi-page-app
148+
input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],
149+
// You can also customize the name
150+
// input:{
151+
// 'index': path.resolve(__dirname, 'index.html'),
152+
// 'index2': path.resolve(__dirname, 'index2.html'),
153+
// }
154+
},
155+
},
156+
});
157+
```
158+
159+
- page one
160+
161+
```ts
162+
process.env.VITE_DEV_SERVER_URL
163+
? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
164+
: __getWebviewHtml__(webview, context);
165+
```
166+
167+
- page two
168+
169+
```ts
170+
process.env.VITE_DEV_SERVER_URL
171+
? __getWebviewHtml__(`${process.env.VITE_DEV_SERVER_URL}/index2.html`)
172+
: __getWebviewHtml__(webview, context, 'index2');
173+
```
174+
175+
**getWebviewHtml** Description
176+
177+
```ts
178+
/**
179+
* `[vite serve]` Gets the html of webview in development mode.
180+
* @param options serverUrl: The url of the vite dev server.
181+
*/
182+
function __getWebviewHtml__(options?: string | { serverUrl: string }): string;
183+
184+
/**
185+
* `[vite serve]` Gets the html of webview in production mode.
186+
* @param webview The WebviewPanel instance of the extension.
187+
* @param context The ExtensionContext instance of the extension.
188+
* @param inputName vite build.rollupOptions.input name. Default is `index`.
189+
*/
190+
function __getWebviewHtml__(
191+
webview: Webview,
192+
context: ExtensionContext,
193+
inputName?: string,
194+
): string;
195+
```
196+
160197
## Documentation
161198

162199
- [API Documentation](https://paka.dev/npm/@tomjs/vite-plugin-vscode) provided by [paka.dev](https://paka.dev).
@@ -206,15 +243,15 @@ Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/
206243

207244
- `development` mode
208245

209-
| Variable | Description |
210-
| --------------------- | ------------------------------- |
211-
| `VITE_DEV_SERVER_URL` | The url of the vite dev server. |
246+
| Variable | Description |
247+
| --------------------- | ------------------------------ |
248+
| `VITE_DEV_SERVER_URL` | The url of the vite dev server |
212249

213250
- `production` mode
214251

215-
| Variable | Description |
216-
| --- | --- |
217-
| `VITE_DIST_FILES` | All js files in the dist directory, excluding index.js. It's to be a json string. |
252+
| Variable | Description |
253+
| ------------------- | ----------------------------- |
254+
| `VITE_WEBVIEW_DIST` | vite webview page output path |
218255

219256
## Debug
220257

@@ -232,7 +269,15 @@ Run `Debug Extension` through `vscode` to debug. For debugging tools, refer to [
232269
"request": "launch",
233270
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
234271
"outFiles": ["${workspaceFolder}/dist/extension/*.js"],
235-
"preLaunchTask": "${defaultBuildTask}"
272+
"preLaunchTask": "npm: dev"
273+
},
274+
{
275+
"name": "Preview Extension",
276+
"type": "extensionHost",
277+
"request": "launch",
278+
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
279+
"outFiles": ["${workspaceFolder}/dist/extension/*.js"],
280+
"preLaunchTask": "npm: build"
236281
}
237282
]
238283
}
@@ -272,6 +317,15 @@ Run `Debug Extension` through `vscode` to debug. For debugging tools, refer to [
272317
"kind": "build",
273318
"isDefault": true
274319
}
320+
},
321+
{
322+
"type": "npm",
323+
"script": "build",
324+
"group": {
325+
"kind": "build",
326+
"isDefault": true
327+
},
328+
"problemMatcher": []
275329
}
276330
]
277331
}
@@ -288,6 +342,6 @@ pnpm build
288342

289343
Open the [examples](./examples) directory, there are `vue` and `react` examples.
290344

291-
- [react](./examples/react): simple react example.
292-
- [vue](./examples/vue): simple vue example.
293-
- [vue-import](./examples/vue-import): dynamic import() example.
345+
- [react](./examples/react): Simple react example.
346+
- [vue](./examples/vue): Simple vue example.
347+
- [vue-import](./examples/vue-import): Dynamic import() and multi-page examples.

0 commit comments

Comments
 (0)