@farcaster/frame-host-react-native 0.0.15 → 0.0.17

package/dist/webview.d.ts

@@ -1,6 +1,7 @@
-import { RefObject } from "react";
-import WebView, { WebViewMessageEvent } from "react-native-webview";
-import { HostEndpoint } from "@farcaster/frame-host";
+import type { HostEndpoint } from '@farcaster/frame-host';
+import type { RefObject } from 'react';
+import type WebView from 'react-native-webview';
+import type { WebViewMessageEvent } from 'react-native-webview';
 export declare const SYMBOL_IGNORING_RPC_RESPONSE_ERROR: symbol;
 export type WebViewEndpoint = HostEndpoint & {
     /**

package/dist/webview.js

@@ -6,26 +6,26 @@ export function createWebViewRpcEndpoint(ref) {
     const listeners = [];
     return {
         addEventListener: (type, listener) => {
-            if (type !== "message") {
+            if (type !== 'message') {
                 throw Error(`Got an unexpected event type "${type}". Expected "message".`);
             }
             listeners.push(listener);
         },
         removeEventListener: (type, listener) => {
-            if (type !== "message") {
+            if (type !== 'message') {
                 throw Error(`Got an unexpected event type "${type}". Expected "message".`);
             }
             listeners.splice(listeners.findIndex((l) => l === listener));
         },
         postMessage: (data) => {
             if (!ref.current) {
-                if ("value" in data &&
+                if ('value' in data &&
                     data.value === SYMBOL_IGNORING_RPC_RESPONSE_ERROR) {
                     return;
                 }
-                throw Error("Failed to return RPC response to WebView via postMessage");
+                throw Error('Failed to return RPC response to WebView via postMessage');
             }
-            console.debug("[webview:res]", data);
+            console.debug('[webview:res]', data);
             const dataStr = JSON.stringify(data);
             return ref.current.injectJavaScript(`
         console.debug('[webview:res]', ${dataStr});
@@ -34,10 +34,10 @@ export function createWebViewRpcEndpoint(ref) {
         },
         onMessage: (e) => {
             const data = JSON.parse(e.nativeEvent.data);
-            console.debug("[webview:req]", data);
+            console.debug('[webview:req]', data);
             const messageEvent = new MessageEvent(data);
-            listeners.forEach((l) => {
-                if (typeof l === "function") {
+            for (const l of listeners) {
+                if (typeof l === 'function') {
                     // Actually, messageEvent doesn't satisfy Event interface,
                     // but it satisfies the minimum properties that Comlink's listener requires.
                     l(messageEvent);
@@ -45,13 +45,13 @@ export function createWebViewRpcEndpoint(ref) {
                 else {
                     l.handleEvent(messageEvent);
                 }
-            });
+            }
         },
         emit: (data) => {
             if (!ref.current) {
-                throw Error("Failed to send Event to WebView via postMessage");
+                throw Error('Failed to send Event to WebView via postMessage');
             }
-            console.debug("[webview:emit]", data);
+            console.debug('[webview:emit]', data);
             const dataStr = JSON.stringify(data);
             return ref.current.injectJavaScript(`
         console.debug('[webview:emit]', ${dataStr});
@@ -60,9 +60,9 @@ export function createWebViewRpcEndpoint(ref) {
         },
         emitEthProvider: (event, params) => {
             if (!ref.current) {
-                throw Error("Failed to send EthProvider Event to WebView via postMessage");
+                throw Error('Failed to send EthProvider Event to WebView via postMessage');
             }
-            console.debug("[emit:ethProvider]", event, params);
+            console.debug('[emit:ethProvider]', event, params);
             const wireEvent = { event, params };
             const dataStr = JSON.stringify(wireEvent);
             return ref.current.injectJavaScript(`
@@ -78,7 +78,7 @@ export function createWebViewRpcEndpoint(ref) {
  */
 class MessageEvent {
     data;
-    origin = "ReactNativeWebView";
+    origin = 'ReactNativeWebView';
     constructor(data) {
         this.data = data;
     }

package/dist/webviewAdapter.d.ts

@@ -1,14 +1,15 @@
-import { RefObject } from "react";
-import type { Provider } from "ox";
-import WebView, { WebViewMessageEvent } from "react-native-webview";
-import type { FrameHost } from "@farcaster/frame-core";
-import { WebViewEndpoint } from "./webview";
+import type { FrameHost } from '@farcaster/frame-core';
+import type { Provider } from 'ox';
+import { type RefObject } from 'react';
+import type WebView from 'react-native-webview';
+import type { WebViewMessageEvent } from 'react-native-webview';
+import { type WebViewEndpoint } from './webview';
 /**
  * Returns a handler of RPC message from WebView.
  */
 export declare function useWebViewRpcAdapter({ webViewRef, sdk, ethProvider, debug, }: {
     webViewRef: RefObject<WebView>;
-    sdk: Omit<FrameHost, "ethProviderRequestV2">;
+    sdk: Omit<FrameHost, 'ethProviderRequestV2'>;
     ethProvider?: Provider.Provider;
     debug?: boolean;
 }): {
@@ -22,7 +23,7 @@ export declare function useWebViewRpcEndpoint(webViewRef: RefObject<WebView>): {
 };
 export declare function useExposeWebViewToEndpoint({ endpoint, sdk, ethProvider, debug, }: {
     endpoint: WebViewEndpoint | undefined;
-    sdk: Omit<FrameHost, "ethProviderRequestV2">;
+    sdk: Omit<FrameHost, 'ethProviderRequestV2'>;
     ethProvider?: Provider.Provider;
     debug?: boolean;
 }): void;

package/dist/webviewAdapter.js

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useRef } from "react";
-import { exposeToEndpoint, useExposeToEndpoint, } from "@farcaster/frame-host";
-import { createWebViewRpcEndpoint } from "./webview";
+import { exposeToEndpoint, useExposeToEndpoint, } from '@farcaster/frame-host';
+import { useCallback, useEffect, useRef } from 'react';
+import { createWebViewRpcEndpoint } from './webview';
 /**
  * Returns a handler of RPC message from WebView.
  */
@@ -8,7 +8,7 @@ export function useWebViewRpcAdapter({ webViewRef, sdk, ethProvider, debug = fal
     const endpointRef = useRef();
     const onMessage = useCallback((e) => {
         endpointRef.current?.onMessage(e);
-    }, [endpointRef]);
+    }, []);
     useEffect(() => {
         const endpoint = createWebViewRpcEndpoint(webViewRef);
         endpointRef.current = endpoint;
@@ -16,14 +16,14 @@ export function useWebViewRpcAdapter({ webViewRef, sdk, ethProvider, debug = fal
             endpoint,
             sdk,
             ethProvider,
-            frameOrigin: "ReactNativeWebView",
+            frameOrigin: 'ReactNativeWebView',
             debug,
         });
         return () => {
             cleanup?.();
             endpointRef.current = undefined;
         };
-    }, [webViewRef, sdk, ethProvider]);
+    }, [webViewRef, sdk, ethProvider, debug]);
     return {
         onMessage,
         emit: endpointRef.current?.emit,
@@ -34,7 +34,7 @@ export function useWebViewRpcEndpoint(webViewRef) {
     const endpointRef = useRef();
     const onMessage = useCallback((e) => {
         endpointRef.current?.onMessage(e);
-    }, [endpointRef]);
+    }, []);
     useEffect(() => {
         const endpoint = createWebViewRpcEndpoint(webViewRef);
         endpointRef.current = endpoint;
@@ -51,7 +51,7 @@ export function useExposeWebViewToEndpoint({ endpoint, sdk, ethProvider, debug =
     useExposeToEndpoint({
         endpoint,
         sdk,
-        frameOrigin: "ReactNativeWebView",
+        frameOrigin: 'ReactNativeWebView',
         ethProvider,
         debug,
     });

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@farcaster/frame-host-react-native",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "dist/index.js",
   "files": [
     "dist",
     "src"
   ],
   "devDependencies": {
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.18",
     "react": "^18.3.1",
-    "react-native": "^0.76.3",
-    "react-native-webview": "^13.12.4",
-    "typescript": "^5.6.3",
+    "react-native": "^0.76.5",
+    "react-native-webview": "^13.12.5",
+    "typescript": "^5.7.2",
     "@farcaster/tsconfig": "0.0.2"
   },
   "peerDependencies": {
@@ -19,8 +19,9 @@
     "react-native-webview": ">=13.0.0"
   },
   "dependencies": {
-    "ox": "^0.4.0",
-    "@farcaster/frame-host": "0.0.20"
+    "ox": "^0.4.4",
+    "@farcaster/frame-core": "0.0.22",
+    "@farcaster/frame-host": "0.0.22"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/index.ts

@@ -1,3 +1,3 @@
-export * from "@farcaster/frame-host";
-export * from "./webview";
-export * from "./webviewAdapter";
+export * from '@farcaster/frame-host'
+export * from './webview'
+export * from './webviewAdapter'

package/src/webview.ts

@@ -1,15 +1,17 @@
-import { RefObject } from "react";
-import WebView, { WebViewMessageEvent } from "react-native-webview";
-import { HostEndpoint } from "@farcaster/frame-host";
+import type { HostEndpoint } from '@farcaster/frame-host'
 
-export const SYMBOL_IGNORING_RPC_RESPONSE_ERROR: symbol = Symbol();
+import type { RefObject } from 'react'
+import type WebView from 'react-native-webview'
+import type { WebViewMessageEvent } from 'react-native-webview'
+
+export const SYMBOL_IGNORING_RPC_RESPONSE_ERROR: symbol = Symbol()
 
 export type WebViewEndpoint = HostEndpoint & {
   /**
    * Manually distribute events to listeners as an alternative to `document.addEventHandler` which is unavailable in React Native.
    */
-  onMessage: (e: WebViewMessageEvent) => void;
-};
+  onMessage: (e: WebViewMessageEvent) => void
+}
 
 /**
  * An endpoint of communicating with WebView
@@ -17,81 +19,81 @@ export type WebViewEndpoint = HostEndpoint & {
 export function createWebViewRpcEndpoint(
   ref: RefObject<WebView>,
 ): WebViewEndpoint {
-  const listeners: EventListenerOrEventListenerObject[] = [];
+  const listeners: EventListenerOrEventListenerObject[] = []
   return {
     addEventListener: (type, listener) => {
-      if (type !== "message") {
+      if (type !== 'message') {
         throw Error(
           `Got an unexpected event type "${type}". Expected "message".`,
-        );
+        )
       }
-      listeners.push(listener);
+      listeners.push(listener)
     },
     removeEventListener: (type, listener) => {
-      if (type !== "message") {
+      if (type !== 'message') {
         throw Error(
           `Got an unexpected event type "${type}". Expected "message".`,
-        );
+        )
       }
-      listeners.splice(listeners.findIndex((l) => l === listener));
+      listeners.splice(listeners.findIndex((l) => l === listener))
     },
     postMessage: (data) => {
       if (!ref.current) {
         if (
-          "value" in data &&
+          'value' in data &&
           data.value === SYMBOL_IGNORING_RPC_RESPONSE_ERROR
         ) {
-          return;
+          return
         }
-        throw Error("Failed to return RPC response to WebView via postMessage");
+        throw Error('Failed to return RPC response to WebView via postMessage')
       }
-      console.debug("[webview:res]", data);
-      const dataStr = JSON.stringify(data);
+      console.debug('[webview:res]', data)
+      const dataStr = JSON.stringify(data)
       return ref.current.injectJavaScript(`
         console.debug('[webview:res]', ${dataStr});
         document.dispatchEvent(new MessageEvent('FarcasterFrameCallback', { data: ${dataStr} }));
-      `);
+      `)
     },
     onMessage: (e) => {
-      const data = JSON.parse(e.nativeEvent.data);
-      console.debug("[webview:req]", data);
-      const messageEvent = new MessageEvent(data);
-      listeners.forEach((l) => {
-        if (typeof l === "function") {
+      const data = JSON.parse(e.nativeEvent.data)
+      console.debug('[webview:req]', data)
+      const messageEvent = new MessageEvent(data)
+      for (const l of listeners) {
+        if (typeof l === 'function') {
           // Actually, messageEvent doesn't satisfy Event interface,
           // but it satisfies the minimum properties that Comlink's listener requires.
-          l(messageEvent as unknown as Event);
+          l(messageEvent as unknown as Event)
         } else {
-          l.handleEvent(messageEvent as unknown as Event);
+          l.handleEvent(messageEvent as unknown as Event)
         }
-      });
+      }
     },
     emit: (data) => {
       if (!ref.current) {
-        throw Error("Failed to send Event to WebView via postMessage");
+        throw Error('Failed to send Event to WebView via postMessage')
       }
-      console.debug("[webview:emit]", data);
-      const dataStr = JSON.stringify(data);
+      console.debug('[webview:emit]', data)
+      const dataStr = JSON.stringify(data)
       return ref.current.injectJavaScript(`
         console.debug('[webview:emit]', ${dataStr});
         document.dispatchEvent(new MessageEvent('FarcasterFrameEvent', { data: ${dataStr} }));
-      `);
+      `)
     },
     emitEthProvider: (event, params) => {
       if (!ref.current) {
         throw Error(
-          "Failed to send EthProvider Event to WebView via postMessage",
-        );
+          'Failed to send EthProvider Event to WebView via postMessage',
+        )
       }
-      console.debug("[emit:ethProvider]", event, params);
-      const wireEvent = { event, params };
-      const dataStr = JSON.stringify(wireEvent);
+      console.debug('[emit:ethProvider]', event, params)
+      const wireEvent = { event, params }
+      const dataStr = JSON.stringify(wireEvent)
       return ref.current.injectJavaScript(`
         console.debug('[webview:emit:ethProvider]', ${dataStr});
         document.dispatchEvent(new MessageEvent('FarcasterFrameEthProviderEvent', { data: ${dataStr} }));
-      `);
+      `)
     },
-  };
+  }
 }
 
 /**
@@ -99,6 +101,6 @@ export function createWebViewRpcEndpoint(
  * Instead, implement our own MessageEvent with the minimum properties required by Comlink implementation.
  */
 class MessageEvent {
-  public origin = "ReactNativeWebView";
+  public origin = 'ReactNativeWebView'
   constructor(public data: unknown) {}
 }

package/src/webviewAdapter.ts

@@ -1,16 +1,14 @@
-import { RefObject, useCallback, useEffect, useRef } from "react";
-import type { Provider } from "ox";
-import WebView, {
-  WebViewMessageEvent,
-  WebViewProps,
-} from "react-native-webview";
-import type { FrameHost } from "@farcaster/frame-core";
+import type { FrameHost } from '@farcaster/frame-core'
 import {
-  exposeToEndpoint,
   HostEndpoint,
+  exposeToEndpoint,
   useExposeToEndpoint,
-} from "@farcaster/frame-host";
-import { WebViewEndpoint, createWebViewRpcEndpoint } from "./webview";
+} from '@farcaster/frame-host'
+import type { Provider } from 'ox'
+import { type RefObject, useCallback, useEffect, useRef } from 'react'
+import type WebView from 'react-native-webview'
+import type { WebViewMessageEvent, WebViewProps } from 'react-native-webview'
+import { type WebViewEndpoint, createWebViewRpcEndpoint } from './webview'
 
 /**
  * Returns a handler of RPC message from WebView.
@@ -21,68 +19,68 @@ export function useWebViewRpcAdapter({
   ethProvider,
   debug = false,
 }: {
-  webViewRef: RefObject<WebView>;
-  sdk: Omit<FrameHost, "ethProviderRequestV2">;
-  ethProvider?: Provider.Provider;
-  debug?: boolean;
+  webViewRef: RefObject<WebView>
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  ethProvider?: Provider.Provider
+  debug?: boolean
 }) {
-  const endpointRef = useRef<WebViewEndpoint>();
+  const endpointRef = useRef<WebViewEndpoint>()
 
-  const onMessage: WebViewProps["onMessage"] = useCallback(
+  const onMessage: WebViewProps['onMessage'] = useCallback(
     (e: WebViewMessageEvent) => {
-      endpointRef.current?.onMessage(e);
+      endpointRef.current?.onMessage(e)
     },
-    [endpointRef],
-  );
+    [],
+  )
 
   useEffect(() => {
-    const endpoint = createWebViewRpcEndpoint(webViewRef);
-    endpointRef.current = endpoint;
+    const endpoint = createWebViewRpcEndpoint(webViewRef)
+    endpointRef.current = endpoint
 
     const cleanup = exposeToEndpoint({
       endpoint,
       sdk,
       ethProvider,
-      frameOrigin: "ReactNativeWebView",
+      frameOrigin: 'ReactNativeWebView',
       debug,
-    });
+    })
 
     return () => {
-      cleanup?.();
-      endpointRef.current = undefined;
-    };
-  }, [webViewRef, sdk, ethProvider]);
+      cleanup?.()
+      endpointRef.current = undefined
+    }
+  }, [webViewRef, sdk, ethProvider, debug])
 
   return {
     onMessage,
     emit: endpointRef.current?.emit,
     emitEthProvider: endpointRef.current?.emitEthProvider,
-  };
+  }
 }
 
 export function useWebViewRpcEndpoint(webViewRef: RefObject<WebView>) {
-  const endpointRef = useRef<WebViewEndpoint>();
+  const endpointRef = useRef<WebViewEndpoint>()
 
-  const onMessage: WebViewProps["onMessage"] = useCallback(
+  const onMessage: WebViewProps['onMessage'] = useCallback(
     (e: WebViewMessageEvent) => {
-      endpointRef.current?.onMessage(e);
+      endpointRef.current?.onMessage(e)
     },
-    [endpointRef],
-  );
+    [],
+  )
 
   useEffect(() => {
-    const endpoint = createWebViewRpcEndpoint(webViewRef);
-    endpointRef.current = endpoint;
+    const endpoint = createWebViewRpcEndpoint(webViewRef)
+    endpointRef.current = endpoint
 
     return () => {
-      endpointRef.current = undefined;
-    };
-  }, [webViewRef]);
+      endpointRef.current = undefined
+    }
+  }, [webViewRef])
 
   return {
     endpoint: endpointRef.current,
     onMessage,
-  };
+  }
 }
 
 export function useExposeWebViewToEndpoint({
@@ -91,16 +89,16 @@ export function useExposeWebViewToEndpoint({
   ethProvider,
   debug = false,
 }: {
-  endpoint: WebViewEndpoint | undefined;
-  sdk: Omit<FrameHost, "ethProviderRequestV2">;
-  ethProvider?: Provider.Provider;
-  debug?: boolean;
+  endpoint: WebViewEndpoint | undefined
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  ethProvider?: Provider.Provider
+  debug?: boolean
 }) {
   useExposeToEndpoint({
     endpoint,
     sdk,
-    frameOrigin: "ReactNativeWebView",
+    frameOrigin: 'ReactNativeWebView',
     ethProvider,
     debug,
-  });
+  })
 }