From a7eb74669d8ba98dc155be4db55ac5453b510d15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B6=8C=EC=98=81=EA=B6=8C?= Date: Thu, 18 Jul 2024 14:53:22 +0900 Subject: [PATCH] ADCIO-4535) Introducing a new structure with tree shaking (#104) * chore: Update package.json and vite.config.ts for module exports and build options * fix: Change 'prepare' script to 'postinstall' in package.json * fix: remove esm dir * fix: Update package.json to include module and types entries * chore: Add new folders for component, composite, core, icon, legacy, and token * chore: Update @emotion/react and @emotion/styled dependencies to the latest versions --- package.json | 32 +++++++++++++++++++------------- src/.babelrc | 8 -------- src/component/readme.md | 3 +++ src/composite/readme.md | 3 +++ src/core/readme.md | 3 +++ src/icon/readme.md | 2 ++ src/legacy/readme.md | 4 ++++ src/token/readme.md | 3 +++ tsconfig.build.json | 4 ++++ vite.config.ts | 33 +++++++++++++++++++++++++-------- 10 files changed, 66 insertions(+), 29 deletions(-) delete mode 100644 src/.babelrc create mode 100644 src/component/readme.md create mode 100644 src/composite/readme.md create mode 100644 src/core/readme.md create mode 100644 src/icon/readme.md create mode 100644 src/legacy/readme.md create mode 100644 src/token/readme.md diff --git a/package.json b/package.json index ca0371d..92ff920 100644 --- a/package.json +++ b/package.json @@ -4,22 +4,31 @@ "description": "Design System for Corca, Inc.", "private": false, "version": "0.0.29", - "type": "module", "packageManager": "pnpm@8.15.4", - "main": "dist/index.js", - "styles": "dist/global.css", - "repository": "https://github.com/corca-ai/cds", + "type": "module", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + }, + "./package.json": "./package.json" + }, + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", "files": [ "dist" ], "sideEffects": false, + "repository": "https://github.com/corca-ai/cds", "scripts": { "build": "tsc --noEmit && vite build", "typecheck": "tsc --noEmit", "lint": "eslint ./src", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "prepare": "husky" + "postinstall": "husky" }, "dependencies": { "date-fns": "3.3.1", @@ -30,16 +39,14 @@ "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", - "@emotion/react": "^11.10.5", - "@emotion/styled": "^11.11.0", - "@types/react": "^18.2.60", - "@types/react-dom": "^18.2.19" + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.0" }, "devDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", - "@emotion/react": "11.11.4", - "@emotion/styled": "11.11.0", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.0", "@types/react": "^18.2.60", "@types/react-dom": "^18.2.19", "@eslint/js": "9.7.0", @@ -79,8 +86,7 @@ "lint-staged": { "*.{ts,tsx}": [ "prettier --parser=typescript --write", - "eslint --fix", - "tsc --noEmit" + "eslint --fix" ] } } diff --git a/src/.babelrc b/src/.babelrc deleted file mode 100644 index af812f0..0000000 --- a/src/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "plugins": ["@emotion"], - "presets": [ - "@babel/preset-typescript", - "@babel/preset-env", - ["@babel/preset-react", { "runtime": "automatic" }] - ] -} diff --git a/src/component/readme.md b/src/component/readme.md new file mode 100644 index 0000000..5d6d795 --- /dev/null +++ b/src/component/readme.md @@ -0,0 +1,3 @@ +# component +component를 관리하는 폴더입니다. +component란 디자인 명세와 일치하는 컴포넌트들입니다. \ No newline at end of file diff --git a/src/composite/readme.md b/src/composite/readme.md new file mode 100644 index 0000000..ab96ee1 --- /dev/null +++ b/src/composite/readme.md @@ -0,0 +1,3 @@ +# composite +composite을 관리하는 폴더입니다. +composite이란 반복적으로 사용하는 컴포넌트를 쉽게 사용하기 위해 1개 이상의 컴포넌트를 조합 및 수정하는 컴포넌트입니다. \ No newline at end of file diff --git a/src/core/readme.md b/src/core/readme.md new file mode 100644 index 0000000..4996442 --- /dev/null +++ b/src/core/readme.md @@ -0,0 +1,3 @@ +# core +core 로직을 관리하는 폴더입니다. +core란 component, composite 등에서 사용하는 여러 공통되는 로직을 관리하기 위한 로직들입니다. \ No newline at end of file diff --git a/src/icon/readme.md b/src/icon/readme.md new file mode 100644 index 0000000..eb94d50 --- /dev/null +++ b/src/icon/readme.md @@ -0,0 +1,2 @@ +# icon +icon을 관리하는 폴더입니다. \ No newline at end of file diff --git a/src/legacy/readme.md b/src/legacy/readme.md new file mode 100644 index 0000000..883aaf9 --- /dev/null +++ b/src/legacy/readme.md @@ -0,0 +1,4 @@ +# legacy +legacy를 관리하는 폴더입니다. +새로운 폴더들로 이동하기 전의 코드들입니다. +점진적으로 새로운 구조로 이동할 예정입니다. \ No newline at end of file diff --git a/src/token/readme.md b/src/token/readme.md new file mode 100644 index 0000000..4613cb2 --- /dev/null +++ b/src/token/readme.md @@ -0,0 +1,3 @@ +# token +token을 관리하는 폴더입니다. +token이란 공통적으로 사용하는 기본 스타일 값들을 의미합니다. diff --git a/tsconfig.build.json b/tsconfig.build.json index 1b5d395..5da652d 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,4 +1,8 @@ { "extends": "./tsconfig.json", + "compilerOptions": { + "esModuleInterop": true, + "moduleResolution": "Bundler" + }, "exclude": ["**/*.stories.*"] } diff --git a/vite.config.ts b/vite.config.ts index a75875a..2dde4b2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,22 +9,39 @@ export default defineConfig({ build: { lib: { entry: resolve(__dirname, './src/index.ts'), - formats: ['es', 'cjs'], name: 'cds', fileName: 'index', }, + sourcemap: true, + emptyOutDir: true, rollupOptions: { - external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'], - output: { - globals: { - react: 'React', - 'react-dom': 'ReactDOM', + external: [ + 'react', + 'react-dom', + '@emotion/react', + '@emotion/styled', + '@emotion/react/jsx-runtime', + ], + output: [ + { + format: 'cjs', + preserveModulesRoot: 'src', + entryFileNames: '[name].js', + }, + { + format: 'es', + preserveModules: true, + preserveModulesRoot: 'src', + entryFileNames: '[name].mjs', }, - }, + ], }, }, plugins: [ - react(), + react({ + jsxImportSource: '@emotion/react', + jsxRuntime: 'automatic', + }), dts({ tsconfigPath: './tsconfig.build.json' }), viteStaticCopy({ targets: [