@webview-bridge/react-native 1.0.3 → 1.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sungyu Kang 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,17 +1,18 @@
 import React from "react";
-import type { BridgeWebView, Procedure, ProceduresObject } from "./types";
-export type CreateWebViewArgs<T extends ProceduresObject<Record<string, Procedure>>> = {
-    bridge: T;
+import { Bridge } from "./types/bridge";
+import type { BridgeWebView } from "./types/webview";
+export type CreateWebViewArgs<BridgeObject extends Bridge> = {
+    bridge: BridgeObject;
     debug?: boolean;
     responseTimeout?: number;
-    fallback?: (method: keyof T) => void;
+    fallback?: (method: keyof BridgeObject) => void;
 };
 export type WebMethod<T> = T & {
     isReady: boolean;
 };
-export declare const createWebView: <T extends ProceduresObject<Record<string, Procedure>>>({ bridge, debug, responseTimeout, fallback, }: CreateWebViewArgs<T>) => {
+export declare const createWebView: <BridgeObject extends Bridge>({ bridge, debug, responseTimeout, fallback, }: CreateWebViewArgs<BridgeObject>) => {
     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>;
+    linkWebMethod<T>(): {
+        current: WebMethod<T>;
     };
 };

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

@@ -65,7 +65,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                     }
                 }
             };
-            return (<react_native_webview_1.default ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
+            return (<react_native_webview_1.default {...props} ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
                     (0, integrations_1.INTEGRATIONS_SCRIPTS_BRIDGE)(bridgeNames),
                     props.injectedJavaScriptBeforeContentLoaded,
                     "true;",
@@ -77,7 +77,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                     "true;",
                 ]
                     .filter(Boolean)
-                    .join("\n")} {...props}/>);
+                    .join("\n")}/>);
         }),
         linkWebMethod() {
             return WebMethod;

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

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

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

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./createWebView"), exports);
 __exportStar(require("./integrations/bridge"), exports);
-__exportStar(require("./types"), exports);
+__exportStar(require("./types/bridge"), exports);
+__exportStar(require("./types/webview"), exports);

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

@@ -1,8 +1,8 @@
 import WebView from "react-native-webview";
-import type { Bridge, Procedure, ProceduresObject } from "../types";
-export declare const bridge: Bridge;
+import type { Bridge } from "../types/bridge";
+export declare const bridge: <BridgeObject extends Bridge>(procedures: BridgeObject) => BridgeObject;
 type HandleBridgeArgs<ArgType = unknown> = {
-    bridge: ProceduresObject<Record<string, Procedure>>;
+    bridge: Bridge;
     method: string;
     args?: ArgType[];
     webview: WebView;

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

@@ -1,4 +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>;
+import { Bridge } from "../types/bridge";
+export declare const handleRegisterWebMethod: (emitter: EventEmitter, webview: WebView, bridgeNames: string[], responseTimeout: number) => Bridge;

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

@@ -0,0 +1,2 @@
+export type AsyncFunction = (...args: any[]) => Promise<any>;
+export type Bridge = Record<string, AsyncFunction>;

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

@@ -0,0 +1,3 @@
+import { Component } from "react";
+import WebView, { WebViewProps } from "react-native-webview";
+export type BridgeWebView = Pick<WebView, Exclude<keyof WebView, keyof Component<WebViewProps>>>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@webview-bridge/react-native",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
-  "description": "Integration Web and React Native WebView",
+  "description": "Fully Type-Safe Integration for React Native WebView and Web",
   "main": "dist/packages/react-native/src/index.js",
   "types": "dist/packages/react-native/src/index.d.ts",
   "publishConfig": {

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

@@ -1,17 +0,0 @@
-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

@@ -1,87 +0,0 @@
-"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

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

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

@@ -1,19 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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

@@ -1,51 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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

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

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

@@ -1,18 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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.d.ts

@@ -1,8 +0,0 @@
-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/shared/util/src/types.d.ts

@@ -1,5 +0,0 @@
-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

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