@webview-bridge/react-native 1.4.1 → 1.4.3-nightly.0

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

@@ -41,9 +41,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
     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)});
-    `);
+        _webviewRef.current?.injectJavaScript((0, integrations_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", state));
     });
     return {
         WebView: (0, react_1.forwardRef)((props, ref) => {
@@ -53,9 +51,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                 .map(([name]) => {
                 return `'${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")), []);
+            const initialState = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(bridge.getState() ?? {}).filter(([_, value]) => typeof value !== "function")), []);
             (0, react_1.useImperativeHandle)(ref, () => webviewRef.current, []);
             (0, react_1.useImperativeHandle)(_webviewRef, () => {
                 return webviewRef.current;
@@ -84,9 +80,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                         return;
                     }
                     case "getBridgeState": {
-                        _webviewRef.current?.injectJavaScript(`
-              window.nativeEmitter.emit('bridgeStateChange', ${JSON.stringify(bridge.getState())});
-            `);
+                        _webviewRef.current?.injectJavaScript((0, integrations_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", bridge.getState()));
                         return;
                     }
                     case "registerWebMethod": {
@@ -120,7 +114,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                 ]
                     .filter(Boolean)
                     .join("\n")} injectedJavaScript={[
-                    console && integrations_1.INJECT_DEBUG,
+                    debug && integrations_1.INJECT_DEBUG,
                     props.injectedJavaScript,
                     "true;",
                 ]

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

@@ -15,4 +15,6 @@ type HandleBridgeArgs<ArgType = unknown> = {
 export declare const handleBridge: ({ bridge, method, args, webview, eventId, }: HandleBridgeArgs) => Promise<void>;
 export declare const INJECT_BRIDGE_METHODS: (bridgeNames: string[]) => string;
 export declare const INJECT_BRIDGE_STATE: (initialState: Record<string, Primitive>) => string;
+export declare const SAFE_NATIVE_EMITTER_EMIT: (eventName: string, data: unknown) => string;
+export declare const SAFE_NATIVE_EMITTER_THROW: (eventName: string) => string;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INJECT_BRIDGE_STATE = exports.INJECT_BRIDGE_METHODS = exports.handleBridge = exports.bridge = void 0;
+exports.SAFE_NATIVE_EMITTER_THROW = exports.SAFE_NATIVE_EMITTER_EMIT = exports.INJECT_BRIDGE_STATE = exports.INJECT_BRIDGE_METHODS = exports.handleBridge = exports.bridge = void 0;
 const util_1 = require("../../../../shared/util/src");
 const bridge = (procedures) => {
     const getState = () => state;
@@ -42,24 +42,23 @@ exports.bridge = bridge;
 const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
     const _bridge = bridge.getState();
     const _method = _bridge[method];
+    const handleThrow = () => {
+        webview.injectJavaScript((0, exports.SAFE_NATIVE_EMITTER_THROW)(`${method}-${eventId}`));
+    };
+    if (!(method in _bridge)) {
+        handleThrow();
+        return;
+    }
     if (typeof _method !== "function") {
         return;
     }
     try {
         const response = await _method?.(...(args ?? []));
-        webview.injectJavaScript(`
-    window.nativeEmitter.emit('${method}-${eventId}',${JSON.stringify(response)});
-  
-    true;
-  `);
+        webview.injectJavaScript((0, exports.SAFE_NATIVE_EMITTER_EMIT)(`${method}-${eventId}`, response));
     }
     catch (error) {
+        handleThrow();
         console.error(error);
-        webview.injectJavaScript(`
-    window.nativeEmitter.emit('${method}-${eventId}', {}, true);
-
-    true;
-  `);
     }
 };
 exports.handleBridge = handleBridge;
@@ -71,3 +70,26 @@ const INJECT_BRIDGE_STATE = (initialState) => `
     window.__bridgeInitialState__ = ${JSON.stringify(initialState)};
 `;
 exports.INJECT_BRIDGE_STATE = INJECT_BRIDGE_STATE;
+const SAFE_NATIVE_EMITTER_EMIT = (eventName, data) => {
+    const dataString = JSON.stringify(data);
+    return `
+if (window.nativeEmitter) {
+  window.nativeEmitter.emit('${eventName}', ${dataString});
+} else {
+  window.nativeBatchedEvents = window.nativeBatchedEvents || [];
+  window.nativeBatchedEvents.push(['${eventName}', ${dataString}]);
+}
+true;
+`;
+};
+exports.SAFE_NATIVE_EMITTER_EMIT = SAFE_NATIVE_EMITTER_EMIT;
+const SAFE_NATIVE_EMITTER_THROW = (eventName) => `
+if (window.nativeEmitter) {
+  window.nativeEmitter.emit('${eventName}', {}, true);
+} else {
+  window.nativeBatchedEvents = window.nativeBatchedEvents || [];
+  window.nativeBatchedEvents.push(['${eventName}', {}, true]);
+}
+true;
+`;
+exports.SAFE_NATIVE_EMITTER_THROW = SAFE_NATIVE_EMITTER_THROW;

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

@@ -8,13 +8,19 @@ const handleRegisterWebMethod = (emitter, webview, bridgeNames, responseTimeout)
         acc[methodName] = async (...args) => {
             const eventId = (0, util_1.createRandomId)();
             return Promise.race([
-                (0, util_1.createResolver)(emitter, methodName, eventId, () => {
-                    webview.injectJavaScript(`
+                (0, util_1.createResolver)({
+                    emitter,
+                    methodName,
+                    eventId,
+                    evaluate: () => {
+                        webview.injectJavaScript(`
               window.webEmitter.emit('${methodName}', '${eventId}', ${JSON.stringify(args)});
             
               true;
               `);
-                }, new error_1.WebMethodError(methodName)),
+                    },
+                    failHandler: new error_1.WebMethodError(methodName),
+                }),
                 (0, util_1.timeout)(responseTimeout),
             ]);
         };

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webview-bridge/react-native",
-  "version": "1.4.1",
+  "version": "1.4.3-nightly.0",
   "type": "module",
   "description": "Fully Type-Safe Integration for React Native WebView and Web",
   "main": "dist/packages/react-native/src/index.js",