@jolibox/implement 1.1.4-beta.4

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
+  };
+}

package/src/native/js-core/message-port.ts

@@ -0,0 +1,52 @@
+import { normalizeParams } from './utils';
+import { AnyFunction } from '@jolibox/types';
+
+declare const globalThis: {
+  onmessage?: (msg: MessageEvent) => void;
+  ttJSBridge: {
+    invokeHandler: AnyFunction;
+    subscribeHandler: AnyFunction;
+  };
+};
+
+interface MessageEvent {
+  data: string;
+  ports: MessagePort[];
+}
+
+interface MessagePort {
+  onmessage: (msg: MessageEvent) => void;
+  postMessage: (msg: string) => void;
+  publish: (event: string, data: Record<string, unknown>) => void;
+}
+
+type PublishEvent = ['publish', string, string];
+type InvokeEvent = ['invoke', number, string];
+
+export let messagePort: MessagePort | undefined;
+
+export function initMessagePort() {
+  globalThis.onmessage = function (msg) {
+    if (msg.data !== 'msg:setup') {
+      return;
+    }
+
+    [messagePort] = msg.ports;
+    messagePort.onmessage = function (message) {
+      const data: PublishEvent | InvokeEvent = JSON.parse(message.data);
+      if (data[0] === 'publish') {
+        globalThis.ttJSBridge.subscribeHandler(data[1], data[2]);
+      } else if (data[0] === 'invoke') {
+        globalThis.ttJSBridge.invokeHandler(data[1], data[2]);
+      }
+    };
+
+    messagePort.publish = function (event, params) {
+      const data = normalizeParams(params as Record<string, unknown>, 'messagePort');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      messagePort!.postMessage(JSON.stringify(['publish', event, JSON.stringify(data)]));
+    };
+
+    messagePort.postMessage('msg:setup:ok');
+  };
+}

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

@@ -0,0 +1,9 @@
+export function normalizeParams(params: Record<string, unknown>, type: string) {
+  return {
+    params,
+    __extra: {
+      startTime: Date.now(),
+      type
+    }
+  };
+}

package/src/native/network/create-fetch.ts

@@ -0,0 +1,237 @@
+import { isString, logger, Deferred, isObject, hostEmitter } from '@jolibox/common';
+import { reportNetworkAPI } from './report';
+import { RequestFrom } from './types';
+import { FetchResponse, FetchOptions } from './types';
+import { invokeNative, onNative } from '@/native/bootstrap/bridge';
+import { AnyFunction } from '@jolibox/types';
+import { reportError } from '@/common/report/errors/report';
+import { createAPIError } from '@/common/report/errors';
+
+type Fetch = <T>(
+  url: string,
+  innerOptions?: FetchOptions & {
+    baseUrl?: string;
+  }
+) => Promise<{
+  url: string;
+  timeout?: number;
+  method: string;
+  response: FetchResponse<T>;
+}>;
+
+type PublicFetch = <T>(
+  url: string,
+  options?: FetchOptions
+) => Promise<{
+  url: string;
+  timeout?: number;
+  method: string;
+  response: FetchResponse<T>;
+}>;
+
+const processUrl = (url: string, options?: FetchOptions & { baseUrl?: string }): string => {
+  if (/^https?:\/\//.test(url)) {
+    return url;
+  }
+  const query = options?.query;
+  const searchParams = new URLSearchParams(query);
+  const search = searchParams.toString();
+  return options?.baseUrl
+    ? `${options.baseUrl}${url}${search ? `?${search}` : ''}`
+    : `${url}${search ? `?${search}` : ''}`;
+};
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'public';
+  }
+): PublicFetch;
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'inner';
+    defaultHeaders?: Record<string, string>;
+  }
+): Fetch;
+
+export function createFetch(
+  createMethod: 'createRequestTaskSync',
+  operateMethod: 'operateRequestTaskSync',
+  options?: {
+    baseUrl?: string;
+    type: 'inner' | 'public';
+    defaultHeaders?: Record<string, string>;
+  }
+) {
+  const promiseMap = new Map<string, { resolve: AnyFunction; reject: AnyFunction }>();
+  const baseUrl = options?.baseUrl ?? `https://api.jolibox.com`;
+  const type = options?.type ?? 'public';
+  const defaultHeaders = options?.defaultHeaders ?? {};
+
+  onNative('onRequestTaskStateChange', (res) => {
+    if (typeof res.requestTaskId !== 'string') return;
+    const task = promiseMap.get(res.requestTaskId);
+    if (!task) return;
+
+    if (res.state === 'success') {
+      const { requestTaskId, state, ...rest } = res;
+      task.resolve(rest);
+      promiseMap.delete(requestTaskId);
+    } else if (res.state === 'fail') {
+      const { requestTaskId, state, ...rest } = res;
+      task.reject(rest);
+      promiseMap.delete(requestTaskId);
+    } else {
+      logger.warn(`onRequestTaskStateChange unknown event`, res);
+    }
+  });
+
+  hostEmitter.on('onLoginComplete', ({ isLogin, token }) => {
+    if (isLogin && token) {
+      defaultHeaders['X-JOLI-TOKEN'] = token;
+    }
+  });
+
+  const fetch: Fetch = async (originUrl, options = {}) => {
+    const startTime = Date.now();
+
+    const url = processUrl(originUrl, { ...options, baseUrl });
+    const {
+      method = 'GET',
+      responseType = 'text',
+      dataType = 'json',
+      timeout,
+      enableCache = false,
+      appendHostCookie = true
+    } = options;
+
+    const header = Object.assign({ 'content-type': 'application/json' }, defaultHeaders, options.header);
+
+    // modify params
+    const params = {
+      url,
+      method,
+      header,
+      enableCache,
+      responseType,
+      appendHostCookie
+    } as any;
+
+    if (method == 'POST' || method == 'PUT') {
+      const data = normalizeData(options.data, header['content-type']);
+      params['data'] = data;
+    }
+
+    if (timeout) {
+      Object.assign(params, { timeout });
+    }
+    const {
+      data: { requestTaskId }
+    } = invokeNative(createMethod, params);
+
+    if (typeof requestTaskId !== 'string') {
+      throw createAPIError({
+        code: -1,
+        msg: 'requestTaskId is not a string'
+      });
+    }
+
+    const report = (state: 'success' | 'fail', response: unknown) => {
+      reportNetworkAPI('request', url, {
+        state,
+        startTime,
+        endTime: Date.now(),
+        params,
+        response: response as FetchResponse,
+        requestId: requestTaskId,
+        requestFrom: type == 'public' ? RequestFrom.PUBLIC : RequestFrom.INNER
+      });
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { resolve, reject, promise } = new Deferred<FetchResponse<any>>();
+    promiseMap.set(requestTaskId, { resolve, reject });
+
+    try {
+      const res = await promise;
+      report('success', res);
+      let { data } = res;
+      if (dataType === 'json' && typeof data === 'string') {
+        data = parseJSON(data);
+      }
+      return {
+        url,
+        timeout,
+        method,
+        response: { ...res, data }
+      };
+    } catch (err: unknown) {
+      const error = err as {
+        errMsg?: string;
+        errNo?: number;
+        errorType?: string;
+        errorCode?: number;
+        prefetchDetail?: number;
+        isPrefetch?: boolean;
+      };
+
+      if (isObject(error)) {
+        const { errMsg, prefetchDetail, isPrefetch, errNo } = error;
+        if (isString(errMsg)) {
+          report('fail', {
+            errMsg,
+            isPrefetch,
+            prefetchDetail
+          });
+          reportError(createAPIError({ code: -1, msg: errMsg }, { errNo: errNo as number, errMsg }));
+        }
+      }
+      throw err;
+    }
+  };
+
+  return fetch;
+}
+
+export function parseJSON(data: string) {
+  try {
+    //
+    // 之所以要 trim, 是因为有些开发者不是按照标准的 application/json 返回的, 而是使用 text/html 返回
+    // 而 text/html 返回的时候前后有可能出现 &#65279 字符, 导致 JSON.parse 失败
+    return JSON.parse(data.trim());
+  } catch {
+    return data;
+  }
+}
+
+export function normalizeData(data: unknown, contentType = 'application/json') {
+  const type = contentType.toLowerCase();
+
+  if (data === undefined) {
+    return '';
+  }
+
+  if (typeof data === 'string' || data instanceof ArrayBuffer) {
+    return data;
+  }
+
+  if (type.includes('application/x-www-form-urlencoded')) {
+    return JSON.stringify(data as JSON);
+  }
+
+  if (type.includes('application/json')) {
+    return JSON.stringify(data);
+  }
+
+  if (typeof data === 'object') {
+    return JSON.stringify(data);
+  }
+
+  return String(data);
+}

package/src/native/network/index.ts

@@ -0,0 +1,15 @@
+import { xUserAgent } from '@/common/http/xua';
+import { createFetch } from './create-fetch';
+import { context } from '@/common/context';
+
+/**
+ * inner fetch
+ */
+export const innerFetch = createFetch('createRequestTaskSync', 'operateRequestTaskSync', {
+  type: 'inner',
+  baseUrl: context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com',
+  defaultHeaders: {
+    'x-user-agent': xUserAgent(),
+    'X-JOLI-TOKEN': context.hostUserInfo?.token ?? ''
+  }
+});

package/src/native/network/report.ts

@@ -0,0 +1,58 @@
+import { FetchResponse, DownLoadResponse, UpLoadResponse, RequestFrom } from './types';
+
+import { track } from '@/native/report';
+
+type NetworkResponse = FetchResponse | DownLoadResponse | UpLoadResponse;
+interface ReportNetworkOptions {
+  state: 'success' | 'fail';
+  params: Record<string, unknown>;
+  response: NetworkResponse;
+  startTime: number;
+  endTime: number;
+  callbackStartTime?: number;
+  callbackEndTime?: number;
+  requestId?: string;
+  requestFrom?: RequestFrom; // 区分内部/外部请求
+}
+
+interface RequestResultData {
+  duration: number;
+  request_type: string;
+  url: string;
+  result: string;
+  error_msg: unknown;
+  socket_reused?: number; // reused
+  joli_request_number?: number; // 请求序号
+  request_from?: string; // 'public' / 'inner'
+}
+// report max count = 10
+let requestNumber = 0;
+const requestNumberLimit = 10;
+
+export function reportNetworkAPI(method: string, url: string, options: ReportNetworkOptions): void {
+  const { response, startTime, endTime, requestFrom } = options;
+  const { errMsg = '', profile = {} } = response as FetchResponse;
+
+  const duration = endTime - startTime;
+
+  const trackData: RequestResultData = {
+    duration,
+    request_type: method,
+    url: url.split('?')[0],
+    result: options.state,
+    error_msg: options.state === 'fail' ? errMsg : '',
+    socket_reused: profile.socketReused ? 1 : 0,
+    request_from: requestFrom
+  };
+
+  // 用户请求上报最多10个，内部的全部上报
+  if (
+    (requestFrom === RequestFrom.PUBLIC && requestNumber < requestNumberLimit) ||
+    requestFrom === RequestFrom.INNER
+  ) {
+    trackData.joli_request_number = requestNumber++;
+    setTimeout(() => {
+      track('joliboxNetRequestResult', trackData as unknown as Record<string, unknown>);
+    }, 500);
+  }
+}