feat: support react18 #5046

miracles1919 · 2022-04-08T08:09:38Z

新增 render 方法，支持 legacy 和 concurrent 模式，移植自 rc-util
更新 react、react-dom 版本
更新 testing-library 版本
修复 failed test

发了个 npm 包用来测试 antd-mobile-with-react18

github-actions · 2022-04-08T08:15:58Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-04-08T09:05:22Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

awmleer · 2022-04-09T04:23:15Z

package.json

@@ -48,7 +48,8 @@
    "@types/jest": "^27.4.1",
    "@types/jest-axe": "3.5.3",
    "@types/lodash": "^4.14.180",
-    "@types/react": "^17.0.43",
+    "@types/react": "^17.0.44",


诶这里的 @types/react 咋还是 17

前几天我更新的时候还是 17，这两天才更新的 18.. 😮

github-actions · 2022-04-09T07:06:48Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

src/utils/compatible.ts

awmleer

LGTM

等 antd 先发布吧～它们发完没问题了我再来合并
顺便我也还得抽空再看看 React 18 strict mode 下的适配问题

github-actions · 2022-04-09T09:43:10Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

awmleer

emm…… CI 挂了，看起来还有些组件漏加了 children 定义

miracles1919 · 2022-04-09T10:00:26Z

其他的我晚点在看看 ~

awmleer · 2022-04-09T14:34:45Z

嗯嗯不急～反正还要等 antd

github-actions · 2022-04-09T15:36:55Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-04-09T15:59:15Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

codecov · 2022-04-10T01:44:35Z

Codecov Report

Merging #5046 (1fa57ee) into master (c1cfdde) will increase coverage by 0.14%.
The diff coverage is 73.68%.

❗ Current head 1fa57ee differs from pull request most recent head 5a6eb2d. Consider uploading reports for the commit 5a6eb2d to get more accurate results

@@            Coverage Diff             @@
##           master    #5046      +/-   ##
==========================================
+ Coverage   54.46%   54.60%   +0.14%     
==========================================
  Files         278      279       +1     
  Lines        5795     5857      +62     
  Branches     1349     1392      +43     
==========================================
+ Hits         3156     3198      +42     
- Misses       2476     2497      +21     
+ Partials      163      162       -1

Impacted Files	Coverage Δ
src/components/floating-bubble/floating-bubble.tsx	`0.00% <ø> (ø)`
src/components/pull-to-refresh/pull-to-refresh.tsx	`0.00% <0.00%> (ø)`
src/components/toast/methods.tsx	`0.00% <0.00%> (ø)`
src/utils/render.ts	`79.31% <79.31%> (ø)`
src/components/floating-panel/floating-panel.tsx	`97.01% <100.00%> (ø)`
src/components/picker-view/wheel.tsx	`88.88% <100.00%> (ø)`
src/utils/render-to-body.ts	`100.00% <100.00%> (ø)`
src/components/picker/picker.tsx	`72.13% <0.00%> (-4.96%)`	⬇️
src/components/cascader-view/cascader-view.tsx	`93.22% <0.00%> (-1.61%)`	⬇️
src/components/collapse/collapse.tsx	`87.64% <0.00%> (-0.87%)`	⬇️
... and 19 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c1cfdde...5a6eb2d. Read the comment docs.

github-actions · 2022-04-10T01:44:48Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-04-13T15:06:06Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-04-14T10:06:15Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-04-14T12:02:21Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

awmleer · 2022-05-07T03:48:47Z

话说这个 PR 是不是可以再搞一下了 🤔 antd 已经发布了兼容 React 18 的逻辑

miracles1919 · 2022-05-07T05:39:22Z

ok 下午搞下

github-actions · 2022-05-07T06:50:45Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-05-09T07:59:41Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-05-09T08:01:30Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

github-actions · 2022-05-09T08:11:21Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

awmleer · 2022-05-09T08:15:12Z

src/components/floating-bubble/floating-bubble.tsx

+    // eslint-disable-next-line
+    // @ts-ignore


这个好像不用加 ignore，我删掉之后好像也没有报错

awmleer · 2022-05-09T08:16:11Z

src/components/pull-to-refresh/pull-to-refresh.tsx

@@ -155,7 +155,7 @@ export const PullToRefresh: FC<PullToRefreshProps> = p => {
      axis: 'y',
      target: elementRef,
      enabled: !props.disabled,
-      eventOptions: supportsPassive ? { passive: false } : false,
+      eventOptions: supportsPassive ? { passive: false } : undefined,


这里也是，我这里不改也是正常的

awmleer · 2022-05-09T08:19:07Z

src/components/action-sheet/tests/__snapshots__/action-sheet.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`ActionSheet basic usage 1`] = `
    </div>
    <div
      class="adm-popup-body adm-popup-body-position-bottom"
-      style="transform: translate(0, 92.19667326069148%);"
+      style="transform: translate(0, 68.58969969000708%);"


这里倒是会 test 的时候报错，看起来好像每次运行的值都不一样：

miracles1919 · 2022-05-09T08:21:55Z

之前更新 yarn.lock 的时候，@use-gesture/react 更了一个小版本 10.2.10 -> 10.2.11，重新 install 的话，会有一些 ts 类型错误

eventOptions 我看定义是 eventOptions?: AddEventListenerOptions
useDrag bounds 那里用 ref 也会有类型错误，我就先加了个 ts-ignore

github-actions · 2022-05-09T08:59:51Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

awmleer · 2022-05-10T01:57:25Z

eventOptions 应该是 ts 的 dom 类型定义更新导致的，不过 passive 保险起见还是得兼容一下这种情况：

我改成这样了，还稍微温和一些：

eventOptions: supportsPassive
  ? { passive: false }
  : (false as unknown as AddEventListenerOptions),

awmleer · 2022-05-10T01:59:05Z

floating bubble 的 bounds 我也改成单行里写 any 了，比 ts-ignore 还稍微好一些，感觉这里应该是 use-gesture 的问题，我查了它文档，useDrag 的 bounds 是支持 ref 的：

Drag bounds
Since v10 and for the drag gesture only, bounds can be a React ref or an HTMLElement, in which case the dragged element will be constrained to the element bounds (calculated with getBoundingClientRect).

awmleer

LGTM 总算可以合并了 🎉

github-actions · 2022-05-10T02:03:07Z

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5046.surge.sh

lbyupup · 2022-05-12T05:54:58Z

LGTM 总算可以合并了 🎉
大佬，请问组件还是会报children属性没有，这个得把antd升级到哪个版本可以解决

awmleer · 2022-05-12T07:38:58Z

@lbyupup 看下发布日志哈，里面有写，不确定的话，直接升级到最新版也可以

awmleer reviewed Apr 9, 2022

View reviewed changes

src/utils/compatible.ts Outdated Show resolved Hide resolved

awmleer approved these changes Apr 9, 2022

View reviewed changes

awmleer linked an issue Apr 9, 2022 that may be closed by this pull request

支持 React 18 #5044

Closed

awmleer requested changes Apr 9, 2022

View reviewed changes

miracles1919 force-pushed the feat/react18 branch from c7e7c07 to dd0199e Compare April 9, 2022 15:33

miracles1919 mentioned this pull request Apr 12, 2022

antd-mobile全部组件不存在children属性 #5061

Closed

miracles1919 force-pushed the feat/react18 branch from 53e031f to fd75c6b Compare April 13, 2022 15:01

miracles1919 force-pushed the feat/react18 branch 3 times, most recently from d714ce8 to 5918a41 Compare April 14, 2022 10:02

miracles1919 mentioned this pull request Apr 18, 2022

enhance: compatible for @types/react@18 #5088

Merged

awmleer mentioned this pull request Apr 29, 2022

支持 React 18 #5044

Closed

miracles1919 force-pushed the feat/react18 branch from 376b89c to c6bdcfb Compare May 7, 2022 06:46

miracles1919 added 6 commits May 9, 2022 14:00

chore: upgrade react18

efb5ee0

chore: upgrade @testing-library

c26dc3d

refactor: add render util to support legacy and concurrent render

ca6927c

test: fix failed tests

ab10c96

chore: revert @testing-library/user-event

acbd583

chore: add eslint disable mark

ec920f9

miracles1919 force-pushed the feat/react18 branch from 2cf57fa to 757075a Compare May 9, 2022 06:47

miracles1919 added 2 commits May 9, 2022 15:56

chore: update peerDependencies

7de1dea

test: fix failed tests

af5225a

miracles1919 force-pushed the feat/react18 branch 2 times, most recently from 7e461e3 to c88b689 Compare May 9, 2022 07:57

enhance: useDrag ts error definition

1383f3f

miracles1919 force-pushed the feat/react18 branch from c88b689 to 1383f3f Compare May 9, 2022 08:07

awmleer reviewed May 9, 2022

View reviewed changes

test: fix failed tests

1fa57ee

fix: upgrade some dependencies and fix some ts issues

5a6eb2d

awmleer approved these changes May 10, 2022

View reviewed changes

awmleer merged commit b1dc786 into ant-design:master May 10, 2022

miracles1919 deleted the feat/react18 branch May 20, 2022 03:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support react18 #5046

feat: support react18 #5046

miracles1919 commented Apr 8, 2022 •

edited

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

awmleer Apr 9, 2022

miracles1919 Apr 9, 2022

github-actions bot commented Apr 9, 2022

awmleer left a comment

github-actions bot commented Apr 9, 2022

awmleer left a comment

miracles1919 commented Apr 9, 2022

awmleer commented Apr 9, 2022

github-actions bot commented Apr 9, 2022

github-actions bot commented Apr 9, 2022

codecov bot commented Apr 10, 2022 •

edited

github-actions bot commented Apr 10, 2022

github-actions bot commented Apr 13, 2022

github-actions bot commented Apr 14, 2022

github-actions bot commented Apr 14, 2022

awmleer commented May 7, 2022

miracles1919 commented May 7, 2022

github-actions bot commented May 7, 2022

github-actions bot commented May 9, 2022

github-actions bot commented May 9, 2022

github-actions bot commented May 9, 2022

awmleer May 9, 2022

awmleer May 9, 2022

awmleer May 9, 2022

miracles1919 commented May 9, 2022 •

edited

github-actions bot commented May 9, 2022

awmleer commented May 10, 2022

awmleer commented May 10, 2022 •

edited

awmleer left a comment

github-actions bot commented May 10, 2022

lbyupup commented May 12, 2022

awmleer commented May 12, 2022

feat: support react18 #5046

feat: support react18 #5046

Conversation

miracles1919 commented Apr 8, 2022 • edited

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

awmleer Apr 9, 2022

Choose a reason for hiding this comment

miracles1919 Apr 9, 2022

Choose a reason for hiding this comment

github-actions bot commented Apr 9, 2022

awmleer left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 9, 2022

awmleer left a comment

Choose a reason for hiding this comment

miracles1919 commented Apr 9, 2022

awmleer commented Apr 9, 2022

github-actions bot commented Apr 9, 2022

github-actions bot commented Apr 9, 2022

codecov bot commented Apr 10, 2022 • edited

Codecov Report

github-actions bot commented Apr 10, 2022

github-actions bot commented Apr 13, 2022

github-actions bot commented Apr 14, 2022

github-actions bot commented Apr 14, 2022

awmleer commented May 7, 2022

miracles1919 commented May 7, 2022

github-actions bot commented May 7, 2022

github-actions bot commented May 9, 2022

github-actions bot commented May 9, 2022

github-actions bot commented May 9, 2022

awmleer May 9, 2022

Choose a reason for hiding this comment

awmleer May 9, 2022

Choose a reason for hiding this comment

awmleer May 9, 2022

Choose a reason for hiding this comment

miracles1919 commented May 9, 2022 • edited

github-actions bot commented May 9, 2022

awmleer commented May 10, 2022

awmleer commented May 10, 2022 • edited

awmleer left a comment

Choose a reason for hiding this comment

github-actions bot commented May 10, 2022

lbyupup commented May 12, 2022

awmleer commented May 12, 2022

miracles1919 commented Apr 8, 2022 •

edited

codecov bot commented Apr 10, 2022 •

edited

miracles1919 commented May 9, 2022 •

edited

awmleer commented May 10, 2022 •

edited