Improve emit API

inokawa · May 11, 2024 · 3496584 · 3496584
1 parent 87bfb35
commit 3496584
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -164,7 +164,7 @@ module.exports = {
 import React, { useState } from "react";
 import {
   webViewRender,
-  emit,
+  emitToNative,
   useNativeMessage,
 } from "react-native-react-bridge/lib/web";
 // Importing css is supported
@@ -189,7 +189,7 @@ const Root = () => {
           // emit 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>
@@ -208,7 +208,7 @@ export default webViewRender(<Root />);
 
 import React from "react";
 import WebView from "react-native-webview";
-import { emit, useWebViewMessage } from "react-native-react-bridge";
+import { emitToWebView, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
@@ -220,7 +220,7 @@ const App = () => {
     //   type: event name
     //   data: some data which will be serialized by JSON.stringify
     if (message.type === "hello" && message.data === 123) {
-      emit(ref, { type: "success", data: "succeeded!" });
+      emitToWebView(ref, { type: "success", data: "succeeded!" });
     }
   });
 

diff --git a/examples/DemoApp/App.js b/examples/DemoApp/App.js
@@ -16,7 +16,7 @@ import {
   TextInput,
 } from 'react-native';
 import WebView from 'react-native-webview';
-import {emit, useWebViewMessage} from 'react-native-react-bridge';
+import {emitToWebView, useWebViewMessage} from 'react-native-react-bridge';
 import webApp from './WebApp';
 
 const App = () => {
@@ -45,7 +45,7 @@ const App = () => {
           value={data}
         />
         <Pressable
-          onPress={() => emit(ref, {type: 'hello', data: data})}
+          onPress={() => emitToWebView(ref, {type: 'hello', data: data})}
           style={styles.button}>
           <Text>send to Web</Text>
         </Pressable>

diff --git a/examples/DemoApp/WebApp/index.js b/examples/DemoApp/WebApp/index.js
@@ -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>

diff --git a/examples/DemoAppExpo/App.tsx b/examples/DemoAppExpo/App.tsx
@@ -16,7 +16,7 @@ import {
   TextInput,
 } from "react-native";
 import WebView from "react-native-webview";
-import { emit, useWebViewMessage } from "react-native-react-bridge";
+import { emitToWebView, useWebViewMessage } from "react-native-react-bridge";
 import webApp from "./WebApp";
 
 const App = () => {
@@ -45,7 +45,7 @@ const App = () => {
           value={data}
         />
         <Pressable
-          onPress={() => emit(ref, { type: "hello", data: data })}
+          onPress={() => emitToWebView(ref, { type: "hello", data: data })}
           style={styles.button}
         >
           <Text>send to Web</Text>

diff --git a/examples/DemoAppExpo/WebApp/index.js b/examples/DemoAppExpo/WebApp/index.js
@@ -1,35 +1,35 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import {
   webViewRender,
-  emit,
+  emitToNative,
   useNativeMessage,
-} from 'react-native-react-bridge/lib/web';
-import './example.css';
-import png from './Octocat.png';
-import {Button} from './button';
+} from "react-native-react-bridge/lib/web";
+import "./example.css";
+import png from "./Octocat.png";
+import { Button } from "./button";
 
 const style = {
-  width: '100vw',
-  height: '100vh',
-  margin: 'auto',
-  backgroundColor: 'lightblue',
+  width: "100vw",
+  height: "100vh",
+  margin: "auto",
+  backgroundColor: "lightblue",
 };
 
 const Root = () => {
-  const [data, setData] = useState('This is Web');
-  useNativeMessage(message => {
-    if (message.type === 'hello') {
+  const [data, setData] = useState("This is Web");
+  useNativeMessage((message) => {
+    if (message.type === "hello") {
       setData(message.data);
     }
   });
   return (
     <div style={style}>
       <div>
-        <img src={png} width={100} height={'auto'} />
+        <img src={png} width={100} height={"auto"} />
       </div>
-      <textarea value={data} onChange={e => setData(e.target.value)} />
+      <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>

diff --git a/src/index.ts b/src/index.ts
@@ -4,4 +4,4 @@
  * @module
  */
 export type { ReactNativeMessage, WebViewMessage } from "./types";
-export { useWebViewMessage } from "./native";
+export { useWebViewMessage, emitToWebView } from "./native";
diff --git a/src/native/index.ts b/src/native/index.ts
@@ -44,7 +44,7 @@ export const useWebViewMessage = <T>(
 /**
  * A function to send a message to WebView.
  */
-export const emit = <T>(
+export const emitToWebView = <T>(
   ref: RefObject<WebView>,
   message: ReactNativeMessage<T>
 ) => {

diff --git a/src/plugin/__snapshots__/bundler.spec.ts.snap b/src/plugin/__snapshots__/bundler.spec.ts.snap
diff --git a/src/web/preact.ts b/src/web/preact.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 };
diff --git a/src/web/react.spec.tsx b/src/web/react.spec.tsx
@@ -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

diff --git a/src/web/react.ts b/src/web/react.ts
@@ -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 };