@webview-bridge/web 1.1.2 → 1.3.0-nightly.0

package/dist/commonjs/index.cjs

@@ -22,6 +22,7 @@ var src_exports = {};
 __export(src_exports, {
   MethodNotFoundError: () => MethodNotFoundError,
   NativeMethodError: () => NativeMethodError,
+  linkBridge: () => linkBridge,
   linkNativeMethod: () => linkNativeMethod,
   registerWebMethod: () => registerWebMethod
 });
@@ -57,10 +58,10 @@ var createEvents = () => ({
     };
   }
 });
-var createResolver = (emitter2, method, eventId, evaluate, failHandler = false) => {
+var createResolver = (emitter2, methodName, eventId, evaluate, failHandler = false) => {
   return new Promise((resolve, reject) => {
     const unbind = emitter2.on(
-      `${method}-${eventId}`,
+      `${methodName}-${eventId}`,
       (data, throwOccurred) => {
         unbind();
         if (throwOccurred) {
@@ -89,6 +90,63 @@ var createRandomId = (size = ID_LENGTH) => {
   return randomValues.join("");
 };
 
+// ../../shared/util/src/equals.ts
+var 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 (!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 (!equals(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+};
+
+// ../../shared/util/src/removeUndefinedKeys.tsx
+var removeUndefinedKeys = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    if (obj[key] === void 0) {
+      delete obj[key];
+    }
+  });
+  return obj;
+};
+
 // ../../shared/util/src/timeout.ts
 var timeout = (ms, throwOnError = true) => {
   return new Promise((resolve, reject) => {
@@ -102,40 +160,89 @@ var timeout = (ms, throwOnError = true) => {
   });
 };
 
-// src/linkNativeMethod.ts
+// src/emitter.ts
 var emitter = createEvents();
-var createNativeMethod = (method, timeoutMs, throwOnError) => (...args) => {
+
+// src/linkBridgeStore.ts
+var linkBridgeStore = (initialState = {}) => {
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+  }
+  if (!window.nativeEmitter) {
+    window.nativeEmitter = emitter;
+  }
+  const getState = () => state;
+  const setState = (newState) => {
+    const _newState = {
+      ...state,
+      ...removeUndefinedKeys(newState)
+    };
+    if (equals(state, _newState)) {
+      return;
+    }
+    const prevState = state;
+    state = _newState;
+    emitChange(state, prevState);
+  };
+  emitter.on("bridgeStateChange", (data) => {
+    setState(data);
+  });
+  window.ReactNativeWebView?.postMessage(
+    JSON.stringify({
+      type: "getBridgeState"
+    })
+  );
+  let state = { ...initialState, ...window.__bridgeInitialState__ };
+  const listeners = /* @__PURE__ */ 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,
+    subscribe
+  };
+};
+
+// src/linkBridge.ts
+var createNativeMethod = (methodName, timeoutMs, throwOnError) => (...args) => {
   const eventId = createRandomId();
   return Promise.race([
     createResolver(
       emitter,
-      method,
+      methodName,
       eventId,
       () => {
         window.ReactNativeWebView?.postMessage(
           JSON.stringify({
             type: "bridge",
             body: {
-              method,
+              method: methodName,
               eventId,
               args
             }
           })
         );
       },
-      throwOnError && new NativeMethodError(method)
+      throwOnError && new NativeMethodError(methodName)
     ),
     timeout(timeoutMs, throwOnError)
   ]);
 };
-var linkNativeMethod = (options = {
+var linkBridge = (options = {
   timeout: 2e3,
   throwOnError: false
 }) => {
   const {
     timeout: timeoutMs = 2e3,
     throwOnError = false,
-    onFallback
+    onFallback,
+    onReady
   } = options;
   if (!window.ReactNativeWebView) {
     console.warn("[WebViewBridge] Not in a WebView environment");
@@ -148,62 +255,74 @@ var linkNativeMethod = (options = {
     return throwOnError === true || Array.isArray(throwOnError) && throwOnError.includes(methodName);
   };
   const target = bridgeMethods.reduce(
-    (acc, method) => {
+    (acc, methodName) => {
       return {
         ...acc,
-        [method]: createNativeMethod(
-          method,
+        [methodName]: createNativeMethod(
+          methodName,
           timeoutMs,
-          willMethodThrowOnError(method)
+          willMethodThrowOnError(methodName)
         )
       };
     },
-    {
-      isWebViewBridgeAvailable: Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0,
-      isNativeMethodAvailable(method) {
-        return typeof method === "string" && Boolean(window.ReactNativeWebView) && bridgeMethods.includes(method);
-      }
-    }
+    {}
   );
   const loose = new Proxy(target, {
-    get: (target2, method) => {
-      if (method in target2 && !["isWebViewBridgeAvailable", "isNativeMethodAvailable"].includes(
-        method
+    get: (target2, methodName) => {
+      if (methodName in target2 && !["isWebViewBridgeAvailable", "isNativeMethodAvailable"].includes(
+        methodName
       )) {
-        return target2[method];
+        return target2[methodName];
       }
       return createNativeMethod(
-        method,
+        methodName,
         timeoutMs,
-        willMethodThrowOnError(method)
+        willMethodThrowOnError(methodName)
       );
     }
   });
-  Object.assign(target, { loose });
-  return new Proxy(target, {
-    get: (target2, method) => {
-      if (method in target2) {
-        return target2[method];
+  Object.assign(target, {
+    loose,
+    store: linkBridgeStore(target),
+    isWebViewBridgeAvailable: Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0,
+    isNativeMethodAvailable(methodName) {
+      return typeof methodName === "string" && Boolean(window.ReactNativeWebView) && bridgeMethods.includes(methodName);
+    }
+  });
+  const proxy = new Proxy(target, {
+    get: (target2, methodName) => {
+      if (methodName in target2) {
+        return target2[methodName];
       }
       window.ReactNativeWebView?.postMessage(
         JSON.stringify({
           type: "fallback",
           body: {
-            method
+            method: methodName
           }
         })
       );
-      onFallback?.(method);
-      if (willMethodThrowOnError(method)) {
-        return () => Promise.reject(new MethodNotFoundError(method));
+      onFallback?.(methodName);
+      if (willMethodThrowOnError(methodName)) {
+        return () => Promise.reject(new MethodNotFoundError(methodName));
       } else {
         console.warn(
-          `[WebViewBridge] ${method} is not defined, using fallback.`
+          `[WebViewBridge] ${methodName} is not defined, using fallback.`
         );
       }
       return () => Promise.resolve();
     }
   });
+  onReady?.(proxy);
+  return proxy;
+};
+
+// src/linkNativeMethod.ts
+var linkNativeMethod = (options = {
+  timeout: 2e3,
+  throwOnError: false
+}) => {
+  return linkBridge(options);
 };
 
 // src/registerWebMethod.ts
@@ -257,6 +376,7 @@ var registerWebMethod = (bridge) => {
 0 && (module.exports = {
   MethodNotFoundError,
   NativeMethodError,
+  linkBridge,
   linkNativeMethod,
   registerWebMethod
 });

package/dist/module/index.mjs

@@ -28,10 +28,10 @@ var createEvents = () => ({
     };
   }
 });
-var createResolver = (emitter2, method, eventId, evaluate, failHandler = false) => {
+var createResolver = (emitter2, methodName, eventId, evaluate, failHandler = false) => {
   return new Promise((resolve, reject) => {
     const unbind = emitter2.on(
-      `${method}-${eventId}`,
+      `${methodName}-${eventId}`,
       (data, throwOccurred) => {
         unbind();
         if (throwOccurred) {
@@ -60,6 +60,63 @@ var createRandomId = (size = ID_LENGTH) => {
   return randomValues.join("");
 };
 
+// ../../shared/util/src/equals.ts
+var 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 (!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 (!equals(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+};
+
+// ../../shared/util/src/removeUndefinedKeys.tsx
+var removeUndefinedKeys = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    if (obj[key] === void 0) {
+      delete obj[key];
+    }
+  });
+  return obj;
+};
+
 // ../../shared/util/src/timeout.ts
 var timeout = (ms, throwOnError = true) => {
   return new Promise((resolve, reject) => {
@@ -73,40 +130,89 @@ var timeout = (ms, throwOnError = true) => {
   });
 };
 
-// src/linkNativeMethod.ts
+// src/emitter.ts
 var emitter = createEvents();
-var createNativeMethod = (method, timeoutMs, throwOnError) => (...args) => {
+
+// src/linkBridgeStore.ts
+var linkBridgeStore = (initialState = {}) => {
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+  }
+  if (!window.nativeEmitter) {
+    window.nativeEmitter = emitter;
+  }
+  const getState = () => state;
+  const setState = (newState) => {
+    const _newState = {
+      ...state,
+      ...removeUndefinedKeys(newState)
+    };
+    if (equals(state, _newState)) {
+      return;
+    }
+    const prevState = state;
+    state = _newState;
+    emitChange(state, prevState);
+  };
+  emitter.on("bridgeStateChange", (data) => {
+    setState(data);
+  });
+  window.ReactNativeWebView?.postMessage(
+    JSON.stringify({
+      type: "getBridgeState"
+    })
+  );
+  let state = { ...initialState, ...window.__bridgeInitialState__ };
+  const listeners = /* @__PURE__ */ 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,
+    subscribe
+  };
+};
+
+// src/linkBridge.ts
+var createNativeMethod = (methodName, timeoutMs, throwOnError) => (...args) => {
   const eventId = createRandomId();
   return Promise.race([
     createResolver(
       emitter,
-      method,
+      methodName,
       eventId,
       () => {
         window.ReactNativeWebView?.postMessage(
           JSON.stringify({
             type: "bridge",
             body: {
-              method,
+              method: methodName,
               eventId,
               args
             }
           })
         );
       },
-      throwOnError && new NativeMethodError(method)
+      throwOnError && new NativeMethodError(methodName)
     ),
     timeout(timeoutMs, throwOnError)
   ]);
 };
-var linkNativeMethod = (options = {
+var linkBridge = (options = {
   timeout: 2e3,
   throwOnError: false
 }) => {
   const {
     timeout: timeoutMs = 2e3,
     throwOnError = false,
-    onFallback
+    onFallback,
+    onReady
   } = options;
   if (!window.ReactNativeWebView) {
     console.warn("[WebViewBridge] Not in a WebView environment");
@@ -119,62 +225,74 @@ var linkNativeMethod = (options = {
     return throwOnError === true || Array.isArray(throwOnError) && throwOnError.includes(methodName);
   };
   const target = bridgeMethods.reduce(
-    (acc, method) => {
+    (acc, methodName) => {
       return {
         ...acc,
-        [method]: createNativeMethod(
-          method,
+        [methodName]: createNativeMethod(
+          methodName,
           timeoutMs,
-          willMethodThrowOnError(method)
+          willMethodThrowOnError(methodName)
         )
       };
     },
-    {
-      isWebViewBridgeAvailable: Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0,
-      isNativeMethodAvailable(method) {
-        return typeof method === "string" && Boolean(window.ReactNativeWebView) && bridgeMethods.includes(method);
-      }
-    }
+    {}
   );
   const loose = new Proxy(target, {
-    get: (target2, method) => {
-      if (method in target2 && !["isWebViewBridgeAvailable", "isNativeMethodAvailable"].includes(
-        method
+    get: (target2, methodName) => {
+      if (methodName in target2 && !["isWebViewBridgeAvailable", "isNativeMethodAvailable"].includes(
+        methodName
       )) {
-        return target2[method];
+        return target2[methodName];
       }
       return createNativeMethod(
-        method,
+        methodName,
         timeoutMs,
-        willMethodThrowOnError(method)
+        willMethodThrowOnError(methodName)
       );
     }
   });
-  Object.assign(target, { loose });
-  return new Proxy(target, {
-    get: (target2, method) => {
-      if (method in target2) {
-        return target2[method];
+  Object.assign(target, {
+    loose,
+    store: linkBridgeStore(target),
+    isWebViewBridgeAvailable: Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0,
+    isNativeMethodAvailable(methodName) {
+      return typeof methodName === "string" && Boolean(window.ReactNativeWebView) && bridgeMethods.includes(methodName);
+    }
+  });
+  const proxy = new Proxy(target, {
+    get: (target2, methodName) => {
+      if (methodName in target2) {
+        return target2[methodName];
       }
       window.ReactNativeWebView?.postMessage(
         JSON.stringify({
           type: "fallback",
           body: {
-            method
+            method: methodName
           }
         })
       );
-      onFallback?.(method);
-      if (willMethodThrowOnError(method)) {
-        return () => Promise.reject(new MethodNotFoundError(method));
+      onFallback?.(methodName);
+      if (willMethodThrowOnError(methodName)) {
+        return () => Promise.reject(new MethodNotFoundError(methodName));
       } else {
         console.warn(
-          `[WebViewBridge] ${method} is not defined, using fallback.`
+          `[WebViewBridge] ${methodName} is not defined, using fallback.`
         );
       }
       return () => Promise.resolve();
     }
   });
+  onReady?.(proxy);
+  return proxy;
+};
+
+// src/linkNativeMethod.ts
+var linkNativeMethod = (options = {
+  timeout: 2e3,
+  throwOnError: false
+}) => {
+  return linkBridge(options);
 };
 
 // src/registerWebMethod.ts
@@ -227,6 +345,7 @@ var registerWebMethod = (bridge) => {
 export {
   MethodNotFoundError,
   NativeMethodError,
+  linkBridge,
   linkNativeMethod,
   registerWebMethod
 };

package/dist/typescript/packages/web/src/emitter.d.ts

@@ -0,0 +1 @@
+export declare const emitter: import("../../../shared/util/src").EventEmitter<import("../../../shared/util/src").DefaultEvents>;

package/dist/typescript/packages/web/src/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./error";
+export * from "./linkBridge";
 export * from "./linkNativeMethod";
 export * from "./registerWebMethod";
 export type * from "./types";
+export * from "../../../shared/util/src/types";

package/dist/typescript/packages/web/src/linkBridge.d.ts

@@ -0,0 +1,9 @@
+import type { Bridge, BridgeStore, ExcludePrimitive, ExtractStore } from "../../../shared/util/src/types";
+import { LinkBridge } from "./types";
+export interface LinkBridgeOptions<T extends BridgeStore<T extends Bridge ? T : any>> {
+    timeout?: number;
+    throwOnError?: boolean | (keyof ExtractStore<T>)[] | string[];
+    onFallback?: (methodName: string) => void;
+    onReady?: (method: LinkBridge<ExcludePrimitive<ExtractStore<T>>, Omit<T, "setState">>) => void;
+}
+export declare const linkBridge: <T extends BridgeStore<T extends Bridge ? T : any>>(options?: LinkBridgeOptions<T>) => LinkBridge<ExcludePrimitive<ExtractStore<T>>, Omit<T, "setState">>;

package/dist/typescript/packages/web/src/linkBridgeStore.d.ts

@@ -0,0 +1,6 @@
+import { Bridge, BridgeStore, OnlyJSON } from "../../../shared/util/src/types";
+export type Store<BridgeObject extends Bridge> = ({ get, set, }: {
+    get: () => BridgeObject;
+    set: (newState: Partial<OnlyJSON<BridgeObject>>) => void;
+}) => BridgeObject;
+export declare const linkBridgeStore: <T extends BridgeStore<T extends Bridge ? T : any>>(initialState?: Partial<T>) => Omit<T, "setState">;

package/dist/typescript/packages/web/src/linkNativeMethod.d.ts

@@ -1,7 +1,7 @@
-import { Bridge, NativeMethod } from "./types";
-export interface LinkNativeMethodOptions<BridgeObject extends Bridge> {
-    timeout?: number;
-    throwOnError?: boolean | (keyof BridgeObject)[] | string[];
-    onFallback?: (method: string) => void;
-}
-export declare const linkNativeMethod: <BridgeObject extends Bridge>(options?: LinkNativeMethodOptions<BridgeObject>) => NativeMethod<BridgeObject>;
+import type { Bridge, BridgeStore, ExcludePrimitive, ExtractStore } from "../../../shared/util/src/types";
+import { LinkBridgeOptions } from "./linkBridge";
+import { LinkBridge } from "./types";
+/**
+ * @deprecated Use `linkBridge` instead. It's just renamed to `linkBridge`.
+ */
+export declare const linkNativeMethod: <T extends BridgeStore<T extends Bridge ? T : any>>(options?: LinkBridgeOptions<T>) => LinkBridge<ExcludePrimitive<ExtractStore<T>>, Omit<T, "setState">>;

package/dist/typescript/packages/web/src/registerWebMethod.d.ts

@@ -1,2 +1,2 @@
-import type { Bridge } from "./types";
-export declare const registerWebMethod: <BridgeObject extends Bridge>(bridge: BridgeObject) => BridgeObject;
+import type { WebBridge } from "./types";
+export declare const registerWebMethod: <BridgeObject extends WebBridge>(bridge: BridgeObject) => BridgeObject;

package/dist/typescript/packages/web/src/types/index.d.ts

@@ -1,9 +1,10 @@
-export type AsyncFunction = (...args: any[]) => Promise<any>;
-export type Bridge = Record<string, AsyncFunction>;
-export type NativeMethod<T> = {
+import { AsyncFunction } from "../../../../shared/util/src/types";
+export type WebBridge = Record<string, AsyncFunction>;
+export type LinkBridge<T, U> = {
     isWebViewBridgeAvailable: boolean;
     isNativeMethodAvailable(method: keyof T): boolean;
     isNativeMethodAvailable(method: string): boolean;
+    store: U;
     loose: {
         [K in keyof T]: (...args: any[]) => Promise<any>;
     } & {

package/dist/typescript/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/typescript/shared/util/src/equals.d.ts

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

package/dist/typescript/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/typescript/shared/util/src/removeUndefinedKeys.d.ts

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

package/dist/typescript/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,7 +1,7 @@
 {
   "name": "@webview-bridge/web",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.3.0-nightly.0",
   "description": "Fully Type-Safe Integration for React Native WebView and Web",
   "publishConfig": {
     "access": "public"
@@ -34,7 +34,7 @@
     "esbuild": "^0.19.4"
   },
   "scripts": {
-    "build": "node esbuild.config.js && tsc --emitDeclarationOnly",
+    "build": "node esbuild.config.js && tspc --emitDeclarationOnly",
     "test:type": "tsc --noEmit"
   }
 }