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.

Sign up for GitHub

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

Jump to bottom

Writing code to convert styled import path to styled-components #1782

Closed
Tracked by #1800
sungik-choi opened this issue Dec 8, 2023 · 0 comments · Fixed by #1789
Closed
Tracked by #1800

Writing code to convert styled import path to styled-components #1782

sungik-choi opened this issue Dec 8, 2023 · 0 comments · Fixed by #1789
Assignees
@yangwooseong
Labels
bezier-codemod Issue or PR related to bezier-codemod enhancement Issues or PR related to making existing features better

Comments

@sungik-choi
Copy link
Contributor

Description

styled 함수를 import하는 경로를 @channel.io/bezier-react 에서 styled-components 로 변경하는 마이그레이션 스크립트 작성

Reasons for suggestion

더 이상 bezier-react에서 styled-components에 관련된 모듈을 내보내지 않기 때문에, 기존 styled 관련 함수를 사용하고 있던 사용처는 styled-components에서 직접 사용하도록 마이그레이션되어야 합니다.

Proposed solution

AS-IS

import { styled, Button } from '@channel.io/bezier-react'

TO-BE

import styled from 'styled-components'
import { Button } from '@channel.io/bezier-react'

References

No response
@sungik-choi sungik-choi added the enhancement Issues or PR related to making existing features better label Dec 8, 2023
@yangwooseong yangwooseong self-assigned this Dec 13, 2023
@yangwooseong yangwooseong mentioned this issue Dec 13, 2023
Merged
6 tasks
yangwooseong added a commit that referenced this issue Dec 14, 2023
@yangwooseong
Add codemod for import of styled object (#1789)
920c18b 
<!--
  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 #1782

## Summary
<!-- Please brief explanation of the changes made -->

- #1787 베이스이기 때문에 앞선 pr이
머지되면 rebase 후 오픈 예정입니다.
- `@channel.io/bezier-react`에서 `styled` 객체를 import 하던 것을
`styled-components`에서 import 하는 것으로 변경하도록 하는 codemod 를 추가합니다.

As-is
```tsx
import { styled, Button } from "@channel.io/bezier-react";

export const Wrapper = styled(Button)``;
```

To-be
```tsx
import styled from "styled-components";
import { Button } from "@channel.io/bezier-react";

export const Wrapper = styled(Button)``;
```

## Details
<!-- Please elaborate description of the changes -->

- `styled` 만 import 하고 있는 경우에는 import 문 자체를 없애야 합니다. 이를 위해
`ImportDeclaration.remove()` 함수를 호출하면 뒤에 있는 개행을 제거하는 이슈가 있습니다. ts-morph
레포에 이슈를 남겨둔 상황인데, 원인을 파악하기 못한다면 어플리케이션 쪽에서 대응해야 할 것 같습니다.

### 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 -->

- dsherret/ts-morph#1483
@sungik-choi sungik-choi mentioned this issue Dec 15, 2023
Closed
@yangwooseong yangwooseong added the bezier-codemod Issue or PR related to bezier-codemod label Dec 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yangwooseong yangwooseong

Labels
bezier-codemod Issue or PR related to bezier-codemod enhancement Issues or PR related to making existing features better
Projects
Bezier React
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add codemod for import of styled object yangwooseong/bezier-react
2 participants
@yangwooseong @sungik-choi