@webview-bridge/react-native 1.6.1 → 1.7.0-rc.0

package/dist/index.d.cts

@@ -0,0 +1,155 @@
+import * as react_native_webview_lib_WebViewTypes from 'react-native-webview/lib/WebViewTypes';
+import { Bridge, ParserSchema, BridgeStore, KeyOfOrString, Parser, OnlyJSON, Primitive, PostMessageSchemaObject, ExtractStore } from '@webview-bridge/types';
+export * from '@webview-bridge/types';
+import React, { Component } from 'react';
+import WebView, { WebViewProps } from 'react-native-webview';
+
+type BridgeWebView = Pick<WebView, Exclude<keyof WebView, keyof Component<WebViewProps>>>;
+
+type CreateWebViewArgs<BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>> = {
+    /**
+     * The bridge object to be used in the WebView.
+    * @example
+      import { createWebView, bridge } from "@webview-bridge/react-native";
+      import InAppBrowser from "react-native-inappbrowser-reborn";
+  
+      // Register functions in the bridge object in your React Native code
+      export const appBridge = bridge({
+        async getMessage() {
+          return "Hello, I'm native";
+        },
+        async sum(a: number, b: number) {
+          return a + b;
+        },
+        async openInAppBrowser(url: string) {
+          if (await InAppBrowser.isAvailable()) {
+            await InAppBrowser.open(url);
+          }
+        },
+        // ... Add more functions as needed
+      });
+  
+      export const { WebView } = createWebView({
+        bridge: appBridge,
+        debug: true, // Enable console.log visibility in the native WebView
+      });
+      */
+    bridge: BridgeStore<BridgeObject>;
+    /**
+     * If `true`, the console.log visibility in the WebView is enabled.
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Set the timeout in milliseconds for the response from the web method.
+     * @default 2000
+     */
+    responseTimeout?: number;
+    /**
+     * The schema for the postMessage method.
+     * @link https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     */
+    postMessageSchema?: PostMessageSchema;
+    /**
+     * Callback function when a method that is not defined in the bridge is called.
+     * @link https://gronxb.github.io/webview-bridge/backward-compatibility/new-method.html#react-native-part
+     */
+    fallback?: (method: keyof BridgeObject) => void;
+};
+type WebMethod<T> = T & {
+    isReady: boolean;
+};
+/**
+ * Create a WebView component that can communicate with the bridge.
+ * @link https://gronxb.github.io/webview-bridge/getting-started.html
+ * @example
+    import { createWebView, bridge } from "@webview-bridge/react-native";
+    import InAppBrowser from "react-native-inappbrowser-reborn";
+
+    // Register functions in the bridge object in your React Native code
+    export const appBridge = bridge({
+      async getMessage() {
+        return "Hello, I'm native";
+      },
+      async sum(a: number, b: number) {
+        return a + b;
+      },
+      async openInAppBrowser(url: string) {
+        if (await InAppBrowser.isAvailable()) {
+          await InAppBrowser.open(url);
+        }
+      },
+      // ... Add more functions as needed
+    });
+
+    export const { WebView } = createWebView({
+      bridge: appBridge,
+      debug: true, // Enable console.log visibility in the native WebView
+    });
+ */
+declare const createWebView: <BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>>({ bridge, debug, responseTimeout, postMessageSchema, fallback, }: CreateWebViewArgs<BridgeObject, PostMessageSchema>) => {
+    /**
+     * Sends an event from React Native to the Web.
+     * @link https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     */
+    postMessage: <EventName extends KeyOfOrString<PostMessageSchema>, Args extends Parser<PostMessageSchema, EventName>>(eventName: EventName, args: Args) => void;
+    WebView: React.ForwardRefExoticComponent<react_native_webview_lib_WebViewTypes.IOSWebViewProps & react_native_webview_lib_WebViewTypes.AndroidWebViewProps & react_native_webview_lib_WebViewTypes.WindowsWebViewProps & React.RefAttributes<BridgeWebView>>;
+    /**
+     * @deprecated Use `postMessage` instead.  And complete the type through the `postMessageSchema` option.
+     * @see https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     * @example
+      import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+      import { z } from "zod";
+
+      const appPostMessageSchema = postMessageSchema({
+        eventName1: z.object({
+          message: z.string(),
+        }),
+        eventName2: z.string(),
+      });
+
+
+      // Export the event schema to be used in the web application
+      export type AppPostMessageSchema = typeof appPostMessageSchema;
+
+      // When you bridge a webview, a postMessage is extracted.
+      export const { postMessage } = createWebView({
+        postMessageSchema: appPostMessageSchema, // Pass in the your schema. This is optional, so if the type doesn't matter to you, you don't need to include it.
+        // ..
+      });
+
+      // usage
+      postMessage("eventName1", {
+        message: "test",
+      });
+      postMessage("eventName2", "test");
+    */
+    linkWebMethod<T>(): {
+        current: WebMethod<T>;
+    };
+};
+
+type StoreCallback<T> = ({ get, set, }: {
+    get: () => T;
+    set: (newState: Partial<OnlyJSON<T>>) => void;
+}) => T;
+declare const bridge: <T extends Bridge>(procedures: T | StoreCallback<T>) => BridgeStore<T>;
+type HandleBridgeArgs<ArgType = unknown> = {
+    bridge: BridgeStore<Bridge>;
+    method: string;
+    args?: ArgType[];
+    webview: WebView;
+    eventId: string;
+};
+declare const handleBridge: ({ bridge, method, args, webview, eventId, }: HandleBridgeArgs) => Promise<void>;
+declare const INJECT_BRIDGE_METHODS: (bridgeNames: string[]) => string;
+declare const INJECT_BRIDGE_STATE: (initialState: Record<string, Primitive>) => string;
+declare const SAFE_NATIVE_EMITTER_EMIT: (eventName: string, data: unknown) => string;
+declare const SAFE_NATIVE_EMITTER_THROW: (eventName: string) => string;
+
+declare const postMessageSchema: <T extends PostMessageSchemaObject>(schema: T) => T;
+
+declare function useBridge<T extends Bridge>(store: BridgeStore<T>): ExtractStore<BridgeStore<T>>;
+declare function useBridge<T extends Bridge, U extends ExtractStore<BridgeStore<T>>, V>(store: BridgeStore<T>, selector?: (state: U) => V): V;
+
+export { type BridgeWebView, type CreateWebViewArgs, INJECT_BRIDGE_METHODS, INJECT_BRIDGE_STATE, SAFE_NATIVE_EMITTER_EMIT, SAFE_NATIVE_EMITTER_THROW, type StoreCallback, type WebMethod, bridge, createWebView, handleBridge, postMessageSchema, useBridge };

package/dist/index.d.ts

@@ -0,0 +1,155 @@
+import * as react_native_webview_lib_WebViewTypes from 'react-native-webview/lib/WebViewTypes';
+import { Bridge, ParserSchema, BridgeStore, KeyOfOrString, Parser, OnlyJSON, Primitive, PostMessageSchemaObject, ExtractStore } from '@webview-bridge/types';
+export * from '@webview-bridge/types';
+import React, { Component } from 'react';
+import WebView, { WebViewProps } from 'react-native-webview';
+
+type BridgeWebView = Pick<WebView, Exclude<keyof WebView, keyof Component<WebViewProps>>>;
+
+type CreateWebViewArgs<BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>> = {
+    /**
+     * The bridge object to be used in the WebView.
+    * @example
+      import { createWebView, bridge } from "@webview-bridge/react-native";
+      import InAppBrowser from "react-native-inappbrowser-reborn";
+  
+      // Register functions in the bridge object in your React Native code
+      export const appBridge = bridge({
+        async getMessage() {
+          return "Hello, I'm native";
+        },
+        async sum(a: number, b: number) {
+          return a + b;
+        },
+        async openInAppBrowser(url: string) {
+          if (await InAppBrowser.isAvailable()) {
+            await InAppBrowser.open(url);
+          }
+        },
+        // ... Add more functions as needed
+      });
+  
+      export const { WebView } = createWebView({
+        bridge: appBridge,
+        debug: true, // Enable console.log visibility in the native WebView
+      });
+      */
+    bridge: BridgeStore<BridgeObject>;
+    /**
+     * If `true`, the console.log visibility in the WebView is enabled.
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Set the timeout in milliseconds for the response from the web method.
+     * @default 2000
+     */
+    responseTimeout?: number;
+    /**
+     * The schema for the postMessage method.
+     * @link https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     */
+    postMessageSchema?: PostMessageSchema;
+    /**
+     * Callback function when a method that is not defined in the bridge is called.
+     * @link https://gronxb.github.io/webview-bridge/backward-compatibility/new-method.html#react-native-part
+     */
+    fallback?: (method: keyof BridgeObject) => void;
+};
+type WebMethod<T> = T & {
+    isReady: boolean;
+};
+/**
+ * Create a WebView component that can communicate with the bridge.
+ * @link https://gronxb.github.io/webview-bridge/getting-started.html
+ * @example
+    import { createWebView, bridge } from "@webview-bridge/react-native";
+    import InAppBrowser from "react-native-inappbrowser-reborn";
+
+    // Register functions in the bridge object in your React Native code
+    export const appBridge = bridge({
+      async getMessage() {
+        return "Hello, I'm native";
+      },
+      async sum(a: number, b: number) {
+        return a + b;
+      },
+      async openInAppBrowser(url: string) {
+        if (await InAppBrowser.isAvailable()) {
+          await InAppBrowser.open(url);
+        }
+      },
+      // ... Add more functions as needed
+    });
+
+    export const { WebView } = createWebView({
+      bridge: appBridge,
+      debug: true, // Enable console.log visibility in the native WebView
+    });
+ */
+declare const createWebView: <BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>>({ bridge, debug, responseTimeout, postMessageSchema, fallback, }: CreateWebViewArgs<BridgeObject, PostMessageSchema>) => {
+    /**
+     * Sends an event from React Native to the Web.
+     * @link https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     */
+    postMessage: <EventName extends KeyOfOrString<PostMessageSchema>, Args extends Parser<PostMessageSchema, EventName>>(eventName: EventName, args: Args) => void;
+    WebView: React.ForwardRefExoticComponent<react_native_webview_lib_WebViewTypes.IOSWebViewProps & react_native_webview_lib_WebViewTypes.AndroidWebViewProps & react_native_webview_lib_WebViewTypes.WindowsWebViewProps & React.RefAttributes<BridgeWebView>>;
+    /**
+     * @deprecated Use `postMessage` instead.  And complete the type through the `postMessageSchema` option.
+     * @see https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     * @example
+      import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+      import { z } from "zod";
+
+      const appPostMessageSchema = postMessageSchema({
+        eventName1: z.object({
+          message: z.string(),
+        }),
+        eventName2: z.string(),
+      });
+
+
+      // Export the event schema to be used in the web application
+      export type AppPostMessageSchema = typeof appPostMessageSchema;
+
+      // When you bridge a webview, a postMessage is extracted.
+      export const { postMessage } = createWebView({
+        postMessageSchema: appPostMessageSchema, // Pass in the your schema. This is optional, so if the type doesn't matter to you, you don't need to include it.
+        // ..
+      });
+
+      // usage
+      postMessage("eventName1", {
+        message: "test",
+      });
+      postMessage("eventName2", "test");
+    */
+    linkWebMethod<T>(): {
+        current: WebMethod<T>;
+    };
+};
+
+type StoreCallback<T> = ({ get, set, }: {
+    get: () => T;
+    set: (newState: Partial<OnlyJSON<T>>) => void;
+}) => T;
+declare const bridge: <T extends Bridge>(procedures: T | StoreCallback<T>) => BridgeStore<T>;
+type HandleBridgeArgs<ArgType = unknown> = {
+    bridge: BridgeStore<Bridge>;
+    method: string;
+    args?: ArgType[];
+    webview: WebView;
+    eventId: string;
+};
+declare const handleBridge: ({ bridge, method, args, webview, eventId, }: HandleBridgeArgs) => Promise<void>;
+declare const INJECT_BRIDGE_METHODS: (bridgeNames: string[]) => string;
+declare const INJECT_BRIDGE_STATE: (initialState: Record<string, Primitive>) => string;
+declare const SAFE_NATIVE_EMITTER_EMIT: (eventName: string, data: unknown) => string;
+declare const SAFE_NATIVE_EMITTER_THROW: (eventName: string) => string;
+
+declare const postMessageSchema: <T extends PostMessageSchemaObject>(schema: T) => T;
+
+declare function useBridge<T extends Bridge>(store: BridgeStore<T>): ExtractStore<BridgeStore<T>>;
+declare function useBridge<T extends Bridge, U extends ExtractStore<BridgeStore<T>>, V>(store: BridgeStore<T>, selector?: (state: U) => V): V;
+
+export { type BridgeWebView, type CreateWebViewArgs, INJECT_BRIDGE_METHODS, INJECT_BRIDGE_STATE, SAFE_NATIVE_EMITTER_EMIT, SAFE_NATIVE_EMITTER_THROW, type StoreCallback, type WebMethod, bridge, createWebView, handleBridge, postMessageSchema, useBridge };