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

package/dist/rn-func-proxy.d.ts

@@ -0,0 +1,8 @@
+import { type TransferHandler, type WireValue } from '@farcaster/frame-host';
+export declare const proxiedFunctionsForReactNative: Map<string, Function>;
+export declare const reactNativeFunctionSerializerTransferHandler: TransferHandler<Function, {
+    __isRNProxiedFunction: true;
+    id: string;
+    type: 'function';
+}>;
+export declare function _callWebViewProxiedFunction(functionId: string, wireArgs: WireValue[]): Promise<WireValue>;

package/dist/rn-func-proxy.js

@@ -0,0 +1,67 @@
+import { 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();
+let nextFunctionId = 0;
+function generateFunctionId() {
+    return `rn_webview_fn_proxy_${nextFunctionId++}`;
+}
+const comlinkThrownValueMarker = Symbol.for('Comlink.thrown');
+export const reactNativeFunctionSerializerTransferHandler = {
+    canHandle: (value) => {
+        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) => {
+        const functionId = generateFunctionId();
+        proxiedFunctionsForReactNative.set(functionId, funcToProxy);
+        console.debug(`[WebView RN Comlink] Serializing function (name: '${funcToProxy.name || 'anonymous'}', hasProxyMarker: ${!!funcToProxy[proxyMarker]}) to ID: ${functionId}`);
+        return [
+            { __isRNProxiedFunction: true, id: functionId, type: 'function' },
+            [],
+        ];
+    },
+    deserialize: (serializedValue) => {
+        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, wireArgs) {
+    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/dist/rn.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @returns true if the environment is a React Native WebView, false otherwise.
+ */
+export declare function isInReactNativeWebViewEnvironment(): boolean;
+/**
+ * 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 declare const initializeReactNativeSDK: () => void;

package/dist/rn.js

@@ -0,0 +1,86 @@
+import { expose, transferHandlers } from 'comlink';
+import { _callWebViewProxiedFunction, proxiedFunctionsForReactNative, reactNativeFunctionSerializerTransferHandler, } from './rn-func-proxy';
+const comlinkListeners = new Map();
+/**
+ * @returns true if the environment is a React Native WebView, false otherwise.
+ */
+export function isInReactNativeWebViewEnvironment() {
+    return typeof window !== 'undefined' && !!window.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);
+            console.debug('[WebView RN Comlink] Registered reactNativeFunctionSerializerTransferHandler.');
+        }
+        const sdkApiToExpose = {
+            _callWebViewProxiedFunction,
+        };
+        if (window.ReactNativeWebView) {
+            const endpointForHostViaRN = {
+                postMessage: (message, _transfer) => {
+                    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, listener) => {
+                    if (type === 'message' && typeof listener === 'function') {
+                        const adaptedListener = (event) => {
+                            const me = event;
+                            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 });
+                        };
+                        comlinkListeners.set(listener, adaptedListener);
+                        document.addEventListener('FarcasterFrameCallback', adaptedListener);
+                    }
+                },
+                removeEventListener: (type, listener) => {
+                    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/dist/sdk.js

@@ -3,6 +3,11 @@ import { proxy } from 'comlink';
 import { EventEmitter } from 'eventemitter3';
 import { frameHost } from './frameHost';
 import { provider } from './provider';
+import { initializeReactNativeSDK, isInReactNativeWebViewEnvironment, } from './rn';
+// 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() {
     const emitter = new EventEmitter();
     return {
@@ -110,7 +115,12 @@ export const sdk = {
         ethProvider: provider,
     },
     setShareStateProvider: (fn) => {
-        frameHost.setShareStateProvider.bind(frameHost)(proxy(fn));
+        if (isInReactNativeWebViewEnvironment()) {
+            frameHost.setShareStateProvider.bind(frameHost)(fn);
+        }
+        else {
+            frameHost.setShareStateProvider.bind(frameHost)(proxy(fn));
+        }
     },
 };
 // Required to pass SSR