-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Upgrade dependencies #1997
Upgrade dependencies #1997
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## alpha #1997 +/- ##
=======================================
Coverage 84.24% 84.24%
=======================================
Files 142 142
Lines 2279 2279
Branches 607 607
=======================================
Hits 1920 1920
Misses 282 282
Partials 77 77 ☔ View full report in Codecov by Sentry. |
storybook build 시에 bezier-icons를 제대로 해석하지 못하는 문제가 있는 거 같은데, 레퍼런스도 없고 좀처럼 해결이 잘 안됨. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
storybook build 시에 bezier-icons를 제대로 해석하지 못하는 문제가 있는 거 같은데, 레퍼런스도 없고 좀처럼 해결이 잘 안됨.
#1998 이 pr 에서 해결 되는 것으로 생각하면될까요?
아뇨.. 아직 잘 안돼서 디버그해보고 있습니다 😭 react-docgen or react-docgen-typescript 옵션을 켜면 문제가 발생하네요. |
|
소결론: storybook 관련 패키지를 7.5.3 버전으로 fix하고, 나머지 업그레이드 진행하면 문제 없어 보임. |
postcss-preset-env builtin
b834eb3
to
b43fb0a
Compare
Chromatic Report🚀 Congratulations! Your build was successful! |
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> Install [Syncpack](https://jamiemason.github.io/syncpack/) ## Details <!-- Please elaborate description of the changes --> - #1688, #1997 과 같이 패키지 버전에 의해서 에러가 발생하는 경우를 방지 & 문서화하기 위해 Syncpack을 설치했습니다. - 특정 의존성의 버전을 고정(pin)하거나 Semver 기호를 변경할 수 있습니다. 자세한 내용은 공식문서를 참고해주세요. - `yarn lint` 커맨드에 `syncpack lint` 과정을 포함하여 의도하지 않은 의존성 버전이 설치될 경우 에러를 뱉도록 설정했습니다. - 기본적으로 로컬 패키지는 캐럿(`^`)등의 기호를 사용하지 않도록 설정되어있습니다. npm publish된 패키지에선 문제가 없으나, eslint, tsconfig처럼 로컬에서만 사용하는 패키지에서는 semver를 지정할 경우 npm repository에서 패키지를 검색해서 문제가 발생합니다. 기존처럼 workspace protocol을 사용하도록 설정했습니다. - 스토리북 addon-styling의 경우에 버전 정책이 달라 무시하도록 설정했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://jamiemason.github.io/syncpack/
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - Fixes #2080 ## Summary <!-- Please brief explanation of the changes made --> - Storybook 버전을 8로 올리고 breaking change에 대응합니다. ## Details <!-- Please elaborate description of the changes --> - deprecated 된 옵션과 add-on 을 최신화했습니다. 자세한 내용은 커밋에 있는 링크를 참조해주시면 됩니다. - storybook 7.6 버전에서 발생했던 이슈(https://github.com/channel-io/bezier-react/pull/1997#issuecomment-1964040154)가 더이상 발생하지 않는 것을 확인했습니다. - .syncpackrc에 있는 storybook 관련 설정들을 제거합니다. - 8버전에서 제공하는 visual test 는 개발환경에서만 지원한다고 합니다. 개발환경에서 테스트는 좀 해봤는데 빌드하면서 원인을 파악하기 어려운 에러가 떠서 끝가지 동작을 확인할 수는 없었습니다. visual test는 CI에서 확인 가능해서 개발환경에서 지원하는 것의 우선순위는 낮춰도 되지 않을까 하는 생각입니다. -> chromatic 에 문의중 -> 답변 온대로 @mdx-js/loader를 설치해도 안되서 이슈를 확인해봤더니 chromaui/addon-visual-tests#275 chromatic 자체 이슈인 것같습니다. 당분간은 개발 환경에서 visual test 기능은 활용할 수 없을 것 같습니다. - 머지되면 #2308 는 클로즈하면 될것같습니다 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800
Self Checklist
Summary
Rollup(#1674), eslint, typescript(채널 lint 설정이 최신화되지 않음)을 제외한 라이브러리들을 최신 버전으로 업데이트합니다.
Details
postcss-preset-env
에 의해 cascade layer,:has
등의 모던 CSS 기능들이 빌드 과정에서 제거되는 현상이 발생했습니다. 가장 좁은 브라우저 커버리지를 가지는:has
기준으로 브라우저 리스트를 별도 파일로 분리하고, 주석을 추가했습니다.yarn dedupe
를 실행하여 중복 패키지 버전을 최소화하도록 했습니다.Breaking change? (Yes/No)
No
References
https://storybook.js.org/blog/optimize-storybook-7-6/ : 스토리북 빌드 시 babel대신 swc를 사용하도록 하는 설정을 추가