Skip to content
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

Merged
merged 15 commits into from
Feb 27, 2024
Merged

Upgrade dependencies #1997

merged 15 commits into from
Feb 27, 2024

Conversation

sungik-choi
Copy link
Contributor

@sungik-choi sungik-choi commented Feb 16, 2024

Self Checklist

  • I wrote a PR title in English and added an appropriate label to the PR.
  • I wrote the commit message in English and to follow the Conventional Commits specification.
  • I added the changeset about the changes that needed to be released. (or didn't have to)
  • I wrote or updated documentation related to the changes. (or didn't have to)
  • I wrote or updated tests related to the changes. (or didn't have to)
  • I tested the changes in various browsers. (or didn't have to)
    • Windows: Chrome, Edge, (Optional) Firefox
    • macOS: Chrome, Edge, Safari, (Optional) Firefox

Summary

Rollup(#1674), eslint, typescript(채널 lint 설정이 최신화되지 않음)을 제외한 라이브러리들을 최신 버전으로 업데이트합니다.

Details

  • 업데이트 과정에서 발생한 타입 충돌 등을 해결했습니다. 레퍼런스 및 커밋을 참고해주세요.
  • browserlist를 업데이트했습니다. 정확한 연유는 모르겠으나, 업그레이드 이후 postcss-preset-env 에 의해 cascade layer, :has 등의 모던 CSS 기능들이 빌드 과정에서 제거되는 현상이 발생했습니다. 가장 좁은 브라우저 커버리지를 가지는 :has 기준으로 브라우저 리스트를 별도 파일로 분리하고, 주석을 추가했습니다.
  • yarn dedupe 를 실행하여 중복 패키지 버전을 최소화하도록 했습니다.

Breaking change? (Yes/No)

No

References

@sungik-choi sungik-choi added enhancement Issues or PR related to making existing features better chore:deps Issue or PR related to dependencies labels Feb 16, 2024
@sungik-choi sungik-choi self-assigned this Feb 16, 2024
Copy link

changeset-bot bot commented Feb 16, 2024

⚠️ No Changeset found

Latest commit: f8dabdf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

codecov bot commented Feb 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.24%. Comparing base (59135e0) to head (f8dabdf).

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.
📢 Have feedback on the report? Share it here.

@sungik-choi
Copy link
Contributor Author

storybook build 시에 bezier-icons를 제대로 해석하지 못하는 문제가 있는 거 같은데, 레퍼런스도 없고 좀처럼 해결이 잘 안됨.

Copy link
Collaborator

@yangwooseong yangwooseong left a 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 에서 해결 되는 것으로 생각하면될까요?

@sungik-choi
Copy link
Contributor Author

storybook build 시에 bezier-icons를 제대로 해석하지 못하는 문제가 있는 거 같은데, 레퍼런스도 없고 좀처럼 해결이 잘 안됨.

#1998 이 pr 에서 해결 되는 것으로 생각하면될까요?

아뇨.. 아직 잘 안돼서 디버그해보고 있습니다 😭 react-docgen or react-docgen-typescript 옵션을 켜면 문제가 발생하네요.
선언되어있지 않은 변수에 .__docgen 프로퍼티를 할당하면서 런타임 에러가 발생하는 문제입니다.

@sungik-choi
Copy link
Contributor Author

sungik-choi commented Feb 26, 2024

  • 이것저것 시도해봤는데, 결국 Storybook을 7.6.16 버전으로 올리면서 문제가 발생하는 거 같습니다. 정확히는 webpack 의존성에 뭔가 문제가 생긴 거 같아요. Storybook 7.6.16 버전 설치 이후에 다시 7.4.2 버전으로 롤백하더라도, yarn.lock 파일을 제거하지 않으면 동일한 에러가 발생합니다.
  • alpha HEAD 기준 yarn.lock 파일을 제거하고 다시 yarn install 하면 storybook build에서도 동일한 에러가 발생합니다. ^ 을 사용하기 때문에 내부 의존성에서 7.6.16 버전을 사용하게 되는게 원인으로 보입니다. ^ 을 제거하면 문제가 발생하지 않습니다.
  • alpha HEAD 기준 lock 파일을 보면 내부 스토리북 관련 패키지에서 7.5.3 버전을 사용하는 것으로 보여서 7.4.2 -> 7.5.3 버전으로(^ 없이) 업데이트해보니 문제가 없네요. 7.6 버전에서 뭔가 문제가 발생하는 거 같아요.
  • https://github.com/storybookjs/storybook/releases/tag/v7.6.0 -> react-docgen 옵션을 킨 프로덕션 빌드에서만 문제가 있는 걸 보면 아마 내부 react-docgen 업데이트에 문제가 있지 않나 싶습니다.

We previously announced this move in Storybook 7.5, when the upgrade to react-docgen v6 dramatically improved its handling of TypeScript types. Storybook 7.6 upgrades docgen to v7 (#24530), a new release specifically cut to address Storybook feedback. Huge props to react-docgen maintainer Daniel Tschinder (@danez) for being so responsive and making this happen! (https://storybook.js.org/blog/storybook-7-6/)

@sungik-choi
Copy link
Contributor Author

소결론: storybook 관련 패키지를 7.5.3 버전으로 fix하고, 나머지 업그레이드 진행하면 문제 없어 보임.

Copy link
Contributor

github-actions bot commented Feb 27, 2024

Chromatic Report

🚀 Congratulations! Your build was successful!

@sungik-choi sungik-choi merged commit 959aca2 into channel-io:alpha Feb 27, 2024
11 checks passed
@sungik-choi sungik-choi deleted the bump/upgrade branch February 27, 2024 04:37
@sungik-choi sungik-choi mentioned this pull request Feb 27, 2024
6 tasks
sungik-choi added a commit that referenced this pull request Feb 29, 2024
<!--
  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/
@sungik-choi sungik-choi mentioned this pull request Mar 15, 2024
@yangwooseong yangwooseong mentioned this pull request Jun 27, 2024
6 tasks
yangwooseong referenced this pull request Jul 2, 2024
<!--
  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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore:deps Issue or PR related to dependencies enhancement Issues or PR related to making existing features better
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants