@webview-bridge/react-native 1.1.2 → 1.3.0-nightly.0

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

@@ -1,8 +1,8 @@
+import type { Bridge, BridgeStore } from "../../../shared/util/src/types";
 import React from "react";
-import { Bridge } from "./types/bridge";
 import type { BridgeWebView } from "./types/webview";
 export type CreateWebViewArgs<BridgeObject extends Bridge> = {
-    bridge: BridgeObject;
+    bridge: BridgeStore<BridgeObject>;
     debug?: boolean;
     responseTimeout?: number;
     fallback?: (method: keyof BridgeObject) => void;

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

@@ -16,14 +16,28 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
             isReady: false,
         },
     };
+    const _webviewRef = (0, react_1.createRef)();
     const emitter = (0, util_1.createEvents)();
+    bridge.subscribe((state) => {
+        _webviewRef.current?.injectJavaScript(`
+        window.nativeEmitter.emit('bridgeStateChange', ${JSON.stringify(state)});
+    `);
+    });
     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) => {
+            const bridgeNames = (0, react_1.useMemo)(() => Object.values(bridge.getState() ?? {})
+                .filter((bridge) => typeof bridge === "function")
+                .map((func) => {
                 return `'${func.name}'`;
             }), []);
+            const initialState = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(bridge.getState() ?? {})
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                .filter(([_, value]) => typeof value !== "function")), []);
             (0, react_1.useImperativeHandle)(ref, () => webviewRef.current, []);
+            (0, react_1.useImperativeHandle)(_webviewRef, () => {
+                return webviewRef.current;
+            }, []);
             const handleMessage = async (event) => {
                 props.onMessage?.(event);
                 if (!webviewRef.current) {
@@ -47,6 +61,12 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                         });
                         return;
                     }
+                    case "getBridgeState": {
+                        _webviewRef.current?.injectJavaScript(`
+              window.nativeEmitter.emit('bridgeStateChange', ${JSON.stringify(bridge.getState())});
+            `);
+                        return;
+                    }
                     case "registerWebMethod": {
                         const { bridgeNames } = body;
                         Object.assign(WebMethod.current, (0, handleRegisterWebMethod_1.handleRegisterWebMethod)(emitter, webviewRef.current, bridgeNames, responseTimeout));
@@ -71,13 +91,14 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                 }
             };
             return (<react_native_webview_1.default {...props} ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
-                    (0, integrations_1.INTEGRATIONS_SCRIPTS_BRIDGE)(bridgeNames),
+                    (0, integrations_1.INJECT_BRIDGE_METHODS)(bridgeNames),
+                    (0, integrations_1.INJECT_BRIDGE_STATE)(initialState),
                     props.injectedJavaScriptBeforeContentLoaded,
                     "true;",
                 ]
                     .filter(Boolean)
                     .join("\n")} injectedJavaScript={[
-                    console && integrations_1.INTEGRATIONS_SCRIPTS_CONSOLE,
+                    console && integrations_1.INJECT_DEBUG,
                     props.injectedJavaScript,
                     "true;",
                 ]

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

@@ -1,4 +1,5 @@
 export * from "./createWebView";
 export * from "./integrations/bridge";
-export * from "./types/bridge";
 export * from "./types/webview";
+export * from "./useBridge";
+export * from "../../../shared/util/src/types";

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

@@ -16,5 +16,6 @@ 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/bridge"), exports);
 __exportStar(require("./types/webview"), exports);
+__exportStar(require("./useBridge"), exports);
+__exportStar(require("../../../shared/util/src/types"), exports);

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

@@ -1,13 +1,18 @@
+import type { Bridge, BridgeStore, OnlyJSON, Primitive } from "../../../../shared/util/src/types";
 import WebView from "react-native-webview";
-import type { Bridge } from "../types/bridge";
-export declare const bridge: <BridgeObject extends Bridge>(procedures: BridgeObject) => BridgeObject;
+export type StoreCallback<T> = ({ get, set, }: {
+    get: () => T;
+    set: (newState: Partial<OnlyJSON<T>>) => void;
+}) => T;
+export declare const bridge: <T extends Bridge>(procedures: T | StoreCallback<T>) => BridgeStore<T>;
 type HandleBridgeArgs<ArgType = unknown> = {
-    bridge: Bridge;
+    bridge: BridgeStore<Bridge>;
     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 declare const INJECT_BRIDGE_METHODS: (bridgeNames: string[]) => string;
+export declare const INJECT_BRIDGE_STATE: (initialState: Record<string, Primitive>) => string;
 export {};

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

@@ -1,13 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INTEGRATIONS_SCRIPTS_BRIDGE = exports.handleBridge = exports.bridge = void 0;
+exports.INJECT_BRIDGE_STATE = exports.INJECT_BRIDGE_METHODS = exports.handleBridge = exports.bridge = void 0;
+const util_1 = require("../../../../shared/util/src");
 const bridge = (procedures) => {
-    return procedures;
+    const getState = () => state;
+    const setState = (newState) => {
+        const _newState = {
+            ...state,
+            ...(0, util_1.removeUndefinedKeys)(newState),
+        };
+        if ((0, util_1.equals)(state, _newState)) {
+            return;
+        }
+        const prevState = state;
+        state = _newState;
+        emitChange(state, prevState);
+    };
+    let state = typeof procedures === "function"
+        ? procedures({
+            get: getState,
+            set: setState,
+        })
+        : procedures;
+    const listeners = new Set();
+    const emitChange = (newState, prevState) => {
+        for (const listener of listeners) {
+            listener(newState, prevState);
+        }
+    };
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    return {
+        getState,
+        setState,
+        subscribe,
+    };
 };
 exports.bridge = bridge;
 const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
+    const _bridge = bridge.getState();
+    const _method = _bridge[method];
+    if (typeof _method !== "function") {
+        return;
+    }
     try {
-        const response = await bridge[method]?.(...(args ?? []));
+        const response = await _method?.(...(args ?? []));
         webview.injectJavaScript(`
     window.nativeEmitter.emit('${method}-${eventId}',${JSON.stringify(response)});
   
@@ -24,7 +63,11 @@ const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
     }
 };
 exports.handleBridge = handleBridge;
-const INTEGRATIONS_SCRIPTS_BRIDGE = (bridgeNames) => `
+const INJECT_BRIDGE_METHODS = (bridgeNames) => `
     window.__bridgeMethods__ = [${bridgeNames.join(", ")}];
 `;
-exports.INTEGRATIONS_SCRIPTS_BRIDGE = INTEGRATIONS_SCRIPTS_BRIDGE;
+exports.INJECT_BRIDGE_METHODS = INJECT_BRIDGE_METHODS;
+const INJECT_BRIDGE_STATE = (initialState) => `
+    window.__bridgeInitialState__ = ${JSON.stringify(initialState)};
+`;
+exports.INJECT_BRIDGE_STATE = INJECT_BRIDGE_STATE;

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

@@ -1,3 +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 declare const INJECT_DEBUG = "\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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleLog = exports.INTEGRATIONS_SCRIPTS_CONSOLE = void 0;
-exports.INTEGRATIONS_SCRIPTS_CONSOLE = `
+exports.handleLog = exports.INJECT_DEBUG = void 0;
+exports.INJECT_DEBUG = `
 {
   const originalConsoleLog = console.log;
   const originalConsoleError = console.error;

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

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

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

@@ -4,17 +4,17 @@ exports.handleRegisterWebMethod = void 0;
 const util_1 = require("../../../../shared/util/src");
 const error_1 = require("../error");
 const handleRegisterWebMethod = (emitter, webview, bridgeNames, responseTimeout) => {
-    return bridgeNames.reduce((acc, method) => {
-        acc[method] = async (...args) => {
+    return bridgeNames.reduce((acc, methodName) => {
+        acc[methodName] = async (...args) => {
             const eventId = (0, util_1.createRandomId)();
             return Promise.race([
-                (0, util_1.createResolver)(emitter, method, eventId, () => {
+                (0, util_1.createResolver)(emitter, methodName, eventId, () => {
                     webview.injectJavaScript(`
-              window.webEmitter.emit('${method}', '${eventId}', ${JSON.stringify(args)});
+              window.webEmitter.emit('${methodName}', '${eventId}', ${JSON.stringify(args)});
             
               true;
               `);
-                }, new error_1.WebMethodError(method)),
+                }, new error_1.WebMethodError(methodName)),
                 (0, util_1.timeout)(responseTimeout),
             ]);
         };

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

@@ -0,0 +1,3 @@
+import type { Bridge, BridgeStore, ExtractStore } from "../../../shared/util/src/types";
+export declare function useBridge<T extends Bridge>(store: BridgeStore<T>): ExtractStore<BridgeStore<T>>;
+export declare function useBridge<T extends Bridge, U extends ExtractStore<BridgeStore<T>>, V>(store: BridgeStore<T>, selector?: (state: U) => V): V;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBridge = void 0;
+const shim_1 = require("use-sync-external-store/shim");
+function useBridge(store, selector) {
+    const getSnapshot = () => selector?.(store.getState()) ?? store.getState();
+    return (0, shim_1.useSyncExternalStore)(store.subscribe, getSnapshot);
+}
+exports.useBridge = useBridge;

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

@@ -12,5 +12,5 @@ export interface EventEmitter<Events extends EventsMap = DefaultEvents> {
     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, failHandler?: Error | false) => Promise<unknown>;
+export declare const createResolver: (emitter: EventEmitter<DefaultEvents>, methodName: string, eventId: string, evaluate: () => void, failHandler?: Error | false) => Promise<unknown>;
 export {};

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

@@ -17,9 +17,9 @@ const createEvents = () => ({
     },
 });
 exports.createEvents = createEvents;
-const createResolver = (emitter, method, eventId, evaluate, failHandler = false) => {
+const createResolver = (emitter, methodName, eventId, evaluate, failHandler = false) => {
     return new Promise((resolve, reject) => {
-        const unbind = emitter.on(`${method}-${eventId}`, (data, throwOccurred) => {
+        const unbind = emitter.on(`${methodName}-${eventId}`, (data, throwOccurred) => {
             unbind();
             if (throwOccurred) {
                 if (failHandler instanceof Error) {

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

@@ -0,0 +1 @@
+export declare const equals: (a: any, b: any) => boolean;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.equals = void 0;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const equals = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (a && b && typeof a === "object" && typeof b === "object") {
+        const arrA = Array.isArray(a);
+        const arrB = Array.isArray(b);
+        let i;
+        let length;
+        let key;
+        if (arrA && arrB) {
+            length = a.length;
+            if (length !== b.length) {
+                return false;
+            }
+            for (i = length; i-- !== 0;) {
+                if (!(0, exports.equals)(a[i], b[i])) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        if (arrA !== arrB) {
+            return false;
+        }
+        const keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) {
+            return false;
+        }
+        for (i = length; i-- !== 0;) {
+            if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+                return false;
+            }
+        }
+        for (i = length; i-- !== 0;) {
+            key = keys[i];
+            if (!(0, exports.equals)(a[key], b[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return a !== a && b !== b;
+};
+exports.equals = equals;

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

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

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

@@ -16,5 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./createEvents"), exports);
 __exportStar(require("./createRandomId"), exports);
+__exportStar(require("./equals"), exports);
 __exportStar(require("./noop"), exports);
+__exportStar(require("./removeUndefinedKeys"), exports);
 __exportStar(require("./timeout"), exports);

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

@@ -0,0 +1 @@
+export declare const removeUndefinedKeys: (obj: Record<string, any>) => Record<string, any>;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeUndefinedKeys = void 0;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const removeUndefinedKeys = (obj) => {
+    Object.keys(obj).forEach((key) => {
+        if (obj[key] === undefined) {
+            delete obj[key];
+        }
+    });
+    return obj;
+};
+exports.removeUndefinedKeys = removeUndefinedKeys;

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

@@ -0,0 +1,23 @@
+export type AsyncFunction = (...args: any[]) => Promise<any>;
+export type Primitive = string | number | boolean | null | undefined;
+export type RawJSON = Primitive | {
+    [key: string]: RawJSON;
+} | RawJSONArray;
+interface RawJSONArray extends Array<RawJSON> {
+}
+export type Bridge = Record<string, AsyncFunction | RawJSON>;
+export type BridgeStore<T extends Bridge> = {
+    getState: () => T;
+    setState: (newState: Partial<OnlyJSON<T>>) => void;
+    subscribe: (listener: (newState: T, prevState: T) => void) => () => void;
+};
+export type ExtractStore<S> = S extends {
+    getState: () => infer T;
+} ? T : never;
+export type OnlyJSON<T> = {
+    [P in keyof T as T[P] extends RawJSON ? P : never]: T[P];
+};
+export type ExcludePrimitive<T> = {
+    [P in keyof T as T[P] extends RawJSON ? never : P]: T[P];
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webview-bridge/react-native",
-  "version": "1.1.2",
+  "version": "1.3.0-nightly.0",
   "type": "module",
   "description": "Fully Type-Safe Integration for React Native WebView and Web",
   "main": "dist/packages/react-native/src/index.js",
@@ -19,6 +19,7 @@
   ],
   "devDependencies": {
     "@types/react": "^18.2.25",
+    "@types/use-sync-external-store": "^0.0.6",
     "react": "^18.2.0",
     "react-native-webview": "^13.6.2",
     "typescript": "^5.2.2"
@@ -27,6 +28,9 @@
     "react": "*",
     "react-native-webview": "*"
   },
+  "dependencies": {
+    "use-sync-external-store": "^1.2.0"
+  },
   "scripts": {
     "build": "tspc",
     "test:type": "tsc --noEmit"

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

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