Merge pull request #175 from inokawa/message-type

Seprate Message type into 2 types

Author: inokawa

src/index.ts

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

src/native/index.ts

@@ -2,12 +2,14 @@ import { useCallback, useRef } from "react";
 import type WebView from "react-native-webview";
 import type { WebViewMessageEvent, WebViewProps } from "react-native-webview";
 import { TO_WEB_EVENT_KEY } from "../constants";
-import type { Message } from "../types";
+import type { ReactNativeMessage, WebViewMessage } from "../types";
 
 /**
  * @internal
  */
-export const buildEmitCode = <T>(message: Message<T>): string => {
+export const buildEmitToWebView = <T>(
+  message: ReactNativeMessage<T>
+): string => {
   return `(function() {
   try {
     window.dispatchEvent(new CustomEvent("${TO_WEB_EVENT_KEY}",{detail:${JSON.stringify(
@@ -24,7 +26,7 @@ export const buildEmitCode = <T>(message: Message<T>): string => {
  * A hook to subscribe messages from WebView.
  */
 export const useWebViewMessage = <T>(
-  onSubscribe: (message: Message<T>) => void
+  onSubscribe: (message: WebViewMessage<T>) => void
 ) => {
   const ref = useRef<WebView>(null);
   const onMessage: WebViewProps["onMessage"] = useCallback(
@@ -39,8 +41,8 @@ export const useWebViewMessage = <T>(
     [onSubscribe]
   );
   const emit = useCallback(
-    (message: Message<T>) => {
-      ref.current?.injectJavaScript(buildEmitCode(message));
+    (message: ReactNativeMessage<T>) => {
+      ref.current?.injectJavaScript(buildEmitToWebView(message));
     },
     [ref]
   );

src/types.ts

@@ -1,4 +1,9 @@
-export type Message<T> = {
+export interface WebViewMessage<T> {
   type: string;
   data: T;
-};
+}
+
+export interface ReactNativeMessage<T> {
+  type: string;
+  data: T;
+}

src/web/core.ts

@@ -1,5 +1,5 @@
 import { TO_WEB_EVENT_KEY, WEB_ROOT_ID } from "../constants";
-import type { Message } from "../types";
+import type { ReactNativeMessage, WebViewMessage } from "../types";
 
 /**
  * @internal
@@ -10,15 +10,15 @@ export const getWebViewRootElement = (): HTMLElement =>
 /**
  * A function to send a message to React Native
  */
-export const emit = <T>(message: Message<T>) => {
+export const emitToNative = <T>(message: WebViewMessage<T>) => {
   (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));
 };
 
 /**
  * @internal
  */
 export const listenNativeMessage = <T>(
-  onSubscribe: (message: Message<T>) => void
+  onSubscribe: (message: ReactNativeMessage<T>) => void
 ) => {
   const listener = (e: any) => {
     if (!isMessageEvent<T>(e)) return;
@@ -30,5 +30,5 @@ export const listenNativeMessage = <T>(
   };
 };
 
-const isMessageEvent = <T>(e: any): e is { detail: Message<T> } =>
+const isMessageEvent = <T>(e: any): e is { detail: ReactNativeMessage<T> } =>
   e && e.detail;

src/web/preact.ts

@@ -5,8 +5,8 @@
  */
 import { useEffect } from "preact/compat";
 import { render, ComponentChild } from "preact";
-import { listenNativeMessage, emit, getWebViewRootElement } from "./core";
-import type { Message } from "../types";
+import { listenNativeMessage, emitToNative, getWebViewRootElement } from "./core";
+import type { ReactNativeMessage } from "../types";
 
 /**
  * The entry point of web file
@@ -23,9 +23,9 @@ export const webViewRender = (root: ComponentChild): string => {
  * A hook to subscribe messages from React Native.
  */
 export const useNativeMessage = <T>(
-  onSubscribe: (message: Message<T>) => void
+  onSubscribe: (message: ReactNativeMessage<T>) => void
 ) => {
   useEffect(() => listenNativeMessage(onSubscribe), [onSubscribe]);
 };
 
-export { emit };
+export { emitToNative as emit };

src/web/react.spec.tsx

@@ -2,9 +2,9 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { useNativeMessage, emit } from "./react";
-import { useWebViewMessage, buildEmitCode } from "../native";
+import { useWebViewMessage, buildEmitToWebView } from "../native";
 import { useEffect, useState } from "react";
-import { Message } from "../types";
+import { ReactNativeMessage, WebViewMessage } from "../types";
 
 const ReactNativeWebViewEvent = "RNW";
 
@@ -19,11 +19,11 @@ const ReactNativeWebViewEvent = "RNW";
 afterEach(cleanup);
 
 describe("send message to web", () => {
-  const NativeApp = ({ message }: { message: Message<string> }) => {
+  const NativeApp = ({ message }: { message: ReactNativeMessage<string> }) => {
     return (
       <button
         onClick={() => {
-          eval(buildEmitCode(message));
+          eval(buildEmitToWebView(message));
         }}
       >
         send
@@ -84,7 +84,7 @@ describe("send message to web", () => {
 });
 
 describe("send message to native", () => {
-  const WebApp = ({ message }: { message: Message<string> }) => {
+  const WebApp = ({ message }: { message: WebViewMessage<string> }) => {
     return (
       <button
         onClick={() => {

src/web/react.ts

@@ -6,8 +6,8 @@
 import { ReactElement, useEffect } from "react";
 import { render } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { emit, getWebViewRootElement, listenNativeMessage } from "./core";
-import type { Message } from "../types";
+import { emitToNative, getWebViewRootElement, listenNativeMessage } from "./core";
+import type { ReactNativeMessage } from "../types";
 
 /**
  * The entry point of web file
@@ -32,9 +32,9 @@ export const webViewCreateRoot = (root: ReactElement): string => {
  * A hook to subscribe messages from React Native.
  */
 export const useNativeMessage = <T>(
-  onSubscribe: (message: Message<T>) => void
+  onSubscribe: (message: ReactNativeMessage<T>) => void
 ) => {
   useEffect(() => listenNativeMessage(onSubscribe), [onSubscribe]);
 };
 
-export { emit };
+export { emitToNative as emit };