feat: export wrapper class and remove instances

tomgao365 · tomgao365 · commit 0d4fc90001c2 · 2024-10-08T20:32:21.000+08:00
diff --git a/packages/vscode-webview/README.md b/packages/vscode-webview/README.md
@@ -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
 
@@ -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
diff --git a/packages/vscode-webview/README.zh_CN.md b/packages/vscode-webview/README.zh_CN.md
@@ -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) 进行了封装并增加了一些方法。
 
 ## 安装
 
@@ -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`，需要手动引入并实例化
diff --git a/packages/vscode-webview/src/index.ts b/packages/vscode-webview/src/index.ts
