fix: postMessage delay issue #5

README.md

@@ -200,6 +200,14 @@ function __getWebviewHtml__(
 ): string;
 ```
 
+### Warning
+
+When using the `acquireVsCodeApi().getState()` method of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview), you must use `await` to call it. Since `acquireVsCodeApi` is a simulated implementation of this method by the plugin, it is inconsistent with the original method. I am very sorry. If you have other solutions, please share them. Thank you very much.
+
+```ts
+const value = await acquireVsCodeApi().getState();
+```
+
 ## Documentation
 
 - [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).
@@ -375,3 +383,4 @@ Open the [examples](./examples) directory, there are `vue` and `react` examples.
 
 - [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): Some utilities to simplify the development of [VSCode Extensions](https://marketplace.visualstudio.com/VSCode).
 - [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): Some development tools to simplify the development of [vscode extensions](https://marketplace.visualstudio.com/VSCode).
+- [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/webview): Optimize the `postMessage` issue between `webview` page and [vscode extensions](https://marketplace.visualstudio.com/VSCode)

README.zh_CN.md

@@ -204,6 +204,14 @@ function __getWebviewHtml__(
 ): string;
 ```
 
+### 警告
+
+使用 [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview) 的 `acquireVsCodeApi().getState()` 方法时，要使用 `await` 调用。由于 `acquireVsCodeApi` 是插件对该方法的模拟实现，故与原方法出现不一致性，非常抱歉。如果有其他方案，请分享，非常感谢。
+
+```ts
+const value = await acquireVsCodeApi().getState();
+```
+
 ## 文档
 
 - [unpkg.com](https://www.unpkg.com/) 提供的 [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-vscode/dist/index.d.ts).
@@ -378,3 +386,4 @@ pnpm build
 
 - [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): 一些实用工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
 - [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): 一些开发工具，用于简化 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的开发。
+- [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/vscode-webview): 优化 `webview` 页面与 [vscode 扩展](https://marketplace.visualstudio.com/VSCode) 的 `postMessage` 问题

examples/react/extension/views/helper.ts

@@ -10,12 +10,12 @@ export class WebviewHelper {
   public static setupWebviewHooks(webview: Webview, disposables: Disposable[]) {
     webview.onDidReceiveMessage(
       (message: any) => {
-        const command = message.command;
-        const text = message.text;
-        console.log(`command: ${command}`);
-        switch (command) {
+        const type = message.type;
+        const data = message.data;
+        console.log(`type: ${type}`);
+        switch (type) {
           case 'hello':
-            window.showInformationMessage(text);
+            window.showInformationMessage(data);
             return;
         }
       },

examples/react/extension/views/panel.ts

@@ -25,6 +25,7 @@ export class MainPanel {
 
       MainPanel.currentPanel = new MainPanel(panel, context);
     }
+    MainPanel.currentPanel._panel.webview.postMessage({ type: 'hello', data: 'Hello World!' });
   }
 
   /**

examples/react/package.json

@@ -7,6 +7,7 @@
     "node": ">=18",
     "vscode": "^1.75.0"
   },
+  "publisher": "tomjs-test",
   "main": "dist/extension/index.js",
   "activationEvents": [],
   "contributes": {
@@ -23,6 +24,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tomjs/vscode-webview": "^1.0.0",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/react/src/App.tsx

@@ -1,25 +1,27 @@
 import { useState } from 'react';
+import { vscodeWebview } from '@tomjs/vscode-webview';
 import { VSCodeButton, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import { vscode } from './utils/vscode';
 
 import './App.css';
 
 function App() {
   function onPostMessage() {
-    vscode.postMessage({
-      command: 'hello',
-      text: 'Hey there partner! 🤠',
-    });
+    vscodeWebview.postMessage('hello', 'Hey there partner! 🤠');
   }
 
+  vscodeWebview.on('hello', data => {
+    console.log('on message:', data);
+  });
+
   const [message, setMessage] = useState('');
   const [state, setState] = useState('');
 
   const onSetState = () => {
     vscode.setState(state);
   };
-  const onGetState = () => {
-    setState(vscode.getState() as string);
+  const onGetState = async () => {
+    setState((await vscode.getState()) as string);
   };
 
   return (

examples/react/vite.config.ts

@@ -4,5 +4,12 @@ import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), vscode()],
+  plugins: [
+    react(),
+    vscode({
+      extension: {
+        sourcemap: 'inline',
+      },
+    }),
+  ],
 });

examples/vue-import/package.json

@@ -7,6 +7,7 @@
     "node": ">=18",
     "vscode": "^1.75.0"
   },
+  "publisher": "tomjs-test",
   "main": "dist/extension/index.js",
   "activationEvents": [],
   "contributes": {

examples/vue-import/src/App.vue

@@ -20,8 +20,8 @@ const onSetState = () => {
   vscode.setState(state.value);
 };
 
-const onGetState = () => {
-  state.value = vscode.getState() as string;
+const onGetState = async () => {
+  state.value = (await vscode.getState()) as string;
 };
 
 onMounted(async () => {

examples/vue/extension/index.ts

@@ -2,7 +2,6 @@ import { commands, ExtensionContext } from 'vscode';
 import { MainPanel } from './views/panel';
 
 export function activate(context: ExtensionContext) {
-  // Add command to the extension context
   context.subscriptions.push(
     commands.registerCommand('hello-world.showHelloWorld', async () => {
       MainPanel.render(context);

examples/vue/extension/views/helper.ts

@@ -10,12 +10,12 @@ export class WebviewHelper {
   public static setupWebviewHooks(webview: Webview, disposables: Disposable[]) {
     webview.onDidReceiveMessage(
       (message: any) => {
-        const command = message.command;
-        const text = message.text;
-        console.log(`command: ${command}`);
-        switch (command) {
+        const type = message.type;
+        const data = message.data;
+        console.log(`type: ${type}`);
+        switch (type) {
           case 'hello':
-            window.showInformationMessage(text);
+            window.showInformationMessage(data);
             return;
         }
       },

examples/vue/extension/views/panel.ts

@@ -25,6 +25,7 @@ export class MainPanel {
 
       MainPanel.currentPanel = new MainPanel(panel, context);
     }
+    MainPanel.currentPanel._panel.webview.postMessage({ type: 'hello', data: 'Hello World!' });
   }
 
   /**

examples/vue/package.json

@@ -7,6 +7,7 @@
     "node": ">=18",
     "vscode": "^1.75.0"
   },
+  "publisher": "tomjs-test",
   "main": "dist/extension/index.js",
   "activationEvents": [],
   "contributes": {
@@ -23,18 +24,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tomjs/vscode-webview": "^1.0.0",
     "@vscode/webview-ui-toolkit": "^1.4.0",
-    "vue": "^3.4.3"
+    "vue": "^3.4.30"
   },
   "devDependencies": {
     "@tomjs/vite-plugin-vscode": "workspace:^",
-    "@types/node": "^18.19.4",
+    "@types/node": "^18.19.39",
     "@types/vscode": "^1.75.0",
-    "@types/vscode-webview": "^1.57.4",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@types/vscode-webview": "^1.57.5",
+    "@vitejs/plugin-vue": "^5.0.5",
     "cross-env": "^7.0.3",
-    "typescript": "~5.3.3",
-    "vite": "^5.0.10",
+    "typescript": "~5.5.2",
+    "vite": "^5.3.1",
     "vue-tsc": "^1.8.27"
   }
 }

examples/vue/src/App.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { vscodeWebview } from '@tomjs/vscode-webview';
 import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';
 import { vscode } from './utils';
 
 provideVSCodeDesignSystem().register(allComponents);
 
 function onPostMessage() {
-  vscode.postMessage({
-    command: 'hello',
-    text: 'Hey there partner! 🤠',
-  });
+  vscodeWebview.postMessage('hello', 'Hey there partner! 🤠');
 }
 
+vscodeWebview.on('hello', data => {
+  console.log('on message:', data);
+});
+
 const message = ref('');
 const state = ref('');
 
 const onSetState = () => {
   vscode.setState(state.value);
 };
 
-const onGetState = () => {
-  state.value = vscode.getState() as string;
+const onGetState = async () => {
+  state.value = (await vscode.getState()) as string;
 };
 </script>