@farcaster/frame-sdk 0.0.0-canary-20250508220243 → 0.0.0-canary-20250508220359

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/frame-sdk",
-  "version": "0.0.0-canary-20250508220243",
+  "version": "0.0.0-canary-20250508220359",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,8 @@
     "comlink": "^4.4.2",
     "eventemitter3": "^5.0.1",
     "ox": "^0.4.4",
-    "@farcaster/frame-core": "0.0.0-canary-20250508220243"
+    "@farcaster/frame-core": "0.0.0-canary-20250508220359",
+    "@farcaster/frame-host": "0.0.0-canary-20250508220359"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/rn-func-proxy.ts

@@ -0,0 +1,110 @@
+import {
+  type TransferHandler,
+  type WireValue,
+  fromWireValue,
+  proxyMarker,
+  toWireValue,
+} from '@farcaster/frame-host'
+import { isInReactNativeWebViewEnvironment } from './rn'
+
+// Since Comlink's proxyTransferHandler doesn't work on React Native, we need to
+// manually serialize and deserialize functions.
+// We associate each function with a unique ID and store it in a map so the host
+// receives a function stub that when called passes the ID and arguments to the
+// WebView which then looks up the function by ID and calls it.
+
+export const proxiedFunctionsForReactNative = new Map<string, Function>()
+let nextFunctionId = 0
+
+function generateFunctionId(): string {
+  return `rn_webview_fn_proxy_${nextFunctionId++}`
+}
+
+const comlinkThrownValueMarker = Symbol.for('Comlink.thrown')
+
+export const reactNativeFunctionSerializerTransferHandler: TransferHandler<
+  Function,
+  { __isRNProxiedFunction: true; id: string; type: 'function' }
+> = {
+  canHandle: (value: unknown): value is Function => {
+    if (isInReactNativeWebViewEnvironment() && typeof value === 'function') {
+      // In RN WebView, we force this handler for all functions to ensure ID-based proxying,
+      // as standard MessageChannel-based proxying won't work.
+      // This overrides Comlink's default proxyTransferHandler if the function was pre-marked.
+      return true
+    }
+    return false
+  },
+  serialize: (funcToProxy: Function) => {
+    const functionId = generateFunctionId()
+    proxiedFunctionsForReactNative.set(functionId, funcToProxy)
+    console.debug(
+      `[WebView RN Comlink] Serializing function (name: '${
+        funcToProxy.name || 'anonymous'
+      }', hasProxyMarker: ${!!(funcToProxy as any)[proxyMarker]}) to ID: ${functionId}`,
+    )
+    return [
+      { __isRNProxiedFunction: true, id: functionId, type: 'function' },
+      [],
+    ]
+  },
+  deserialize: (serializedValue: {
+    __isRNProxiedFunction: true
+    id: string
+    type: 'function'
+  }): Function => {
+    const func = proxiedFunctionsForReactNative.get(serializedValue.id)
+    if (!func) {
+      console.error(
+        `[WebView RN Comlink] Proxied function with ID ${serializedValue.id} not found during deserialization on WebView.`,
+      )
+      throw new Error(
+        `Proxied function with ID ${serializedValue.id} not found on WebView.`,
+      )
+    }
+    console.debug(
+      `[WebView RN Comlink] Deserializing ID ${serializedValue.id} back to function on WebView.`,
+    )
+    return func
+  },
+}
+
+export async function _callWebViewProxiedFunction(
+  functionId: string,
+  wireArgs: WireValue[],
+): Promise<WireValue> {
+  const func = proxiedFunctionsForReactNative.get(functionId)
+
+  if (!func) {
+    console.error(
+      `[WebView RN Comlink] Proxied function with ID ${functionId} not found for execution.`,
+    )
+    const error = new Error(
+      `Proxied function with ID ${functionId} not found on WebView.`,
+    )
+    const valueWithMarker = { value: error, [comlinkThrownValueMarker]: 0 }
+    const [wireError] = toWireValue(valueWithMarker)
+    return wireError
+  }
+
+  const args = wireArgs.map((arg) => fromWireValue(arg))
+
+  try {
+    const result = await func(...args)
+    const [wireResult, transferables] = toWireValue(result)
+    if (transferables.length > 0) {
+      console.warn(
+        '[WebView RN Comlink] Transferables returned from _callWebViewProxiedFunction are ignored.',
+      )
+    }
+    return wireResult
+  } catch (error) {
+    console.error(
+      `[WebView RN Comlink] Error executing proxied function ID ${functionId}:`,
+      error,
+    )
+    const valueWithMarker = { value: error, [comlinkThrownValueMarker]: 0 }
+    const [wireError] = toWireValue(valueWithMarker)
+    return wireError
+  }
+}

package/src/rn.ts

@@ -0,0 +1,124 @@
+import { expose, transferHandlers } from 'comlink'
+import {
+  _callWebViewProxiedFunction,
+  proxiedFunctionsForReactNative,
+  reactNativeFunctionSerializerTransferHandler,
+} from './rn-func-proxy'
+
+const comlinkListeners = new Map<EventListener, EventListener>()
+
+/**
+ * @returns true if the environment is a React Native WebView, false otherwise.
+ */
+export function isInReactNativeWebViewEnvironment(): boolean {
+  return typeof window !== 'undefined' && !!(window as any).ReactNativeWebView
+}
+
+/**
+ * Initializes the React Native SDK.
+ * This function should be called before the SDK is used.
+ *
+ * This is necessary because Complink function proxing doesn't work on React Native
+ * so we have our custom implementation we need to expose to the host.
+ */
+export const initializeReactNativeSDK = () => {
+  if (isInReactNativeWebViewEnvironment()) {
+    if (!transferHandlers.has('rn_function')) {
+      transferHandlers.set(
+        'rn_function',
+        reactNativeFunctionSerializerTransferHandler as any,
+      )
+      console.debug(
+        '[WebView RN Comlink] Registered reactNativeFunctionSerializerTransferHandler.',
+      )
+    }
+
+    const sdkApiToExpose = {
+      _callWebViewProxiedFunction,
+    }
+
+    if (window.ReactNativeWebView) {
+      const endpointForHostViaRN = {
+        postMessage: (message: any, _transfer?: Transferable[]) => {
+          if (window.ReactNativeWebView) {
+            console.debug('[SDK->Host Comlink] postMessage', message)
+            window.ReactNativeWebView.postMessage(JSON.stringify(message))
+          } else {
+            console.error(
+              '[SDK->Host Comlink] ReactNativeWebView became undefined.',
+            )
+          }
+        },
+        addEventListener: (
+          type: string,
+          listener: EventListenerOrEventListenerObject,
+        ) => {
+          if (type === 'message' && typeof listener === 'function') {
+            const adaptedListener = (event: Event) => {
+              const me = event as MessageEvent
+              const comlinkMessageData = me.data
+
+              if (!comlinkMessageData) {
+                console.warn(
+                  '[SDK Comlink Endpoint] Received event with no data from host',
+                )
+                return
+              }
+              // Comlink's listener expects a MessageEvent-like object with a `data` property.
+              // Cast to `any` to satisfy the EventListenerOrEventListenerObject type constraint,
+              // while providing the structure Comlink needs.
+              listener({ data: comlinkMessageData } as any)
+            }
+            comlinkListeners.set(listener, adaptedListener)
+            document.addEventListener('FarcasterFrameCallback', adaptedListener)
+          }
+        },
+        removeEventListener: (
+          type: string,
+          listener: EventListenerOrEventListenerObject,
+        ) => {
+          if (type === 'message' && typeof listener === 'function') {
+            const adaptedListener = comlinkListeners.get(listener)
+            if (adaptedListener) {
+              console.debug('[SDK->Host Comlink] removeEventListener', listener)
+              document.removeEventListener(
+                'FarcasterFrameCallback',
+                adaptedListener,
+              )
+              comlinkListeners.delete(listener)
+            }
+          }
+        },
+      }
+
+      try {
+        expose(sdkApiToExpose, endpointForHostViaRN)
+        console.debug(
+          '[WebView RN Comlink] Exposed SDK API for RN Host:',
+          Object.keys(sdkApiToExpose),
+        )
+      } catch (e) {
+        // Comlink throws if an endpoint is already exposed.
+        console.warn(
+          '[WebView RN Comlink] Error exposing SDK API (might be already exposed): ',
+          e,
+        )
+      }
+
+      window.addEventListener('unload', () => {
+        proxiedFunctionsForReactNative.clear()
+        comlinkListeners.forEach((adaptedListener, _originalListener) => {
+          document.removeEventListener(
+            'FarcasterFrameCallback',
+            adaptedListener,
+          )
+        })
+        comlinkListeners.clear()
+      })
+    } else {
+      console.warn(
+        '[WebView RN Comlink] ReactNativeWebView not found, cannot expose SDK API to host.',
+      )
+    }
+  }
+}

package/src/sdk.ts

@@ -8,8 +8,17 @@ import { proxy } from 'comlink'
 import { EventEmitter } from 'eventemitter3'
 import { frameHost } from './frameHost'
 import { provider } from './provider'
+import {
+  initializeReactNativeSDK,
+  isInReactNativeWebViewEnvironment,
+} from './rn'
 import type { Emitter, EventMap, FrameSDK } from './types'
 
+// We need to ensure the React Native specific parts of the SDK are initialized
+// before the SDK is used. Otherwise certain functionality, such as proxied function
+// calls, will not work.
+initializeReactNativeSDK()
+
 export function createEmitter(): Emitter {
   const emitter = new EventEmitter<EventMap>()
 
@@ -131,7 +140,11 @@ export const sdk: FrameSDK = {
     ethProvider: provider,
   },
   setShareStateProvider: (fn: ShareStateProvider) => {
-    frameHost.setShareStateProvider.bind(frameHost)(proxy(fn))
+    if (isInReactNativeWebViewEnvironment()) {
+      frameHost.setShareStateProvider.bind(frameHost)(fn as any)
+    } else {
+      frameHost.setShareStateProvider.bind(frameHost)(proxy(fn))
+    }
   },
 }