feat: components, optimized, index.ts 파일 Build시에만 생성되도록 수정, typescrip…

…t로 변경

.changeset/four-berries-kick.md

@@ -0,0 +1,5 @@
+---
+"@musma/react-icons": patch
+---
+
+feat: components, optimized, index.ts 파일 Build시에만 생성되도록 수정

.gitignore

@@ -28,7 +28,9 @@ stats.html
 # react-icons 패키지
 
 ## src/components
-packages/react-icons/components/**
+packages/react-icons/src/components/**
 ## src/optimized
-packages/react-icons/optimized/**
+packages/react-icons/src/optimized/**
+## src/index.ts
+packages/react-icons/src/index.ts
 

package.json

@@ -12,7 +12,8 @@
     "build": "pnpm -r build",
     "ci:publish": "pnpm build && changeset publish",
     "npkill": "npx npkill",
-    "clean-install": "rm -rf **/node_modules && rm -rf pnpm-lock.yaml && pnpm i"
+    "clean-install": "rm -rf **/node_modules && rm -rf pnpm-lock.yaml && pnpm i",
+    "delete-dist": "rimraf **/dist"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.7",
@@ -21,10 +22,13 @@
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "@types/rimraf": "^3.0.2",
     "@vitejs/plugin-react": "^2.2.0",
     "path": "^0.12.7",
+    "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
+    "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
     "vite-plugin-dts": "^1.7.0",

packages/react-icons/package.json

@@ -24,17 +24,17 @@
     "dist"
   ],
   "scripts": {
-    "build:script": "rimraf ./src/components & node ./src/scripts/build.js",
+    "build:script": "rimraf ./src/components & ts-node ./src/scripts/build.ts",
     "build:optimize": "rimraf ./src/optimized & svgo -q -p 8 -f ./src/raw -o ./src/optimized",
-    "build": "pnpm build:optimize && pnpm build:script && tsc && vite build"
+    "build:clear": "rm -rf ./src/components ./src/optimized ./src/index.ts",
+    "build": "pnpm build:optimize && pnpm build:script && tsc && vite build && pnpm build:clear"
   },
   "devDependencies": {
     "@svgr/cli": "^6.2.1",
     "@svgr/core": "^6.2.1",
     "camelcase": "^6.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
     "svgo": "^2.8.0"
   },
   "peerDependencies": {

packages/react-icons/src/scripts/build.js → packages/react-icons/src/scripts/build.ts

@@ -1,15 +1,23 @@
-const fs = require('fs/promises')
+import fs from 'fs/promises'
 
-const { transform } = require('@svgr/core')
-const rimraf = require('rimraf')
+import { transform } from '@svgr/core'
+import rimraf from 'rimraf'
 
-const { generateComponentName } = require('./utils')
+import { generateComponentName } from './utils'
 
+/**
+ * 빌드 결과물이 담길 폴더
+ */
 const outputPath = './dist'
 
-async function buildComponents() {
+/**
+ * SVG 이미지가 최적화 끝난 후 실행해야합니다.
+ */
+const buildComponents = async () => {
+  // src/optimized 폴더안에 있는 파일을 읽습니다.
   const files = await fs.readdir('./src/optimized/', 'utf-8')
 
+  // src/components 폴더를 생성합니다.
   await fs.mkdir('./src/components')
 
   await Promise.all(
@@ -29,8 +37,8 @@ async function buildComponents() {
           typescript: true,
           replaceAttrValues: { '#000': "{props.color || '#000'}" },
           svgProps: {
-            width: 24,
-            height: 24,
+            width: '24',
+            height: '24',
           },
         },
         { componentName },
@@ -55,6 +63,7 @@ async function buildComponents() {
 
 ;(function main() {
   console.log('🏗 아이콘 패키지 빌드 시작합니다.')
+
   new Promise((resolve) => {
     rimraf(`${outputPath}/*`, resolve)
     rimraf(`./src/index.ts`, resolve)

packages/react-icons/src/scripts/utils.ts

@@ -0,0 +1,16 @@
+import camelcase from 'camelcase'
+
+/**
+ * 
+ * @param fileName 파일명
+ * @returns 파일이름
+ * 
+ * 파일명을 ${파스칼케이스}Icon으로 변경합니다.
+ */
+export const generateComponentName = (fileName: string) => {
+  const componentName = `${camelcase(fileName.replace(/.svg/, ''), {
+    pascalCase: true,
+  })}Icon`
+
+  return componentName
+}

packages/react-icons/tsconfig.json

@@ -5,17 +5,17 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
+    "module": "CommonJS",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": false,
     "noEmit": true,
     "jsx": "react-jsx"
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
-}
+}