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

lijinke666 · 2023-10-16T11:55:04Z

👀 PR includes

✨ Feature

New feature

📝 Description

BREAKING CHANGE: 支持 React 18, 参考 https://zh-hans.react.dev/blog/2022/03/08/react-18-upgrade-guide

🖼️ Screenshot

Before	After
❌	✅

🔗 Related issue link

ref #2270

🔍 Self-Check before the merge

Add or update relevant docs.
Add or update relevant demos.
Add or update test case.
Add or update relevant TypeScript definitions.

兼容 React 16 和 React 18, tooltip 异步挂载 BREAKING CHANGE: 支持 React 18

vercel · 2023-10-16T11:55:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
antvis-s2	❌ Failed (Inspect)			Oct 31, 2023 9:24am

github-actions · 2023-10-16T11:55:41Z

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

lijinke666 · 2023-10-17T08:25:37Z

.npmrc

@@ -1,3 +1,4 @@
 npm_config_legacy_peer_deps=true
 side-effects-cache=false
 prefer-workspace-packages=true
+auto-install-peers=false


pnpm/pnpm#6649 (comment)

CI 升级到 pnpm 8 后安装依赖报错的解决方案

lijinke666 · 2023-10-17T08:28:30Z

packages/s2-core/src/sheet-type/spread-sheet.ts

-      }, 50);
-    } else {
-      this.tooltip.show?.({
+    return new Promise((resolve) => {


React 集成 BaseTooltip 后, 由于挂载方式变成了 createRoot().render() 异步的方式, 所以在 core 要做对应的适配, 不然在 s2.showTooltip() 后拿不到最新的 dom

github-actions · 2023-10-17T08:30:15Z

Size Change: +1.22 kB (0%)

Total Size: 321 kB

Filename	Size	Change
`./packages/s2-core/dist/index.min.js`	227 kB	+946 B (0%)
`./packages/s2-react/dist/index.min.js`	67.2 kB	+270 B (0%)
`./packages/s2-react/dist/style.min.css`	3.92 kB	+4 B (0%)
`./packages/s2-vue/dist/style.min.css`	1.91 kB	-4 B (0%)

ℹ️ View Unchanged

Filename	Size
`./packages/s2-core/dist/style.min.css`	401 B
`./packages/s2-vue/dist/index.min.js`	20.2 kB

_{compressed-size-action}

lijinke666 · 2023-10-17T08:32:46Z

packages/s2-react/src/components/sheets/base-sheet/index.tsx

@@ -23,32 +23,30 @@ export const BaseSheet: React.FC<SheetComponentsProps> = React.memo((props) => {
  }, [props.themeCfg?.name]);

  return (
-    <React.StrictMode>


TODO: React 18 StrictMode 在开发模式下会强制 render 两次, 需要兼容

lijinke666 · 2023-10-17T08:34:51Z

packages/s2-react/src/components/tooltip/custom-tooltip.tsx

    }

-    ReactDOM.render(
-      this.isMobileType() ? (
+    this.root ??= createRoot(this.container!);


参考 reactwg/react-18#5

18 render 后取消了回调, 通过 useEffect 做后续操作, 通过 ref 传递的方式, 以便于 createRoot().render() 后能知道 tooltip 的 container 已挂载

lijinke666 · 2023-10-17T08:36:01Z

packages/s2-react/src/components/tooltip/index.tsx

@@ -22,7 +22,7 @@ import type { TooltipRenderProps } from './interface';
 import './index.less';

 export const TooltipComponent = (props: TooltipRenderProps) => {
-  const { data, options, content, cell } = props;
+  const { data, options, content, cell, onMounted } = props;


解决 createRoot().render() 渲染后触发回调的问题

reactwg/react-18#5

lijinke666 · 2023-10-18T08:31:22Z

jest.config.base.js

+        jsc: {
+          transform: {
+            // https://swc.rs/docs/configuration/compilation#jsctransformusedefineforclassfields
+            useDefineForClassFields: false,


解决 @swc/jest test 编译问题, 默认会代理所有 class field, 导致部分单测挂了

codecov · 2023-10-18T11:25:27Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ecdc9c8) 75.77% compared to head (dc4d327) 77.77%.
Report is 207 commits behind head on next.

❗ Current head dc4d327 differs from pull request most recent head 916fbb0. Consider uploading reports for the commit 916fbb0 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #2373      +/-   ##
==========================================
+ Coverage   75.77%   77.77%   +2.00%     
==========================================
  Files         257      268      +11     
  Lines       11994    12007      +13     
  Branches     2464     2432      -32     
==========================================
+ Hits         9088     9338     +250     
+ Misses       1398     1168     -230     
+ Partials     1508     1501       -7

Files	Coverage Δ
packages/s2-core/src/cell/base-cell.ts	`83.95% <ø> (-0.26%)`	⬇️
packages/s2-core/src/cell/col-cell.ts	`89.47% <ø> (+2.70%)`	⬆️
packages/s2-core/src/cell/corner-cell.ts	`82.00% <ø> (-0.70%)`	⬇️
packages/s2-core/src/cell/data-cell.ts	`76.62% <ø> (+9.95%)`	⬆️
packages/s2-core/src/cell/header-cell.ts	`64.13% <ø> (-1.69%)`	⬇️
packages/s2-core/src/cell/index.ts	`100.00% <ø> (ø)`
packages/s2-core/src/cell/merged-cell.ts	`91.66% <ø> (+54.16%)`	⬆️
packages/s2-core/src/cell/row-cell.ts	`71.42% <ø> (+0.62%)`	⬆️
packages/s2-core/src/cell/series-number-cell.ts	`90.90% <ø> (-2.20%)`	⬇️
packages/s2-core/src/cell/table-col-cell.ts	`86.27% <ø> (+5.14%)`	⬆️
... and 96 more

... and 169 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

lijinke666 · 2023-10-31T08:18:06Z

packages/s2-react/src/components/tooltip/custom-tooltip.tsx

-    if (this.container) {
-      ReactDOM.unmountComponentAtNode(this.container);
+  private unmount() {
+    if (this.isLegacyReactVersion && this.container!) {


参考 https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts#L69-L106

lijinke666 · 2023-11-22T13:57:22Z

🎉 This PR is included in version @antv/s2-v2.0.0-next.9 🎉

The release is available on:

Your semantic-release bot 📦🚀

lijinke666 · 2023-11-22T13:59:26Z

🎉 This PR is included in version @antv/s2-react-v2.0.0-next.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

lijinke666 · 2023-11-22T14:01:09Z

🎉 This PR is included in version @antv/s2-vue-v2.0.0-next.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat: 支持 React 18

d552997

兼容 React 16 和 React 18, tooltip 异步挂载 BREAKING CHANGE: 支持 React 18

github-actions bot added the next 2.0-next 版本的问题 label Oct 16, 2023

github-actions bot assigned lijinke666 Oct 16, 2023

github-actions bot requested review from GaoFuhong, lcx-seima, serializedowen, stone-lyl and wjgogogo October 16, 2023 11:55

github-actions bot added 🚨 test failed 单元测试挂了 🚨 lint failed 静态检查失败 labels Oct 16, 2023

vercel bot had a problem deploying to Preview October 16, 2023 12:00 Failure

fix: 修复 lint 和 test

ccb4d8b

vercel bot had a problem deploying to Preview October 17, 2023 03:43 Failure

fix: 修复打包问题

8b49e77

vercel bot had a problem deploying to Preview October 17, 2023 08:00 Failure

chore: pnpm v8

7c8938c

vercel bot had a problem deploying to Preview October 17, 2023 08:11 Failure

github-actions bot removed the 🚨 lint failed 静态检查失败 label Oct 17, 2023

chore: autoInstallPeers pnpm v8

0d9d797

vercel bot had a problem deploying to Preview October 17, 2023 08:23 Failure

lijinke666 commented Oct 17, 2023

View reviewed changes

test: 修复 swc/jest 导致的单测问题

f02b731

lijinke666 commented Oct 18, 2023

View reviewed changes

github-actions bot removed the 🚨 lint failed 静态检查失败 label Oct 18, 2023

test: 更新 react 快照

dc4d327

vercel bot had a problem deploying to Preview October 18, 2023 11:17 Failure

github-actions bot removed the 🚨 test failed 单元测试挂了 label Oct 18, 2023

lijinke666 changed the title ~~[WIP] feat: 支持 React 18~~ feat: 支持 React 18 Oct 18, 2023

github-actions bot added the pr(feature) new feature label Oct 18, 2023

feat: 兼容 React 16/17

5199623

vercel bot had a problem deploying to Preview October 31, 2023 08:03 Failure

github-actions bot added the 🚨 test failed 单元测试挂了 label Oct 31, 2023

lijinke666 commented Oct 31, 2023

View reviewed changes

test: 更新 react 快照

6ccaa4f

vercel bot had a problem deploying to Preview October 31, 2023 08:30 Failure

lijinke666 changed the title ~~feat: 支持 React 18~~ feat: 支持 React 18 (兼容 React 16/17) Oct 31, 2023

test: 更新 react 快照

615dd3d

vercel bot had a problem deploying to Preview October 31, 2023 09:10 Failure

wjgogogo approved these changes Oct 31, 2023

View reviewed changes

test: 更新 react 快照

916fbb0

vercel bot had a problem deploying to Preview October 31, 2023 09:24 Failure

github-actions bot removed the 🚨 test failed 单元测试挂了 label Oct 31, 2023

lijinke666 merged commit 25ce9b0 into next Oct 31, 2023
4 checks passed

lijinke666 deleted the feat-react-18 branch October 31, 2023 09:51

lijinke666 added the released on @next label Nov 22, 2023

This was referenced Nov 23, 2023

fix: 修复 React 18 StrictMode 同时挂载两个表格的问题 #2432

Merged

🙏期望@antv/s2-react能兼容react18 #1518

Closed

🙏 支持 React 18 #1902

Closed

🐛S2-React不支持umi4(react-18) #1598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lijinke666 commented Oct 16, 2023 •

edited

Loading

vercel bot commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023

github-actions bot commented Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023

lijinke666 Oct 18, 2023 •

edited

Loading

codecov bot commented Oct 18, 2023 •

edited

Loading

lijinke666 Oct 31, 2023

lijinke666 commented Nov 22, 2023

lijinke666 commented Nov 22, 2023

lijinke666 commented Nov 22, 2023

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

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

Conversation

lijinke666 commented Oct 16, 2023 • edited Loading

👀 PR includes

📝 Description

🖼️ Screenshot

🔗 Related issue link

🔍 Self-Check before the merge

vercel bot commented Oct 16, 2023 • edited Loading

github-actions bot commented Oct 16, 2023 • edited Loading

lijinke666 Oct 17, 2023 • edited Loading

Choose a reason for hiding this comment

lijinke666 Oct 17, 2023

Choose a reason for hiding this comment

github-actions bot commented Oct 17, 2023 • edited Loading

lijinke666 Oct 17, 2023 • edited Loading

Choose a reason for hiding this comment

lijinke666 Oct 17, 2023 • edited Loading

Choose a reason for hiding this comment

lijinke666 Oct 17, 2023

Choose a reason for hiding this comment

lijinke666 Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

codecov bot commented Oct 18, 2023 • edited Loading

Codecov Report

lijinke666 Oct 31, 2023

Choose a reason for hiding this comment

lijinke666 commented Nov 22, 2023

lijinke666 commented Nov 22, 2023

lijinke666 commented Nov 22, 2023

lijinke666 commented Oct 16, 2023 •

edited

Loading

vercel bot commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

github-actions bot commented Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

lijinke666 Oct 17, 2023 •

edited

Loading

lijinke666 Oct 18, 2023 •

edited

Loading

codecov bot commented Oct 18, 2023 •

edited

Loading