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

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

@@ -1,17 +1,23 @@
-import type { Bridge, BridgeStore } from "../../../shared/util/src/types";
+import type { Bridge, BridgeStore, KeyOfOrString, Parser, ParserSchema } from "../../../shared/util/src/types";
 import React from "react";
 import type { BridgeWebView } from "./types/webview";
-export type CreateWebViewArgs<BridgeObject extends Bridge> = {
+export type CreateWebViewArgs<BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>> = {
     bridge: BridgeStore<BridgeObject>;
     debug?: boolean;
     responseTimeout?: number;
+    postMessageSchema?: PostMessageSchema;
     fallback?: (method: keyof BridgeObject) => void;
 };
 export type WebMethod<T> = T & {
     isReady: boolean;
 };
-export declare const createWebView: <BridgeObject extends Bridge>({ bridge, debug, responseTimeout, fallback, }: CreateWebViewArgs<BridgeObject>) => {
+export declare const createWebView: <BridgeObject extends Bridge, PostMessageSchema extends ParserSchema<any>>({ bridge, debug, responseTimeout, postMessageSchema, fallback, }: CreateWebViewArgs<BridgeObject, PostMessageSchema>) => {
+    postMessage: <EventName extends KeyOfOrString<PostMessageSchema>, Args extends Parser<PostMessageSchema, EventName>>(eventName: EventName, args: Args) => void;
     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
+     */
     linkWebMethod<T>(): {
         current: WebMethod<T>;
     };

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

@@ -30,9 +30,10 @@ exports.createWebView = void 0;
 const util_1 = require("../../../shared/util/src");
 const react_1 = __importStar(require("react"));
 const react_native_webview_1 = __importDefault(require("react-native-webview"));
-const integrations_1 = require("./integrations");
+const bridge_1 = require("./integrations/bridge");
+const console_1 = require("./integrations/console");
 const handleRegisterWebMethod_1 = require("./integrations/handleRegisterWebMethod");
-const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) => {
+const createWebView = ({ bridge, debug, responseTimeout = 2000, postMessageSchema, fallback, }) => {
     const WebMethod = {
         current: {
             isReady: false,
@@ -42,10 +43,19 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
     const emitter = (0, util_1.createEvents)();
     bridge.subscribe((state) => {
         for (const ref of webviewRefList) {
-            ref?.current?.injectJavaScript((0, integrations_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", state));
+            ref?.current?.injectJavaScript((0, bridge_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", state));
         }
     });
     return {
+        postMessage: (eventName, args) => {
+            let _args = args;
+            if (postMessageSchema) {
+                _args = postMessageSchema[eventName].parse(args);
+            }
+            for (const ref of webviewRefList) {
+                ref?.current?.injectJavaScript((0, bridge_1.SAFE_NATIVE_EMITTER_EMIT)(`postMessage/${String(eventName)}`, _args));
+            }
+        },
         WebView: (0, react_1.forwardRef)((props, ref) => {
             const webviewRef = (0, react_1.useRef)(null);
             (0, react_1.useLayoutEffect)(() => {
@@ -70,12 +80,12 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                 switch (type) {
                     case "log": {
                         const { method, args } = body;
-                        debug && (0, integrations_1.handleLog)(method, args);
+                        debug && (0, console_1.handleLog)(method, args);
                         return;
                     }
                     case "bridge": {
                         const { method, args, eventId } = body;
-                        (0, integrations_1.handleBridge)({
+                        (0, bridge_1.handleBridge)({
                             bridge,
                             method,
                             args,
@@ -86,7 +96,7 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                     }
                     case "getBridgeState": {
                         for (const ref of webviewRefList) {
-                            ref?.current?.injectJavaScript((0, integrations_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", bridge.getState()));
+                            ref?.current?.injectJavaScript((0, bridge_1.SAFE_NATIVE_EMITTER_EMIT)("bridgeStateChange", bridge.getState()));
                         }
                         return;
                     }
@@ -114,20 +124,24 @@ const createWebView = ({ bridge, debug, responseTimeout = 2000, fallback, }) =>
                 }
             };
             return (<react_native_webview_1.default {...props} ref={webviewRef} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={[
-                    (0, integrations_1.INJECT_BRIDGE_METHODS)(bridgeNames),
-                    (0, integrations_1.INJECT_BRIDGE_STATE)(initialState),
+                    (0, bridge_1.INJECT_BRIDGE_METHODS)(bridgeNames),
+                    (0, bridge_1.INJECT_BRIDGE_STATE)(initialState),
                     props.injectedJavaScriptBeforeContentLoaded,
                     "true;",
                 ]
                     .filter(Boolean)
                     .join("\n")} injectedJavaScript={[
-                    debug && integrations_1.INJECT_DEBUG,
+                    debug && console_1.INJECT_DEBUG,
                     props.injectedJavaScript,
                     "true;",
                 ]
                     .filter(Boolean)
                     .join("\n")}/>);
         }),
+        /**
+         * @deprecated Use `postMessage` instead.  And complete the type through the `postMessageSchema` option.
+         * @see https://gronxb.github.io/webview-bridge/postMessage-native-to-web.html
+         */
         linkWebMethod() {
             return WebMethod;
         },

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { ParserSchema, PostMessageSchemaObject } from "../../../../shared/util/src/types";
+export declare const postMessageSchema: <T extends PostMessageSchemaObject>(schema: T) => ParserSchema<T>;

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postMessageSchema = void 0;
+const postMessageSchema = (schema) => {
+    const parserSchema = Object.entries(schema).map(([eventName, eventSchema]) => {
+        // zod
+        if ("parse" in eventSchema && typeof eventSchema.parse === "function") {
+            return [
+                eventName,
+                {
+                    parse: eventSchema.parse,
+                    schema: eventSchema,
+                },
+            ];
+        }
+        // yup
+        else if ("validateSync" in eventSchema &&
+            typeof eventSchema.validateSync === "function") {
+            return [
+                eventName,
+                {
+                    parse: (data) => {
+                        return eventSchema.validateSync(data, { abortEarly: true });
+                    },
+                    schema: eventSchema,
+                },
+            ];
+        }
+        // superstruct
+        else if ("assert" in eventSchema &&
+            typeof eventSchema.assert === "function" &&
+            "validate" in eventSchema &&
+            typeof eventSchema.validate === "function") {
+            return [
+                eventName,
+                {
+                    parse: (data) => {
+                        void eventSchema.assert(data);
+                        const [_, result] = eventSchema.validate(data);
+                        return result;
+                    },
+                    schema: eventSchema,
+                },
+            ];
+        }
+        return [
+            eventName,
+            {
+                parse: (data) => data,
+                schema: void 0,
+            },
+        ];
+    });
+    return Object.fromEntries(parserSchema);
+};
+exports.postMessageSchema = postMessageSchema;

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

@@ -1,7 +1,6 @@
 "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;

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

@@ -1,7 +1,6 @@
 "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) {

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

@@ -1,3 +1,6 @@
+import type { Infer as SupertructInfer, Struct } from "superstruct";
+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 RawJSON = Primitive | {
@@ -20,4 +23,13 @@ export type OnlyJSON<T> = {
 export type ExcludePrimitive<T> = {
     [P in keyof T as T[P] extends RawJSON ? never : P]: T[P];
 };
+export type KeyOfOrString<T> = T extends undefined ? string : keyof T;
+export type PostMessageSchemaObject = Record<string, ZodTypeAny | YupTypeAny | Struct<any>>;
+export type ParserSchema<T = object> = {
+    [P in keyof T]: {
+        parse: (data: any) => any;
+        schema: T[P];
+    };
+};
+export type Parser<Input extends ParserSchema<any>, EventName> = Input extends undefined ? Record<string, Primitive> | Primitive : EventName extends keyof Input ? Input[EventName]["schema"] extends ZodTypeAny ? zodInfer<Input[EventName]["schema"]> : Input[EventName]["schema"] extends YupTypeAny ? yupInfer<Input[EventName]["schema"]> : Input[EventName]["schema"] extends Struct<any> ? SupertructInfer<Input[EventName]["schema"]> : Record<string, Primitive> | Primitive : never;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webview-bridge/react-native",
-  "version": "1.4.7",
+  "version": "1.5.0-rc.1",
   "type": "module",
   "description": "Fully Type-Safe Integration for React Native WebView and Web",
   "main": "dist/packages/react-native/src/index.js",
@@ -22,11 +22,28 @@
     "@types/use-sync-external-store": "^0.0.6",
     "react": "^18.2.0",
     "react-native-webview": "^13.6.2",
-    "typescript": "^5.2.2"
+    "superstruct": "^1.0.4",
+    "typescript": "^5.2.2",
+    "yup": "^1.4.0",
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native-webview": "*"
+    "react-native-webview": "*",
+    "superstruct": "*",
+    "yup": "*",
+    "zod": "*"
+  },
+  "peerDependenciesMeta": {
+    "superstruct": {
+      "optional": true
+    },
+    "yup": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0"

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

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

package/dist/packages/react-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);