refactor: hydrate

packages/web/esbuild.config.js

@@ -5,6 +5,7 @@ await Promise.all([
     target: "es2015",
     entryPoints: ["src/index.ts"],
     bundle: true,
+    minify: true,
     outfile: "dist/commonjs/index.cjs",
     platform: "node",
     format: "cjs",
@@ -13,6 +14,7 @@ await Promise.all([
     target: "es2015",
     entryPoints: ["src/index.ts"],
     bundle: true,
+    minify: true,
     outfile: "dist/module/index.mjs",
     platform: "browser",
     format: "esm",

packages/web/src/internal/bridgeInstance.ts

@@ -1,7 +1,6 @@
 import type {
   Bridge,
   BridgeStore,
-  ExcludePrimitive,
   ExtractStore,
   KeyOfOrString,
   Parser,
@@ -15,33 +14,51 @@ import {
   timeout,
 } from "@webview-bridge/util";
 
-import { MethodNotFoundError, NativeMethodError } from "../error";
+import { NativeMethodError } from "../error";
 import { LinkBridgeOptions } from "../linkBridge";
 import { LinkBridge } from "../types";
+import { createPromiseProxy } from "./createPromiseProxy";
 import { linkBridgeStore } from "./linkBridgeStore";
 
 export class BridgeInstance<
   T extends BridgeStore<T extends Bridge ? T : any>,
   V extends ParserSchema<any> = ParserSchema<any>,
 > {
-  private defaultTimeoutMs = 2000;
-  private $proxy: LinkBridge<
-    ExcludePrimitive<ExtractStore<T>>,
-    Omit<T, "setState">,
-    V
-  >;
-
   constructor(
     private options: LinkBridgeOptions<T, V>,
 
-    public emitter: DefaultEmitter,
-    public bridgeMethods: string[],
-    public nativeInitialState: PrimitiveObject,
+    private _emitter: DefaultEmitter,
+    private _bridgeMethods: string[],
+    public _nativeInitialState: PrimitiveObject,
   ) {
-    this.$proxy = this.hydrate(bridgeMethods, nativeInitialState);
+    this.hydrate(_bridgeMethods, _nativeInitialState);
   }
 
-  private postMessage(type: string, body?: unknown) {
+  private defaultTimeoutMs = 2000;
+
+  public store: Omit<T, "setState"> = {} as Omit<T, "setState">;
+
+  public isWebViewBridgeAvailable = Boolean(window.ReactNativeWebView);
+
+  public isNativeMethodAvailable(methodName: string) {
+    return (
+      typeof methodName === "string" &&
+      Boolean(window.ReactNativeWebView) &&
+      this._bridgeMethods.includes(methodName)
+    );
+  }
+
+  public addEventListener<EventName extends KeyOfOrString<V>>(
+    eventName: EventName,
+    listener: (args: Parser<V, EventName>) => void,
+  ) {
+    return this._emitter.on(`postMessage/${String(eventName)}`, listener);
+  }
+
+  public loose: LinkBridge<ExtractStore<T>, Omit<T, "setState">, V> =
+    createPromiseProxy() as LinkBridge<ExtractStore<T>, Omit<T, "setState">, V>;
+
+  private _postMessage(type: string, body?: unknown) {
     window.ReactNativeWebView?.postMessage(
       JSON.stringify(
         body
@@ -56,7 +73,7 @@ export class BridgeInstance<
     );
   }
 
-  private createNativeMethod(
+  private _createNativeMethod(
     methodName: string,
     throwOnError: boolean,
     timeoutMs: number,
@@ -68,11 +85,11 @@ export class BridgeInstance<
       return Promise.race(
         [
           createResolver({
-            emitter: this.emitter,
+            emitter: this._emitter,
             methodName,
             eventId,
             evaluate: () => {
-              this.postMessage("bridge", {
+              this._postMessage("bridge", {
                 method: methodName,
                 eventId,
                 args,
@@ -89,15 +106,15 @@ export class BridgeInstance<
     };
   }
 
-  private willMethodThrowOnError(methodName: string) {
+  private _willMethodThrowOnError(methodName: string) {
     const { throwOnError } = this.options;
     return (
       throwOnError === true ||
       (Array.isArray(throwOnError) && throwOnError.includes(methodName))
     );
   }
 
-  private createLoose(
+  private _createLoose(
     initialState: LinkBridge<ExtractStore<T>, Omit<T, "setState">, V>,
   ) {
     const { timeout: timeoutMs = this.defaultTimeoutMs, onFallback } =
@@ -113,9 +130,9 @@ export class BridgeInstance<
         ) {
           return target[methodName];
         }
-        return this.createNativeMethod(
+        return this._createNativeMethod(
           methodName,
-          this.willMethodThrowOnError(methodName),
+          this._willMethodThrowOnError(methodName),
           timeoutMs,
           onFallback,
         );
@@ -127,19 +144,19 @@ export class BridgeInstance<
     bridgeMethods: string[],
     nativeInitialState: PrimitiveObject = {},
   ) {
-    const {
-      timeout: timeoutMs = this.defaultTimeoutMs,
-      onFallback,
-      onReady,
-    } = this.options;
+    this._bridgeMethods = bridgeMethods;
+    this._nativeInitialState = nativeInitialState;
+
+    const { timeout: timeoutMs = this.defaultTimeoutMs, onFallback } =
+      this.options;
 
     const initialState = bridgeMethods.reduce(
       (acc, methodName) => {
         return {
           ...acc,
-          [methodName]: this.createNativeMethod(
+          [methodName]: this._createNativeMethod(
             methodName,
-            this.willMethodThrowOnError(methodName),
+            this._willMethodThrowOnError(methodName),
             timeoutMs,
             onFallback,
           ),
@@ -148,76 +165,26 @@ export class BridgeInstance<
       {} as LinkBridge<ExtractStore<T>, Omit<T, "setState">, V>,
     );
 
-    const loose = this.createLoose(initialState);
+    this.loose = this._createLoose(initialState);
 
-    const store = linkBridgeStore<T>(
-      this.emitter,
+    this.store = linkBridgeStore<T>(
+      this._emitter,
       initialState,
       nativeInitialState as ExtractStore<T>,
     );
-
-    Object.assign(initialState, {
-      loose,
-      store,
-      isWebViewBridgeAvailable:
-        Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0,
-      isNativeMethodAvailable(methodName: string) {
-        return (
-          typeof methodName === "string" &&
-          Boolean(window.ReactNativeWebView) &&
-          bridgeMethods.includes(methodName)
-        );
-      },
-      addEventListener: <EventName extends KeyOfOrString<V>>(
-        eventName: EventName,
-        listener: (args: Parser<V, EventName>) => void,
-      ) => {
-        return this.emitter.on(`postMessage/${String(eventName)}`, listener);
-      },
-    });
+    this.isWebViewBridgeAvailable =
+      Boolean(window.ReactNativeWebView) && bridgeMethods.length > 0;
 
     document.addEventListener("visibilitychange", () => {
       if (document.visibilityState === "visible") {
-        this.postMessage("getBridgeState");
+        this._postMessage("getBridgeState");
       }
     });
-    this.postMessage("getBridgeState");
-
-    const proxy = new Proxy(initialState, {
-      get: (target, methodName: string) => {
-        if (methodName in target) {
-          return target[methodName];
-        }
-
-        this.postMessage("fallback", {
-          method: methodName,
-        });
-
-        if (this.willMethodThrowOnError(methodName)) {
-          return (...args: unknown[]) => {
-            onFallback?.(methodName, args);
-            return Promise.reject(new MethodNotFoundError(methodName));
-          };
-        } else {
-          console.warn(
-            `[WebViewBridge] ${methodName} is not defined, using fallback.`,
-          );
-        }
-        return () => Promise.resolve();
-      },
-    });
+    this._postMessage("getBridgeState");
 
     for (const [eventName, ...args] of window.nativeBatchedEvents ?? []) {
-      this.emitter.emit(eventName, ...args);
+      this._emitter.emit(eventName, ...args);
     }
     window.nativeBatchedEvents = [];
-
-    onReady?.(proxy);
-    this.$proxy = proxy;
-    return proxy;
-  }
-
-  get proxy() {
-    return this.$proxy;
   }
 }

packages/web/src/internal/createPromiseProxy.ts

@@ -0,0 +1,10 @@
+export const createPromiseProxy = () => {
+  return new Proxy(
+    {},
+    {
+      get: () => {
+        return () => Promise.resolve();
+      },
+    },
+  );
+};

packages/web/src/linkBridge.ts

@@ -8,6 +8,7 @@ import type {
 } from "@webview-bridge/types";
 import { createEvents, noop } from "@webview-bridge/util";
 
+import { MethodNotFoundError } from "./error";
 import { BridgeInstance } from "./internal/bridgeInstance";
 import { LinkBridge } from "./types";
 
@@ -73,11 +74,38 @@ export const linkBridge = <
     const unsubscribe = emitter.on(
       "hydrate",
       ({ bridgeMethods, nativeInitialState }: HydrateEventPayload) => {
-        alert("hydrating");
         instance.hydrate(bridgeMethods, nativeInitialState);
         unsubscribe();
       },
     );
   }
-  return instance.proxy; // to only expose instance;
+
+  const { onFallback, onReady } = options;
+
+  const proxy = new Proxy(instance, {
+    get: (target: any, methodName: string, proxy) => {
+      if (methodName in target) {
+        return target[methodName];
+      }
+
+      proxy._postMessage("fallback", {
+        method: methodName,
+      });
+
+      if (proxy._willMethodThrowOnError(methodName)) {
+        return (...args: unknown[]) => {
+          onFallback?.(methodName, args);
+          return Promise.reject(new MethodNotFoundError(methodName));
+        };
+      } else {
+        console.warn(
+          `[WebViewBridge] ${methodName} is not defined, using fallback.`,
+        );
+      }
+      return () => Promise.resolve();
+    },
+  }) as LinkBridge<ExcludePrimitive<ExtractStore<T>>, Omit<T, "setState">, V>;
+
+  onReady?.(proxy);
+  return proxy;
 };