chore: use new webview fork notify mechanism

src/ModMan/main.cpp

@@ -68,6 +68,7 @@ namespace
                    [&](const std::string& req) -> std::string
                    {
                        const auto name = req.substr(2, req.size() - 4);
+                       w.notify("greeting", webview::json_escape(name));
                        return webview::json_escape(std::format("Hello from C++ {}!", name));
                    });
 

src/ModManUi/src/App.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { nativeMethods } from "./native";
+import { onUnmounted, ref } from "vue";
+import { webviewBinds, webViewAddEventListener, webViewRemoveEventListener } from "./native";
 
 const greetMsg = ref("");
+const lastPersonGreeted = ref("");
 const name = ref("");
 
 async function greet() {
-  greetMsg.value = await nativeMethods.greet(name.value);
+  greetMsg.value = await webviewBinds.greet(name.value);
 }
+
+function onPersonGreeted(person: string) {
+  lastPersonGreeted.value = person;
+}
+
+webViewAddEventListener("greeting", onPersonGreeted);
+
+onUnmounted(() => webViewRemoveEventListener("greeting", onPersonGreeted));
 </script>
 
 <template>
@@ -19,6 +28,7 @@ async function greet() {
       <button type="submit">Greet</button>
     </form>
     <p>{{ greetMsg }}</p>
+    <p>The last person greeted is: {{ lastPersonGreeted }}</p>
   </main>
 </template>
 

src/ModManUi/src/native.ts

@@ -2,6 +2,24 @@ export interface NativeMethods {
   greet: (name: string) => Promise<string>;
 }
 
-const windowWithWebViewExtensions = window as typeof window & {webview_binds: NativeMethods};
+interface NativeEventMap {
+  greeting: string;
+}
 
-export const nativeMethods: NativeMethods = windowWithWebViewExtensions.webview_binds;
+type WebViewExtensions = {
+  webviewBinds: NativeMethods;
+  webViewAddEventListener<K extends keyof NativeEventMap>(
+    eventKey: K,
+    callback: (payload: NativeEventMap[K]) => void,
+  ): void;
+  webViewRemoveEventListener<K extends keyof NativeEventMap>(
+    eventKey: K,
+    callback: (payload: NativeEventMap[K]) => void,
+  ): boolean;
+};
+
+const windowWithWebViewExtensions = window as typeof window & WebViewExtensions;
+
+export const webviewBinds = windowWithWebViewExtensions.webviewBinds;
+export const webViewAddEventListener = windowWithWebViewExtensions.webViewAddEventListener;
+export const webViewRemoveEventListener = windowWithWebViewExtensions.webViewRemoveEventListener;