@webview-bridge/web 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# webview-bridge
+
+webview-bridge package for web
+
+For more information, check out https://github.com/gronxb/webview-bridge

package/dist/commonjs/index.cjs

@@ -0,0 +1,195 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MethodNotFoundError: () => MethodNotFoundError,
+  linkNativeMethod: () => linkNativeMethod,
+  registerWebMethod: () => registerWebMethod
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/error.ts
+var MethodNotFoundError = class extends Error {
+  constructor(methodName) {
+    super(`Method ${methodName} is not defined`);
+    this.name = "MethodNotFoundError";
+  }
+};
+
+// ../../shared/util/src/createEvents.ts
+var createEvents = () => ({
+  events: {},
+  emit(event, ...args) {
+    const callbacks = this.events[event] || [];
+    for (let i = 0, length = callbacks.length; i < length; i++) {
+      callbacks[i](...args);
+    }
+  },
+  on(event, cb) {
+    this.events[event]?.push(cb) || (this.events[event] = [cb]);
+    return () => {
+      this.events[event] = this.events[event]?.filter((i) => cb !== i);
+    };
+  }
+});
+var createResolver = (emitter2, method, eventId, evaluate) => {
+  return new Promise((resolve) => {
+    const unbind = emitter2.on(`${method}-${eventId}`, (data) => {
+      unbind();
+      resolve(data);
+    });
+    evaluate();
+  });
+};
+
+// ../../shared/util/src/createRandomId.tsx
+var TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+var ID_LENGTH = 21;
+var createRandomId = (size = ID_LENGTH) => {
+  const randomValues = Array.from(
+    { length: size },
+    () => TABLE[Math.floor(Math.random() * TABLE.length)]
+  );
+  return randomValues.join("");
+};
+
+// ../../shared/util/src/timeout.ts
+var timeout = (ms) => {
+  return new Promise((_, reject) => {
+    setTimeout(() => {
+      reject(new Error("Timeout"));
+    }, ms);
+  });
+};
+
+// src/linkNativeMethod.ts
+var emitter = createEvents();
+var linkNativeMethod = (options = {
+  timeout: 2e3,
+  throwOnError: false
+}) => {
+  const {
+    timeout: timeoutMs = 2e3,
+    throwOnError = false,
+    onFallback
+  } = options;
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+  }
+  const bridgeMethods = window.__bridgeMethods__ ?? [];
+  if (!window.nativeEmitter) {
+    window.nativeEmitter = emitter;
+  }
+  const target = bridgeMethods.reduce((acc, method) => {
+    return {
+      ...acc,
+      [method]: (...args) => {
+        const eventId = createRandomId();
+        return Promise.race([
+          createResolver(emitter, method, eventId, () => {
+            window.ReactNativeWebView?.postMessage(
+              JSON.stringify({
+                type: "bridge",
+                body: {
+                  method,
+                  eventId,
+                  args
+                }
+              })
+            );
+          }),
+          timeout(timeoutMs)
+        ]);
+      }
+    };
+  }, {});
+  return new Proxy(target, {
+    get: (target2, method) => {
+      if (method in target2) {
+        return target2[method];
+      }
+      window.ReactNativeWebView?.postMessage(
+        JSON.stringify({
+          type: "fallback",
+          body: {
+            method
+          }
+        })
+      );
+      onFallback?.(method);
+      if (throwOnError === true) {
+        return () => Promise.reject(new MethodNotFoundError(method));
+      } else if (Array.isArray(throwOnError) && throwOnError.includes(method)) {
+        return () => Promise.reject(new MethodNotFoundError(method));
+      } else {
+        console.warn(
+          `[WebViewBridge] ${method} is not defined, using fallback.`
+        );
+      }
+      return () => Promise.resolve();
+    }
+  });
+};
+
+// src/registerWebMethod.ts
+var registerWebMethod = (bridge) => {
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+    return bridge;
+  }
+  const bridgeEntries = Object.entries(bridge);
+  const bridgeNames = Object.keys(bridge);
+  const emitter2 = createEvents();
+  window.webEmitter = emitter2;
+  for (const [funcName, func] of bridgeEntries) {
+    const $func = async (eventId, args) => {
+      const value = await func(...args);
+      window.ReactNativeWebView?.postMessage(
+        JSON.stringify({
+          type: "webMethodResponse",
+          body: { funcName, eventId, value }
+        })
+      );
+    };
+    emitter2.on(funcName, $func);
+  }
+  const register = () => {
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({
+        type: "registerWebMethod",
+        body: { bridgeNames }
+      })
+    );
+    window.removeEventListener("DOMContentLoaded", register);
+  };
+  if (!window.ReactNativeWebView) {
+    window.addEventListener("DOMContentLoaded", register);
+    return bridge;
+  }
+  register();
+  return bridge;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MethodNotFoundError,
+  linkNativeMethod,
+  registerWebMethod
+});

package/dist/module/index.mjs

@@ -0,0 +1,166 @@
+// src/error.ts
+var MethodNotFoundError = class extends Error {
+  constructor(methodName) {
+    super(`Method ${methodName} is not defined`);
+    this.name = "MethodNotFoundError";
+  }
+};
+
+// ../../shared/util/src/createEvents.ts
+var createEvents = () => ({
+  events: {},
+  emit(event, ...args) {
+    const callbacks = this.events[event] || [];
+    for (let i = 0, length = callbacks.length; i < length; i++) {
+      callbacks[i](...args);
+    }
+  },
+  on(event, cb) {
+    this.events[event]?.push(cb) || (this.events[event] = [cb]);
+    return () => {
+      this.events[event] = this.events[event]?.filter((i) => cb !== i);
+    };
+  }
+});
+var createResolver = (emitter2, method, eventId, evaluate) => {
+  return new Promise((resolve) => {
+    const unbind = emitter2.on(`${method}-${eventId}`, (data) => {
+      unbind();
+      resolve(data);
+    });
+    evaluate();
+  });
+};
+
+// ../../shared/util/src/createRandomId.tsx
+var TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+var ID_LENGTH = 21;
+var createRandomId = (size = ID_LENGTH) => {
+  const randomValues = Array.from(
+    { length: size },
+    () => TABLE[Math.floor(Math.random() * TABLE.length)]
+  );
+  return randomValues.join("");
+};
+
+// ../../shared/util/src/timeout.ts
+var timeout = (ms) => {
+  return new Promise((_, reject) => {
+    setTimeout(() => {
+      reject(new Error("Timeout"));
+    }, ms);
+  });
+};
+
+// src/linkNativeMethod.ts
+var emitter = createEvents();
+var linkNativeMethod = (options = {
+  timeout: 2e3,
+  throwOnError: false
+}) => {
+  const {
+    timeout: timeoutMs = 2e3,
+    throwOnError = false,
+    onFallback
+  } = options;
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+  }
+  const bridgeMethods = window.__bridgeMethods__ ?? [];
+  if (!window.nativeEmitter) {
+    window.nativeEmitter = emitter;
+  }
+  const target = bridgeMethods.reduce((acc, method) => {
+    return {
+      ...acc,
+      [method]: (...args) => {
+        const eventId = createRandomId();
+        return Promise.race([
+          createResolver(emitter, method, eventId, () => {
+            window.ReactNativeWebView?.postMessage(
+              JSON.stringify({
+                type: "bridge",
+                body: {
+                  method,
+                  eventId,
+                  args
+                }
+              })
+            );
+          }),
+          timeout(timeoutMs)
+        ]);
+      }
+    };
+  }, {});
+  return new Proxy(target, {
+    get: (target2, method) => {
+      if (method in target2) {
+        return target2[method];
+      }
+      window.ReactNativeWebView?.postMessage(
+        JSON.stringify({
+          type: "fallback",
+          body: {
+            method
+          }
+        })
+      );
+      onFallback?.(method);
+      if (throwOnError === true) {
+        return () => Promise.reject(new MethodNotFoundError(method));
+      } else if (Array.isArray(throwOnError) && throwOnError.includes(method)) {
+        return () => Promise.reject(new MethodNotFoundError(method));
+      } else {
+        console.warn(
+          `[WebViewBridge] ${method} is not defined, using fallback.`
+        );
+      }
+      return () => Promise.resolve();
+    }
+  });
+};
+
+// src/registerWebMethod.ts
+var registerWebMethod = (bridge) => {
+  if (!window.ReactNativeWebView) {
+    console.warn("[WebViewBridge] Not in a WebView environment");
+    return bridge;
+  }
+  const bridgeEntries = Object.entries(bridge);
+  const bridgeNames = Object.keys(bridge);
+  const emitter2 = createEvents();
+  window.webEmitter = emitter2;
+  for (const [funcName, func] of bridgeEntries) {
+    const $func = async (eventId, args) => {
+      const value = await func(...args);
+      window.ReactNativeWebView?.postMessage(
+        JSON.stringify({
+          type: "webMethodResponse",
+          body: { funcName, eventId, value }
+        })
+      );
+    };
+    emitter2.on(funcName, $func);
+  }
+  const register = () => {
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({
+        type: "registerWebMethod",
+        body: { bridgeNames }
+      })
+    );
+    window.removeEventListener("DOMContentLoaded", register);
+  };
+  if (!window.ReactNativeWebView) {
+    window.addEventListener("DOMContentLoaded", register);
+    return bridge;
+  }
+  register();
+  return bridge;
+};
+export {
+  MethodNotFoundError,
+  linkNativeMethod,
+  registerWebMethod
+};

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

@@ -0,0 +1,3 @@
+export declare const createNativeMethod: <T = unknown>(options?: {
+    timeout: number;
+}) => T;

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

@@ -0,0 +1,2 @@
+import type { Bridge } from "./types";
+export declare const createWebMethod: Bridge;

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

@@ -0,0 +1,3 @@
+export declare class MethodNotFoundError extends Error {
+    constructor(methodName: string);
+}

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

@@ -0,0 +1,4 @@
+export * from "./error";
+export * from "./linkNativeMethod";
+export * from "./registerWebMethod";
+export type * from "./types";

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

@@ -0,0 +1,6 @@
+export interface LinkNativeMethodOptions<T extends object> {
+    timeout?: number;
+    throwOnError?: boolean | (keyof T)[];
+    onFallback?: (method: keyof T) => void;
+}
+export declare const linkNativeMethod: <T extends object>(options?: LinkNativeMethodOptions<T>) => T;

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

@@ -0,0 +1,2 @@
+import type { Bridge } from "./types";
+export declare const registerWebMethod: Bridge;

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

@@ -0,0 +1,5 @@
+export type Procedure = (...args: any[]) => any;
+export type ProceduresObject<T extends Record<string, Procedure>> = {
+    [K in keyof T]: (...args: Parameters<T[K]>) => Promise<Awaited<ReturnType<T[K]>>>;
+};
+export type Bridge = <T extends Record<string, Procedure>>(procedures: T) => ProceduresObject<T>;

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

@@ -0,0 +1,16 @@
+interface EventsMap {
+    [event: string]: any;
+}
+export interface DefaultEvents extends EventsMap {
+    [event: string]: (...args: any) => void;
+}
+export interface EventEmitter<Events extends EventsMap = DefaultEvents> {
+    emit<K extends keyof Events>(this: this, event: K, ...args: Parameters<Events[K]>): void;
+    events: Partial<{
+        [E in keyof Events]: Events[E][];
+    }>;
+    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) => Promise<unknown>;
+export {};

package/dist/typescript/shared/util/src/createRandomId.d.ts

@@ -0,0 +1 @@
+export declare const createRandomId: (size?: number) => string;

package/dist/typescript/shared/util/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./createEvents";
+export * from "./createRandomId";
+export * from "./noop";
+export * from "./timeout";

package/dist/typescript/shared/util/src/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist/typescript/shared/util/src/timeout.d.ts

@@ -0,0 +1 @@
+export declare const timeout: (ms: number) => Promise<unknown>;

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

@@ -0,0 +1,5 @@
+export type Procedure = (...args: any[]) => any;
+export type ProceduresObject<T extends Record<string, Procedure>> = {
+    [K in keyof T]: (...args: Parameters<T[K]>) => Promise<Awaited<ReturnType<T[K]>>>;
+};
+export type Bridge = <T extends Record<string, Procedure>>(procedures: T) => ProceduresObject<T>;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@webview-bridge/web",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Integration Web and React Native WebView",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gronxb/webview-bridge.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "main": "/dist/commonjs/index.cjs",
+  "module": "/dist/module/index.mjs",
+  "types": "/dist/typescript/packages/web/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/module/index.mjs",
+      "require": "./dist/commonjs/index.cjs",
+      "types": "./dist/typescript/packages/web/src/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "esbuild": "^0.19.4"
+  },
+  "scripts": {
+    "build": "node esbuild.config.js && tsc --emitDeclarationOnly",
+    "test:type": "tsc --noEmit"
+  }
+}