@jolibox/implement 1.1.4-beta.10

package/src/h5/http/index.ts

@@ -0,0 +1,189 @@
+import { IHttpClient } from '@/common/http';
+import { xUserAgent } from '../../common/http/xua';
+import { context } from '@/common/context';
+
+declare global {
+  interface Window {
+    JoliboxHttpClient: typeof JoliboxHttpClient;
+  }
+}
+
+interface IHttpClientInitParams {
+  baseUrl?: string;
+}
+
+const timeoutFn = (ms: number) => {
+  const ctrl = new AbortController();
+  setTimeout(() => ctrl.abort(), ms);
+  return ctrl.signal;
+};
+
+(AbortSignal as any).timeout ??= timeoutFn;
+
+export class JoliboxHttpClient implements IHttpClient {
+  private baseUrl: string;
+  private xua = xUserAgent();
+
+  private getJoliSource = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('joliSource') ?? null;
+  };
+
+  // private getApiBaseURL = () => {
+  //   const urlParams = new URLSearchParams(window.location.search);
+  //   return urlParams.get('apiBaseURL') ?? null;
+  // };
+
+  constructor(config?: IHttpClientInitParams) {
+    const defaultUrl = context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com';
+    this.baseUrl = config?.baseUrl ?? defaultUrl;
+  }
+
+  async get<T>(
+    path: string,
+    {
+      query,
+      headers,
+      timeout
+    }: {
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    const searchParams = new URLSearchParams(query);
+    const search = searchParams.toString();
+    const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+    const xua = this.xua;
+    const joliSource = this.getJoliSource();
+    headers = Object.assign(
+      {},
+      headers,
+      xua ? { 'x-user-agent': xua } : {},
+      joliSource ? { 'x-joli-source': joliSource } : {}
+    );
+    const response = await fetch(url, {
+      method: 'GET',
+      headers,
+      signal: timeoutFn(timeout ?? 30000)
+    });
+    return (await response.json()) as T;
+  }
+
+  async post<T = any>(
+    path: string,
+    {
+      data,
+      query,
+      headers,
+      timeout
+    }: {
+      data?: any;
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    const searchParams = new URLSearchParams(query);
+    const search = searchParams.toString();
+    const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+    const xua = this.xua;
+    const joliSource = this.getJoliSource();
+    headers = Object.assign(
+      {},
+      headers,
+      { 'Content-Type': 'application/json' },
+      xua ? { 'x-user-agent': xua } : {},
+      joliSource ? { 'x-joli-source': joliSource } : {}
+    );
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(data),
+      signal: timeoutFn(timeout ?? 30000)
+    });
+    const responseContentType = response.headers.get('content-type');
+
+    // return blob
+    if (responseContentType?.includes('application/octet-stream')) {
+      try {
+        return response.blob() as unknown as T;
+      } catch (e) {
+        return (await response.arrayBuffer()) as unknown as T;
+      }
+    }
+
+    // return form data
+    if (
+      responseContentType?.includes('multipart/form-data') ||
+      responseContentType?.includes('application/x-www-form-urlencoded')
+    ) {
+      try {
+        return response.formData() as unknown as T;
+      } catch (e) {
+        return (await response.text()) as unknown as T;
+      }
+    }
+
+    // return json
+    if (responseContentType?.includes('application/json')) {
+      try {
+        return (await response.json()) as T;
+      } catch (e) {
+        return (await response.text()) as unknown as T;
+      }
+    }
+
+    // return text
+    return response as unknown as T;
+  }
+
+  async put<T>(
+    path: string,
+    {
+      data,
+      query,
+      headers
+    }: {
+      data?: any;
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    try {
+      const searchParams = new URLSearchParams(query);
+      const search = searchParams.toString();
+      const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+      const xua = this.xua;
+      const joliSource = this.getJoliSource();
+      headers = Object.assign(
+        {},
+        headers,
+        { 'Content-Type': 'application/json' },
+        xua ? { 'x-user-agent': xua } : {},
+        joliSource ? { 'x-joli-source': joliSource } : {}
+      );
+      const response = await fetch(url, {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify(data ?? {}) // 将数据转换为 JSON 字符串
+      });
+
+      // 检查响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = (await response.json()) as T;
+      return result;
+    } catch (error) {
+      console.error('Error:', error);
+      throw error;
+    }
+  }
+}
+
+window.JoliboxHttpClient = JoliboxHttpClient;
+
+export default JoliboxHttpClient;

package/src/h5/http/utils/__tests__/uuid.test.ts

@@ -0,0 +1,16 @@
+// import { expect, test } from "vitest";
+import { isValidUUIDV4, uuidv4 } from '../../../../common/http/uuid';
+
+describe('uuid', () => {
+  it('test uuid', () => {
+    const uuid = uuidv4();
+    expect(uuid.length).toBe(36);
+    expect(isValidUUIDV4(uuid)).toBe(true);
+  });
+
+  it('isValidUUIDV4', () => {
+    const randomUUIDV4 = '5b1e0b7b-3b3b-4b4b-8b8b-9b9b0b1b2b3b';
+    expect(isValidUUIDV4(randomUUIDV4)).toBe(true);
+    expect(isValidUUIDV4('')).toBe(false);
+  });
+});

package/src/h5/http/utils/__tests__/xua.test.ts

@@ -0,0 +1,27 @@
+// import { expect, test } from 'jest';
+import { xUserAgent, getAppVersion } from '../../../../common/http/xua';
+import { isValidUUIDV4 } from '../../../../common/http/uuid';
+
+describe('xua', () => {
+  it('test xua', () => {
+    // window.__JOLIBOX_LOCAL_SDK_VERSION__ = '1.0.0';
+    const xua = xUserAgent();
+    const deviceInfoRegex = /.* (\(.*\) ).*/;
+    const deviceInfoMatch = xua.match(deviceInfoRegex);
+    const deviceInfo = deviceInfoMatch?.[1] ?? '';
+    const rest = xua.replace(deviceInfo, '');
+    expect(deviceInfo).toBe('(JoliboxSDKPC; UnknownModel; UnknownSystemVersion; en-US) ');
+
+    const [appName, uuidPart, adidPart, versionPart] = rest.split(' ');
+    const uuid = uuidPart.split('/')[1];
+    const adid = adidPart.split('/')[1];
+    const version = versionPart.split('/')[1];
+    expect(appName).toBe('JoliboxWebSDK');
+    expect(uuidPart.startsWith('uuid/')).toBe(true);
+    expect(adidPart.startsWith('adid/')).toBe(true);
+    expect(versionPart.startsWith('version/')).toBe(true);
+    expect(isValidUUIDV4(uuid)).toBe(true);
+    expect(isValidUUIDV4(adid)).toBe(true);
+    expect(version).toBe(getAppVersion());
+  });
+});

package/src/h5/http/utils/index.ts

@@ -0,0 +1,19 @@
+import * as xua from '@/common/http/xua';
+import * as session from './session';
+import * as uuid from '@/common/http/uuid';
+
+declare global {
+  interface Window {
+    JoliboxUtil: typeof JoliboxUtil;
+  }
+}
+
+class JoliboxUtil {
+  static xua = xua;
+  static session = session;
+  static uuid = uuid;
+}
+
+window.JoliboxUtil = JoliboxUtil;
+
+export { JoliboxUtil };

package/src/h5/http/utils/session.ts

@@ -0,0 +1,10 @@
+import { uuidv4 } from '../../../common/http/uuid';
+
+export const getGameSessionId = () => {
+  let sessionId = sessionStorage.getItem('gameSessionId');
+  if (!sessionId) {
+    sessionId = uuidv4();
+    sessionStorage.setItem('gameSessionId', sessionId);
+  }
+  return sessionId;
+};

package/src/h5/report/errors/index.ts

@@ -0,0 +1,40 @@
+/**
+ * h5 错误上报实现
+ */
+import '@/common/report/errors/report/listeners';
+import { BaseError, logger } from '@jolibox/common';
+import { errorReportEmitter } from '@/common/report/errors';
+import { ErrorData } from '@/common/report/errors/report';
+import { IEvent, EventType, EProject } from '@/common/report';
+import { tracker } from '../event-tracker';
+import { context } from '@/common/context';
+
+const doReport = (eventName: string, error: Error | BaseError) => {
+  const extra = {
+    message: error.message,
+    stack: error.stack ?? '',
+    errorType: error.name,
+    source: 0
+  };
+
+  const eventBody: IEvent = {
+    name: eventName,
+    type: EventType.ErrorTrace,
+    location: null,
+    target: null,
+    extra: extra,
+    timestamp: Date.now(),
+    userId: context.hostUserInfo?.uid ?? null
+  };
+
+  tracker.trackEvent(eventBody, EProject.WebSDK);
+};
+
+errorReportEmitter.on('GLOBAL_ERROR', (error, errorData: ErrorData) => {
+  doReport(errorData.tag, error);
+});
+
+errorReportEmitter.on('GLOBAL_USER_ERROR', (error, errorData: ErrorData) => {
+  // TODO: User Error
+  logger.log('UserError', error, errorData);
+});

package/src/h5/report/event-tracker.ts

@@ -0,0 +1,40 @@
+import { context } from '@/common/context';
+import { logger } from '@jolibox/common';
+import { EProject, EventTracker, EventType } from '@/common/report';
+import JoliboxHttpClient from '@/h5/http';
+
+export class H5EventTracker extends EventTracker {
+  private hostToApiMap: Record<string | 'default', { test: string; prod: string }> = {
+    default: {
+      test: 'https://stg-collect.jolibox.com',
+      prod: 'https://collect.jolibox.com'
+    },
+    'oss.jolibox.com': {
+      test: 'https://stg-collect.jolibox.com',
+      prod: 'https://collect.jolibox.com'
+    },
+    'oss.pico-game.com': {
+      test: 'https://stg-collect.pico-game.com',
+      prod: 'https://collect.pico-game.com'
+    }
+  };
+
+  private get apiBaseURL() {
+    const api = this.hostToApiMap[window.location.host] ?? this.hostToApiMap.default;
+    return context.testMode ?? false ? api.test : api.prod;
+  }
+
+  private httpClient = new JoliboxHttpClient({
+    baseUrl: this.apiBaseURL
+  });
+
+  doReport(event: unknown[]): void {
+    this.httpClient.post('/report', {
+      data: event,
+      timeout: 5000
+    });
+    logger.info('Track', event);
+  }
+}
+
+export const tracker = new H5EventTracker();

package/src/h5/report/index.ts

@@ -0,0 +1,56 @@
+import './errors';
+import { createCommands, EventEmitter, isNumber, isObject, isString } from '@jolibox/common';
+import { CommonReportConfig, createTracks, EProject, EventType, IEvent } from '../../common/report';
+import { tracker } from './event-tracker';
+import { H5TaskTracker } from './task-tracker';
+import { context } from '@/common/context';
+export * from '../../common/report/types';
+
+const commands = createCommands();
+
+const commonParams: CommonReportConfig = {
+  type: EProject.WebSDK,
+  platform: 'h5',
+  jssdk_version: context.sdkInfo.jssdkVersion,
+  mp_id: context.mpId,
+  mp_version: context.mpVersion
+};
+
+const { track, trackPerformance } = createTracks((...args) => {
+  const [, data] = args;
+
+  const _data = data as Record<string, unknown>;
+
+  const originExtra = isObject(_data.extra)
+    ? _data.extra
+    : isString(_data.extra)
+    ? JSON.parse(_data.extra)
+    : {};
+  const extra = {
+    ...originExtra,
+    mp_id: (_data.mp_id as string) ?? '',
+    mp_version: (_data.mp_version as string) ?? ''
+  };
+  const eventBody: IEvent = {
+    name: data.tag,
+    type: EventType.System,
+    location: null,
+    target: null,
+    extra: extra,
+    timestamp: Date.now(),
+    userId: context.hostUserInfo?.uid ?? null
+  };
+  tracker.trackEvent(eventBody, EProject.WebSDK);
+}, commonParams);
+export { track, trackPerformance };
+
+commands.registerCommand('ReportSDK.traceSystemTimeline', ({ event, duration }) => {
+  trackPerformance(event, duration);
+});
+
+commands.registerCommand('ReportSDK.traceSystem', ({ event, info }) => {
+  track(event, info);
+});
+
+export const h5TaskEmitter = new EventEmitter<{ visible: [boolean] }>();
+export const taskTracker = new H5TaskTracker(track, h5TaskEmitter);

package/src/h5/report/task-tracker.ts

@@ -0,0 +1,42 @@
+/**
+ * H5任务上报
+ */
+
+import { context } from '@/common/context';
+import { TaskTracker, TaskPoint } from '@/common/report/task-track';
+import { EventEmitter, logger } from '@jolibox/common';
+import JoliboxHttpClient from '../http';
+import type { Track } from '.';
+import type { TrackEvent } from '@jolibox/types';
+
+export class H5TaskTracker extends TaskTracker {
+  private gameId: string;
+  private sessionId: string;
+  private httpClient = new JoliboxHttpClient();
+  private track: Track;
+
+  constructor(track: Track, eventEmitter: EventEmitter<{ visible: [boolean] }>, interval?: number) {
+    super(eventEmitter, interval);
+    this.gameId = context.mpId;
+    this.sessionId = context.sessionId;
+    this.track = track;
+  }
+
+  async reporter(point: TaskPoint): Promise<void> {
+    const { event, params } = point;
+    await this.httpClient.post(`/api/base/app-event`, {
+      data: {
+        eventType: event,
+        gameInfo: {
+          gameId: this.gameId,
+          sessionId: this.sessionId,
+          ...params
+        }
+      }
+    });
+    logger.log('-----task tracker-----', event, params);
+  }
+  tracker(event: TrackEvent, info: Record<string, unknown> | null = null) {
+    this.track(event, info);
+  }
+}

package/src/index.native.ts

@@ -0,0 +1,7 @@
+//TODO: entrance for native
+import { config } from './native/bootstrap';
+
+import './native/api';
+import './native/report';
+
+config();

package/src/index.ts

@@ -0,0 +1,9 @@
+//TODO(DX): H5 entrance
+// internal modules
+import './h5/report';
+//global apis
+import './h5/api';
+import './h5/ads';
+import { config } from './h5/bootstrap';
+
+config();

package/src/native/api/ads.ts

@@ -0,0 +1,52 @@
+import { createCommands, logger } from '@jolibox/common';
+import { createSyncAPI, registerCanIUse } from './base';
+
+const commands = createCommands();
+
+const adInit = createSyncAPI('adInit', {
+  implement: (config) => {
+    logger.log('[JoliboxAdsSDK] adInit', config);
+  }
+});
+
+const adConfig = createSyncAPI('adConfig', {
+  implement: (params) => {
+    logger.log('[JoliboxAdsSDK] adConfig', params);
+  }
+});
+
+const adBreak = createSyncAPI('adBreak', {
+  implement: (params) => {
+    logger.log('[JoliboxAdsSDK] adBreak', params);
+  }
+});
+
+const adUnit = createSyncAPI('adUnit', {
+  implement: (params) => {
+    logger.log('[JoliboxAdsSDK] adUnit', params);
+  }
+});
+
+commands.registerCommand('AdsSDK.init', adInit);
+
+commands.registerCommand('AdsSDK.adConfig', adConfig);
+
+commands.registerCommand('AdsSDK.adBreak', adBreak);
+
+commands.registerCommand('AdsSDK.adUnit', adUnit);
+
+registerCanIUse('AdsSDK.init', {
+  version: '1.0.0'
+});
+
+registerCanIUse('AdsSDK.adConfig', {
+  version: '1.0.0'
+});
+
+registerCanIUse('AdsSDK.adBreak', {
+  version: '1.0.0'
+});
+
+registerCanIUse('AdsSDK.adUnit', {
+  version: '1.0.0'
+});

package/src/native/api/base.ts

@@ -0,0 +1,8 @@
+import { registerCanIUseFactory } from '@/common/can-i-use';
+import { track } from '../report';
+import { createAPIFactory } from '@/common/api-factory';
+export const { createAPI, createSyncAPI } = createAPIFactory(track);
+
+export const registerCanIUse = registerCanIUseFactory('native');
+import { t } from '@/common/api-factory/validator';
+export { t };

package/src/native/api/get-system-info.ts

@@ -0,0 +1,44 @@
+import { createCommands } from '@jolibox/common';
+import { createSyncAPI, registerCanIUse } from './base';
+import { invokeNative } from '../bootstrap/bridge';
+
+const commands = createCommands();
+
+const API_ENV = 'env';
+const API_GET_SYSTEM_SYNC = 'getSystemInfoSync';
+
+const getSystemInfoSync = createSyncAPI(API_GET_SYSTEM_SYNC, {
+  implement: () => {
+    const res = invokeNative('envSync');
+    const { data } = res;
+    return {
+      system: data.deviceInfo.system,
+      platform: data.deviceInfo.platform,
+      version: data.sdkInfo.jssdkVersion,
+      pixelRatio: data.deviceInfo.pixelRatio,
+      language: data.deviceInfo.lang,
+      brand: data.deviceInfo.brand,
+      appName: data.hostInfo?.appName,
+      SDKVersion: data.sdkInfo.jssdkVersion
+    };
+  }
+});
+
+const getEnv = createSyncAPI(API_ENV, {
+  implement: () => {
+    const res = invokeNative('envSync');
+
+    return res?.data ?? undefined;
+  }
+});
+
+commands.registerCommand('API.getSystemInfoSync', getSystemInfoSync);
+commands.registerCommand('API.env', getEnv);
+
+registerCanIUse('env', {
+  version: '1.0.0'
+});
+
+registerCanIUse('getSystemInfoSync', {
+  version: '1.0.0'
+});

package/src/native/api/index.ts

@@ -0,0 +1,8 @@
+import './get-system-info';
+import './lifecycle';
+import './request';
+import './storage';
+import './keyboard';
+import './task';
+import './login';
+import './ads';

package/src/native/api/keyboard.ts

@@ -0,0 +1,75 @@
+import { createCommands } from '@jolibox/common';
+import { invokeNative } from '../bootstrap/bridge';
+import { createSyncAPI, registerCanIUse, t } from './base';
+
+export const showKeyboard = createSyncAPI('showKeyboard', {
+  paramsSchema: t.tuple(
+    t.object({
+      defaultValue: t.string().optional().default(''),
+      multiple: t.boolean().optional().default(false),
+      maxLength: t.unknown().optional().default(100000)
+    })
+  ),
+  implement(params) {
+    const maxLength = Math.floor(Number(params.maxLength) ?? 100000);
+    let { defaultValue } = params;
+
+    if (defaultValue && maxLength) {
+      defaultValue = defaultValue.slice(0, maxLength);
+    }
+
+    invokeNative('showKeyboardSync', { ...params, defaultValue, maxLength });
+  }
+});
+
+registerCanIUse('keyboard.showKeyboard', {
+  version: '1.0.0',
+  properties: {
+    params: {
+      defaultValue: '1.0.0',
+      multiple: '1.0.0',
+      confirmHold: '1.0.0',
+      confirmType: '1.0.0',
+      maxLength: '1.0.0'
+    }
+  },
+  success: {
+    errMsg: '1.0.0'
+  }
+});
+
+export const updateKeyboard = createSyncAPI('updateKeyboard', {
+  paramsSchema: t.tuple(
+    t.object({
+      value: t.string()
+    })
+  ),
+  implement(params) {
+    invokeNative('updateKeyboardSync', params);
+  }
+});
+
+registerCanIUse('keyboard.updateKeyboard', {
+  version: '1.0.0',
+  properties: {
+    params: {
+      value: '1.0.0'
+    }
+  }
+});
+
+export const hideKeyboard = createSyncAPI('hideKeyboard', {
+  implement() {
+    invokeNative('hideKeyboardSync');
+  }
+});
+
+registerCanIUse('keyboard.hideKeyboard', {
+  version: '1.0.0'
+});
+
+const commands = createCommands();
+
+commands.registerCommand('KeyboardSDK.showKeyboard', showKeyboard);
+commands.registerCommand('KeyboardSDK.updateKeyboard', updateKeyboard);
+commands.registerCommand('KeyboardSDK.hideKeyboard', hideKeyboard);