Implement FeatureProvider
#1309
Conversation
…rsFeature.activated
sungik-choi
added
enhancement
🦋 Changeset detectedLatest commit: dd06191 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
sungik-choi
changed the title
FeatureProviderFeatureProvider
sungik-choi
changed the title
FeatureProviderFeatureProvider
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## next-v1 #1309 +/- ##
===========================================
- Coverage 78.18% 77.69% -0.50%
===========================================
Files 294 300 +6
Lines 3796 3842 +46
Branches 838 842 +4
===========================================
+ Hits 2968 2985 +17
- Misses 545 571 +26
- Partials 283 286 +3
☔ View full report in Codecov by Sentry. |
Chromatic Report🚀 Congratulations! Your build was successful! |
| @@ -29,7 +29,7 @@ interface StatusWrapperProps extends Pick<AvatarProps, 'showBorder' | 'size'> {} | |||
|
|
|||
| function calcStatusGap({ showBorder, size }: StatusWrapperProps) { | |||
| let gap = (size >= AvatarSize.Size72 ? 4 : -2) | |||
| if (showBorder && enableSmoothCorners.current) { | |||
| if (showBorder && SmoothCornersFeature.activated) { | |||
There was a problem hiding this comment.
현재 스타일링 방식으로 React 컨텍스트(피쳐 플래그)에 접근하여 조건을 판단하는 방식은 당장 적용하긴 어렵습니다. 이 PR의 컨텍스트를 간결하게 유지하기 위해서 activated 필드를 퍼블릭으로 열어주고, 추후 컨텍스트에 접근하여 Smooth Corners 기능을 활성화하는 SmoothCornersBox 같은 이름의 재사용 가능한 컴포넌트를 별도로 구현할 예정입니다.
| ) | ||
|
|
||
| // @ts-ignore | ||
| const promise = CSS.paintWorklet.addModule(workletURL) as Promise<void> |
There was a problem hiding this comment.
| ${SmoothCornersFeature.activated && css` | ||
| @supports (background: paint(smooth-corners)) { |
There was a problem hiding this comment.
기존엔 BezierProvider 에서 무조건 Smooth corners 스크립트를 활성화했기 때문에 문제가 없는 코드였습니다. 하지만 이번에 조건부로 활성화할 수 있게 변경되면서 테스트해보았더니, background: paint(smooth-corners) 판별 로직이 실제 모듈이 worklet에 추가되었는지 여부를 판별하지 않고 활성화되는 걸 확인했습니다(mac Chrome 112.0.5615.49)
오동작을 방지하기 위하여 SmoothCornersFeature.activated 플래그를 우선 명시적으로 추가합니다. 위 코멘트에 설명했듯 이 플래그에 직접 접근하는 방식은 컨텍스트의 피쳐 플래그에 접근하는 방식으로 변경할 예정입니다.
| * 🚨 This is an experimental feature! It may not be suitable for use in production. | ||
| * | ||
| * Instead of CSS border-radius, Use *Superellipse* masking using the CSS Houdini API. | ||
| * When enabled, the feature will be applied to components with the `smoothCorners` property set to `true`. |
There was a problem hiding this comment.
SmoothCornersBox 컴포넌트 분리 후, Avatar 컴포넌트에 기본값을 true 로 하는 옵셔널 smoothCorners 속성을 추가할 예정입니다.
sungik-choi
changed the title
FeatureProviderFeatureProvider
| ...flags.reduce((acc, cur) => ({ ...acc, ...cur }), {}), | ||
| })) | ||
| }) | ||
| }, [features]) |
There was a problem hiding this comment.
사용처에서 잘못 사용하면 매 렌더링마다 activateFeatures effect가 트리거될 수 있겠네요.
배열의 reference가 렌더링때마다 바뀔 것 같아요.
There was a problem hiding this comment.
넵 그래서 최대한 루트에 위치시키도록 가이드하고, 되도록이면 추가로 사용처에서 메모이제이션해주는 게 좋을 거 같습니다.
Self Checklist
CODEOWNERSfile.Related Issue
Fixes #1301
Summary
FeatureProvider를 구현합니다.TODO
FeatureFlagContext를 consume하는SmoothCornersBox재사용 가능한 컴포넌트 구현Details
초기엔
BezierProvider에featuresprop을 추가하여 기존 프로바이더에 녹여내는 방식을 고민해봤습니다. 하지만BezierProvider가 현재 채널 데스크 어플리케이션에서 컨텍스트를 중첩하여 테마를 오버라이드하는 방식으로 사용되고 있기 떄문에, 테마와는 큰 관련이 없는 피쳐 플래그에 대한 책임을BezierProvider에 부여하는 건 적절치 못한 방법이라고 판단했습니다.피쳐 플래그에 대한 책임만을 담당하는 별도의 컨텍스트를 두는 방식이 기존 사용처에서 변경은 있으나, tree shaking + 이후 확장성을 고려해봤을 때 적절한 솔루션이라고 판단해 이 방향으로 구현했습니다.
Feature클래스의 인스턴스를 전달하면 해당하는 피쳐를 활성화하는 방식으로 동작합니다.SmoothCorners의 경우, 컨텍스트를 중첩하더라도 스크립트를 계속 등록할 필요는 없기 때문에 싱글턴 + 내부에activated플래그를 두고 조건부 로직을 추가하는 방식으로 초기 스크립트 1회 등록 이후에 추가 오버헤드가 발생하지 않도록 했습니다.Breaking change or not (Yes/No)
Yes
WIP
References