Skip to content

Commit

Permalink
feat: export wrapper class and remove instances
Browse files Browse the repository at this point in the history
  • Loading branch information
tomgao365 committed Oct 8, 2024
1 parent 0b8a4df commit 0d4fc90
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 69 deletions.
42 changes: 30 additions & 12 deletions packages/vscode-webview/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# @tomjs/vscode-webview

[![npm](https://img.shields.io/npm/v/@tomjs/vscode-webview)](https://www.npmjs.com/package/@tomjs/vscode-webview) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vscode-webview) ![NPM](https://img.shields.io/npm/l/@tomjs/vscode-webview) [![Docs](https://img.shields.io/badge/API-unpkg-orange)](https://www.unpkg.com/browse/@tomjs/vscode-webview/dist/index.d.ts)
[![npm](https://img.shields.io/npm/v/@tomjs/vscode-webview)](https://www.npmjs.com/package/@tomjs/vscode-webview) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vscode-webview) ![NPM](https://img.shields.io/npm/l/@tomjs/vscode-webview) [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@tomjs/vscode-webview)

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

> Optimize the postMessage issue between webview page and vscode extension
When developing extensions using `webview`, there will be communication-related issues. This project provides communication solutions between `webview` and extension. If [@tomjs/vite-plugin-vscode](https://github.com/tomjs/vite-plugin-vscode) is used during the development phase, there will be delay issues due to intermediate forwarding.
Wrapped the official [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) and added some methods.

## Install

Expand All @@ -23,42 +23,60 @@ npm add @tomjs/vscode-webview

## Documentation

- [API Document](https://www.jsdocs.io/package/@tomjs/vscode-webview) provided by [jsdocs.io](https://www.jsdocs.io).
- [index.d.ts](https://www.unpkg.com/browse/@tomjs/vscode-webview/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).

## Usage

### vscodeWebview.postAndReceiveMessage(type, message, options): Promise<any>
### vscodeWebview.getState()

Send and receive messages
Get the persistent state stored for this webview.

### vscodeWebview.setState(state)

Set the persistent state stored for this webview.

### vscodeWebview.postMessage(message)

Post a message to the owner of the webview

### vscodeWebview.post(type, message, options)

Send message

- type: message type
- message: message content
- options: configuration items

### vscodeWebview.postMessage(type, message, options)
### vscodeWebview.postAndReceive(type, message, options): Promise<any>

Send message
Send and receive messages

- type: message type
- message: message content
- options: configuration items

### vscodeWebview.on(type, listener)
### vscodeWebview.on(type, success[, fail])

Listen for messages

- type: message type
- listener: listener callback function
- success: listener success callback function
- fail: listener error callback function

### vscodeWebview.off(type)

Cancel listening for messages

- type: message type

### vscodeWebview.getState():Promise<any>
## Important Notes

Get the persistent state stored for this webview.
### v2.0.0

### vscodeWebview.setState(state: any): any
**Breaking Updates:**

Set the persistent state stored for this webview.
- Export the `WebviewApiWrapper` class that wraps `WebviewApi`
- Modify the `postMessage` method to be consistent with the method of the `WebviewApi` instance
- Change the original `postMessage` and `postAndReceiveMessage` method names to `post` and `postAndReceive`
- Delete the `WebviewApiWrapper` instances: `vscodeWebview` and `webviewApi`, which need to be manually introduced and instantiated
42 changes: 30 additions & 12 deletions packages/vscode-webview/README.zh_CN.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# @tomjs/vscode-webview

[![npm](https://img.shields.io/npm/v/@tomjs/vscode-webview)](https://www.npmjs.com/package/@tomjs/vscode-webview) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vscode-webview) ![NPM](https://img.shields.io/npm/l/@tomjs/vscode-webview) [![Docs](https://img.shields.io/badge/API-unpkg-orange)](https://www.unpkg.com/browse/@tomjs/vscode-webview/dist/index.d.ts)
[![npm](https://img.shields.io/npm/v/@tomjs/vscode-webview)](https://www.npmjs.com/package/@tomjs/vscode-webview) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vscode-webview) ![NPM](https://img.shields.io/npm/l/@tomjs/vscode-webview) [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@tomjs/vscode-webview)

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

> 优化 webview 页面与 vscode 扩展的 postMessage 问题
使用 `webview` 开发扩展,会有通讯相关的问题,本项目提供了 `webview` 和 扩展的通讯解决方案。如果使用了 [@tomjs/vite-plugin-vscode](https://github.com/tomjs/vite-plugin-vscode) 开发阶段,由于中间转发,会有延时的问题
对官方的 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 进行了封装并增加了一些方法

## 安装

Expand All @@ -23,42 +23,60 @@ npm add @tomjs/vscode-webview

## 文档

- [jsdocs.io](https://www.jsdocs.io) 提供的 [API Document](https://www.jsdocs.io/package/@tomjs/vscode-webview).
- [unpkg.com](https://www.unpkg.com/) 提供的 [index.d.ts](https://www.unpkg.com/browse/@tomjs/vscode-webview/dist/index.d.ts).

## 使用

### vscodeWebview.postAndReceiveMessage(type, message, options): Promise<any>
### vscodeWebview.getState(): any

发送并接收消息
获取此 webview 存储的持久状态。

### vscodeWebview.setState(state: any): any

设置此 webview 存储的持久状态。

### vscodeWebview.postMessage(message:any)

向 WebView 的所有者发布消息

### vscodeWebview.post(type, message, options)

发送消息

- type: 消息类型
- message: 消息内容
- options: 配置项

### vscodeWebview.postMessage(type, message, options)
### vscodeWebview.postAndReceive(type, message, options): Promise<any>

发送消息
发送并接收消息

- type: 消息类型
- message: 消息内容
- options: 配置项

### vscodeWebview.on(type, listener)
### vscodeWebview.on(type, success[, fail])

监听消息

- type: 消息类型
- listener: 监听回调函数
- success: 监听成功回调函数
- fail: 监听失败回调函数

### vscodeWebview.off(type)

取消监听消息

- type: 消息类型

### vscodeWebview.getState():Promise<any>
## 重要说明

获取此 webview 存储的持久状态。
### v2.0.0

### vscodeWebview.setState(state: any): any
**破坏性更新:**

设置此 webview 存储的持久状态。
- 导出 `WebviewApi` 的封装 `WebviewApiWrapper`
- `postMessage` 方法修改为与 `WebviewApi` 实例的方法一致
-`postMessage``postAndReceiveMessage` 方法名改为 `post``postAndReceive`
- 删除 `WebviewApiWrapper` 的实例:`vscodeWebview``webviewApi`,需要手动引入并实例化
Loading

0 comments on commit 0d4fc90

Please sign in to comment.