search

channel-io / bezier-react

React components library that implements Bezier design system.
https://main--62bead1508281287d3c94d25.chromatic.com
Apache License 2.0
184 stars 46 forks source link

Tree-shakable한 Icon 컴포넌트 구현 #729

Closed sungik-choi closed 2 years ago

sungik-choi commented 2 years ago

Summary

사용처에서 Tree-shaking이 가능한 Icon 컴포넌트를 구현합니다. 아이콘이 모두 변경되어, 변경사항이 많습니다. 커밋별로 확인해주세요!

Bundle Size Test

CRA에 빌드한 bezier-react 패키지를 설치한 상태에서 테스트했습니다.

AS-IS TO-BE
스크린샷 2022-02-23 오후 12 46 05 스크린샷 2022-02-23 오후 12 46 43
스크린샷 2022-02-23 오후 12 36 33 스크린샷 2022-02-23 오후 12 35 10
Stat size: 474.06KB Stat size: 12.02KB

Details

AS-IS

import { Icon } from '@channel.io/bezier-react' 

<Icon name="all" color="txt-black-dark" />

현재는 사용처에서 name 속성에 아이콘 이름을 넣으면 Icon 컴포넌트 내부에서 generated된 아이콘 객체에서 IconName 을 key로 아이콘을 찾아서 렌더하는 방식으로 구현되어 있습니다. 빌드 타임에 어떤 아이콘이 사용될지 알 수 없기 때문에, Icon 컴포넌트를 사용하면 사용하지 않는 모든 아이콘이 번들링된 파일에 포함됩니다.

TO-BE

import { AllIcon } from '@channel.io/bezier-react' 

<AllIcon color="txt-black-dark" />

IconName 으로 아이콘을 "찾아서" 렌더하는 대신, 사용처에서 아이콘을 "직접" 가져와서 사용합니다. 어떤 아이콘을 사용할 지 빌드 타임에 알 수 있기 때문에, 번들링된 파일에 불필요한 아이콘이 포함되지 않습니다.

아래와 같은 점들을 고려했습니다.

Svgr 라이브러리 업데이트

그 외

Browser Compatibility

OS / Engine 호환성을 반드시 확인해주세요.

채널 데스크에서 빌드 후 테스트했으며 문제 없는 걸 확인했습니다.

Windows

TODO

References

codecov[bot] commented 2 years ago

Codecov Report

Merging #729 (a764958) into next-v1 (99b3472) will increase coverage by 0.06%. The diff coverage is 100.00%.

Impacted file tree graph

@@             Coverage Diff             @@
##           next-v1     #729      +/-   ##
===========================================
+ Coverage    63.57%   63.63%   +0.06%     
===========================================
  Files          170      172       +2     
  Lines         2638     2643       +5     
  Branches       734      734              
===========================================
+ Hits          1677     1682       +5     
  Misses         843      843              
  Partials       118      118
Impacted Files Coverage Δ
src/components/Icon/BaseIcon.tsx 100.00% <100.00%> (ø)
src/components/Icon/createIcon.tsx 100.00% <0.00%> (ø)
src/components/Icon/legacy/LegacyIcon.tsx 75.00% <0.00%> (ø)

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 133e5b8...a764958. Read the comment docs.

dinohan commented 2 years ago

icon이 suffix가 아니라 prefix로 붙는 건 어떤가요? 인텔리센스에 이점이 있을 것 같아서요.

sungik-choi commented 2 years ago

icon이 suffix가 아니라 prefix로 붙는 건 어떤가요? 인텔리센스에 이점이 있을 것 같아서요.

저는 인텔리센스의 이점보다 더 일반적인 네이밍 방식이 더 좋다고 생각했어요.

sungik-choi commented 2 years ago

icon asset이 추가될때마다 수동으로 -icon postfix를 붙혀주어야 하는걸까요?

지금 당장은 그렇고, 추후에 피그마에서 바로 가져온 후 suffix를 붙이는 방식으로 변경해야할 거 같아요

quino0627 commented 2 years ago

icon asset이 추가될때마다 수동으로 -icon postfix를 붙혀주어야 하는걸까요?

지금 당장은 그렇고, 추후에 피그마에서 바로 가져온 후 suffix를 붙이는 방식으로 변경해야할 거 같아요

스크립트로 해결할 수 있을까 싶어 물어봤는데 피그마 직접 연결하는거면 🆗

sungik-choi commented 2 years ago

breaking change인데 바로 마이그레이션할 룸이 있을까요? Icon export name 변경 없이 deprecated로 처리하면 되지 않을까요?

기존 Icon 은 그대로 사용가능해요. LegacyIcon as Icon 으로 export됩니다. 새로 생긴 Icon 은 export되지 않고 createIcon 함수를 통해 개별 아이콘을 생성하는 데만 사용돼요. PR description에 AS-IS, TO-BE 모두 같은 버전입니다.

ch-builder commented 2 years ago

:tada: This PR is included in version 1.0.0-next-v1.99 :tada:

The release is available on:

Your semantic-release bot :package::rocket: