Skip to content

Comments

chore: replace TinyColor with FastColor across the codebase#52157

Merged
afc163 merged 2 commits intoant-design:featurefrom
aojunhao123:replace-fast-color
Dec 30, 2024
Merged

chore: replace TinyColor with FastColor across the codebase#52157
afc163 merged 2 commits intoant-design:featurefrom
aojunhao123:replace-fast-color

Conversation

@aojunhao123
Copy link
Contributor

@aojunhao123 aojunhao123 commented Dec 28, 2024

🤔 This is a ...

  • 📦 Bundle size optimization

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Language Changelog
🇺🇸 English 📦 Optimize: Replace @ctrl/tinycolor with @ant-design/fast-color to reduce bundle size.
🇨🇳 Chinese 📦 Optimize: 使用 @ant-design/fast-color 替换 @ctrl/tinycolor 以减小打包体积。

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 28, 2024

Preview is ready

@github-actions
Copy link
Contributor

github-actions bot commented Dec 28, 2024

👁 Visual Regression Report for PR #52157 Failed ❌

🎯 Target branch: next (89c1a05)
📖 View Full Report ↗︎

Expected (Branch next) Actual (Current PR) Diff
auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png
auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.png auto-complete-uncertain-category.compact.css-var.png auto-complete-uncertain-category.compact.css-var.png
avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.png
avatar-dynamic.compact.png avatar-dynamic.compact.png avatar-dynamic.compact.css-var.png avatar-dynamic.compact.css-var.png
badge-change.compact.png badge-change.compact.png badge-change.compact.png badge-change.compact.png
badge-change.compact.png badge-change.compact.png badge-change.compact.css-var.png badge-change.compact.css-var.png
button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.png
button-color-variant.compact.png button-color-variant.compact.png button-color-variant.compact.css-var.png button-color-variant.compact.css-var.png

Warning

There are more diffs not shown in the table. Please check the Full Report for details.


Important

There are 314 diffs found in this PR: 🔄 278 changed, 🆕 36 added.
Please check all items:

  • Checked all diffs in the full report
  • Visual diff is acceptable

@petercat-assistant
Copy link

Walkthrough: This pull request replaces the @ctrl/tinycolor library with @ant-design/fast-color across the codebase to optimize bundle size. This change affects various components and styles that previously relied on TinyColor for color manipulation.

Changes:

Files Summary
Multiple files Replaced TinyColor with FastColor for color manipulation.
package.json Updated dependencies to remove @ctrl/tinycolor and add @ant-design/fast-color.

@socket-security
Copy link

socket-security bot commented Dec 28, 2024

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 28, 2024

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52157

commit: 0e5713a

@codecov
Copy link

codecov bot commented Dec 28, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (677622b) to head (0e5713a).
Report is 3 commits behind head on feature.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #52157   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          763       763           
  Lines        13735     13735           
  Branches      3588      3588           
=========================================
  Hits         13735     13735           

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

@aojunhao123 aojunhao123 changed the base branch from next to feature December 28, 2024 12:02
@li-jia-nan li-jia-nan mentioned this pull request Dec 28, 2024
@afc163
Copy link
Member

afc163 commented Dec 30, 2024

size-limit report 📦

Path Size
dist/antd.min.js 443.04 KB (+666 B 🔺)
dist/antd-with-locales.min.js 511.12 KB (+675 B 🔺)

怎么还大了。

@afc163 afc163 merged commit 39d9c1c into ant-design:feature Dec 30, 2024
41 checks passed
@aojunhao123
Copy link
Contributor Author

啊这,负优化??

@yoyo837
Copy link
Contributor

yoyo837 commented Dec 30, 2024

没关系,才600B,把另一个完成后会大幅降低。

Comment on lines 32 to 35
const dotColor = React.useMemo(() => {
const _color = new TinyColor(value).toHex8String();
const _color = new FastColor(value).toHexString();
return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
}, [value]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里转换为 8 位长度的 hex 并且后面有个 ff 结尾判断,改了会导致 #52451 问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants