chore(bundler): 코드 정리 (#52)

* chore: 롤업 설정 코드 정리 * chore: 테스트 코드 수정 --------- Co-authored-by: solar3070 <>
sopt-makers · Feb 25, 2024 · 785f2d4 · 785f2d4
1 parent adf7d2f
commit 785f2d4
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 91 deletions.
diff --git a/apps/web/app/ToastTemp.tsx b/apps/web/app/ToastTemp.tsx
@@ -0,0 +1,20 @@
+import { useToast} from "ui";
+
+function ToastTemp() {
+  const { open } = useToast();
+
+  return (
+    <button
+      onClick={() => {
+        open({
+          icon: "success",
+          content: "기본 토스트입니다.",
+        });
+      }}
+    >
+      Open Toast
+    </button>
+  );
+}
+
+export default ToastTemp;
diff --git 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); 
diff --git 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 (
-    <main className={styles.main}>
-      <Test color="blue" size="big" text="Test Component" />
-    </main>
+    <ToastProvider>
+      <main className={styles.main}>
+      <ToastTemp />
+      </main>
+    </ToastProvider>
   );
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -7,33 +7,35 @@
   "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",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "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
@@ -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
@@ -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
@@ -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"