@channel.io/bezier-icons npm package #1366
Conversation
🦋 Changeset detectedLatest commit: c1b237a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Codecov ReportPatch and project coverage have no change.
Additional details and impacted files@@ Coverage Diff @@
## main #1366 +/- ##
=======================================
Coverage 84.23% 84.23%
=======================================
Files 309 309
Lines 3913 3913
Branches 804 804
=======================================
Hits 3296 3296
Misses 546 546
Partials 71 71 ☔ View full report in Codecov by Sentry. |
sungik-choi
force-pushed
the
feat/bezier-icons
branch
from
2e8eb36 to
ec49996
Compare
| /** | ||
| * @type {import('rollup').PluginImpl} | ||
| */ | ||
| function svgBuild(options = {}) { |
There was a problem hiding this comment.
빌드 과정에서 icon generate를 실행합니다. bezier-react에선 내부적으로 아이콘을 참조해야했기 때문에 svg react component를 생성해서 가지고 있어야 했습니다. 아이콘 패키지에선 내부적으로 아이콘을 참조하지 않기 때문에, svg react component를 소스로 가지고 있을 필요가 없습니다.
- svgo 라이브러리를 통해 svg를 최적화하고
- 최적화된 svg를 svgr/core 라이브러리를 통해 svg react component로 변환합니다
- 빌드가 완료된 이후엔 원하는 경로에 svg assets들을 생성합니다. (svg assets을 직접 사용하고자 하는 케이스 지원)
| /** | ||
| * Module resolution is not working well inside the virtual module, so use the alias plugin to resolve the module manually. | ||
| */ | ||
| alias({ | ||
| entries: [{ | ||
| find: config.input.utils, | ||
| replacement: utilBasePath, | ||
| }], | ||
| }), | ||
| babel({ |
There was a problem hiding this comment.
virtual을 통해 엔트리 모듈을 생성했을 때, 내부 utils 모듈을 참조하는 것이 잘 되지 않았습니다. 주석에 적힌대로, alias 플러그인을 통해 직접 path를 resolve하여 해결했습니다.
|
|
||
| const ICONS_OBJECT = 'icons' | ||
|
|
||
| const entryModuleContent = ` |
There was a problem hiding this comment.
엔트리 모듈을 작성합니다.
- 개별 아이콘을 import 합니다.
- (Legacy) icons 객체를 생성합니다. (
Record<IconName, BezierIcon>) - icons 객체와 개별 아이콘을 export 합니다.
- utils 를 export 합니다.
| export * from '${config.input.utils}' | ||
| ` | ||
|
|
||
| const entryTypesContent = ` |
There was a problem hiding this comment.
타입 선언을 직접 작성합니다.
IconSourceBezierIcon{ __type: ‘BezierIcon’ }브랜디드 타입을 추가합니다.- 기존엔 아이콘 심볼을 포함한 타입이
BezierIcon이었지만,utils모듈에 있는 아이콘 심볼의 타입을 타입 선언 파일에 포함할 수 없습니다. isBezierIcon과 함께 타입 체킹의 용도로 임의 타입을 지정합니다.createBezierIcon,isBezierIcon모두 내부 구현에서 실제로 심볼 여부를 체크하기 때문에 문제가 없습니다. (utils.ts,utils.test.tsx참고)
IconName- 개별 Icon 타입
icons객체 타입
| /** | ||
| * @type {import('rollup').PluginImpl} | ||
| */ | ||
| function emitFile({ fileName, source }) { |
There was a problem hiding this comment.
커스텀하게 작성한 d.ts 파일을 생성하기 위한 간단한 커스텀 플러그인입니다.
| /** | ||
| * The type is custom generated during the build process, | ||
| * so set the type inside this module to 'any'. | ||
| */ | ||
|
|
||
| const BEZIER_ICON_SYMBOL = Symbol('bezier.icon') |
There was a problem hiding this comment.
주석에 적은대로 타입은 빌드 시 커스텀하게 d.ts 파일을 생성하기 때문에, 자바스크립트처럼 사용했습니다. 동작은 테스트 코드를 통해 검증됩니다.
sungik-choi
force-pushed
the
feat/bezier-icons
branch
from
e94360d to
df2a10c
Compare
fix lint config
sungik-choi
force-pushed
the
feat/bezier-icons
branch
from
df2a10c to
803d41a
Compare
sungik-choi
force-pushed
the
feat/bezier-icons
branch
from
31ee3c1 to
c1b237a
Compare
Self Checklist
CODEOWNERSfile.Related Issue
Summary
@channel.io/bezier-icons npm package를 추가합니다.
Details
Next
Breaking change or not (Yes/No)
No
References