@jolibox/implement 1.1.4-beta.10

package/src/native/js-bridge/report.ts

@@ -0,0 +1,311 @@
+import { On } from './types';
+import { isObject, isString, InternalMetricReportError } from '@jolibox/common';
+
+type MetricReporter = (points: unknown) => unknown;
+interface MetricCache {
+  [props: string]: MetricCache | (number | string)[];
+}
+
+interface PVMetricCache {
+  [props: string]: PVMetricCache | number;
+}
+
+type MetricCacheType = MetricCache | PVMetricCache;
+type MetricType = 'pv' | 'default';
+type Prettier<T> = T extends Record<string, unknown> ? { [K in keyof T]: T[K] } : T;
+type MetricPoint<Tag extends string, Name extends string> = Prettier<
+  {
+    [k in Tag]: string;
+  } & {
+    [K in Name]: number | string;
+  }
+>;
+
+interface PVPoint {
+  [props: string]: string | JSON;
+}
+
+const getType = (type: unknown): MetricType => {
+  if (type === 'pv') return type;
+  return 'default';
+};
+
+interface MetricConfig<Tag extends string, Name extends string, Type extends string> {
+  reporter: MetricReporter;
+  interval?: number;
+  eventName: string;
+  tagNameOrder: Tag[];
+  metricName: Name;
+  type?: Type;
+}
+
+export class MetricsMonitor<Tag extends string, Name extends string, Type extends string> {
+  reporter: MetricReporter;
+  interval = 30;
+  lastReportTime = 0;
+  cache: MetricCacheType = {};
+  eventName: string;
+  tagNameOrder: Tag[];
+  metricName: Name;
+  type: MetricType;
+
+  constructor(config: MetricConfig<Tag, Name, Type>) {
+    const { reporter, interval = 30, eventName, tagNameOrder, metricName, type } = config;
+    this.reporter = reporter;
+    this.interval = interval;
+    this.eventName = eventName;
+    this.tagNameOrder = tagNameOrder;
+    this.metricName = metricName;
+    this.type = getType(type);
+  }
+
+  report(point: Type extends 'pv' ? PVPoint : MetricPoint<Tag, Name>) {
+    if (this.type === 'pv') {
+      this.addPVPoint(point);
+    } else {
+      this.addPoint(point as MetricPoint<Tag, Name>);
+    }
+
+    this.tryReport(false);
+  }
+
+  flush() {
+    this.tryReport(true);
+  }
+
+  private tryReport(force: boolean) {
+    if (!Object.keys(this.cache).length) {
+      return;
+    }
+
+    if (force) {
+      this.reporter(this.processPoints(this.cache));
+      this.clearPoints();
+      return;
+    }
+
+    this.lastReportTime = this.lastReportTime || Date.now();
+
+    if (Date.now() - this.lastReportTime >= this.interval * 1000) {
+      this.reporter(this.processPoints(this.cache));
+      this.clearPoints();
+      this.lastReportTime = Date.now();
+    }
+  }
+
+  private addPoint(point: MetricPoint<Tag, Name>) {
+    const safeSetVal = (
+      target: MetricCache,
+      props: Tag[],
+      metricName: Name,
+      point: MetricPoint<Tag, Name>
+    ) => {
+      const currentProp = props.shift();
+      if (currentProp) {
+        const currentVal = point[currentProp];
+        if (!target[currentVal]) target[currentVal] = {};
+
+        safeSetVal(target[currentVal] as MetricCache, props, metricName, point);
+      } else {
+        if (!target[metricName]) target[metricName] = [];
+        (target[metricName] as unknown[]).push(point[metricName]);
+      }
+    };
+
+    safeSetVal(this.cache as MetricCache, [...this.tagNameOrder], this.metricName, point);
+  }
+
+  private addPVPoint(point: PVPoint) {
+    const safeSetVal = (
+      target: Record<string, unknown>,
+      props: Tag[],
+      metricName: Name,
+      relation: unknown
+    ) => {
+      const currentProp = props.shift();
+
+      if (!currentProp && isObject(relation)) {
+        throw new InternalMetricReportError(
+          `report value failed to match tagNameOrder, ${JSON.stringify(originParams)}`
+        );
+      }
+
+      if (currentProp) {
+        const keys: string[] = [];
+        if (isObject(relation)) {
+          keys.push(...Object.keys(relation));
+        } else if (isString(relation)) {
+          if (props.length > 0) {
+            throw new InternalMetricReportError(
+              `report value failed to match tagNameOrder, ${JSON.stringify(originParams)}`
+            );
+          }
+
+          keys.push(relation);
+        } else {
+          throw new InternalMetricReportError(
+            `expected metric value to be a string, but got a(n) ${typeof relation}, ${JSON.stringify(
+              originParams
+            )}`
+          );
+        }
+
+        keys.forEach((key) => {
+          if (!target[key]) target[key] = {};
+          const value = isObject(relation) ? relation[key] : relation;
+          safeSetVal(target[key] as MetricCache, [...props], metricName, value);
+        });
+      } else {
+        if (!target[metricName]) {
+          target[metricName] = 1;
+        } else {
+          (target[metricName] as number)++;
+        }
+      }
+    };
+
+    const originParams = {
+      point,
+      metricName: this.metricName,
+      tagNameOrder: this.tagNameOrder
+    };
+    safeSetVal(this.cache, [...this.tagNameOrder], this.metricName, point);
+  }
+
+  private processPoints(points: MetricCacheType) {
+    return {
+      eventName: this.eventName,
+      tagNameOrder: this.tagNameOrder,
+      metricName: this.metricName,
+      metricAggregateType: this.type === 'pv' ? 'itoa' : 'arr',
+      data: points
+    };
+  }
+
+  private clearPoints() {
+    this.cache = {};
+  }
+}
+
+interface InvokeMetrics {
+  errMsg: string;
+  errNo?: number;
+  __timing?: {
+    receiveJSInvoke: number;
+    invokeCallback: number;
+  };
+  method: string;
+  startTime: number;
+  args?: Record<string, unknown>;
+  isForeground: string;
+
+  [prop: string]: unknown;
+}
+
+let monitorHasInitialized = false;
+let invokeMonitor: MetricsMonitor<
+  'status' | 'method' | 'errNo' | 'errMsg' | 'isForeground',
+  'duration',
+  'default'
+>;
+let invokeJSToNativeMonitor: MetricsMonitor<'status' | 'method' | 'isForeground', 'duration', 'default'>;
+let invokeNativeToJSMonitor: MetricsMonitor<'status' | 'method' | 'isForeground', 'duration', 'default'>;
+
+export type reportInvokeFn = (invokeMetrics: InvokeMetrics) => void;
+
+export function createReportInvokeMetrics(jsCore: jsb.JSCore, onNative: On): reportInvokeFn {
+  if (!monitorHasInitialized) {
+    /** invoke 埋点 */
+    invokeMonitor = new MetricsMonitor({
+      eventName: 'jolibox_invoke',
+      tagNameOrder: ['status', 'method', 'errNo', 'errMsg', 'isForeground'],
+      metricName: 'duration',
+      reporter(data) {
+        jsCore.invoke('track', JSON.stringify({ event: 'reportMetrics', data }), -1);
+      }
+    });
+
+    /** invoke js -> native */
+    invokeJSToNativeMonitor = new MetricsMonitor({
+      eventName: 'jolibox_invoke_js2native',
+      tagNameOrder: ['status', 'method', 'isForeground'],
+      metricName: 'duration',
+      reporter(data) {
+        jsCore.invoke('track', JSON.stringify({ event: 'reportMetrics', data }), -1);
+      }
+    });
+
+    /** invoke native -> js */
+    invokeNativeToJSMonitor = new MetricsMonitor({
+      eventName: 'jolibox_invoke_native2js',
+      tagNameOrder: ['status', 'method', 'isForeground'],
+      metricName: 'duration',
+      reporter(data) {
+        jsCore.invoke('track', JSON.stringify({ event: 'reportMetrics', data }), -1);
+      }
+    });
+
+    onNative('onJoliboxEnterBackground', () => {
+      invokeMonitor.flush();
+      invokeJSToNativeMonitor.flush();
+      invokeNativeToJSMonitor.flush();
+    });
+
+    monitorHasInitialized = true;
+  }
+
+  function report(invokeMetrics: InvokeMetrics) {
+    const {
+      method,
+      args,
+      startTime,
+      isForeground,
+      errMsg = `${method}:fail no errMsg`,
+      errNo = 0,
+      __timing = {
+        receiveJSInvoke: 0,
+        invokeCallback: 0
+      }
+    } = invokeMetrics;
+    const { receiveJSInvoke, invokeCallback } = __timing;
+    const status = errMsg.match(/\S:(\S+)\s?/)?.[1] ?? 'fail';
+
+    // report sync
+    invokeMonitor.report({
+      status,
+      method: normalizeMethod(method, args),
+      errNo: `${errNo}`,
+      errMsg,
+      isForeground,
+      duration: Date.now() - startTime
+    });
+
+    if (startTime && receiveJSInvoke && invokeCallback) {
+      invokeJSToNativeMonitor.report({
+        status,
+        method,
+        isForeground,
+        duration: Number((receiveJSInvoke - startTime).toFixed(3))
+      });
+      invokeNativeToJSMonitor.report({
+        status,
+        method,
+        isForeground,
+        duration: Number((Date.now() - invokeCallback).toFixed(3))
+      });
+    }
+  }
+
+  function normalizeMethod(method: string, args?: Record<string, unknown>) {
+    // Reserve an interface;
+    // an API might be provided later to directly expose client-side methods to users.
+    if (method === 'callHostMethod' || method === 'callHostMethodSync') {
+      if (args?.method) {
+        return `${method}-${args.method}`;
+      }
+    }
+    return method;
+  }
+
+  return report;
+}

package/src/native/js-bridge/subscribe.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '@jolibox/common';
+import { DataObj, unpack } from './utils';
+import { Off, On } from './types';
+import { AnyFunction } from '@jolibox/types';
+import { MetricsMonitor } from './report';
+
+export interface Subscribes {
+  onNative: On;
+  offNative: Off;
+  subscribeHandler: AnyFunction;
+}
+
+export function createSubscribe(jsCore: jsb.JSCore): Subscribes {
+  const nativeEmitter = new EventEmitter();
+  const publishMonitor = new MetricsMonitor({
+    eventName: 'jolibox_publish',
+    tagNameOrder: ['type', 'event'],
+    metricName: 'duration',
+    reporter(data) {
+      jsCore.invoke('track', JSON.stringify({ event: 'reportMetrics', data }), -1);
+    }
+  });
+
+  nativeEmitter.on('onJoliboxEnterBackground', () => {
+    publishMonitor.flush();
+  });
+
+  return {
+    onNative: nativeEmitter.on.bind(nativeEmitter),
+    offNative: nativeEmitter.off.bind(nativeEmitter),
+    subscribeHandler(event, data, webviewId) {
+      // ios: jsc 端基于系统方法，前端接受到的 data 总是 string 类型, webview 基于 evaluateJavascript，前端接受到的 data 总是 object 类型
+      // android: 传入为 string 则接收到 string，传入为可序列化成功的 object，则接收到 object
+      const unpackedData = unpack(data);
+      let originalParams: undefined | DataObj;
+      if (unpackedData.__extra) {
+        originalParams = unpackedData.params;
+        const { type, startTime } = unpackedData.__extra;
+        publishMonitor.report({
+          type,
+          event,
+          duration: Date.now() - startTime // ms
+        });
+      } else {
+        originalParams = unpackedData;
+      }
+      nativeEmitter.emit(event, originalParams, webviewId);
+    }
+  };
+}

package/src/native/js-bridge/types.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Listener = (...args: any[]) => any;
+
+export type On = <T extends string>(event: T, handler: Listener) => void;
+
+export type Off = <T extends string>(event: T, handler: Listener) => void;
+
+export type InvokeHandler = (callbackId: string | number, data: string | Record<string, unknown>) => void;
+
+export type SubscribeHandler = (
+  event: string,
+  data: string | Record<string, unknown>,
+  webviewId?: number
+) => void;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyFunction = (...args: any[]) => any;
+
+export interface JSBridge {
+  invokeHandler: InvokeHandler;
+  subscribeHandler: SubscribeHandler;
+  invokeNative: jsb.service.InvokeNative;
+  applyNative: jsb.service.ApplyNative;
+  onNative: jsb.service.OnNative;
+  offNative: jsb.service.OffNative;
+}

package/src/native/js-bridge/utils.ts

@@ -0,0 +1,116 @@
+export interface DataObj {
+  params?: Record<string, unknown>;
+  errorCode?: number;
+  __extra?: {
+    startTime: number;
+    type: string;
+  };
+  __nativeBuffers__?: NativeBufferElement[] | undefined;
+}
+
+interface NativeBufferElement {
+  key: string;
+  value?: ArrayBuffer;
+  base64?: string;
+}
+
+function isNativeBuffers(
+  x: unknown & { __nativeBuffers__?: NativeBufferElement[] | undefined }
+): x is { __nativeBuffers__?: NativeBufferElement[]; [k: string]: unknown } {
+  return Boolean(x?.__nativeBuffers__);
+}
+
+/**
+ * decodeFromUi8Base64
+ */
+const decodeFromUi8Base64 = (string: string): ArrayBuffer => {
+  const base64String = atob(string);
+  const len = base64String.length;
+  const ui8aReader = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    ui8aReader[i] = base64String.charCodeAt(i);
+  }
+  return ui8aReader.buffer;
+};
+
+export function unpack(data: unknown): DataObj {
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data);
+    } catch {
+      return {};
+    }
+  }
+  if (typeof data !== 'object' || data === null) {
+    return {};
+  }
+
+  if (!isNativeBuffers(data)) return data as DataObj;
+
+  const nativeBuffers = data.__nativeBuffers__;
+  delete data.__nativeBuffers__;
+
+  if (nativeBuffers) {
+    for (let i = 0; i < nativeBuffers.length; i++) {
+      const item = nativeBuffers[i];
+      if (item) {
+        let tmp;
+        if (item.value) {
+          // Arraybuffer
+          tmp = item.value;
+        } else if (item.base64) {
+          tmp = decodeFromUi8Base64(item.base64);
+        }
+        if (typeof tmp !== 'undefined' && tmp instanceof ArrayBuffer) {
+          data[item.key] = tmp;
+        }
+      }
+    }
+  }
+
+  return data;
+}
+
+const encodeToUi8Base64 = (arrayBuffer: ArrayBuffer): string => {
+  let string = '';
+  const ui8aReader = new Uint8Array(arrayBuffer);
+  const len = ui8aReader.byteLength;
+  for (let i = 0; i < len; i++) {
+    string += String.fromCharCode(ui8aReader[i]);
+  }
+  return btoa(string);
+};
+
+export function pack(_data = {}, useArrayBuffer = false): Record<string, unknown> {
+  const data = _data as Record<string, unknown>;
+  type ArrayBufferType =
+    | {
+        value: ArrayBuffer;
+        key: string;
+        base64?: undefined;
+      }
+    | {
+        base64: string;
+        key: string;
+        value?: undefined;
+      };
+  const needTransAttrs: ArrayBufferType[] = [];
+  for (const [key, item] of Object.entries(data)) {
+    if (item !== undefined && item instanceof ArrayBuffer && item.byteLength !== undefined) {
+      const obj: ArrayBufferType = useArrayBuffer
+        ? { value: item, key }
+        : {
+            base64: encodeToUi8Base64(item),
+            key
+          };
+      needTransAttrs.push(obj);
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete data[key];
+    }
+  }
+
+  if (needTransAttrs.length > 0) {
+    data.__nativeBuffers__ = needTransAttrs;
+  }
+  return data;
+}

package/src/native/js-core/index.ts

@@ -0,0 +1,4 @@
+export { joliboxJSCore, RuntimeLoader } from './jolibox-js-core';
+
+export { messagePort, initMessagePort } from './message-port';
+export { normalizeParams } from './utils';

package/src/native/js-core/jolibox-js-core.ts

@@ -0,0 +1,188 @@
+import { InternalInvokeNativeError } from '@jolibox/common';
+// import { normalizeParams } from './utils';
+import { Env } from '@jolibox/types';
+import { reportError } from '@/common/report/errors/report';
+
+declare const globalThis: {
+  joliboxJSCore?: JoliboxJSCore;
+};
+
+interface JoliboxJSCore {
+  // publish: (event: string, params: string, webviewIds: string) => void;
+  invoke: (method: string, params: string, callbackId: number) => string | void;
+  /** 安卓: webview 没有 call, service 有 */
+  call?: (method: string, params: Record<string, unknown>, callbackId: number) => string | void;
+  onDocumentReady: (path: string) => void;
+}
+
+export let joliboxJSCore: jsb.JSCore | undefined;
+
+declare global {
+  interface Window {
+    JoliAndroidSDKBridge?: {
+      invoke: (invokeString: string) => void;
+      onDocumentReady: (paramsstr: string) => void;
+      doExit: (uuidString: string) => void;
+    };
+    webkit?: {
+      messageHandlers: {
+        invoke: {
+          postMessage: (params: { event: string; callbackId: number; paramsString: string }) => void;
+        };
+        publish: {
+          postMessage: (params: { event: string; webviewIds: string; paramsString: string }) => void;
+        };
+        onDocumentReady: {
+          postMessage: (params: { path: string }) => void;
+        };
+        doExit: {
+          postMessage: (params: { uuid: string; shouldInterrupt: boolean }) => void;
+        };
+      };
+    };
+  }
+}
+
+export const RuntimeLoader = {
+  trigger() {
+    // noop
+  },
+  exit(): boolean {
+    //noop
+    return false; // 默认不打断退出
+  },
+  onReady(fn: () => void) {
+    RuntimeLoader.trigger = fn;
+  },
+  doExit(fn: () => boolean) {
+    RuntimeLoader.exit = fn;
+  }
+};
+
+const env = (): Env | undefined => {
+  const res = window.prompt(
+    'invoke',
+    JSON.stringify({
+      event: 'envSync',
+      paramsString: JSON.stringify({})
+    })
+  );
+  if (!res) {
+    reportError(new InternalInvokeNativeError(`native env failed`));
+  } else {
+    const { data } = JSON.parse(res);
+    return data ?? undefined;
+  }
+};
+
+if (window.webkit) {
+  const _joliboxJSCore = window.webkit.messageHandlers;
+  const onDocumentReady = (path = '') => {
+    RuntimeLoader.trigger();
+    _joliboxJSCore.onDocumentReady.postMessage({ path });
+  };
+  const doExit = (uuid: string) => {
+    const shouldInterrupt = RuntimeLoader.exit();
+    _joliboxJSCore.doExit.postMessage({ uuid, shouldInterrupt });
+  };
+
+  joliboxJSCore = {
+    onDocumentReady,
+    doExit,
+    invoke(method, params, callbackId) {
+      _joliboxJSCore.invoke.postMessage({
+        event: method,
+        paramsString: params,
+        callbackId
+      });
+    },
+    // publish(event, params, webviewIds) {
+    //   const data = normalizeParams(params as Record<string, unknown>, 'joliboxJSCore');
+    //   _joliboxJSCore.publish.postMessage({
+    //     event,
+    //     paramsString: JSON.stringify(data),
+    //     webviewIds: JSON.stringify(webviewIds)
+    //   });
+    // },
+    call(method: string, params: Record<string, unknown>, callbackId) {
+      const res = window.prompt(
+        'invoke',
+        JSON.stringify({
+          event: method,
+          paramsString: JSON.stringify(params),
+          callbackId
+        })
+      );
+      if (res) {
+        return JSON.parse(res);
+      }
+    }
+  };
+
+  // do not expose invoke/ publish to user
+  const devCore = { onDocumentReady, env };
+
+  //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  globalThis.joliboxJSCore = {
+    ...devCore
+  };
+}
+
+// Android
+if (window.JoliAndroidSDKBridge) {
+  const _joliboxJSCore = window.JoliAndroidSDKBridge;
+  const onDocumentReady = (path = '') => {
+    RuntimeLoader.trigger();
+    _joliboxJSCore.onDocumentReady(JSON.stringify({ path }));
+  };
+
+  const doExit = (uuid: string) => {
+    const shouldInterrupt = RuntimeLoader.exit();
+    _joliboxJSCore.doExit(JSON.stringify({ uuid, shouldInterrupt }));
+  };
+
+  joliboxJSCore = {
+    onDocumentReady,
+    invoke(method, params, callbackId) {
+      _joliboxJSCore.invoke(
+        JSON.stringify({
+          event: method,
+          paramsString: params,
+          callbackId
+        })
+      );
+    },
+    doExit,
+    // publish(event, params, webviewIds) {
+    //   const data = normalizeParams(params as Record<string, unknown>, 'joliboxJSCore');
+    //   _joliboxJSCore.publish({
+    //     event,
+    //     paramsString: JSON.stringify(data),
+    //     webviewIds: JSON.stringify(webviewIds)
+    //   });
+    // },
+    call(method: string, params: Record<string, unknown>, callbackId) {
+      const res = window.prompt(
+        'invoke',
+        JSON.stringify({
+          event: method,
+          paramsString: JSON.stringify(params),
+          callbackId
+        })
+      );
+      if (res) {
+        return JSON.parse(res);
+      }
+    }
+  };
+
+  // do not expose invoke/ publish to user
+  const devCore = { onDocumentReady, env };
+
+  //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  globalThis.joliboxJSCore = {
+    ...devCore
+  };
+}