@farcaster/frame-host-react-native 0.0.53 → 0.1.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@farcaster/frame-host-react-native",
-  "version": "0.0.53",
+  "version": "0.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/farcasterxyz/frames.git",
+    "url": "https://github.com/farcasterxyz/miniapps.git",
     "directory": "packages/frame-host-react-native"
   },
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
     "react-native": "^0.76.5",
     "react-native-webview": "^13.13.5",
     "typescript": "^5.8.3",
-    "@farcaster/tsconfig": "0.0.5"
+    "@farcaster/tsconfig": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "ox": "^0.4.4",
-    "@farcaster/frame-host": "0.0.53"
+    "@farcaster/miniapp-host-react-native": "0.1.0"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/index.ts

@@ -1,3 +1,10 @@
-export * from '@farcaster/frame-host'
-export * from './webview.ts'
-export * from './webviewAdapter.ts'
+// Deprecation warning
+if (typeof console !== 'undefined' && console.warn) {
+  console.warn(
+    '[DEPRECATION WARNING] @farcaster/frame-host-react-native is deprecated. Please migrate to @farcaster/miniapp-host-react-native. ' +
+      'See https://github.com/farcasterxyz/frames/blob/main/MIGRATION.md for migration guide.',
+  )
+}
+
+// Re-export everything from miniapp-host-react-native
+export * from '@farcaster/miniapp-host-react-native'

package/dist/webview.d.ts

@@ -1,15 +0,0 @@
-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 & {
-    /**
-     * Manually distribute events to listeners as an alternative to `document.addEventHandler` which is unavailable in React Native.
-     */
-    onMessage: (e: WebViewMessageEvent) => void;
-};
-/**
- * An endpoint of communicating with WebView
- */
-export declare function createWebViewRpcEndpoint(ref: RefObject<WebView | null>, domain: string): WebViewEndpoint;

package/dist/webview.js

@@ -1,103 +0,0 @@
-export const SYMBOL_IGNORING_RPC_RESPONSE_ERROR = Symbol();
-/**
- * An endpoint of communicating with WebView
- */
-export function createWebViewRpcEndpoint(ref, domain) {
-    const listeners = [];
-    return {
-        addEventListener: (type, listener) => {
-            if (type !== 'message') {
-                throw Error(`Got an unexpected event type "${type}". Expected "message".`);
-            }
-            listeners.push(listener);
-        },
-        removeEventListener: (type, listener) => {
-            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 &&
-                    data.value === SYMBOL_IGNORING_RPC_RESPONSE_ERROR) {
-                    return;
-                }
-                throw Error('Failed to return RPC response to WebView via postMessage');
-            }
-            console.debug('[webview:res]', data);
-            const dataStr = JSON.stringify(data);
-            return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:res]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameCallback', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit]', 'invalid origin, ignoring')
-        }
-      `);
-        },
-        onMessage: (e) => {
-            const originDomain = new URL(e.nativeEvent.url).hostname;
-            const allowedDomains = [domain, `www.${domain}`];
-            if (!allowedDomains.includes(originDomain)) {
-                console.warn('Invalid message domain, ignoring');
-                return;
-            }
-            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);
-                }
-                else {
-                    l.handleEvent(messageEvent);
-                }
-            }
-        },
-        emit: (data) => {
-            if (!ref.current) {
-                throw Error('Failed to send Event to WebView via postMessage');
-            }
-            console.debug('[webview:emit]', data);
-            const dataStr = JSON.stringify(data);
-            return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:emit]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameEvent', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit]', 'invalid origin, ignoring')
-        }
-      `);
-        },
-        emitEthProvider: (event, params) => {
-            if (!ref.current) {
-                throw Error('Failed to send EthProvider Event to WebView via postMessage');
-            }
-            console.debug('[emit:ethProvider]', event, params);
-            const wireEvent = { event, params };
-            const dataStr = JSON.stringify(wireEvent);
-            return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:emit:ethProvider]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameEthProviderEvent', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit:ethProvider]', 'invalid origin, ignoring')
-        }
-      `);
-        },
-    };
-}
-/**
- * Standard MessageEvent is unavailable in React Native since it's part of HTML Standard.
- * Instead, implement our own MessageEvent with the minimum properties required by Comlink implementation.
- */
-class MessageEvent {
-    data;
-    origin = 'ReactNativeWebView';
-    constructor(data) {
-        this.data = data;
-    }
-}

package/dist/webviewAdapter.d.ts

@@ -1,30 +0,0 @@
-import type { FrameHost } from '@farcaster/frame-host';
-import type { Provider } from 'ox/Provider';
-import { type RefObject } from 'react';
-import type WebView from 'react-native-webview';
-import type { WebViewMessageEvent } from 'react-native-webview';
-import { type WebViewEndpoint } from './webview.ts';
-/**
- * Returns a handler of RPC message from WebView.
- */
-export declare function useWebViewRpcAdapter({ webViewRef, domain, sdk, ethProvider, debug, }: {
-    webViewRef: RefObject<WebView>;
-    domain: string;
-    sdk: Omit<FrameHost, 'ethProviderRequestV2'>;
-    ethProvider?: Provider;
-    debug?: boolean;
-}): {
-    onMessage: (event: WebViewMessageEvent) => void;
-    emit: ((event: import("@farcaster/frame-core").FrameClientEvent) => void) | undefined;
-    emitEthProvider: import("@farcaster/frame-core").EmitEthProvider | undefined;
-};
-export declare function useWebViewRpcEndpoint(webViewRef: RefObject<WebView | null>, domain: string): {
-    endpoint: WebViewEndpoint | undefined;
-    onMessage: (event: WebViewMessageEvent) => void;
-};
-export declare function useExposeWebViewToEndpoint({ endpoint, sdk, ethProvider, debug, }: {
-    endpoint: WebViewEndpoint | undefined;
-    sdk: Omit<FrameHost, 'ethProviderRequestV2'>;
-    ethProvider?: Provider;
-    debug?: boolean;
-}): void;

package/dist/webviewAdapter.js

@@ -1,58 +0,0 @@
-import { exposeToEndpoint, useExposeToEndpoint } from '@farcaster/frame-host';
-import { useCallback, useEffect, useMemo, useState, } from 'react';
-import { createWebViewRpcEndpoint } from "./webview.js";
-/**
- * Returns a handler of RPC message from WebView.
- */
-export function useWebViewRpcAdapter({ webViewRef, domain, sdk, ethProvider, debug = false, }) {
-    const [endpoint, setEndpoint] = useState();
-    const onMessage = useCallback((e) => {
-        endpoint?.onMessage(e);
-    }, [endpoint]);
-    useEffect(() => {
-        const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain);
-        setEndpoint(newEndpoint);
-        const cleanup = exposeToEndpoint({
-            endpoint: newEndpoint,
-            sdk,
-            ethProvider,
-            frameOrigin: 'ReactNativeWebView',
-            debug,
-        });
-        return () => {
-            cleanup?.();
-            setEndpoint(undefined);
-        };
-    }, [webViewRef, domain, sdk, ethProvider, debug]);
-    return useMemo(() => ({
-        onMessage,
-        emit: endpoint?.emit,
-        emitEthProvider: endpoint?.emitEthProvider,
-    }), [onMessage, endpoint]);
-}
-export function useWebViewRpcEndpoint(webViewRef, domain) {
-    const [endpoint, setEndpoint] = useState();
-    const onMessage = useCallback((e) => {
-        endpoint?.onMessage(e);
-    }, [endpoint]);
-    useEffect(() => {
-        const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain);
-        setEndpoint(newEndpoint);
-        return () => {
-            setEndpoint(undefined);
-        };
-    }, [webViewRef, domain]);
-    return useMemo(() => ({
-        endpoint,
-        onMessage,
-    }), [endpoint, onMessage]);
-}
-export function useExposeWebViewToEndpoint({ endpoint, sdk, ethProvider, debug = false, }) {
-    useExposeToEndpoint({
-        endpoint,
-        sdk,
-        frameOrigin: 'ReactNativeWebView',
-        ethProvider,
-        debug,
-    });
-}

package/src/webview.ts

@@ -1,126 +0,0 @@
-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 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
-}
-
-/**
- * An endpoint of communicating with WebView
- */
-export function createWebViewRpcEndpoint(
-  ref: RefObject<WebView | null>,
-  domain: string,
-): WebViewEndpoint {
-  const listeners: EventListenerOrEventListenerObject[] = []
-  return {
-    addEventListener: (type, listener) => {
-      if (type !== 'message') {
-        throw Error(
-          `Got an unexpected event type "${type}". Expected "message".`,
-        )
-      }
-      listeners.push(listener)
-    },
-    removeEventListener: (type, listener) => {
-      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 &&
-          data.value === SYMBOL_IGNORING_RPC_RESPONSE_ERROR
-        ) {
-          return
-        }
-        throw Error('Failed to return RPC response to WebView via postMessage')
-      }
-      console.debug('[webview:res]', data)
-      const dataStr = JSON.stringify(data)
-      return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:res]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameCallback', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit]', 'invalid origin, ignoring')
-        }
-      `)
-    },
-    onMessage: (e) => {
-      const originDomain = new URL(e.nativeEvent.url).hostname
-      const allowedDomains = [domain, `www.${domain}`]
-      if (!allowedDomains.includes(originDomain)) {
-        console.warn('Invalid message domain, ignoring')
-        return
-      }
-
-      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)
-        } else {
-          l.handleEvent(messageEvent as unknown as Event)
-        }
-      }
-    },
-    emit: (data) => {
-      if (!ref.current) {
-        throw Error('Failed to send Event to WebView via postMessage')
-      }
-      console.debug('[webview:emit]', data)
-      const dataStr = JSON.stringify(data)
-      return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:emit]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameEvent', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit]', 'invalid origin, ignoring')
-        }
-      `)
-    },
-    emitEthProvider: (event, params) => {
-      if (!ref.current) {
-        throw Error(
-          'Failed to send EthProvider Event to WebView via postMessage',
-        )
-      }
-      console.debug('[emit:ethProvider]', event, params)
-      const wireEvent = { event, params }
-      const dataStr = JSON.stringify(wireEvent)
-      return ref.current.injectJavaScript(`
-        if (location.origin === 'https://${domain}' || location.origin === 'https://www.${domain}') {
-          console.debug('[webview:emit:ethProvider]', ${dataStr});
-          document.dispatchEvent(new MessageEvent('FarcasterFrameEthProviderEvent', { data: ${dataStr} }));
-        } else {
-          console.debug('[webview:emit:ethProvider]', 'invalid origin, ignoring')
-        }
-      `)
-    },
-  }
-}
-
-/**
- * Standard MessageEvent is unavailable in React Native since it's part of HTML Standard.
- * Instead, implement our own MessageEvent with the minimum properties required by Comlink implementation.
- */
-class MessageEvent {
-  public origin = 'ReactNativeWebView'
-  constructor(public data: unknown) {}
-}

package/src/webviewAdapter.ts

@@ -1,117 +0,0 @@
-import type { FrameHost } from '@farcaster/frame-host'
-import { exposeToEndpoint, useExposeToEndpoint } from '@farcaster/frame-host'
-import type { Provider } from 'ox/Provider'
-import {
-  type RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import type WebView from 'react-native-webview'
-import type { WebViewMessageEvent, WebViewProps } from 'react-native-webview'
-import { type WebViewEndpoint, createWebViewRpcEndpoint } from './webview.ts'
-
-/**
- * Returns a handler of RPC message from WebView.
- */
-export function useWebViewRpcAdapter({
-  webViewRef,
-  domain,
-  sdk,
-  ethProvider,
-  debug = false,
-}: {
-  webViewRef: RefObject<WebView>
-  domain: string
-  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
-  ethProvider?: Provider
-  debug?: boolean
-}) {
-  const [endpoint, setEndpoint] = useState<WebViewEndpoint>()
-
-  const onMessage: WebViewProps['onMessage'] = useCallback(
-    (e: WebViewMessageEvent) => {
-      endpoint?.onMessage(e)
-    },
-    [endpoint],
-  )
-
-  useEffect(() => {
-    const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain)
-    setEndpoint(newEndpoint)
-
-    const cleanup = exposeToEndpoint({
-      endpoint: newEndpoint,
-      sdk,
-      ethProvider,
-      frameOrigin: 'ReactNativeWebView',
-      debug,
-    })
-
-    return () => {
-      cleanup?.()
-      setEndpoint(undefined)
-    }
-  }, [webViewRef, domain, sdk, ethProvider, debug])
-
-  return useMemo(
-    () => ({
-      onMessage,
-      emit: endpoint?.emit,
-      emitEthProvider: endpoint?.emitEthProvider,
-    }),
-    [onMessage, endpoint],
-  )
-}
-
-export function useWebViewRpcEndpoint(
-  webViewRef: RefObject<WebView | null>,
-  domain: string,
-) {
-  const [endpoint, setEndpoint] = useState<WebViewEndpoint>()
-
-  const onMessage: WebViewProps['onMessage'] = useCallback(
-    (e: WebViewMessageEvent) => {
-      endpoint?.onMessage(e)
-    },
-    [endpoint],
-  )
-
-  useEffect(() => {
-    const newEndpoint = createWebViewRpcEndpoint(webViewRef, domain)
-    setEndpoint(newEndpoint)
-
-    return () => {
-      setEndpoint(undefined)
-    }
-  }, [webViewRef, domain])
-
-  return useMemo(
-    () => ({
-      endpoint,
-      onMessage,
-    }),
-    [endpoint, onMessage],
-  )
-}
-
-export function useExposeWebViewToEndpoint({
-  endpoint,
-  sdk,
-  ethProvider,
-  debug = false,
-}: {
-  endpoint: WebViewEndpoint | undefined
-  sdk: Omit<FrameHost, 'ethProviderRequestV2'>
-  ethProvider?: Provider
-  debug?: boolean
-}) {
-  useExposeToEndpoint({
-    endpoint,
-    sdk,
-    frameOrigin: 'ReactNativeWebView',
-    ethProvider,
-    debug,
-  })
-}