Merge pull request #123 from HuolalaTech/feat/mp-sys

Feat/mp sys 小程序系统信息面板

packages/page-spy-alipay/src/index.ts

@@ -1,8 +1,8 @@
 import PageSpy, {
   setMPSDK,
-  utilAPI,
   Client,
   SocketStoreBase,
+  platformAPI,
 } from '@huolala-tech/page-spy-mp-base';
 import { SpyClient } from '@huolala-tech/page-spy-types';
 
@@ -13,23 +13,23 @@ declare const my: any;
 setMPSDK(my);
 
 // alipay toxic storage api...
-utilAPI.getStorage = (key: string) => {
+platformAPI.getStorageSync = (key: string) => {
   const res = my.getStorageSync({ key });
   if (res.success) {
     return res.data;
   }
   return undefined;
 };
 
-utilAPI.setStorage = (key: string, value: any) => {
+platformAPI.setStorageSync = (key: string, value: any) => {
   return my.setStorageSync({ key, data: value });
 };
 
-utilAPI.removeStorage = (key) => {
+platformAPI.removeStorageSync = (key) => {
   return my.removeStorageSync({ key });
 };
 
-utilAPI.showActionSheet = (params) => {
+platformAPI.showActionSheet = (params) => {
   return my.showActionSheet({
     ...params,
     items: params.itemList,
@@ -41,16 +41,27 @@ utilAPI.showActionSheet = (params) => {
   });
 };
 
+// TODO 个人小程序不支持该 api.. 先不管
+platformAPI.setClipboardData = (params) => {
+  return my.setClipboard({
+    text: params.data,
+    ...params,
+  });
+};
+
 const info = my.getSystemInfoSync();
 
-PageSpy.client = new Client({
-  sdk: 'mp-alipay',
-  osType: info.platform.toLowerCase() as SpyClient.OS,
-  browserType: 'mp-alipay',
-  osVersion: info.system,
-  browserVersion: info.version,
-  sdkVersion: PKG_VERSION,
-});
+PageSpy.client = new Client(
+  {
+    sdk: 'mp-alipay',
+    osType: info.platform.toLowerCase() as SpyClient.OS,
+    browserType: 'mp-alipay',
+    osVersion: info.system,
+    browserVersion: info.version,
+    sdkVersion: PKG_VERSION,
+  },
+  info,
+);
 
 SocketStoreBase.messageFilters.push((data) => {
   return data.data;

packages/page-spy-base/src/client.ts

@@ -14,6 +14,8 @@ export class Client {
       sdk: 'unknown',
       sdkVersion: '0.0.0',
     },
+    // the raw info from getSystemInfoSync or similar api, will be sent by system plugin
+    public rawInfo?: Record<string, any>,
   ) {}
 
   plugins: string[] = [];

packages/page-spy-mp-base/src/api/index.ts

@@ -2,8 +2,9 @@ import type { SpyMP } from '@huolala-tech/page-spy-types';
 import { getRandomId } from '@huolala-tech/page-spy-base/dist/utils';
 import type { Client } from '@huolala-tech/page-spy-base/dist/client';
 
-import { getMPSDK, joinQuery, promisifyMPApi } from '../utils';
+import { joinQuery, promisifyMPApi } from '../utils';
 import { Config } from '../config';
+import { getMPSDK } from '../helpers/mp-api';
 
 interface TResponse<T> {
   code: string;
@@ -52,17 +53,16 @@ export default class Request {
       name: encodeURIComponent(device),
     });
 
-    return promisifyMPApi<{ data: TResponse<TCreateRoom> }>(getMPSDK().request)(
-      {
-        url: `${scheme[0]}${this.base}/api/v1/room/create?${query}`,
-        method: 'POST',
-        sslVerify: enableSSL !== false,
-        data: JSON.stringify({
-          useSecret,
-          secret,
-        }),
-      },
-    ).then(
+    return promisifyMPApi(getMPSDK().request<TResponse<TCreateRoom>>)({
+      url: `${scheme[0]}${this.base}/api/v1/room/create?${query}`,
+      method: 'POST',
+      // uniapp building android native need this option.
+      sslVerify: enableSSL !== false,
+      data: JSON.stringify({
+        useSecret,
+        secret,
+      }),
+    }).then(
       (res) => {
         const { name, address } = res.data?.data || {};
         const roomUrl = this.getRoomUrl(address);
@@ -74,7 +74,7 @@ export default class Request {
       },
       (err) => {
         /* c8 ignore next */
-        throw Error(`Request create room failed: ${err.message}`);
+        throw Error(`Request create room failed: ${err.message || err}`);
       },
     );
   }

packages/page-spy-mp-base/src/helpers/mp-api.ts

@@ -0,0 +1,50 @@
+// Wrap the mp api to smooth the platform differences, for internal usage only.
+// This api can be modified by mp sdk implementor.
+// This api should be passed through PageSpy instance to avoid esm multi-pack.
+
+import { MPSDK } from '../types';
+
+let mpSDK: any;
+
+// the origin mp sdk, used for hacking
+let originMPSDK: any;
+
+if (typeof Proxy !== 'undefined') {
+  mpSDK = new Proxy(
+    {},
+    {
+      get(target, p: string) {
+        if (platformAPI[p]) {
+          return platformAPI[p];
+        }
+        if (originMPSDK[p]) {
+          return originMPSDK[p];
+        } else {
+          console.error('The mp sdk does not support the api:', p);
+        }
+      },
+    },
+  );
+}
+
+// for API compatibility
+// this api can be modified by mp sdk implementor, to smoothy the platform differences.
+export const platformAPI: Record<string, any> = {};
+export const getMPSDK = () => {
+  if (!mpSDK) {
+    throw Error('the mp sdk is not set');
+  }
+  return mpSDK as MPSDK;
+};
+
+export const getOriginMPSDK = () => originMPSDK as MPSDK;
+
+export const setMPSDK = (SDK: MPSDK) => {
+  originMPSDK = SDK;
+  if (typeof Proxy === 'undefined') {
+    mpSDK = {
+      ...SDK,
+      ...platformAPI,
+    };
+  }
+};

packages/page-spy-mp-base/src/helpers/socket.ts

@@ -4,14 +4,14 @@ import {
   SocketWrapper,
 } from '@huolala-tech/page-spy-base/dist/socket-base';
 import { ROOM_SESSION_KEY } from '@huolala-tech/page-spy-base/dist/constants';
-import { getMPSDK, utilAPI } from '../utils';
 import {
   MPSocket,
   SocketOnCloseHandler,
   SocketOnErrorHandler,
   SocketOnMessageHandler,
   SocketOnOpenHandler,
 } from '../types';
+import { getMPSDK } from './mp-api';
 
 export class MPSocketWrapper extends SocketWrapper {
   public socketInstance: MPSocket | null = null;
@@ -94,7 +94,8 @@ export class MPSocketStore extends SocketStoreBase {
   // this is an abstract method of parent class, cannot be static
   /* eslint-disable-next-line */
   onOffline() {
-    utilAPI.removeStorage(ROOM_SESSION_KEY);
+    const mp = getMPSDK();
+    mp.removeStorageSync(ROOM_SESSION_KEY);
   }
 }
 

packages/page-spy-mp-base/src/index.ts

@@ -41,7 +41,7 @@ import Request from './api';
 // import './index.less';
 // eslint-disable-next-line import/order
 import { Config } from './config';
-import { getMPSDK, utilAPI } from './utils';
+import { getMPSDK } from './helpers/mp-api';
 
 type UpdateConfig = {
   title?: string;
@@ -120,7 +120,8 @@ class PageSpy {
   updateConfiguration() {
     const { messageCapacity, useSecret } = this.config.get();
     if (useSecret === true) {
-      const cache = utilAPI.getStorage(ROOM_SESSION_KEY);
+      const mp = getMPSDK();
+      const cache = mp.getStorageSync(ROOM_SESSION_KEY);
       const secret = cache?.secret || getAuthSecret();
       this.config.set('secret', secret);
       psLog.log(`Room Secret: ${secret}`);
@@ -135,7 +136,7 @@ class PageSpy {
   async init() {
     const mp = getMPSDK();
     const config = this.config.get();
-    const roomCache = utilAPI.getStorage(ROOM_SESSION_KEY);
+    const roomCache = mp.getStorageSync(ROOM_SESSION_KEY);
     if (!roomCache || typeof roomCache !== 'object') {
       await this.createNewConnection();
     } else {
@@ -207,7 +208,7 @@ class PageSpy {
       useSecret,
       secret,
     };
-    utilAPI.setStorage(ROOM_SESSION_KEY, roomCache);
+    getMPSDK().setStorageSync(ROOM_SESSION_KEY, roomCache);
   }
 
   triggerPlugins<T extends PageSpyPluginLifecycle>(
@@ -270,17 +271,15 @@ class PageSpy {
       {
         text: 'PageSpy 房间号：' + this.address.slice(0, 4),
         action() {
-          if (mp.setClipboardData) {
-            mp.setClipboardData({
-              data: that.getDebugLink(),
-              success() {
-                mp.showToast({
-                  title: '复制成功',
-                  icon: 'success',
-                });
-              },
-            });
-          }
+          mp.setClipboardData({
+            data: that.getDebugLink(),
+            success() {
+              mp.showToast({
+                title: '复制成功',
+                icon: 'success',
+              });
+            },
+          });
         },
       },
     ];
@@ -309,7 +308,7 @@ class PageSpy {
       }
     });
 
-    utilAPI.showActionSheet({
+    mp.showActionSheet({
       itemColor: '#b67cff',
       itemList: options.map((o) => o.text),
       success(res) {
@@ -386,3 +385,4 @@ export { SocketStoreBase, Client, psLog };
 export * from './types';
 export * from './utils';
 export * from './helpers/socket';
+export * from './helpers/mp-api';

packages/page-spy-mp-base/src/plugins/error.ts

@@ -8,7 +8,7 @@ import type {
   OnInitParams,
 } from '@huolala-tech/page-spy-types/index';
 import socketStore from '../helpers/socket';
-import { getMPSDK } from '../utils';
+import { getMPSDK, getOriginMPSDK } from '../helpers/mp-api';
 
 // TODO this plugin should test on multiple platforms
 export default class ErrorPlugin implements PageSpyPlugin {
@@ -33,7 +33,7 @@ export default class ErrorPlugin implements PageSpyPlugin {
   }
 
   public onReset() {
-    const mp = getMPSDK();
+    const mp = getOriginMPSDK();
     if (mp.canIUse('offError')) {
       mp.offError(this.errorHandler);
     }

packages/page-spy-mp-base/src/plugins/network/proxy/request.ts

@@ -8,9 +8,9 @@ import {
   ReqReadyState,
   toLowerKeys,
 } from '@huolala-tech/page-spy-base/dist/network/common';
-import { getMPSDK } from '../../../utils';
 import MPNetworkProxyBase from './base';
 import { MPNetworkAPI } from '../../../types';
+import { getOriginMPSDK } from '../../../helpers/mp-api';
 
 export default class MPWeixinRequestProxy extends MPNetworkProxyBase {
   public request: MPNetworkAPI['request'] | null = null;
@@ -22,7 +22,7 @@ export default class MPWeixinRequestProxy extends MPNetworkProxyBase {
 
   public reset() {
     if (this.request) {
-      const mp = getMPSDK();
+      const mp = getOriginMPSDK();
       Object.defineProperty(mp, 'request', {
         value: this.request,
         configurable: true,
@@ -34,7 +34,7 @@ export default class MPWeixinRequestProxy extends MPNetworkProxyBase {
 
   public initProxyHandler() {
     const that = this;
-    const mp = getMPSDK();
+    const mp = getOriginMPSDK();
     const originRequest = mp.request;
 
     if (!originRequest) {

packages/page-spy-mp-base/src/plugins/storage.ts

@@ -8,8 +8,8 @@ import type {
   OnInitParams,
 } from '@huolala-tech/page-spy-types';
 import socketStore from '../helpers/socket';
-import { getMPSDK, utilAPI } from '../utils';
 import type { MPStorageAPI, KVList } from '../types';
+import { getMPSDK, getOriginMPSDK } from '../helpers/mp-api';
 
 const descriptor = {
   configurable: true,
@@ -58,7 +58,7 @@ export default class StoragePlugin implements PageSpyPlugin {
   }
 
   public onReset() {
-    const mp = getMPSDK();
+    const mp = getOriginMPSDK();
     Object.entries(StoragePlugin.originFunctions).forEach(([key, fn]) => {
       Object.defineProperty(mp, key, {
         value: fn,
@@ -76,7 +76,7 @@ export default class StoragePlugin implements PageSpyPlugin {
       const data = info.keys.map((key) => {
         return {
           name: key,
-          value: mpDataStringify(utilAPI.getStorage(key)),
+          value: mpDataStringify(mp.getStorageSync(key)),
         };
       });
 
@@ -103,7 +103,7 @@ export default class StoragePlugin implements PageSpyPlugin {
   /* c8 ignore stop */
 
   public initStorageProxy() {
-    const mp = getMPSDK();
+    const mp = getOriginMPSDK();
     const proxyFunctions = [
       'setStorage',
       'setStorageSync',
@@ -180,13 +180,12 @@ export default class StoragePlugin implements PageSpyPlugin {
       },
 
       removeStorageSync: {
-        // in alipay, the param is an object actually, but it works.
-        // TODO: really?
-        value(keyOrObj: string) {
+        value(keyOrObj: string | { key: string }) {
           try {
             const res =
               StoragePlugin.originFunctions!.removeStorageSync(keyOrObj);
-            that.sendRemoveItem(keyOrObj);
+            const key = typeof keyOrObj === 'string' ? keyOrObj : keyOrObj.key;
+            that.sendRemoveItem(key);
             return res;
             /* c8 ignore next 4 */
           } catch (e) {