@webview-bridge/react-native 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# webview-bridge
+
+webview-bridge package for react native
+
+For more information, check out https://github.com/gronxb/webview-bridge

package/dist/packages/native/src/createWebView.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { BridgeWebView, Procedure, ProceduresObject } from "./types";
+export type CreateWebViewArgs<T extends ProceduresObject<Record<string, Procedure>>> = {
+    bridge: T;
+    debug?: boolean;
+    responseTimeout?: number;
+    fallback?: (method: keyof T) => void;
+};
+export type WebMethod<T> = T & {
+    isReady: boolean;
+};
+export declare const createWebView: <T extends ProceduresObject<Record<string, Procedure>>>({ bridge, debug, responseTimeout, fallback, }: CreateWebViewArgs<T>) => {
+    WebView: React.ForwardRefExoticComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & React.RefAttributes<BridgeWebView>>;
+    linkWebMethod<T_1>(): {
+        current: WebMethod<T_1>;
+    };
+};

package/dist/packages/native/src/createWebView.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWebView = void 0;
+const util_1 = require("../../../shared/util/src");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const react_native_webview_1 = __importDefault(require("react-native-webview"));
+const integrations_1 = require("./integrations");
+const handleRegisterWebMethod_1 = require("./integrations/handleRegisterWebMethod");
+const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) => {
+    const WebMethod = {
+        current: {
+            isReady: false,
+        },
+    };
+    const emitter = (0, util_1.createEvents)();
+    return {
+        WebView: (0, react_1.forwardRef)((props, ref) => {
+            const webviewRef = (0, react_1.useRef)(null);
+            const bridgeNames = (0, react_1.useMemo)(() => Object.values(bridge ?? {}).map((func) => {
+                return `'${func.name}'`;
+            }), []);
+            (0, react_1.useImperativeHandle)(ref, () => webviewRef.current, []);
+            const handleMessage = async (event) => {
+                props.onMessage?.(event);
+                if (!webviewRef.current) {
+                    return;
+                }
+                const { type, body } = JSON.parse(event.nativeEvent.data);
+                switch (type) {
+                    case "log": {
+                        const { method, args } = body;
+                        debug && (0, integrations_1.handleLog)(method, args);
+                        return;
+                    }
+                    case "bridge": {
+                        const { method, args, eventId } = body;
+                        (0, integrations_1.handleBridge)({
+                            bridge,
+                            method,
+                            args,
+                            eventId,
+                            webview: webviewRef.current,
+                        });
+                        return;
+                    }
+                    case "registerWebMethod": {
+                        const { bridgeNames } = body;
+                        Object.assign(WebMethod.current, (0, handleRegisterWebMethod_1.handleRegisterWebMethod)(emitter, webviewRef.current, bridgeNames, responseTimeout));
+                        WebMethod.current.isReady = true;
+                        return;
+                    }
+                    case "webMethodResponse": {
+                        const { eventId, funcName, value } = body;
+                        emitter.emit(`${funcName}-${eventId}`, value);
+                        return;
+                    }
+                    case "fallback": {
+                        const { method } = body;
+                        fallback?.(method);
+                        return;
+                    }
+                }
+            };
+            return (<react_native_webview_1.default ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
+                    (0, integrations_1.INTEGRATIONS_SCRIPTS_BRIDGE)(bridgeNames),
+                    props.injectedJavaScriptBeforeContentLoaded,
+                    "true;",
+                ]
+                    .filter(Boolean)
+                    .join("\n")} injectedJavaScript={[
+                    console && integrations_1.INTEGRATIONS_SCRIPTS_CONSOLE,
+                    props.injectedJavaScript,
+                    "true;",
+                ]
+                    .filter(Boolean)
+                    .join("\n")} {...props}/>);
+        }),
+        linkWebMethod() {
+            return WebMethod;
+        },
+    };
+};
+exports.createWebView = createWebView;

package/dist/packages/native/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./createWebView";
+export * from "./integrations/bridge";
+export * from "./types";

package/dist/packages/native/src/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./createWebView"), exports);
+__exportStar(require("./integrations/bridge"), exports);
+__exportStar(require("./types"), exports);

package/dist/packages/native/src/integrations/bridge.d.ts

@@ -0,0 +1,13 @@
+import WebView from "react-native-webview";
+import type { Bridge, Procedure, ProceduresObject } from "../types";
+export declare const bridge: Bridge;
+type HandleBridgeArgs<ArgType = unknown> = {
+    bridge: ProceduresObject<Record<string, Procedure>>;
+    method: string;
+    args?: ArgType[];
+    webview: WebView;
+    eventId: string;
+};
+export declare const handleBridge: ({ bridge, method, args, webview, eventId, }: HandleBridgeArgs) => Promise<void>;
+export declare const INTEGRATIONS_SCRIPTS_BRIDGE: (bridgeNames: string[]) => string;
+export {};

package/dist/packages/native/src/integrations/bridge.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INTEGRATIONS_SCRIPTS_BRIDGE = exports.handleBridge = exports.bridge = void 0;
+const bridge = (procedures) => {
+    return procedures;
+};
+exports.bridge = bridge;
+const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
+    const response = await bridge[method]?.(...(args ?? []));
+    webview.injectJavaScript(`
+    window.nativeEmitter.emit('${method}-${eventId}',${JSON.stringify(response)});
+  
+    true;
+  `);
+};
+exports.handleBridge = handleBridge;
+const INTEGRATIONS_SCRIPTS_BRIDGE = (bridgeNames) => `
+    window.__bridgeMethods__ = [${bridgeNames.join(", ")}];
+`;
+exports.INTEGRATIONS_SCRIPTS_BRIDGE = INTEGRATIONS_SCRIPTS_BRIDGE;

package/dist/packages/native/src/integrations/console.d.ts

@@ -0,0 +1,3 @@
+export declare const INTEGRATIONS_SCRIPTS_CONSOLE = "\n{\n  const originalConsoleLog = console.log;\n  const originalConsoleError = console.error;\n  const originalConsoleWarn = console.warn;\n\n  console.log = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"log\", args: message } }),\n    );\n    originalConsoleLog.apply(console, arguments);\n  };\n\n  console.error = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"error\", args: message } }),\n    );\n    originalConsoleError.apply(console, arguments);\n  };\n\n  console.warn = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"warn\", args: message } }),\n    );\n    originalConsoleWarn.apply(console, arguments);\n  };\n};\n";
+export type LogType = "log" | "error" | "warn";
+export declare const handleLog: (type: LogType, message?: unknown) => void;

package/dist/packages/native/src/integrations/console.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleLog = exports.INTEGRATIONS_SCRIPTS_CONSOLE = void 0;
+exports.INTEGRATIONS_SCRIPTS_CONSOLE = `
+{
+  const originalConsoleLog = console.log;
+  const originalConsoleError = console.error;
+  const originalConsoleWarn = console.warn;
+
+  console.log = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "log", args: message } }),
+    );
+    originalConsoleLog.apply(console, arguments);
+  };
+
+  console.error = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "error", args: message } }),
+    );
+    originalConsoleError.apply(console, arguments);
+  };
+
+  console.warn = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "warn", args: message } }),
+    );
+    originalConsoleWarn.apply(console, arguments);
+  };
+};
+`;
+const handleLog = (type, message) => {
+    switch (type) {
+        case "log": {
+            console.log("(WebView)", message);
+            break;
+        }
+        case "error": {
+            console.error("(WebView)", message);
+            break;
+        }
+        case "warn": {
+            console.warn("(WebView)", message);
+            break;
+        }
+    }
+};
+exports.handleLog = handleLog;

package/dist/packages/native/src/integrations/createWebMethod.d.ts

@@ -0,0 +1,4 @@
+import { type EventEmitter } from "../../../../shared/util/src";
+import WebView from "react-native-webview";
+import { Procedure } from "../types";
+export declare const handleCreateWebMethod: (emitter: EventEmitter, webview: WebView, bridgeNames: string[], responseTimeout: number) => Record<string, Procedure>;

package/dist/packages/native/src/integrations/createWebMethod.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCreateWebMethod = void 0;
+const util_1 = require("../../../../shared/util/src");
+const handleCreateWebMethod = (emitter, webview, bridgeNames, responseTimeout) => {
+    return bridgeNames.reduce((acc, method) => {
+        acc[method] = async (...args) => {
+            const eventId = (0, util_1.createRandomId)();
+            return Promise.race([
+                (0, util_1.createResolver)(emitter, method, eventId, () => {
+                    webview.injectJavaScript(`
+              window.webEmitter.emit('${method}', '${eventId}', ${JSON.stringify(args)});
+            
+              true;
+              `);
+                }),
+                (0, util_1.timeout)(responseTimeout),
+            ]);
+        };
+        return acc;
+    }, {});
+};
+exports.handleCreateWebMethod = handleCreateWebMethod;

package/dist/packages/native/src/integrations/handleRegisterWebMethod.d.ts

@@ -0,0 +1,4 @@
+import { type EventEmitter } from "../../../../shared/util/src";
+import WebView from "react-native-webview";
+import { Procedure } from "../types";
+export declare const handleRegisterWebMethod: (emitter: EventEmitter, webview: WebView, bridgeNames: string[], responseTimeout: number) => Record<string, Procedure>;

package/dist/packages/native/src/integrations/handleRegisterWebMethod.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRegisterWebMethod = void 0;
+const util_1 = require("../../../../shared/util/src");
+const handleRegisterWebMethod = (emitter, webview, bridgeNames, responseTimeout) => {
+    return bridgeNames.reduce((acc, method) => {
+        acc[method] = async (...args) => {
+            const eventId = (0, util_1.createRandomId)();
+            return Promise.race([
+                (0, util_1.createResolver)(emitter, method, eventId, () => {
+                    webview.injectJavaScript(`
+              window.webEmitter.emit('${method}', '${eventId}', ${JSON.stringify(args)});
+            
+              true;
+              `);
+                }),
+                (0, util_1.timeout)(responseTimeout),
+            ]);
+        };
+        return acc;
+    }, {});
+};
+exports.handleRegisterWebMethod = handleRegisterWebMethod;

package/dist/packages/native/src/integrations/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./bridge";
+export * from "./console";

package/dist/packages/native/src/integrations/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./bridge"), exports);
+__exportStar(require("./console"), exports);

package/dist/packages/native/src/types/index.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "react";
+import WebView, { WebViewProps } from "react-native-webview";
+export type Procedure = (...args: any[]) => any;
+export type ProceduresObject<T extends Record<string, Procedure>> = {
+    [K in keyof T]: (...args: Parameters<T[K]>) => Promise<Awaited<ReturnType<T[K]>>>;
+};
+export type Bridge = <T extends Record<string, Procedure>>(procedures: T) => ProceduresObject<T>;
+export type BridgeWebView = Pick<WebView, Exclude<keyof WebView, keyof Component<WebViewProps>>>;

package/dist/packages/native/src/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/packages/react-native/src/createWebView.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { BridgeWebView, Procedure, ProceduresObject } from "./types";
+export type CreateWebViewArgs<T extends ProceduresObject<Record<string, Procedure>>> = {
+    bridge: T;
+    debug?: boolean;
+    responseTimeout?: number;
+    fallback?: (method: keyof T) => void;
+};
+export type WebMethod<T> = T & {
+    isReady: boolean;
+};
+export declare const createWebView: <T extends ProceduresObject<Record<string, Procedure>>>({ bridge, debug, responseTimeout, fallback, }: CreateWebViewArgs<T>) => {
+    WebView: React.ForwardRefExoticComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & React.RefAttributes<BridgeWebView>>;
+    linkWebMethod<T_1>(): {
+        current: WebMethod<T_1>;
+    };
+};

package/dist/packages/react-native/src/createWebView.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWebView = void 0;
+const util_1 = require("../../../shared/util/src");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const react_native_webview_1 = __importDefault(require("react-native-webview"));
+const integrations_1 = require("./integrations");
+const handleRegisterWebMethod_1 = require("./integrations/handleRegisterWebMethod");
+const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) => {
+    const WebMethod = {
+        current: {
+            isReady: false,
+        },
+    };
+    const emitter = (0, util_1.createEvents)();
+    return {
+        WebView: (0, react_1.forwardRef)((props, ref) => {
+            const webviewRef = (0, react_1.useRef)(null);
+            const bridgeNames = (0, react_1.useMemo)(() => Object.values(bridge ?? {}).map((func) => {
+                return `'${func.name}'`;
+            }), []);
+            (0, react_1.useImperativeHandle)(ref, () => webviewRef.current, []);
+            const handleMessage = async (event) => {
+                props.onMessage?.(event);
+                if (!webviewRef.current) {
+                    return;
+                }
+                const { type, body } = JSON.parse(event.nativeEvent.data);
+                switch (type) {
+                    case "log": {
+                        const { method, args } = body;
+                        debug && (0, integrations_1.handleLog)(method, args);
+                        return;
+                    }
+                    case "bridge": {
+                        const { method, args, eventId } = body;
+                        (0, integrations_1.handleBridge)({
+                            bridge,
+                            method,
+                            args,
+                            eventId,
+                            webview: webviewRef.current,
+                        });
+                        return;
+                    }
+                    case "registerWebMethod": {
+                        const { bridgeNames } = body;
+                        Object.assign(WebMethod.current, (0, handleRegisterWebMethod_1.handleRegisterWebMethod)(emitter, webviewRef.current, bridgeNames, responseTimeout));
+                        WebMethod.current.isReady = true;
+                        return;
+                    }
+                    case "webMethodResponse": {
+                        const { eventId, funcName, value } = body;
+                        emitter.emit(`${funcName}-${eventId}`, value);
+                        return;
+                    }
+                    case "fallback": {
+                        const { method } = body;
+                        fallback?.(method);
+                        return;
+                    }
+                }
+            };
+            return (<react_native_webview_1.default ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
+                    (0, integrations_1.INTEGRATIONS_SCRIPTS_BRIDGE)(bridgeNames),
+                    props.injectedJavaScriptBeforeContentLoaded,
+                    "true;",
+                ]
+                    .filter(Boolean)
+                    .join("\n")} injectedJavaScript={[
+                    console && integrations_1.INTEGRATIONS_SCRIPTS_CONSOLE,
+                    props.injectedJavaScript,
+                    "true;",
+                ]
+                    .filter(Boolean)
+                    .join("\n")} {...props}/>);
+        }),
+        linkWebMethod() {
+            return WebMethod;
+        },
+    };
+};
+exports.createWebView = createWebView;

package/dist/packages/react-native/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./createWebView";
+export * from "./integrations/bridge";
+export * from "./types";

package/dist/packages/react-native/src/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./createWebView"), exports);
+__exportStar(require("./integrations/bridge"), exports);
+__exportStar(require("./types"), exports);

package/dist/packages/react-native/src/integrations/bridge.d.ts

@@ -0,0 +1,13 @@
+import WebView from "react-native-webview";
+import type { Bridge, Procedure, ProceduresObject } from "../types";
+export declare const bridge: Bridge;
+type HandleBridgeArgs<ArgType = unknown> = {
+    bridge: ProceduresObject<Record<string, Procedure>>;
+    method: string;
+    args?: ArgType[];
+    webview: WebView;
+    eventId: string;
+};
+export declare const handleBridge: ({ bridge, method, args, webview, eventId, }: HandleBridgeArgs) => Promise<void>;
+export declare const INTEGRATIONS_SCRIPTS_BRIDGE: (bridgeNames: string[]) => string;
+export {};

package/dist/packages/react-native/src/integrations/bridge.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INTEGRATIONS_SCRIPTS_BRIDGE = exports.handleBridge = exports.bridge = void 0;
+const bridge = (procedures) => {
+    return procedures;
+};
+exports.bridge = bridge;
+const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
+    const response = await bridge[method]?.(...(args ?? []));
+    webview.injectJavaScript(`
+    window.nativeEmitter.emit('${method}-${eventId}',${JSON.stringify(response)});
+  
+    true;
+  `);
+};
+exports.handleBridge = handleBridge;
+const INTEGRATIONS_SCRIPTS_BRIDGE = (bridgeNames) => `
+    window.__bridgeMethods__ = [${bridgeNames.join(", ")}];
+`;
+exports.INTEGRATIONS_SCRIPTS_BRIDGE = INTEGRATIONS_SCRIPTS_BRIDGE;

package/dist/packages/react-native/src/integrations/console.d.ts

@@ -0,0 +1,3 @@
+export declare const INTEGRATIONS_SCRIPTS_CONSOLE = "\n{\n  const originalConsoleLog = console.log;\n  const originalConsoleError = console.error;\n  const originalConsoleWarn = console.warn;\n\n  console.log = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"log\", args: message } }),\n    );\n    originalConsoleLog.apply(console, arguments);\n  };\n\n  console.error = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"error\", args: message } }),\n    );\n    originalConsoleError.apply(console, arguments);\n  };\n\n  console.warn = function() {\n    var message = Array.from(arguments).join(' ');\n    window.ReactNativeWebView?.postMessage(\n      JSON.stringify({ type: \"log\", body: { method: \"warn\", args: message } }),\n    );\n    originalConsoleWarn.apply(console, arguments);\n  };\n};\n";
+export type LogType = "log" | "error" | "warn";
+export declare const handleLog: (type: LogType, message?: unknown) => void;

package/dist/packages/react-native/src/integrations/console.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleLog = exports.INTEGRATIONS_SCRIPTS_CONSOLE = void 0;
+exports.INTEGRATIONS_SCRIPTS_CONSOLE = `
+{
+  const originalConsoleLog = console.log;
+  const originalConsoleError = console.error;
+  const originalConsoleWarn = console.warn;
+
+  console.log = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "log", args: message } }),
+    );
+    originalConsoleLog.apply(console, arguments);
+  };
+
+  console.error = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "error", args: message } }),
+    );
+    originalConsoleError.apply(console, arguments);
+  };
+
+  console.warn = function() {
+    var message = Array.from(arguments).join(' ');
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({ type: "log", body: { method: "warn", args: message } }),
+    );
+    originalConsoleWarn.apply(console, arguments);
+  };
+};
+`;
+const handleLog = (type, message) => {
+    switch (type) {
+        case "log": {
+            console.log("(WebView)", message);
+            break;
+        }
+        case "error": {
+            console.error("(WebView)", message);
+            break;
+        }
+        case "warn": {
+            console.warn("(WebView)", message);
+            break;
+        }
+    }
+};
+exports.handleLog = handleLog;

package/dist/packages/react-native/src/integrations/handleRegisterWebMethod.d.ts

@@ -0,0 +1,4 @@
+import { type EventEmitter } from "../../../../shared/util/src";
+import WebView from "react-native-webview";
+import { Procedure } from "../types";
+export declare const handleRegisterWebMethod: (emitter: EventEmitter, webview: WebView, bridgeNames: string[], responseTimeout: number) => Record<string, Procedure>;

package/dist/packages/react-native/src/integrations/handleRegisterWebMethod.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRegisterWebMethod = void 0;
+const util_1 = require("../../../../shared/util/src");
+const handleRegisterWebMethod = (emitter, webview, bridgeNames, responseTimeout) => {
+    return bridgeNames.reduce((acc, method) => {
+        acc[method] = async (...args) => {
+            const eventId = (0, util_1.createRandomId)();
+            return Promise.race([
+                (0, util_1.createResolver)(emitter, method, eventId, () => {
+                    webview.injectJavaScript(`
+              window.webEmitter.emit('${method}', '${eventId}', ${JSON.stringify(args)});
+            
+              true;
+              `);
+                }),
+                (0, util_1.timeout)(responseTimeout),
+            ]);
+        };
+        return acc;
+    }, {});
+};
+exports.handleRegisterWebMethod = handleRegisterWebMethod;

package/dist/packages/react-native/src/integrations/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./bridge";
+export * from "./console";

package/dist/packages/react-native/src/integrations/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./bridge"), exports);
+__exportStar(require("./console"), exports);

package/dist/packages/react-native/src/types/index.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "react";
+import WebView, { WebViewProps } from "react-native-webview";
+export type Procedure = (...args: any[]) => any;
+export type ProceduresObject<T extends Record<string, Procedure>> = {
+    [K in keyof T]: (...args: Parameters<T[K]>) => Promise<Awaited<ReturnType<T[K]>>>;
+};
+export type Bridge = <T extends Record<string, Procedure>>(procedures: T) => ProceduresObject<T>;
+export type BridgeWebView = Pick<WebView, Exclude<keyof WebView, keyof Component<WebViewProps>>>;

package/dist/packages/react-native/src/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/shared/util/src/createEvents.d.ts

@@ -0,0 +1,16 @@
+interface EventsMap {
+    [event: string]: any;
+}
+export interface DefaultEvents extends EventsMap {
+    [event: string]: (...args: any) => void;
+}
+export interface EventEmitter<Events extends EventsMap = DefaultEvents> {
+    emit<K extends keyof Events>(this: this, event: K, ...args: Parameters<Events[K]>): void;
+    events: Partial<{
+        [E in keyof Events]: Events[E][];
+    }>;
+    on<K extends keyof Events>(this: this, event: K, cb: Events[K]): () => void;
+}
+export declare const createEvents: <Events extends EventsMap = DefaultEvents>() => EventEmitter<Events>;
+export declare const createResolver: (emitter: EventEmitter<DefaultEvents>, method: string, eventId: string, evaluate: () => void) => Promise<unknown>;
+export {};

package/dist/shared/util/src/createEvents.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createResolver = exports.createEvents = void 0;
+const createEvents = () => ({
+    events: {},
+    emit(event, ...args) {
+        const callbacks = this.events[event] || [];
+        for (let i = 0, length = callbacks.length; i < length; i++) {
+            callbacks[i](...args);
+        }
+    },
+    on(event, cb) {
+        this.events[event]?.push(cb) || (this.events[event] = [cb]);
+        return () => {
+            this.events[event] = this.events[event]?.filter((i) => cb !== i);
+        };
+    },
+});
+exports.createEvents = createEvents;
+const createResolver = (emitter, method, eventId, evaluate) => {
+    return new Promise((resolve) => {
+        const unbind = emitter.on(`${method}-${eventId}`, (data) => {
+            unbind();
+            resolve(data);
+        });
+        evaluate();
+    });
+};
+exports.createResolver = createResolver;

package/dist/shared/util/src/createRandomId.d.ts

@@ -0,0 +1 @@
+export declare const createRandomId: (size?: number) => string;

package/dist/shared/util/src/createRandomId.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRandomId = void 0;
+const TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const ID_LENGTH = 21;
+const createRandomId = (size = ID_LENGTH) => {
+    const randomValues = Array.from({ length: size }, () => TABLE[Math.floor(Math.random() * TABLE.length)]);
+    return randomValues.join("");
+};
+exports.createRandomId = createRandomId;

package/dist/shared/util/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./createEvents";
+export * from "./createRandomId";
+export * from "./noop";
+export * from "./timeout";

package/dist/shared/util/src/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./createEvents"), exports);
+__exportStar(require("./createRandomId"), exports);
+__exportStar(require("./noop"), exports);
+__exportStar(require("./timeout"), exports);

package/dist/shared/util/src/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist/shared/util/src/noop.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = void 0;
+const noop = () => { };
+exports.noop = noop;

package/dist/shared/util/src/timeout.d.ts

@@ -0,0 +1 @@
+export declare const timeout: (ms: number) => Promise<unknown>;

package/dist/shared/util/src/timeout.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timeout = void 0;
+const timeout = (ms) => {
+    return new Promise((_, reject) => {
+        setTimeout(() => {
+            reject(new Error("Timeout"));
+        }, ms);
+    });
+};
+exports.timeout = timeout;

package/dist/shared/util/src/types.d.ts

@@ -0,0 +1,5 @@
+export type Procedure = (...args: any[]) => any;
+export type ProceduresObject<T extends Record<string, Procedure>> = {
+    [K in keyof T]: (...args: Parameters<T[K]>) => Promise<Awaited<ReturnType<T[K]>>>;
+};
+export type Bridge = <T extends Record<string, Procedure>>(procedures: T) => ProceduresObject<T>;

package/dist/shared/util/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@webview-bridge/react-native",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Integration Web and React Native WebView",
+  "main": "dist/packages/react-native/src/index.js",
+  "types": "dist/packages/react-native/src/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gronxb/webview-bridge.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.2.25",
+    "react": "^18.2.0",
+    "react-native-webview": "^13.6.2",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native-webview": ">=^13.6.2"
+  },
+  "scripts": {
+    "build": "tspc",
+    "test:type": "tsc --noEmit"
+  }
+}