@farcaster/frame-host-react-native 0.0.0-canary-20250508220243 → 0.0.0-canary-20250508220359

package/dist/webviewAdapter.js

@@ -1,5 +1,6 @@
-import { exposeToEndpoint, useExposeToEndpoint } from '@farcaster/frame-host';
+import { exposeToEndpoint } from '@farcaster/frame-host';
 import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { releaseProxy, wrapWebViewForRnComlink } from './rn-comlink';
 import { createWebViewRpcEndpoint } from './webview';
 /**
  * Returns a handler of RPC message from WebView.
@@ -12,6 +13,7 @@ export function useWebViewRpcAdapter({ webViewRef, domain, sdk, ethProvider, deb
     useEffect(() => {
         const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain);
         setEndpoint(newEndpoint);
+        const webViewProxy = wrapWebViewForRnComlink(newEndpoint);
         const cleanup = exposeToEndpoint({
             endpoint: newEndpoint,
             sdk,
@@ -21,6 +23,7 @@ export function useWebViewRpcAdapter({ webViewRef, domain, sdk, ethProvider, deb
         });
         return () => {
             cleanup?.();
+            webViewProxy?.[releaseProxy]?.();
             setEndpoint(undefined);
         };
     }, [webViewRef, domain, sdk, ethProvider, debug]);
@@ -48,11 +51,22 @@ export function useWebViewRpcEndpoint(webViewRef, domain) {
     }), [endpoint, onMessage]);
 }
 export function useExposeWebViewToEndpoint({ endpoint, sdk, ethProvider, debug = false, }) {
-    useExposeToEndpoint({
-        endpoint,
-        sdk,
-        frameOrigin: 'ReactNativeWebView',
-        ethProvider,
-        debug,
-    });
+    useEffect(() => {
+        let webViewProxy = null;
+        let cleanup = null;
+        if (endpoint) {
+            webViewProxy = wrapWebViewForRnComlink(endpoint);
+            cleanup = exposeToEndpoint({
+                endpoint,
+                sdk,
+                ethProvider,
+                frameOrigin: 'ReactNativeWebView',
+                debug,
+            });
+        }
+        return () => {
+            cleanup?.();
+            webViewProxy?.[releaseProxy]?.();
+        };
+    }, [endpoint, sdk, ethProvider, debug]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/frame-host-react-native",
-  "version": "0.0.0-canary-20250508220243",
+  "version": "0.0.0-canary-20250508220359",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "ox": "^0.4.4",
-    "@farcaster/frame-host": "0.0.0-canary-20250508220243"
+    "@farcaster/frame-host": "0.0.0-canary-20250508220359"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/rn-comlink-helpers.ts

@@ -0,0 +1,108 @@
+import {
+  type Remote,
+  type TransferHandler,
+  type WireValue,
+  WireValueType,
+  fromWireValue,
+  toWireValue,
+} from '@farcaster/frame-host'
+
+// The shape of the serialized function reference coming from the WebView
+interface SerializedRnFunction {
+  __isRNProxiedFunction: true
+  id: string
+  type: 'function'
+}
+
+function processArgumentsForRN(
+  argumentList: any[],
+): [WireValue[], Transferable[]] {
+  const processed = argumentList.map((arg) => toWireValue(arg))
+  const wireValues = processed.map((p) => p[0])
+  const transferables = processed.flatMap((p) => p[1])
+  if (transferables.length > 0) {
+    console.warn(
+      '[RN Host Comlink] Transferables found in arguments to WebView proxied function are ignored.',
+    )
+  }
+  return [wireValues, []]
+}
+
+export interface ReactNativeWebViewProxy {
+  _callWebViewProxiedFunction: (
+    id: string,
+    args: WireValue[],
+  ) => Promise<WireValue>
+}
+
+/**
+ * Creates a Comlink TransferHandler for deserializing functions proxied from WebView
+ * and serializing function stubs created by this handler.
+ */
+export function createReactNativeFunctionDeserializer(
+  getWebViewProxy: () => Remote<ReactNativeWebViewProxy> | undefined,
+): TransferHandler<Function, SerializedRnFunction> {
+  return {
+    // canHandle checks if a given value is a Function stub that this handler can serialize.
+    canHandle: (value: unknown): value is Function => {
+      return (
+        typeof value === 'function' &&
+        Object.hasOwn(value, '__functionId__') &&
+        typeof (value as any).__functionId__ === 'string'
+      )
+    },
+    // deserialize converts the wire format (SerializedRnFunction) into a callable Function stub.
+    deserialize: (serializedValue: SerializedRnFunction): Function => {
+      const functionId = serializedValue.id
+      console.debug(
+        `[RN Host Comlink] Creating stub for WebView function ID: ${functionId}`,
+      )
+      const webViewFunctionStub = async (...args: any[]) => {
+        const webViewProxy = getWebViewProxy()
+        if (!webViewProxy || !webViewProxy._callWebViewProxiedFunction) {
+          console.error(
+            '[RN Host Comlink] WebView proxy or _callWebViewProxiedFunction not available.',
+          )
+          throw new Error(
+            '[RN Host Comlink] WebView proxy not available. Cannot call remote function.',
+          )
+        }
+        console.debug(
+          `[RN Host Comlink] Calling WebView function ID: ${functionId} with args:`,
+          args,
+        )
+        const [wireArgs] = processArgumentsForRN(args)
+        try {
+          const typedProxy = webViewProxy as Remote<ReactNativeWebViewProxy>
+          const wireResult = await typedProxy._callWebViewProxiedFunction(
+            functionId,
+            wireArgs,
+          )
+          if (
+            wireResult &&
+            wireResult.type === WireValueType.HANDLER &&
+            (wireResult as any).name === 'throw'
+          ) {
+            return fromWireValue(wireResult)
+          }
+          return fromWireValue(wireResult)
+        } catch (error) {
+          console.error(
+            `[RN Host Comlink] Error in stub for function ID ${functionId}:`,
+            error,
+          )
+          throw error
+        }
+      }
+      ;(webViewFunctionStub as any).__functionId__ = functionId
+      return webViewFunctionStub
+    },
+    // serialize converts a Function stub (that this handler knows about) into its wire format.
+    serialize: (fnStub: Function): [SerializedRnFunction, Transferable[]] => {
+      // canHandle should have already verified this is one of our stubs.
+      const id = (fnStub as any).__functionId__
+      console.debug(`[RN Host Comlink] Serializing function stub ID: ${id}`)
+      return [{ __isRNProxiedFunction: true, id, type: 'function' }, []]
+    },
+  }
+}

package/src/rn-comlink.ts

@@ -0,0 +1,130 @@
+import {
+  type FrameHost,
+  type Endpoint as FrameHostEndpoint,
+  type Remote as FrameHostRemote,
+  type TransferHandler as FrameHostTransferHandler,
+  expose,
+  releaseProxy,
+  transferHandlers,
+  wrap,
+} from '@farcaster/frame-host'
+import {
+  forwardProviderEvents,
+  wrapProviderRequest,
+} from '@farcaster/frame-host/src/helpers/provider'
+import { wrapHandlers } from '@farcaster/frame-host/src/helpers/sdk'
+import type { Provider } from 'ox/Provider'
+import {
+  type ReactNativeWebViewProxy,
+  createReactNativeFunctionDeserializer,
+} from './rn-comlink-helpers'
+
+// Re-export releaseProxy symbol for use in cleanup
+export { releaseProxy }
+
+let rnHandlersInitialized = false
+let webViewProxyInstance: FrameHostRemote<ReactNativeWebViewProxy> | null = null
+let rnFunctionDeserializer: FrameHostTransferHandler<any, any> | null = null
+
+/**
+ * Ensures React Native specific Comlink transfer handlers are registered globally.
+ */
+export function ensureRnComlinkHandlers(): void {
+  if (rnHandlersInitialized) {
+    return
+  }
+
+  const getWebViewProxy = ():
+    | FrameHostRemote<ReactNativeWebViewProxy>
+    | undefined => {
+    return webViewProxyInstance === null ? undefined : webViewProxyInstance
+  }
+
+  rnFunctionDeserializer =
+    createReactNativeFunctionDeserializer(getWebViewProxy)
+  transferHandlers.set(
+    'rn_function',
+    rnFunctionDeserializer as FrameHostTransferHandler<any, any>,
+  )
+  console.debug(
+    '[RN Host Comlink] Registered ReactNativeFunctionDeserializer via ensureRnComlinkHandlers.',
+  )
+  rnHandlersInitialized = true
+}
+
+/**
+ * Wraps a WebView endpoint with Comlink, ensuring RN handlers are set up.
+ * Crucially, it sets the webViewProxyInstance needed by the deserializer's callback.
+ *
+ * If this is not called, deserializing the function will fail.
+ */
+export function wrapWebViewForRnComlink<T extends ReactNativeWebViewProxy>(
+  endpoint: FrameHostEndpoint,
+): FrameHostRemote<T> {
+  ensureRnComlinkHandlers()
+
+  const proxy: FrameHostRemote<T> = wrap<T>(
+    endpoint,
+  ) as unknown as FrameHostRemote<T>
+
+  webViewProxyInstance = proxy as FrameHostRemote<ReactNativeWebViewProxy>
+
+  return proxy
+}
+
+/**
+ * Exposes the Host SDK object to the WebView, ensuring RN handlers are set up
+ * on the Comlink instance used for the exposure.
+ * Replicates logic from `@farcaster/frame-host`'s `exposeToEndpoint` helper
+ * but makes sure to set up the RN handlers first.
+ *
+ * @returns Cleanup function if any event listeners were added (e.g., provider events)
+ */
+export function exposeToWebViewWithRnComlink({
+  endpoint,
+  sdk,
+  ethProvider,
+  debug = false,
+}: {
+  endpoint: FrameHostEndpoint
+  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
+  ethProvider?: Provider
+  debug?: boolean
+}): (() => void) | undefined {
+  ensureRnComlinkHandlers()
+
+  const extendedSdk = wrapHandlers(sdk as FrameHost)
+
+  let providerCleanup: (() => void) | undefined
+  if (ethProvider) {
+    extendedSdk.ethProviderRequestV2 = wrapProviderRequest({
+      provider: ethProvider,
+      debug,
+    })
+    try {
+      providerCleanup = forwardProviderEvents({
+        provider: ethProvider,
+        endpoint: endpoint as any,
+      })
+    } catch (e) {
+      console.error(
+        '[RN Host Comlink] Error setting up provider event forwarding:',
+        e,
+      )
+    }
+  }
+
+  try {
+    expose(extendedSdk, endpoint)
+    console.debug(
+      '[RN Host Comlink] Exposed SDK to WebView via exposeToWebViewWithRnComlink',
+    )
+  } catch (e) {
+    console.warn(
+      '[RN Host Comlink] Error exposing API (may already be exposed):',
+      e,
+    )
+  }
+
+  return providerCleanup
+}

package/src/webviewAdapter.ts

@@ -1,5 +1,8 @@
-import type { FrameHost } from '@farcaster/frame-host'
-import { exposeToEndpoint, useExposeToEndpoint } from '@farcaster/frame-host'
+import type {
+  FrameHost,
+  Remote as FrameHostRemote,
+} from '@farcaster/frame-host'
+import { exposeToEndpoint } from '@farcaster/frame-host'
 import type { Provider } from 'ox/Provider'
 import {
   type RefObject,
@@ -10,6 +13,8 @@ import {
 } from 'react'
 import type WebView from 'react-native-webview'
 import type { WebViewMessageEvent, WebViewProps } from 'react-native-webview'
+import { releaseProxy, wrapWebViewForRnComlink } from './rn-comlink'
+import type { ReactNativeWebViewProxy } from './rn-comlink-helpers'
 import { type WebViewEndpoint, createWebViewRpcEndpoint } from './webview'
 
 /**
@@ -41,6 +46,9 @@ export function useWebViewRpcAdapter({
     const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain)
     setEndpoint(newEndpoint)
 
+    const webViewProxy =
+      wrapWebViewForRnComlink<ReactNativeWebViewProxy>(newEndpoint)
+
     const cleanup = exposeToEndpoint({
       endpoint: newEndpoint,
       sdk,
@@ -51,6 +59,7 @@ export function useWebViewRpcAdapter({
 
     return () => {
       cleanup?.()
+      webViewProxy?.[releaseProxy]?.()
       setEndpoint(undefined)
     }
   }, [webViewRef, domain, sdk, ethProvider, debug])
@@ -107,11 +116,24 @@ export function useExposeWebViewToEndpoint({
   ethProvider?: Provider
   debug?: boolean
 }) {
-  useExposeToEndpoint({
-    endpoint,
-    sdk,
-    frameOrigin: 'ReactNativeWebView',
-    ethProvider,
-    debug,
-  })
+  useEffect(() => {
+    let webViewProxy: FrameHostRemote<ReactNativeWebViewProxy> | null = null
+    let cleanup: (() => void) | undefined | null = null
+
+    if (endpoint) {
+      webViewProxy = wrapWebViewForRnComlink<ReactNativeWebViewProxy>(endpoint)
+
+      cleanup = exposeToEndpoint({
+        endpoint,
+        sdk,
+        ethProvider,
+        frameOrigin: 'ReactNativeWebView',
+        debug,
+      })
+    }
+    return () => {
+      cleanup?.()
+      webViewProxy?.[releaseProxy]?.()
+    }
+  }, [endpoint, sdk, ethProvider, debug])
 }