@webview-bridge/react-native 1.5.0-rc.1 → 1.5.1-rc.2

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

@@ -16,8 +16,34 @@ export declare const createWebView: <BridgeObject extends Bridge, PostMessageSch
     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>>;
     /**
      * @deprecated Use `postMessage` instead.  And complete the type through the `postMessageSchema` option.
-     * @see https://gronxb.github.io/webview-bridge/postMessage-native-to-web.html
-     */
+     * @see https://gronxb.github.io/webview-bridge/using-a-post-message.html
+     * @example
+      import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+      import { z } from "zod";
+
+      const appPostMessageSchema = postMessageSchema({
+        eventName1: z.object({
+          message: z.string(),
+        }),
+        eventName2: z.string(),
+      });
+
+
+      // Export the event schema to be used in the web application
+      export type AppPostMessageSchema = typeof appPostMessageSchema;
+
+      // When you bridge a webview, a postMessage is extracted.
+      export const { postMessage } = createWebView({
+        postMessageSchema: appPostMessageSchema, // Pass in the your schema. This is optional, so if the type doesn't matter to you, you don't need to include it.
+        // ..
+      });
+
+      // usage
+      postMessage("eventName1", {
+        message: "test",
+      });
+      postMessage("eventName2", "test");
+    */
     linkWebMethod<T>(): {
         current: WebMethod<T>;
     };

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

@@ -64,12 +64,16 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, postMessageSchem
                     webviewRefList.pop();
                 };
             }, []);
-            const bridgeNames = (0, react_1.useMemo)(() => Object.entries(bridge.getState() ?? {})
-                .filter(([_, bridge]) => typeof bridge === "function")
-                .map(([name]) => {
-                return `'${name}'`;
-            }), []);
-            const initialState = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(bridge.getState() ?? {}).filter(([_, value]) => typeof value !== "function")), []);
+            const initData = (0, react_1.useMemo)(() => {
+                const bridgeMethods = Object.entries(bridge.getState() ?? {})
+                    .filter(([_, bridge]) => typeof bridge === "function")
+                    .map(([name]) => name);
+                const initialState = Object.fromEntries(Object.entries(bridge.getState() ?? {}).filter(([_, value]) => typeof value !== "function"));
+                return { bridgeMethods, initialState };
+            }, []);
+            (0, react_1.useEffect)(() => {
+                webviewRef.current?.injectJavaScript((0, bridge_1.SAFE_NATIVE_EMITTER_EMIT)("hydrate", initData));
+            }, [initData]);
             (0, react_1.useImperativeHandle)(ref, () => webviewRef.current, []);
             const handleMessage = async (event) => {
                 props.onMessage?.(event);
@@ -124,8 +128,8 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, postMessageSchem
                 }
             };
             return (<react_native_webview_1.default {...props} ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
-                    (0, bridge_1.INJECT_BRIDGE_METHODS)(bridgeNames),
-                    (0, bridge_1.INJECT_BRIDGE_STATE)(initialState),
+                    (0, bridge_1.INJECT_BRIDGE_METHODS)(initData.bridgeMethods),
+                    (0, bridge_1.INJECT_BRIDGE_STATE)(initData.initialState),
                     props.injectedJavaScriptBeforeContentLoaded,
                     "true;",
                 ]
@@ -140,8 +144,34 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, postMessageSchem
         }),
         /**
          * @deprecated Use `postMessage` instead.  And complete the type through the `postMessageSchema` option.
-         * @see https://gronxb.github.io/webview-bridge/postMessage-native-to-web.html
-         */
+         * @see https://gronxb.github.io/webview-bridge/using-a-post-message.html
+         * @example
+          import { createWebView, postMessageSchema } from "@webview-bridge/react-native";
+          import { z } from "zod";
+    
+          const appPostMessageSchema = postMessageSchema({
+            eventName1: z.object({
+              message: z.string(),
+            }),
+            eventName2: z.string(),
+          });
+    
+    
+          // Export the event schema to be used in the web application
+          export type AppPostMessageSchema = typeof appPostMessageSchema;
+    
+          // When you bridge a webview, a postMessage is extracted.
+          export const { postMessage } = createWebView({
+            postMessageSchema: appPostMessageSchema, // Pass in the your schema. This is optional, so if the type doesn't matter to you, you don't need to include it.
+            // ..
+          });
+    
+          // usage
+          postMessage("eventName1", {
+            message: "test",
+          });
+          postMessage("eventName2", "test");
+        */
         linkWebMethod() {
             return WebMethod;
         },

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

@@ -63,7 +63,7 @@ const handleBridge = async ({ bridge, method, args, webview, eventId, }) => {
 };
 exports.handleBridge = handleBridge;
 const INJECT_BRIDGE_METHODS = (bridgeNames) => `
-    window.__bridgeMethods__ = [${bridgeNames.join(", ")}];
+    window.__bridgeMethods__ = ${JSON.stringify(bridgeNames)};
 `;
 exports.INJECT_BRIDGE_METHODS = INJECT_BRIDGE_METHODS;
 const INJECT_BRIDGE_STATE = (initialState) => `

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

@@ -11,9 +11,10 @@ export interface EventEmitter<Events extends EventsMap = DefaultEvents> {
     }>;
     on<K extends keyof Events>(this: this, event: K, cb: Events[K]): () => void;
 }
+export type DefaultEmitter = EventEmitter<DefaultEvents>;
 export declare const createEvents: <Events extends EventsMap = DefaultEvents>() => EventEmitter<Events>;
 export interface CreateResolverOptions {
-    emitter: EventEmitter<DefaultEvents>;
+    emitter: DefaultEmitter;
     evaluate: () => void;
     eventId: string;
     failHandler?: Error | false;

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

@@ -3,6 +3,7 @@ import type { AnySchema as YupTypeAny, InferType as yupInfer } from "yup";
 import type { infer as zodInfer, ZodTypeAny } from "zod";
 export type AsyncFunction = (...args: any[]) => Promise<any>;
 export type Primitive = string | number | boolean | null | undefined;
+export type PrimitiveObject = Record<string, Primitive>;
 export type RawJSON = Primitive | {
     [key: string]: RawJSON;
 } | RawJSONArray;

package/package.json

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