From 785f2d4e7088773c61b07d471674476d81ae7ae2 Mon Sep 17 00:00:00 2001 From: Hyejun Lee Date: Sun, 25 Feb 2024 23:54:04 +0900 Subject: [PATCH] =?UTF-8?q?chore(bundler):=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 롤업 설정 코드 정리 * chore: 테스트 코드 수정 --------- Co-authored-by: solar3070 <> --- apps/web/app/ToastTemp.tsx | 20 ++++++++++++++ apps/web/app/globals.css | 6 ++--- apps/web/app/page.tsx | 16 +++++++---- packages/ui/package.json | 14 +++++----- packages/ui/rollup.config.js | 51 +++++++----------------------------- packages/ui/tsconfig.json | 12 +++++++-- yarn.lock | 39 +++++---------------------- 7 files changed, 67 insertions(+), 91 deletions(-) create mode 100644 apps/web/app/ToastTemp.tsx diff --git a/apps/web/app/ToastTemp.tsx b/apps/web/app/ToastTemp.tsx new file mode 100644 index 0000000..c7c6d4e --- /dev/null +++ b/apps/web/app/ToastTemp.tsx @@ -0,0 +1,20 @@ +import { useToast} from "ui"; + +function ToastTemp() { + const { open } = useToast(); + + return ( + + ); +} + +export default ToastTemp; diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 4de6b00..da6613e 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -1,3 +1,6 @@ +@import url('ui/desktop-variables.css') screen; +@import url('ui/mobile-variables.css') screen and (max-width: 768px); + * { box-sizing: border-box; padding: 0; @@ -56,6 +59,3 @@ a { font-weight: 700; font-style: normal; } - -@import url('ui/desktop-variables.css') screen; -@import url('ui/mobile-variables.css') screen and (max-width: 768px); \ No newline at end of file diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 539da62..1800834 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,10 +1,16 @@ -import { Test } from 'ui'; -import styles from './page.module.css'; +"use client"; + +import { ToastProvider } from "ui"; +import styles from "./page.module.css"; +import ToastTemp from "./ToastTemp"; export default function Page(): JSX.Element { + return ( -
- -
+ +
+ +
+ ); } diff --git a/packages/ui/package.json b/packages/ui/package.json index e88aa6c..52e8a4a 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -7,22 +7,27 @@ "license": "MIT", "scripts": { "build": "yarn clean && rollup -c && yarn build-css-modules", + "watch": "rollup -cw", "clean": "rm -rf dist desktop-variables.css mobile-variables.css", "build-css-modules": "node ./scripts/build-css-modules.js", "lint": "eslint .", "generate:component": "turbo gen react-component" }, "devDependencies": { - "@rollup/plugin-json": "^4.1.0", + "@radix-ui/react-dialog": "^1.0.5", + "@sopt-makers/colors": "^3.0.0", + "@sopt-makers/fonts": "^1.0.0", "@turbo/gen": "^1.10.12", "@types/node": "^20.5.2", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "@vanilla-extract/css": "^1.14.0", "@vanilla-extract/rollup-plugin": "^1.0.1", + "@vanilla-extract/sprinkles": "1.6.1", "eslint-config-custom": "*", "react": "^18.2.0", "rollup": "^2.70.1", + "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-dts": "^4.2.0", "rollup-plugin-esbuild": "^4.8.2", "rollup-plugin-node-externals": "^4.0.0", @@ -30,10 +35,7 @@ "tsconfig": "*", "typescript": "^4.5.2" }, - "dependencies": { - "@radix-ui/react-dialog": "^1.0.5", - "@sopt-makers/colors": "file:../colors", - "@sopt-makers/fonts": "file:../fonts", - "@vanilla-extract/sprinkles": "1.6.1" + "peerDependencies": { + "react": "^18.2.0" } } diff --git a/packages/ui/rollup.config.js b/packages/ui/rollup.config.js index 09d9878..3f4365f 100644 --- a/packages/ui/rollup.config.js +++ b/packages/ui/rollup.config.js @@ -1,36 +1,21 @@ -import json from "@rollup/plugin-json"; import { vanillaExtractPlugin } from "@vanilla-extract/rollup-plugin"; -import path from "path"; import dts from "rollup-plugin-dts"; import esbuild from "rollup-plugin-esbuild"; import nodeExternals from "rollup-plugin-node-externals"; -import ts from "typescript"; import preserveDirectives from "rollup-plugin-preserve-directives"; - -const loadCompilerOptions = (tsconfig) => { - if (!tsconfig) return {}; - const configFile = ts.readConfigFile(tsconfig, ts.sys.readFile); - const { options } = ts.parseJsonConfigFileContent( - configFile.config, - ts.sys, - "./" - ); - return options; -}; - -const compilerOptions = loadCompilerOptions("tsconfig.json"); +import analyze from "rollup-plugin-analyzer"; const plugins = [ vanillaExtractPlugin(), nodeExternals(), esbuild(), - json(), preserveDirectives(), + analyze({ summaryOnly: true }), ]; const dirSrc = [ ["dist", "cjs"], - ["dist/esm", "esm"], + ["dist/esm", "es"], ]; export default [ @@ -43,13 +28,10 @@ export default [ format, preserveModules: true, preserveModulesRoot: ".", - entryFileNames({ name }) { - return `${name.replace(/\.css$/, ".css.vanilla")}.js`; - }, - assetFileNames({ name }) { - return name; - }, exports: "named", + entryFileNames: ({ name }) => + `${name.replace(/\.css$/, ".css.vanilla")}.js`, + assetFileNames: ({ name }) => name, }, onwarn(warning, warn) { const errorCode = ["MODULE_LEVEL_DIRECTIVE", "SOURCEMAP_ERROR"]; @@ -59,31 +41,16 @@ export default [ }, }; }), - // Declaration files { - input: ["index.ts", "cssVariables.ts"], - plugins: [ - ...plugins, - dts({ - compilerOptions: { - ...compilerOptions, - baseUrl: path.resolve(compilerOptions.baseUrl || "."), - declaration: true, - noEmit: false, - emitDeclarationOnly: true, - noEmitOnError: true, - target: ts.ScriptTarget.ESNext, - }, - }), - ], + input: ["index.ts"], + plugins: [...plugins, dts()], output: [ { dir: "dist", - format: "esm", + format: "es", preserveModules: true, preserveModulesRoot: ".", }, ], }, ]; - diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index fdb3740..b87cabb 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -2,9 +2,17 @@ "compilerOptions": { "jsx": "react-jsx", "outDir": ".", - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "declaration": true, + "declarationDir": "./dist", + "baseUrl": ".", + "emitDeclarationOnly": true, + "esModuleInterop": true, + "noEmit": false, + "noEmitOnError": true, + "target": "esnext" }, "extends": "tsconfig/react-library.json", - "include": ["index.ts", "cssVariables.ts"], + "include": ["index.ts"], "exclude": ["dist", "build", "node_modules"] } diff --git a/yarn.lock b/yarn.lock index c6655a6..2e2436c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -986,7 +986,7 @@ "@babel/preset-typescript@^7.23.0": version "7.23.3" - resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913" + resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913" integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -2459,22 +2459,6 @@ dependencies: "@babel/runtime" "^7.13.10" -"@rollup/plugin-json@^4.1.0": - version "4.1.0" - resolved "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3" - integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw== - dependencies: - "@rollup/pluginutils" "^3.0.8" - -"@rollup/pluginutils@^3.0.8": - version "3.1.0" - resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b" - integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== - dependencies: - "@types/estree" "0.0.39" - estree-walker "^1.0.1" - picomatch "^2.2.2" - "@rollup/pluginutils@^4.1.1": version "4.2.1" resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d" @@ -2562,12 +2546,6 @@ resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e" integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA== -"@sopt-makers/colors@file:packages/colors": - version "3.0.0" - -"@sopt-makers/fonts@file:packages/fonts": - version "1.0.0" - "@storybook/addon-actions@7.6.3": version "7.6.3" resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.6.3.tgz#c84980d8cf95b47918d87f996844c309c45252e3" @@ -3533,11 +3511,6 @@ resolved "https://registry.yarnpkg.com/@types/escodegen/-/escodegen-0.0.6.tgz#5230a9ce796e042cda6f086dbf19f22ea330659c" integrity sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig== -"@types/estree@0.0.39": - version "0.0.39" - resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" - integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== - "@types/estree@^0.0.51": version "0.0.51" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" @@ -6269,11 +6242,6 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0: resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123" integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA== -estree-walker@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" - integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== - estree-walker@^2.0.1, estree-walker@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" @@ -9621,6 +9589,11 @@ rimraf@~2.6.2: dependencies: glob "^7.1.3" +rollup-plugin-analyzer@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-4.0.0.tgz#96b757ed64a098b59d72f085319e68cdd86d5798" + integrity sha512-LL9GEt3bkXp6Wa19SNR5MWcvHNMvuTFYg+eYBZN2OIFhSWN+pEJUQXEKu5BsOeABob3x9PDaLKW7w5iOJnsESQ== + rollup-plugin-dts@^4.2.0: version "4.2.3" resolved "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-4.2.3.tgz#04c3615df1ffab4228aa9d540697eaca61e01f47"