@jolibox/sdk 1.1.2 → 1.1.4-beta.0

package/src/index.ts

@@ -0,0 +1,29 @@
+/** load implement at very first time */
+/**
+ * global error catch
+ */
+import './errors';
+import './loader';
+
+/**
+ * @public Jolibox JS SDK Entry
+ */
+import { getSystemInfo, getSystemInfoSync, canIUse } from './api';
+import { RuntimeSDK } from './sdks/runtime';
+import { LifecycleSDK } from './sdks/lifecycle';
+import { StorageSDK } from './sdks/storage';
+import { JoliboxAds } from './sdks/ads';
+import { KeyboardSDK } from './sdks/keyboard';
+
+export class JoliboxSDK {
+  readonly runtime = new RuntimeSDK();
+  readonly ads = new JoliboxAds();
+  readonly lifecycle = new LifecycleSDK();
+  readonly storage = new StorageSDK();
+  readonly keyboard = new KeyboardSDK();
+
+  //global API
+  getSystemInfo = getSystemInfo.bind(this);
+  getSystemInfoSync = getSystemInfoSync.bind(this);
+  canIUse = canIUse.bind(this);
+}

package/src/loader/h5.ts

@@ -0,0 +1,175 @@
+import { compare, major } from './version';
+import { track, trackPerformance } from '../utils/report';
+import { InternalJSModuleEvalError, InternalJSModuleFetchError } from '@jolibox/common';
+import { getBoostrapModuleUrl, getImplementModuleUrl } from './index';
+import { reportError } from '../errors';
+
+const LOCAL_STORE_KEY = 'jolibox-sdk-loadermeta';
+interface LocalStoreMeta {
+  bootstrap_version?: string;
+  bootstrap_script?: string;
+
+  implement_version?: string;
+  implement_script?: string;
+  timestamp?: number;
+}
+
+const CURRENT_VERSION_STORE: LocalStoreMeta = JSON.parse(localStorage.getItem(LOCAL_STORE_KEY) ?? '{}');
+const now = Date.now();
+
+const expired = (now: number, prev: number) =>
+  now > prev && Math.abs(now - prev) / (1000 * 60 * 60 * 24) >= 7;
+
+const isLegalScript = (str: string) =>
+  !/^(Failed to fetch version|Couldn't find the requested file)/.test(str);
+async function fetchCurrentRemoteScript() {
+  // TODO: adjust host
+  const path = `https://stg-api.jolibox.com/api/fe-configs/js-sdk/version_metadata`;
+  try {
+    const response = await fetch(path, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    const { implement_version, bootstrap_version }: LocalStoreMeta = await response.json();
+    let currentStore: LocalStoreMeta = { ...CURRENT_VERSION_STORE, timestamp: now };
+    if (bootstrap_version) {
+      const { bootstrap_version: currentLocalBootstrapVersion } = CURRENT_VERSION_STORE;
+      if (currentLocalBootstrapVersion && compare(currentLocalBootstrapVersion, bootstrap_version)) {
+        // no-op
+      } else {
+        const currentBootstrapModuleStr = await (await fetch(getBoostrapModuleUrl(bootstrap_version))).text();
+        isLegalScript(currentBootstrapModuleStr) &&
+          (currentStore = {
+            ...currentStore,
+            bootstrap_version,
+            bootstrap_script: currentBootstrapModuleStr
+          });
+      }
+    }
+    if (implement_version) {
+      const { implement_version: currentLocalImpelementVersion } = CURRENT_VERSION_STORE;
+      if (currentLocalImpelementVersion && compare(currentLocalImpelementVersion, implement_version)) {
+        // no-op
+      } else {
+        const currentImplementModuleStr = await (
+          await fetch(getImplementModuleUrl(implement_version))
+        ).text();
+        isLegalScript(currentImplementModuleStr) &&
+          (currentStore = {
+            ...currentStore,
+            implement_version,
+            implement_script: currentImplementModuleStr
+          });
+      }
+    }
+
+    localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(currentStore));
+  } catch (error) {
+    console.warn('Failed to fetch loader metadata: ', error);
+  }
+}
+
+export const createLoadImplement = (params: {
+  currentVersion: string;
+  currentMajorVersion: number;
+  bootstrapUrl: string;
+  implementUrl: string;
+}) => {
+  const { currentMajorVersion, currentVersion, bootstrapUrl, implementUrl } = params;
+  function fetchCurrentBootstrapModule():
+    | { script: string; type: 'localscript' | 'fetch_from_cdn' }
+    | undefined {
+    const { bootstrap_version, bootstrap_script, timestamp } = CURRENT_VERSION_STORE;
+    if (bootstrap_version && bootstrap_script && timestamp) {
+      /**
+       * if current SDK major version is same && remote version is larget than current, use latest version
+       */
+      if (
+        !expired(now, timestamp) &&
+        major(bootstrap_version) == currentMajorVersion &&
+        compare(bootstrap_version, currentVersion) > 0
+      ) {
+        return { script: bootstrap_script, type: 'localscript' };
+      }
+    }
+    try {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', bootstrapUrl, false);
+      xhr.send();
+      return { script: xhr.responseText, type: 'fetch_from_cdn' };
+    } catch (e) {
+      reportError(new InternalJSModuleFetchError(`Bootstrap module faile to fetch ${e}`));
+    }
+  }
+
+  function loadBootstrapModule() {
+    const startToLoad = Date.now();
+    track('js_sdk_begin', {
+      t: startToLoad
+    });
+
+    const { script: currentBootstrapModule, type } = fetchCurrentBootstrapModule() ?? {};
+    if (currentBootstrapModule) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.innerHTML = currentBootstrapModule;
+      document.head.appendChild(script);
+      trackPerformance('bootstrapModuleLoaded', Date.now() - startToLoad, { type });
+    }
+  }
+
+  function evalLocalJSModule(code: string) {
+    const evalJS = async (code: string) => {
+      try {
+        const blob = new Blob([code], { type: 'application/javascript' });
+        const blobUrl = URL.createObjectURL(blob);
+        const module = await import(blobUrl);
+        URL.revokeObjectURL(blobUrl);
+        return module;
+      } catch (error) {
+        reportError(new InternalJSModuleEvalError(`implement module evaluate error in h5:${error} `));
+      }
+    };
+    evalJS(code);
+  }
+
+  // load remote impletation
+  function loadRemoteImplementation() {
+    const implStartLoad = Date.now();
+    const { implement_script, implement_version, timestamp } = CURRENT_VERSION_STORE;
+    if (implement_script && implement_version && timestamp) {
+      /**
+       * if current SDK major version is same && remote version is larget than current, use latest version
+       */
+      if (
+        !expired(now, timestamp) &&
+        major(implement_version) == currentMajorVersion &&
+        compare(implement_version, currentVersion) > 0
+      ) {
+        evalLocalJSModule(implement_script);
+        trackPerformance('implementModuleLoaded', Date.now() - implStartLoad, { type: 'loadscript' });
+        return;
+      }
+    }
+    const asyncScript = document.createElement('script');
+    asyncScript.type = 'module';
+    asyncScript.crossOrigin = 'anonymous';
+    asyncScript.src = implementUrl;
+    asyncScript.onload = () => {
+      trackPerformance('bootstrapModuleLoaded', Date.now() - implStartLoad, { type: 'fetch_from_cdn' });
+    };
+    document.head.appendChild(asyncScript);
+  }
+
+  return () => {
+    try {
+      loadBootstrapModule();
+      loadRemoteImplementation();
+      fetchCurrentRemoteScript();
+    } catch (e) {
+      reportError(new InternalJSModuleEvalError(`module evaluate error: ${e}`));
+    }
+  };
+};

package/src/loader/index.ts

@@ -0,0 +1,65 @@
+import { major } from './version';
+
+import { createLoadImplement as createH5LoadImplement } from './h5';
+import { createLoadImplement as createNativeLoadImplement } from './native';
+//TODO: temp
+const BUILD_VERSION = '1.0.0';
+const currentVersion = BUILD_VERSION;
+const currentMajorVersion = major(currentVersion);
+
+/**
+ * Due to security restrictions on iOS, dynamically loading script tags is not supported.
+ * Therefore, a loadScript method needs to be injected on the client side to implement evalJavascriptFun.
+ * Link：https://mabin004.github.io/2018/06/25/iOS%E5%BA%94%E7%94%A8%E6%B2%99%E7%AE%B1/
+ */
+
+declare global {
+  interface Window {
+    //   WebBridge: AndroidBridge | null;
+    webkit?: unknown;
+  }
+}
+const loadScript = window.webkit
+  ? (params: { path: string }) => {
+      return window.prompt('loadScript', JSON.stringify(params));
+    }
+  : undefined;
+
+const isNative = typeof loadScript !== 'undefined';
+
+/**
+ * Do not expose the logic of dynamically retrieving URL information in the config,
+ * as this logic needs to remain self-contained within the SDK.
+ */
+export const getBoostrapModuleUrl = (version: string | number) =>
+  `http://cdn.jsdelivr.net/npm/@jolibox/bootstrap@${version}/dist/index.js`;
+export const getImplementModuleUrl = (version: string | number) =>
+  `http://cdn.jsdelivr.net/npm/@jolibox/implementation@${version}/dist/index.js`;
+/**
+ * localTest
+ */
+// export const getBoostrapModuleUrl = (version: string | number) => `http://localhost:3000/get-bootstrap`;
+// export const getImplementModuleUrl = (version: string | number) => `http://localhost:3000/get-implement`;
+const IMMEDIATE_SCRIPT_URL = getBoostrapModuleUrl(currentMajorVersion);
+const REMOTE_IMPLEMENT_URL = getImplementModuleUrl(currentMajorVersion);
+
+/**
+ * load entry
+ */
+function loadImplement(): void {
+  if (isNative) {
+    createNativeLoadImplement(loadScript!, {
+      bootstrapUrl: IMMEDIATE_SCRIPT_URL,
+      implementUrl: REMOTE_IMPLEMENT_URL
+    })();
+  } else {
+    createH5LoadImplement({
+      bootstrapUrl: IMMEDIATE_SCRIPT_URL,
+      implementUrl: REMOTE_IMPLEMENT_URL,
+      currentMajorVersion,
+      currentVersion
+    })();
+  }
+}
+
+loadImplement();

package/src/loader/native.ts

@@ -0,0 +1,62 @@
+import { track, trackPerformance } from '@/utils/report';
+import { InternalJSModuleEvalError } from '@jolibox/common';
+import { reportError } from '../errors';
+
+export const createLoadImplement = (
+  loadScript: (params: { path: string }) => string | null,
+  params: {
+    bootstrapUrl: string;
+    implementUrl: string;
+  }
+) => {
+  const tryLoadScript = (url: string): string => {
+    const funStr = loadScript!({ path: url });
+    if (!funStr) {
+      throw `module ${url} load failed ${funStr}`;
+    }
+    return funStr;
+  };
+
+  function evalLocalJSModule(code: string) {
+    const evalJS = async (code: string) => {
+      try {
+        const blob = new Blob([code], { type: 'application/javascript' });
+        const blobUrl = URL.createObjectURL(blob);
+        const module = await import(blobUrl);
+        URL.revokeObjectURL(blobUrl);
+        return module;
+      } catch (error) {
+        reportError(new InternalJSModuleEvalError(`implement module evaluate error in native:${error} `));
+      }
+    };
+    evalJS(code);
+  }
+  return () => {
+    try {
+      const startToLoad = Date.now();
+      track('js_sdk_begin', {
+        t: startToLoad
+      });
+      /**
+       * bootstrap module
+       */
+      const bootstrapModuleStr = tryLoadScript(params.bootstrapUrl);
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.innerHTML = bootstrapModuleStr;
+      document.head.appendChild(script);
+      trackPerformance('implementModuleLoaded', Date.now() - startToLoad, { type: 'native' });
+
+      /**
+       * implement module
+       */
+      const implModuleStr = tryLoadScript(params.implementUrl);
+      evalLocalJSModule(implModuleStr);
+      trackPerformance('bootstrapModuleLoaded', Date.now() - startToLoad, { type: 'native' });
+    } catch (e) {
+      console.error(`native load script error: ${e}`);
+      // TODO
+      reportError(new InternalJSModuleEvalError(`module load failed ${e}`));
+    }
+  };
+};

package/src/loader/version.ts

@@ -0,0 +1,44 @@
+const splitSemver = (
+  version: string
+): {
+  major: string;
+  minor: string;
+  patch: string;
+  prerelease?: string;
+  build?: string;
+} => {
+  const prerelease = version.split('-')[1] as string | undefined;
+  if (prerelease) {
+    version = version.replace(`-${prerelease}`, '');
+  }
+
+  const build = version.split('+')[1] as string | undefined;
+  if (build) {
+    version = version.replace(`+${build}`, '');
+  }
+
+  const splitted = version.split('.').slice(0, 3);
+  const [major, minor, patch] = [splitted[0] ?? '0', splitted[1] ?? '0', splitted[2] ?? '0'];
+  return { major, minor, patch, prerelease, build };
+};
+
+export const major = (version: string): number => parseInt(splitSemver(version).major, 10);
+
+export const compare = (v1: string, v2: string): -1 | 0 | 1 => {
+  const { major: major1, minor: minor1, patch: patch1 } = splitSemver(v1);
+  const { major: major2, minor: minor2, patch: patch2 } = splitSemver(v2);
+
+  if (major1 !== major2) {
+    return major1 > major2 ? 1 : -1;
+  }
+
+  if (minor1 !== minor2) {
+    return minor1 > minor2 ? 1 : -1;
+  }
+
+  if (patch1 !== patch2) {
+    return patch1 > patch2 ? 1 : -1;
+  }
+
+  return 0;
+};

package/src/sdks/ads.ts

@@ -0,0 +1,32 @@
+import type {
+  IAdBreakParams,
+  IAdConfigParams,
+  IAdsInitParams,
+  IAdUnitParams,
+  JoliboxAds as IJoliboxAds
+} from '@jolibox/types/dist/sdks/ads';
+import { BaseSDK, BaseSDKEventMap } from './sdk';
+
+type JoliboxAdsEventMap = BaseSDKEventMap
+
+export class JoliboxAds extends BaseSDK<JoliboxAdsEventMap> implements IJoliboxAds {
+  constructor() {
+    super();
+  }
+
+  init = (config?: IAdsInitParams) => {
+    this.commands.executeCommand('AdsSDK.init', config);
+  };
+
+  adConfig = (params: IAdConfigParams) => {
+    this.commands.executeCommand('AdsSDK.adConfig', params);
+  };
+
+  adBreak = (params: IAdBreakParams) => {
+    this.commands.executeCommand('AdsSDK.adBreak', params);
+  };
+
+  adUnit = (params: IAdUnitParams) => {
+    this.commands.executeCommand('AdsSDK.adUnit', params);
+  };
+}

package/src/sdks/keyboard.ts

@@ -0,0 +1,50 @@
+import { BaseSDK } from './sdk';
+import { Keyboard, ResponseType } from '@jolibox/types';
+
+export class KeyboardSDK extends BaseSDK implements Keyboard {
+  /**
+   * 显示键盘
+   * @param params
+   * @returns
+   */
+  showKeyboard(params: { defaultValue?: string; maxLength?: number; multiple?: boolean }) {
+    const canUse = this.canUse('keyboard.showKeyboard');
+    if (!canUse) {
+      return {
+        code: 'FAILURE' as ResponseType,
+        message: `[Jolibox SDK] keyboard.showKeyboard is not supported in this platform`
+      };
+    }
+
+    this.commands.executeCommand('KeyboardSDK.showKeyboard', params);
+  }
+  /**
+   * 更新键盘
+   * @param value
+   * @returns
+   */
+  updateKeyboard(value: string) {
+    const canUse = this.canUse('keyboard.updateKeyboard');
+    if (!canUse) {
+      return {
+        code: 'FAILURE' as ResponseType,
+        message: `[Jolibox SDK] keyboard.updateKeyboard is not supported in this platform`
+      };
+    }
+    this.commands.executeCommand('KeyboardSDK.updateKeyboard', value);
+  }
+  /**
+   * 隐藏键盘
+   * @returns
+   */
+  hideKeyboard() {
+    const canUse = this.canUse('keyboard.hideKeyboard');
+    if (!canUse) {
+      return {
+        code: 'FAILURE' as ResponseType,
+        message: `[Jolibox SDK] keyboard.hideKeyboard is not supported in this platform`
+      };
+    }
+    this.commands.executeCommand('KeyboardSDK.hideKeyboard');
+  }
+}

package/src/sdks/lifecycle.ts

@@ -0,0 +1,32 @@
+import { Env, Lifecycle } from '@jolibox/types';
+import { BaseSDK, BaseSDKEventMap } from './sdk';
+
+const LIFECYCLE_ON_READY = 'LifecycleSDK.onReady';
+interface LifecycleSDKEventMap extends BaseSDKEventMap {
+  [LIFECYCLE_ON_READY]: Env['hostUserInfo'] | undefined;
+}
+
+export class LifecycleSDK extends BaseSDK<LifecycleSDKEventMap> implements Lifecycle {
+  constructor() {
+    super();
+  }
+
+  onReady(callback: (info?: Env['hostUserInfo']) => void) {
+    const wrappedOnReady = (info?: Env['hostUserInfo']) => {
+      callback.call(this, info);
+      this.triggerEvent(LIFECYCLE_ON_READY, info);
+    };
+    this.commands.executeCommand('LifecycleSDK.onReady', wrappedOnReady.bind(this));
+  }
+
+  exitGame(params: { onBeforeExit: () => void }) {
+    this.commands.executeCommand('LifecycleSDK.exitGame', params.onBeforeExit);
+  }
+
+  onGameHide(params: () => void) {
+    this.commands.executeCommand('LifecycleSDK.onGameHide', params.bind(this));
+  }
+  onGameShow(params: () => void) {
+    this.commands.executeCommand('LifecycleSDK.onGameShow', params.bind(this));
+  }
+}

package/src/sdks/runtime.ts

@@ -0,0 +1,3 @@
+//eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+export const RuntimeSDK = window.JoliboxRuntime;

package/src/sdks/sdk.ts

@@ -0,0 +1,22 @@
+import { canIUse } from '@/api';
+import { createCommands, EventEmitter } from '@jolibox/common';
+export interface BaseSDKEventMap {
+  _baseSDKMarker?: never;
+}
+
+export abstract class BaseSDK<T = BaseSDKEventMap> {
+  readonly commands = createCommands();
+  readonly _emitter = new EventEmitter();
+
+  addEventListener<K extends keyof T & string>(event: K, callback: (data: T[K]) => void) {
+    this._emitter.on(event, (...args) => callback(args[0] as T[K]));
+  }
+
+  triggerEvent<K extends keyof T & string>(event: K, params: T[K]) {
+    this._emitter.emit(event, params);
+  }
+
+  canUse(command: string) {
+    return canIUse(command);
+  }
+}

package/src/sdks/storage.ts

@@ -0,0 +1,35 @@
+import { BaseSDK } from './sdk';
+import { StandardResponse, Storage } from '@jolibox/types';
+
+export class StorageSDK extends BaseSDK implements Storage {
+  async getItem(key: string) {
+    const result = await this.commands.executeCommand('StorageSDK.getItem', key);
+    return result;
+  }
+
+  async setItem(key: string, value: number | string | boolean): Promise<StandardResponse<void>> {
+    if (key.length > 128) {
+      return {
+        code: 'PARAMETER_ERROR',
+        message: '[SDK] cloud storage setItem error: length of key should be less than 128'
+      };
+    }
+
+    const valueToStore = typeof value == 'string' ? value : String(value);
+    if (key.length + valueToStore.length > 1024) {
+      return {
+        code: 'PARAMETER_ERROR',
+        message: '[SDK] cloud storage setItem error: length of key and value should be less than 1024'
+      };
+    }
+    return await this.commands.executeCommand('StorageSDK.setItem', key, value);
+  }
+
+  async removeItem(key: string) {
+    return this.commands.executeCommand('StorageSDK.removeItem', key);
+  }
+
+  async clear() {
+    return this.commands.executeCommand('StorageSDK.clear');
+  }
+}

package/src/utils/can-i-use.ts

@@ -0,0 +1,24 @@
+import { canIUseConfig } from '@jolibox/common';
+
+export function getCanIUseConfig(platform: 'h5' | 'native', key: string) {
+  return canIUseConfig.config[platform]?.[key];
+}
+
+export function get<T extends Record<string, any>, P extends string | string[], Default = undefined>(
+  obj: T,
+  path: P,
+  defaultValue?: Default
+): unknown {
+  const pathArray = Array.isArray(path) ? path : (path as string).replace(/\[(\d+)\]/g, '.$1').split('.');
+
+  let result: any = obj;
+  for (const key of pathArray) {
+    if (result && (typeof result === 'object' || Array.isArray(result))) {
+      result = result[key];
+    } else {
+      return defaultValue as any;
+    }
+  }
+
+  return result === undefined ? defaultValue : result;
+}

package/src/utils/report.ts

@@ -0,0 +1,23 @@
+import { createCommands } from '@jolibox/common';
+import { TrackEvent, PerformanceType } from '@jolibox/types';
+
+const commands = createCommands();
+
+export const track = (event: TrackEvent, info: Record<string, unknown>) => {
+  commands.executeCommand('ReportSDK.traceSystem', {
+    event,
+    info
+  });
+};
+
+export const trackPerformance = (
+  event: PerformanceType,
+  duration: number,
+  extra?: Record<string, unknown>
+) => {
+  commands.executeCommand('ReportSDK.traceSystemTimeline', {
+    event,
+    duration,
+    extra
+  });
+};