@webview-bridge/react-native 1.4.2 → 1.4.3

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;
@@ -43,11 +43,7 @@ const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
     const _bridge = bridge.getState();
     const _method = _bridge[method];
     const handleThrow = () => {
-        webview.injectJavaScript(`
-    window.nativeEmitter.emit('${method}-${eventId}', {}, true);
-
-    true;
-  `);
+        webview.injectJavaScript((0, exports.SAFE_NATIVE_EMITTER_THROW)(`${method}-${eventId}`));
     };
     if (!(method in _bridge)) {
         handleThrow();
@@ -58,11 +54,7 @@ const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
     }
     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();
@@ -78,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/package.json

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