Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomjs/vscode-extension-webview
在 vscode 扩展开发使用 webview.html 时，支持 vue/react 的 HMR。When using webview.html in vscode extension development, HMR of vue/react is supported.
https://github.com/tomjs/vscode-extension-webview
client extension patch vscode webview
Last synced: 8 days ago
JSON representation
在 vscode 扩展开发使用 webview.html 时，支持 vue/react 的 HMR。When using webview.html in vscode extension development, HMR of vue/react is supported.
- Host: GitHub
- URL: https://github.com/tomjs/vscode-extension-webview
- Owner: tomjs
- License: mit
- Created: 2023-12-19T09:45:29.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-08T12:44:46.000Z (about 1 month ago)
- Last Synced: 2024-10-08T16:27:00.559Z (about 1 month ago)
- Topics: client, extension, patch, vscode, webview
- Language: HTML
- Homepage:
- Size: 557 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @tomjs/vscode-extension-webview
[](https://www.npmjs.com/package/@tomjs/vscode-extension-webview)   **English** | [中文](./README.zh_CN.md)
> When using `webview.html` in `vscode` extension development, `HMR` of `vue`/`react` is supported.
Due to the limitations of `webview.html`, `HMR` of `vue`/`react` cannot be used directly, so some special processing is required to achieve it. You can implement `HMR` by adding an `` tag to the content that returns `html` and setting the `src` to `http://localhost:5173`. The client sends a message to the parent `webview` through `postMessage` to implement the API of [acquireVsCodeApi](https://code.visualstudio.com/api/references/vscode-api#Webview).
Others can also monitor front-end code changes and refresh the front-end code through `commands.executeCommand('workbench.action.webview.reloadWebviewAction')`.
If you use `vite` for development, [@tomjs/vite-plugin-vscode](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) is recommended
## Install
```bash
# pnpm
pnpm add @tomjs/vscode-extension-webview
# yarn
yarn add @tomjs/vscode-extension-webview
# npm
npm i @tomjs/vscode-extension-webview
```
## Usage
`extension`
```ts
import getHtml from '@tomjs/vscode-extension-webview';
const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
enableScripts: true,
localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
});
if (process.env.NODE_ENV === 'development') {
panel.webview.html = getHtml({
serverUrl: `http://localhost:5173`,
});
} else {
panel.webview.html = /* html */ `
`;
}
```
Place the client code in `main.ts` of `vue`/`react` at the top.
```ts
// eslint-disable-next-line simple-import-sort/imports
import '@tomjs/vscode-extension-webview/client';
```
## Documentation
- [index.d.ts](https://www.unpkg.com/browse/@tomjs/vscode-extension-webview/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).
## Examples
First execute the following command to install dependencies and generate library files:
```bash
pnpm install
pnpm build
```
Open the [examples](./examples) directory, there are `vue` and `react` examples.
- [react](./examples/react)
- [vue](./examples/vue)
## Important Notes
### v2.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`.