feat: add miniprogram sdk (#33)

* feat: add /src/packages/miniprogram directory * tests: divide web / miniprogram / utils * miniprogram feature ok, now fix web capability. temp save * rename exports.miniprogram * update scripts.test command * miniprogram now capable with web debug, ready for integr * final check miniprogram sdk * remove test for miniprogram beta publish * fix registry address * fix object expand campatibility on miniprogram * add miniprogram param on readme * fix enableSSL logic * doc: update title level * feat: update common utils * fix mini removestragesync & add onpageshow reconnect logic * use babel runtime for miniprogram to avoid wx env conflict \n use rollup replace plugin instead of import pkg json to reduce bundle size * 1.5.0-beta.4 * 1.5.0-beta.5 * fix request callback (#30) * add ping pong to check miniprogram offline.\nfix mini-program onShow reconnect * format * format * 1.5.0-beta.6 * 1.5.0-beta.7 * fix PKG_VERSION value * fix 'preventAssignment' warning * add 'WebSocketEvents' type * 1.5.0-beta.8 * temp save * mini unit test temp save * mini unit test temp save * unit test temp save * unit test temp * update types * temp save unit test * unit test temp * temp save unit test * update storage unit test * fix rollup path * fix render.test.ts * update init test * unit test update * fix mini storage refresh * update databases.test.ts * fix jest.config.js * update unit tests * remove instanbul ignore * add comments & cache add timeout & optim reconnect logic --------- Co-authored-by: qikang.yuan <me@qkang.top> Co-authored-by: iceDays <icedayscn@gmail.com>
HuolalaTech · Jan 6, 2024 · 4584bb2 · 4584bb2
1 parent fdb9858
commit 4584bb2
Show file tree

Hide file tree

Showing 98 changed files with 4,919 additions and 1,895 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,5 +14,9 @@ module.exports = {
     'func-names': 'off',
     'no-plusplus': 'off',
     'arrow-body-style': 'off',
+    'max-classes-per-file': 'off',
+    'prefer-template': 'off',
+    'class-methods-use-this': 'off',
+    'no-param-reassign': 'off',
   },
 };
diff --git a/README.md b/README.md
@@ -33,7 +33,9 @@ After the integration, open your project in browser, there should be a widget (r
 
 ## The init parameters
 
-All parameters are optional, here is a description of each property and its default value：
+### Web
+
+For browser, all parameters are optional, here is a description of each property and its default value：
 
 ```ts
 window.$pageSpy = new PageSpy(config?: InitConfig)
@@ -46,20 +48,23 @@ interface InitConfig {
   //   - api: "example.com"
   //   - clientOrigin: "https://example.com"
   // If your service is deployed elsewhere, you can manually specify here to override.
-  api: '';
-  clientOrigin: '';
+  api?: string;
+  clientOrigin?: string;
 
   // "project" is an aggregation of information that can be searched in the room list on the debug side.
-  project: 'default';
+  // default: 'default'
+  project?: string;
 
   // "title" is a user-defined parameter that can be used to distinguish the current debugging client,
   // and the corresponding information is displayed under the "device id" in each debugging connection panel.
-  title: '--';
+  // default: '--'
+  title?: string;
 
   // Indicates whether the SDK will automatically render the "Circle with Logo on White Background"
   // control in the bottom left corner of the client when initiation is complete. If set to false,
   // you can call window.$pageSpy.render() to render it manually.
-  autoRender: true;
+  // default: true
+  autoRender?: boolean;
 
   // Manually specify the scheme of the PageSpy service.
   // This works if the SDK can't correctly analyse the scheme, e.g. if PageSpy's browser plugin
@@ -69,6 +74,39 @@ interface InitConfig {
   //   - Pass boolean value:
   //     - true: the SDK will access the PageSpy service via ["https://", "wss://"].
   //     - false: the SDK will access the PageSpy service via ["http://", "wss://"]
-  enableSSL: null;
+  enableSSL?: boolean | null;
+}
+```
+
+### Mini Program
+
+Except for the `api` parameter, all parameters are optional, here is a description of each property and its default value：
+
+```ts
+const pageSpy = new PageSpy(config?: InitConfig)
+
+interface InitConfig {
+  // Server domain, must be provided。
+  // Example："example.com"
+  api: string;
+
+  // "project" is an aggregation of information that can be searched in the room list on the debug side.
+  // default: 'default'
+  project?: string;
+
+  // "title" is a user-defined parameter that can be used to distinguish the current debugging client,
+  // and the corresponding information is displayed under the "device id" in each debugging connection panel.
+  // default: '--'
+  title?: string;
+
+  // Manually specify the scheme of the PageSpy service.
+  // Note that except for development environment, mini-program requires the scheme to be set to "https", so:
+  //  - By default, pass the value undefined or null, the SDK will parse it to TRUE;
+  //  - true: the SDK will access the PageSpy service via ["https://", "wss://"];
+  //  - false: the SDK will access the PageSpy service via ["http://", "wss://"].
+  enableSSL?: boolean | null;
 }
+
 ```
+
+For more details of mini-program usage, please refer to [Mini-Program Usage](https://github.com/HuolalaTech/page-spy/wiki/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)
diff --git a/README_ZH.md b/README_ZH.md
@@ -32,6 +32,8 @@
 
 ## 实例化参数
 
+### Web
+
 所有的参数都是可选的，下面是各个属性的说明及其默认值：
 
 ```ts
@@ -43,19 +45,22 @@ interface InitConfig {
   //   - api: "example.com"
   //   - clientOrigin: "https://example.com"
   // 如果你的服务部署在别处，就需要在这里手动指定去覆盖。
-  api: '';
-  clientOrigin: '';
+  api?: string;
+  clientOrigin?: string;
 
   // project 作为信息的一种聚合，可以在调试端房间列表进行搜索
-  project: 'default';
+  // 默认值 'default'
+  project?: string;
 
   // title 供用户提供自定义参数，可以用于区分当前调试的客户端
   // 对应的信息显示在每个调试连接面板的「设备id」下方
-  title: '--';
+  // 默认值 '--'
+  title?: string;
 
   // 指示 SDK 初始化完成，是否自动在客户端左下角渲染「圆形白底带 Logo」的控件
   // 如果设置为 false, 可以调用 window.$pageSpy.render() 手动渲染
-  autoRender: true;
+  // 默认值 true
+  autoRender?: boolean;
 
   // 手动指定 PageSpy 服务的 scheme。
   // 这在 SDK 无法正确分析出 scheme 可以使用，例如 PageSpy 的浏览器插件
@@ -65,6 +70,39 @@ interface InitConfig {
   //   - 传递 boolean 值：
   //     - true：SDK 将通过 ["https://", "wss://"] 访问 PageSpy 服务
   //     - false：SDK 将通过 ["http://", "ws://"] 访问 PageSpy 服务
-  enableSSL: null;
+  enableSSL?: boolean | null;
+}
+```
+
+### 小程序
+
+除 `api` 外，其他参数都是可选的。
+
+```ts
+const pageSpy = new PageSpy(config?: InitConfig)
+
+interface InitConfig {
+  // server 地址域名，必填。
+  // 例子："example.com"
+  api: string;
+
+  // project 作为信息的一种聚合，可以在调试端房间列表进行搜索
+  // 默认值 'default'
+  project?: string;
+
+  // title 供用户提供自定义参数，可以用于区分当前调试的客户端
+  // 对应的信息显示在每个调试连接面板的「设备id」下方
+  // 默认值 '--'
+  title?: string;
+
+  // 手动指定 PageSpy 服务的 scheme。
+  // 注意小程序除了开发环境外，强制要求使用 https 和 wss 协议，所以：
+  //  - （默认）传值 undefined 或者 null：自动转换为 TRUE;
+  //  - true：SDK 将通过 ["https://", "wss://"] 访问 PageSpy 服务;
+  //  - false：SDK 将通过 ["http://", "ws://"] 访问 PageSpy 服务;
+  enableSSL?: boolean | null;
 }
+
 ```
+
+小程序更详细的说明请阅读 [小程序使用说明](https://github.com/HuolalaTech/page-spy/wiki/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)
diff --git a/jest.config.js b/jest.config.js
@@ -2,14 +2,49 @@
  * @type {import("ts-jest/dist/types").InitialOptionsTsJest}
  */
 module.exports = {
-  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
   coverageProvider: 'v8',
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  moduleNameMapper: {
-    '^src/(.*)$': '<rootDir>/src/$1',
-    '\\.(css|less|svg|png|jpg)$': '<rootDir>/tests/__mocks__/assets.js',
-    modernizr: '<rootDir>/tests/__mocks__/modernizr.js',
-  },
-  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts', 'jest-canvas-mock'],
+  projects: [
+    {
+      displayName: {
+        name: 'Web',
+        color: '#3080EE',
+      },
+      testMatch: ['<rootDir>/tests/web/**/*.test.ts'],
+      testEnvironment: 'jsdom',
+      preset: 'ts-jest',
+      setupFilesAfterEnv: ['<rootDir>/tests/web/setup.ts', 'jest-canvas-mock'],
+      moduleNameMapper: {
+        '^src/(.*)$': '<rootDir>/src/$1',
+        '^web/(.*)$': '<rootDir>/src/packages/web/$1',
+        '\\.(css|less|svg|png|jpg)$': '<rootDir>/tests/__mocks__/assets.js',
+      },
+    },
+    {
+      displayName: {
+        name: 'Mini Program',
+        color: '#84DC42',
+      },
+      testMatch: ['<rootDir>/tests/miniprogram/**/*.test.ts'],
+      preset: 'ts-jest',
+      setupFilesAfterEnv: ['<rootDir>/tests/miniprogram/setup.ts'],
+      moduleNameMapper: {
+        '^src/(.*)$': '<rootDir>/src/$1',
+        '^miniprogram/(.*)$': '<rootDir>/src/packages/miniprogram/$1',
+        '\\.(css|less|svg|png|jpg)$': '<rootDir>/tests/__mocks__/assets.js',
+      },
+    },
+    {
+      displayName: {
+        name: 'Utils',
+        color: '#FBBF0D',
+      },
+      testMatch: ['<rootDir>/tests/utils/**/*.test.ts'],
+      testEnvironment: 'jsdom',
+      preset: 'ts-jest',
+      moduleNameMapper: {
+        '^src/(.*)$': '<rootDir>/src/$1',
+      },
+    },
+  ],
 };
diff --git a/package.json b/package.json
@@ -1,9 +1,18 @@
 {
   "name": "@huolala-tech/page-spy",
-  "version": "1.4.11",
+  "version": "1.5.0-beta.8",
   "description": "A developer tool for debugging remote web page.",
-  "main": "dist/index.min.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": "./dist/web/index.min.js",
+    "./web": {
+      "import": "./dist/web/esm.min.js",
+      "types": "./dist/types/web.d.ts"
+    },
+    "./miniprogram": {
+      "import": "./dist/miniprogram/esm.min.js",
+      "types": "./dist/types/miniprogram.d.ts"
+    }
+  },
   "license": "MIT",
   "homepage": "https://huolalatech.github.io/page-spy-web/",
   "repository": {
@@ -27,22 +36,25 @@
     "build": "rollup -c",
     "postbuild": "cp -R ./types ./dist",
     "build:watch": "rollup -c -w",
-    "test": "jest",
+    "test": "jest --silent",
+    "jest": "jest",
     "lint": "eslint --ext .js,.ts ./src",
     "lint:fix": "eslint --ext .js,.ts --fix ./src",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,md,json}'",
     "commit": "git-cz",
-    "prepublishOnly": "yarn test --silent && yarn build",
+    "prepublishOnly": "yarn build",
     "release:major": "standard-version --release-as major",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.0",
+    "@huolala-tech/page-spy": "^1.5.0-beta.4",
     "copy-to-clipboard": "^3.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
+    "@babel/plugin-transform-runtime": "^7.23.6",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-typescript": "^7.13.0",
     "@rollup/plugin-alias": "^4.0.3",
@@ -51,6 +63,7 @@
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.5",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",