chore: modern-kit/react build setting update

.changeset/thick-hotels-refuse.md

@@ -0,0 +1,6 @@
+---
+'@modern-kit/react': minor
+'@modern-kit/utils': minor
+---
+
+chore: update react/utils build setting - @ssi02014

docs/docs/react/components/AspectRatio.mdx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { AspectRatio } from '@modern-kit/react';
+import { AspectRatio } from '@modern-kit/react/components/AspectRatio';
+import { useStep } from '@modern-kit/react/hooks/useStep';
 
 # AspectRatio
 
@@ -100,7 +101,6 @@ const Example = () => {
 
 export const Example = () => {
   const imgUrl = 'https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9';
-
   return (
     <div style={{ width: '500px' }}>
       <h3>Default</h3>

packages/react/build.utils.mjs

@@ -26,7 +26,11 @@ export const getFormatEntryFileNames = (chunkInfo, format) => {
 
 export const getSubEntryMap = (keys, path) => {
   return keys.reduce((acc, entry) => {
-    acc[`${path}-${entry}`] = `./src/${path}/${entry}`;
+    acc[`${path}-${entry}`] = `./src/${path}/${
+      entry === 'index'
+        ? 'index.ts'
+        : `${entry}/index.${path === 'components' ? 'tsx' : 'ts'}`
+    }`;
     return acc;
   }, {});
 };

packages/react/package.json

@@ -18,9 +18,9 @@
   "author": "ssi02014 <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@modern-kit/utils": "workspace:^",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.2.0",
@@ -36,6 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.24.0",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
@@ -44,11 +45,9 @@
     "vitest": "^3.0.2"
   },
   "dependencies": {
-    "@modern-kit/utils": "^2.0.2",
     "@types/lodash-es": "^4.17.12",
     "classnames": "^2.5.1",
     "lodash-es": "^4.17.21",
-    "tslib": "^2.8.1",
     "ua-parser-js": "^1.0.39"
   },
   "peerDependencies": {

packages/react/rollup.config.mjs

@@ -1,11 +1,11 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import pkg from './package.json' assert { type: 'json' };
 import esbuild from 'rollup-plugin-esbuild';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
+import { dts } from 'rollup-plugin-dts';
 
 import {
   componentsPathKeys,
@@ -17,46 +17,61 @@ import { getSubEntryMap, getFormatEntryFileNames } from './build.utils.mjs';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
-export default {
-  preserveModules: true,
-  input: {
-    index: './src/index.ts', // 진입 경로,
-    ...getSubEntryMap(componentsPathKeys, 'components'),
-    ...getSubEntryMap(hooksPathKeys, 'hooks'),
-    ...getSubEntryMap(utilsPathKey, 'utils'),
-  },
-  output: [
-    {
-      dir: './dist',
-      sourcemap: true,
-      format: 'cjs',
-      entryFileNames: (chunkInfo) => getFormatEntryFileNames(chunkInfo, 'cjs'),
-    },
-    {
-      dir: './dist',
-      sourcemap: true,
-      format: 'esm',
-      entryFileNames: (chunkInfo) => getFormatEntryFileNames(chunkInfo, 'mjs'),
-    },
-  ],
-  external: [
-    ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.peerDependencies),
-  ],
-  plugins: [
-    peerDepsExternal(),
-    nodeResolve({
-      extensions,
-    }),
-    typescript({
-      exclude: ['**/*.spec.tsx', '**/*.spec.ts', './src/_internal/test/*'],
-    }),
-    commonjs(),
-    esbuild(),
-    postcss({
-      modules: true,
-      minimize: true,
-      plugins: [autoprefixer()],
-    }),
-  ],
+const input = {
+  index: './src/index.ts', // 진입 경로,
+  ...getSubEntryMap(componentsPathKeys, 'components'),
+  ...getSubEntryMap(hooksPathKeys, 'hooks'),
+  ...getSubEntryMap(utilsPathKey, 'utils'),
 };
+
+export default [
+  {
+    input,
+    output: [
+      {
+        dir: './dist',
+        sourcemap: true,
+        format: 'cjs',
+        entryFileNames: (chunkInfo) =>
+          getFormatEntryFileNames(chunkInfo, 'cjs'),
+        chunkFileNames: `_chunk/[name]-[hash:6].cjs`,
+      },
+      {
+        dir: './dist',
+        sourcemap: true,
+        format: 'esm',
+        entryFileNames: (chunkInfo) =>
+          getFormatEntryFileNames(chunkInfo, 'mjs'),
+        chunkFileNames: `_chunk/[name]-[hash:6].mjs`,
+      },
+    ],
+    external: [
+      ...Object.keys(pkg.dependencies),
+      ...Object.keys(pkg.peerDependencies),
+    ],
+    plugins: [
+      peerDepsExternal(),
+      nodeResolve({ extensions }),
+      commonjs(),
+      esbuild(),
+      postcss({
+        modules: true,
+        minimize: true,
+        plugins: [autoprefixer()],
+      }),
+    ],
+  },
+  {
+    // d.ts 파일 직접 생성
+    input,
+    output: [
+      {
+        dir: 'dist',
+        entryFileNames: (chunkInfo) =>
+          getFormatEntryFileNames(chunkInfo, 'd.ts'),
+        chunkFileNames: `_chunk/[name]-[hash:6].d.ts`,
+      },
+    ],
+    plugins: [dts()],
+  },
+];

packages/react/src/hooks/useTimeout/index.ts

@@ -55,7 +55,7 @@ export function useTimeout(
   const { delay, enabled } = getTimeoutOptions(options);
 
   const set = useCallback(() => {
-    timeoutRef.current = setTimeout(callbackAction, delay);
+    timeoutRef.current = window.setTimeout(callbackAction, delay);
   }, [callbackAction, delay]);
 
   const clear = useCallback(() => {

packages/react/tsconfig.json

@@ -5,5 +5,6 @@
     "baseUrl": "./src",
     "outDir": "./dist",
     "skipLibCheck": true,
+    "rootDir": "./src"
   },
 }

packages/utils/build.utils.mjs

@@ -36,7 +36,9 @@ export const getFormatEntryFileNames = (chunkInfo, format) => {
 
 export const getSubEntryMap = (keys, path) => {
   return keys.reduce((acc, entry) => {
-    acc[`${path}-${entry}`] = `./src/${path}/${entry}`;
+    acc[`${path}-${entry}`] = `./src/${path}/${
+      entry === 'index' ? 'index.ts' : `${entry}/index.ts`
+    }`;
     return acc;
   }, {});
 };

packages/utils/package.json

@@ -42,13 +42,13 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.0",
     "@types/lodash-es": "^4.17.12",
     "@vitest/coverage-istanbul": "^3.0.3",
     "esbuild": "^0.24.0",
     "jsdom": "^25.0.0",
     "lodash-es": "^4.17.21",
     "rollup": "^4.24.0",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "typescript": "^5.1.6",
     "vitest": "^3.0.2"
@@ -62,8 +62,5 @@
     "hooks",
     "custom hooks"
   ],
-  "gitHead": "7722785374b897572934e335817ec297ad45a943",
-  "dependencies": {
-    "tslib": "^2.8.1"
-  }
+  "gitHead": "7722785374b897572934e335817ec297ad45a943"
 }