Change useWebViewMessage and emit API

Author: inokawa

README.md

@@ -25,9 +25,8 @@ The communication between React app and React Native app will be also simplified
   - All JS modules (with or without JSX/TypeScript) will be bundled with [esbuild](https://github.com/evanw/esbuild).
   - **NOTE: Only the edits in the entry file of web will invoke rebuild because of the limitation of [metro](https://github.com/facebook/metro)'s build process.**
 - Handle communication between React Native and WebView with React hook style
-  - With `useWebViewMessage` hook, you can subscribe messages from WebView.
-  - With `useNativeMessage` hook, you can subscribe messages from React Native.
-  - `emit` function sends message.
+  - With `useWebViewMessage` hook, you can subscribe messages from WebView sent with `emitToWebView`.
+  - With `useNativeMessage` hook, you can subscribe messages from React Native sent with `emitToNative`.
 - Support bundling some assets in web side with [ES6 import syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
   - `.json` is imported as an object, like require in Node.js.
   - `.txt` and `.md` are imported as string, like [raw-loader](https://github.com/webpack-contrib/raw-loader).
@@ -157,7 +156,7 @@ module.exports = (async () => {
 import React, { useState } from "react";
 import {
   webViewRender,
-  emit,
+  emitToNative,
   useNativeMessage,
 } from "react-native-react-bridge/lib/web";
 // Importing css is supported
@@ -179,10 +178,10 @@ const Root = () => {
       <div>{data}</div>
       <button
         onClick={() => {
-          // emit sends message to React Native
+          // emitToNative sends message to React Native
           //   type: event name
           //   data: some data which will be serialized by JSON.stringify
-          emit({ type: "hello", data: 123 });
+          emitToNative({ type: "hello", data: 123 });
         }}
       />
     </div>
@@ -201,18 +200,19 @@ export default webViewRender(<Root />);
 
 import React from "react";
 import WebView from "react-native-webview";
-import { useWebViewMessage } from "react-native-react-bridge";
+import { emitToWebView, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
+  const ref = useRef(null);
   // useWebViewMessage hook create props for WebView and handle communication
   // The argument is callback to receive message from React
-  const { ref, onMessage, emit } = useWebViewMessage((message) => {
-    // emit sends message to React
+  const onMessage = useWebViewMessage((message) => {
+    // emitToWebView sends message to React
     //   type: event name
     //   data: some data which will be serialized by JSON.stringify
     if (message.type === "hello" && message.data === 123) {
-      emit({ type: "success", data: "succeeded!" });
+      emitToWebView(ref, { type: "success", data: "succeeded!" });
     }
   });
 

e2e/index.spec.tsx-snapshots/smoke-webview-with-json-jsx-1-chromium.txt

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {
   webViewRender,
-  emit,
+  emitToNative,
   useNativeMessage,
 } from 'react-native-react-bridge/lib/web';
 import './example.css';
@@ -29,7 +29,7 @@ const Root = () => {
       </div>
       <textarea value={data} onChange={e => setData(e.target.value)} />
       <div>
-        <Button onClick={() => emit({type: 'hi', data: data})}>
+        <Button onClick={() => emitToNative({type: 'hi', data: data})}>
           send to React Native
         </Button>
       </div>

examples/DempApp/WebApp/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   SafeAreaView,
   StyleSheet,
@@ -8,12 +8,13 @@ import {
   TextInput,
 } from "react-native";
 import WebView from "react-native-webview";
-import { useWebViewMessage } from "react-native-react-bridge";
+import { emitToWebView, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "../../WebApp";
 
 const App = () => {
   const [data, setData] = useState("This is React Native");
-  const { ref, onMessage, emit } = useWebViewMessage((message) => {
+  const ref = useRef<WebView>(null);
+  const onMessage = useWebViewMessage<string>((message) => {
     if (message.type === "hi") {
       setData(message.data);
     }
@@ -36,7 +37,7 @@ const App = () => {
           value={data}
         />
         <Pressable
-          onPress={() => emit({ type: "hello", data: data })}
+          onPress={() => emitToWebView(ref, { type: "hello", data: data })}
           style={styles.button}
         >
           <Text>send to Web</Text>

examples/DempApp/app/(tabs)/index.tsx

@@ -4,4 +4,4 @@
  * @module
  */
 export type { ReactNativeMessage, WebViewMessage } from "./types";
-export { useWebViewMessage } from "./native";
+export { useWebViewMessage, emitToWebView } from "./native";

src/index.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { RefObject, useCallback } from "react";
 import type WebView from "react-native-webview";
 import type { WebViewMessageEvent, WebViewProps } from "react-native-webview";
 import { TO_WEB_EVENT_KEY } from "../constants";
@@ -28,23 +28,25 @@ export const buildEmitToWebView = <T>(
 export const useWebViewMessage = <T>(
   onSubscribe: (message: WebViewMessage<T>) => void
 ) => {
-  const ref = useRef<WebView>(null);
-  const onMessage: WebViewProps["onMessage"] = useCallback(
-    (event: WebViewMessageEvent) => {
+  return useCallback(
+    ((event: WebViewMessageEvent) => {
       try {
         const res = JSON.parse(event.nativeEvent.data);
         onSubscribe({ type: res.type, data: res.data });
       } catch (e) {
         // NOP
       }
-    },
+    }) satisfies WebViewProps["onMessage"],
     [onSubscribe]
   );
-  const emit = useCallback(
-    (message: ReactNativeMessage<T>) => {
-      ref.current?.injectJavaScript(buildEmitToWebView(message));
-    },
-    [ref]
-  );
-  return { ref, onMessage, emit };
+};
+
+/**
+ * A function to send a message to WebView.
+ */
+export const emitToWebView = <T>(
+  ref: RefObject<WebView>,
+  message: ReactNativeMessage<T>
+) => {
+  ref.current?.injectJavaScript(buildEmitToWebView(message));
 };

src/native/index.ts

@@ -8,7 +8,7 @@ export const getWebViewRootElement = (): HTMLElement =>
   document.getElementById(WEB_ROOT_ID)!;
 
 /**
- * A function to send a message to React Native
+ * A function to send a message to React Native.
  */
 export const emitToNative = <T>(message: WebViewMessage<T>) => {
   (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));

src/web/core.ts

@@ -5,7 +5,11 @@
  */
 import { useEffect } from "preact/compat";
 import { render, ComponentChild } from "preact";
-import { listenNativeMessage, emitToNative, getWebViewRootElement } from "./core";
+import {
+  listenNativeMessage,
+  emitToNative,
+  getWebViewRootElement,
+} from "./core";
 import type { ReactNativeMessage } from "../types";
 
 /**
@@ -28,4 +32,4 @@ export const useNativeMessage = <T>(
   useEffect(() => listenNativeMessage(onSubscribe), [onSubscribe]);
 };
 
-export { emitToNative as emit };
+export { emitToNative };

src/web/preact.ts

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
-import { useNativeMessage, emit } from "./react";
+import { useNativeMessage, emitToNative } from "./react";
 import { useWebViewMessage, buildEmitToWebView } from "../native";
 import { useEffect, useState } from "react";
 import { ReactNativeMessage, WebViewMessage } from "../types";
@@ -88,7 +88,7 @@ describe("send message to native", () => {
     return (
       <button
         onClick={() => {
-          emit(message);
+          emitToNative(message);
         }}
       >
         send
@@ -98,7 +98,7 @@ describe("send message to native", () => {
   const NativeApp = ({ target }: { target: string }) => {
     const [data, setData] = useState<null | string>(null);
     const [count, setCount] = useState(0);
-    const { onMessage } = useWebViewMessage<string>((m) => {
+    const onMessage = useWebViewMessage<string>((m) => {
       if (m.type === target) {
         setData(m.data);
       }

src/web/react.spec.tsx

@@ -6,7 +6,11 @@
 import { ReactElement, useEffect } from "react";
 import { render } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { emitToNative, getWebViewRootElement, listenNativeMessage } from "./core";
+import {
+  emitToNative,
+  getWebViewRootElement,
+  listenNativeMessage,
+} from "./core";
 import type { ReactNativeMessage } from "../types";
 
 /**
@@ -37,4 +41,4 @@ export const useNativeMessage = <T>(
   useEffect(() => listenNativeMessage(onSubscribe), [onSubscribe]);
 };
 
-export { emitToNative as emit };
+export { emitToNative };