feat: 支持 React 18 (兼容 React 16/17) (#2373)

* feat: 支持 React 18 兼容 React 16 和 React 18, tooltip 异步挂载 BREAKING CHANGE: 支持 React 18 * fix: 修复 lint 和 test * fix: 修复打包问题 * chore: pnpm v8 * chore: autoInstallPeers pnpm v8 * test: 修复 swc/jest 导致的单测问题 * fix: 修复打包问题 * test: 更新 react 快照 * feat: 兼容 React 16/17 * test: 更新 react 快照 * test: 更新 react 快照 * test: 更新 react 快照
antvis · Oct 31, 2023 · 25ce9b0 · 25ce9b0
1 parent 16e05e2
commit 25ce9b0
Show file tree

Hide file tree

Showing 100 changed files with 5,403 additions and 5,994 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,7 +24,7 @@ module.exports = {
   },
   parser: '@typescript-eslint/parser',
   parserOptions: { tsconfigRootDir: __dirname },
-  plugins: ['prettier', '@typescript-eslint', 'import', 'vue'],
+  plugins: ['@typescript-eslint', 'import', 'vue'],
   settings: {
     jest: {
       version: 26,
@@ -131,6 +131,8 @@ module.exports = {
     curly: [2, 'all'],
     'guard-for-in': 0,
     'vue/multi-word-component-names': 0,
+    'vue/no-reserved-component-names': 0,
+    'vue/prefer-import-from-vue': 1,
     'no-nested-ternary': [2],
     'no-restricted-imports': [
       2,

diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml
@@ -23,7 +23,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Use Node.js 16
         uses: actions/setup-node@v3

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -26,7 +26,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3

diff --git a/.markdownlint.json b/.markdownlint.json
@@ -8,6 +8,7 @@
   "no-duplicate-heading": false,
   "link-fragments": false,
   "code-block-style": false,
+  "no-bare-urls": false,
   "MD003": {
     "style": "atx"
   },

diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,4 @@
 npm_config_legacy_peer_deps=true
 side-effects-cache=false
 prefer-workspace-packages=true
+auto-install-peers=false
diff --git a/.stylelintrc b/.stylelintrc
@@ -6,6 +6,7 @@
     "alpha-value-notation": null,
     "color-function-notation": null,
     "import-notation": null,
+    "media-feature-range-notation": "prefix",
     "function-no-unknown": [
       true,
       {

diff --git a/jest.config.base.js b/jest.config.base.js
@@ -16,7 +16,17 @@ module.exports = {
   transformIgnorePatterns: [],
   testRegex: '/__tests__/*.*(-|\\.)spec\\.(tsx|ts|js|vue)?$',
   transform: {
-    '\\.(t|j)sx?$': '@swc/jest',
+    '\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            // https://swc.rs/docs/configuration/compilation#jsctransformusedefineforclassfields
+            useDefineForClassFields: false,
+          },
+        },
+      },
+    ],
     '\\.vue$': 'vue-jest',
     '\\.(less|css)$': 'jest-less-loader',
     '\\.svg$': 'jest-raw-loader',

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "preinstall": "npx only-allow pnpm",
     "bootstrap": "pnpm install",
     "prepare": "husky install",
-    "clean": "pnpm -r --parallel exec rimraf node_modules && rimraf node_modules",
+    "clean": "pnpm -r --parallel exec rm -rf node_modules && rm -rf node_modules",
     "clean:lock-file": "rm -rf pnpm-lock.yaml",
     "update:deps": "pnpm update -i",
     "core:start": "pnpm --filter @antv/s2 start",
@@ -79,92 +79,90 @@
       "eslint --fix"
     ],
     "*.less": [
-      "stylelint --syntax --fix"
+      "stylelint --custom-syntax --fix"
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@microsoft/api-extractor": "^7.33.6",
+    "@babel/core": "^7.23.2",
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
+    "@microsoft/api-extractor": "^7.38.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-terser": "^0.3.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@semantic-release/changelog": "^6.0.1",
+    "@rollup/plugin-alias": "^5.0.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@swc/core": "^1.3.25",
-    "@swc/jest": "^0.2.24",
+    "@swc/core": "^1.3.95",
+    "@swc/jest": "^0.2.29",
     "@types/jest": "^27.5.2",
-    "@types/lodash": "4.14.186",
-    "@types/node": "^18.11.9",
-    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
-    "@vitejs/plugin-react": "^3.0.1",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/vue3-jest": "^29.2.0",
+    "@types/lodash": "4.14.199",
+    "@types/node": "^20.8.6",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
     "bundlesize": "^0.18.1",
-    "case-police": "^0.5.10",
-    "concurrently": "^7.5.0",
+    "case-police": "^0.6.1",
+    "concurrently": "^8.2.2",
     "cpx": "^1.5.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "^25.0.5",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint": "^8.52.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-vue": "^9.17.0",
     "gh-pages": "^3.2.3",
-    "glob": "^8.0.3",
-    "husky": "^8.0.2",
-    "inquirer": "^8.2.0",
-    "inquirer-autocomplete-prompt": "^2.0.0",
+    "glob": "^10.3.10",
+    "husky": "^8.0.3",
+    "inquirer": "^9.2.11",
+    "inquirer-autocomplete-prompt": "^3.0.1",
     "jest": "^26.6.3",
     "jest-electron": "^0.1.12",
     "jest-extended": "^0.11.5",
     "jest-less-loader": "^0.2.0",
     "jest-raw-loader": "^1.0.1",
     "jest-url-loader": "^0.1.0",
-    "less": "^4.1.3",
-    "lint-staged": "^13.0.3",
+    "less": "^4.2.0",
+    "lint-staged": "^15.0.2",
     "lodash-es": "^4.17.21",
-    "markdownlint-cli": "^0.32.2",
+    "markdownlint-cli": "^0.37.0",
     "npm-run-all": "^4.1.5",
-    "ora": "^6.1.2",
-    "postcss": "^8.4.19",
+    "ora": "^7.0.1",
+    "postcss": "^8.4.31",
     "postcss-less": "^6.0.0",
-    "prettier": "2.7.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.70.2",
+    "prettier": "3.0.3",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.1.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "rollup-plugin-visualizer": "^5.6.0",
-    "semantic-release": "^19.0.5",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "semantic-release": "^22.0.6",
     "semantic-release-monorepo": "^7.0.5",
-    "semver": "^7.3.8",
-    "stylelint": "^14.14.1",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-standard": "^29.0.0",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vite-plugin-imp": "^2.3.1",
+    "semver": "^7.5.4",
+    "stylelint": "^15.11.0",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard": "^34.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-imp": "^2.4.0",
     "vue-jest": "^5.0.0-alpha.10"
   },
   "license": "MIT",

diff --git a/packages/s2-core/__tests__/spreadsheet/row-link-spec.ts b/packages/s2-core/__tests__/spreadsheet/row-link-spec.ts
@@ -96,7 +96,7 @@ describe('Row Text Link Tests', () => {
       },
     } as any);
 
-    expect(linkFieldJump).toBeCalledWith({
+    expect(linkFieldJump).toHaveBeenCalledWith({
       field: 'province',
       cellData: rowNode,
       record: {
@@ -122,7 +122,7 @@ describe('Row Text Link Tests', () => {
       },
     } as any);
 
-    expect(linkFieldJump).toBeCalledWith({
+    expect(linkFieldJump).toHaveBeenCalledWith({
       field: 'city',
       cellData: rowNode,
       record: {
@@ -149,7 +149,7 @@ describe('Row Text Link Tests', () => {
       },
     } as any);
 
-    expect(linkFieldJump).toBeCalledWith({
+    expect(linkFieldJump).toHaveBeenCalledWith({
       field: 'province',
       cellData: rowNode,
       record: {

diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.ts
@@ -297,7 +297,7 @@ describe('SpreadSheet Tests', () => {
 
         s2.destroy();
 
-        expect(destroyFn).toBeCalled();
+        expect(destroyFn).toHaveBeenCalled();
         expect(container.querySelectorAll('canvas')).toHaveLength(0);
         expect(document.body.style.overscrollBehavior).toBeFalsy();
       },
@@ -398,7 +398,7 @@ describe('SpreadSheet Tests', () => {
           }, 1000);
         });
 
-        expect(destroyFn).toBeCalled();
+        expect(destroyFn).toHaveBeenCalled();
         expect(container.querySelectorAll('canvas')).toHaveLength(0);
 
         s2.destroy();

diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
@@ -156,11 +156,11 @@ describe('TableSheet normal spec', () => {
       10,
       onScrollFinish,
     );
-    await sleep(30);
+    await sleep(500);
 
-    const firstColCell = s2.facet.getColNodes()[1].belongsCell as any;
+    const firstColCell = s2.facet.getColNodes()[1].belongsCell! as any;
 
-    expect(firstColCell.shouldAddVerticalResizeArea()).toBe(true);
+    expect(firstColCell.shouldAddVerticalResizeArea()).toBeTruthy();
     expect(firstColCell.getVerticalResizeAreaOffset()).toEqual({ x: 81, y: 0 });
 
     s2.destroy();