chore: @modern-kit/utils SubPath 적용 (#690)

* refac(react): subPath 적용 리팩토링

* chore: utils SubPath 적용

* docs: README에 SubPath 가이드 추가

* chore: changesetlog 추가

.changeset/good-pandas-behave.md

@@ -0,0 +1,5 @@
+---
+'@modern-kit/utils': major
+---
+
+chore: @modern-kit/utils SubPath 제공 - @ssi0214

README.md

@@ -51,6 +51,21 @@ pnpm i @modern-kit/react
 ```tsx
 import { useInterval } from '@modern-kit/react';
 
+const App = () => {
+  useInterval(() => {
+    console.log('interval');
+  }, 300);
+
+  return <div>Modern Kit</div>;
+}
+```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { useInterval } from '@modern-kit/react/dist/hooks/useInterval';
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { useInterval } from '@modern-kit/react/hooks/useInterval';
+
 const App = () => {
   useInterval(() => {
     console.log('interval');
@@ -89,6 +104,16 @@ pnpm i @modern-kit/utils
 ```ts
 import { flatten } from '@modern-kit/utils';
 
+const arr = [1, [2, [3, 4], 5]];
+const result = flatten(arr); // [1, 2, 3, 4, 5]
+```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { flatten } from '@modern-kit/utils/array/flatten';
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { flatten } from '@modern-kit/utils/dist/array/flatten';
+
 const arr = [1, [2, [3, 4], 5]];
 const result = flatten(arr); // [1, 2, 3, 4, 5]
 ```
@@ -130,6 +155,28 @@ type Result = Merge<A, B>
 
 <br />
 
+## SubPath
+- `@modern-kit/react`, `@modern-kit/utils`는 `SubPath`를 사용하여 개별 모듈을 불러올 수 있습니다.
+- 전체 모듈을 불러오는 것이 아닌 필요한 모듈만 직접 가져오기 때문에 `불 필요한 코드를 불러오는 것을 방지`할 수 있으며, `번들러가 모듈을 읽고, 식별하는 과정`을 최적화 할 수 있습니다.
+- 번들러가 개별 모듈을 더 잘 식별할 수 있기 때문에, `Tree-shaking`이 더욱 효과적으로 동작하도록 개선 할 수 있습니다. 이는 결과적으로 최종 번들 크기를 줄이는데 도움이 됩니다.
+
+```tsx
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { useInterval } from '@modern-kit/react/dist/hooks/useInterval';
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { useInterval } from '@modern-kit/react/hooks/useInterval';
+
+const App = () => {
+  useInterval(() => {
+    console.log('interval');
+  }, 300);
+
+  return <div>Modern Kit</div>;
+}
+```
+
+<br />
+
 ## Lint & Test & build
 
 - `root` 폴더에서 진행해주세요.

docs/docs/introduce/Introduce.md

@@ -45,6 +45,16 @@ const App = () => {
   return <div>Modern Kit</div>;
 }
 ```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { flatten } from '@modern-kit/utils/array/flatten';
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { flatten } from '@modern-kit/utils/dist/array/flatten';
+
+const arr = [1, [2, [3, 4], 5]];
+const result = flatten(arr); // [1, 2, 3, 4, 5]
+```
 
 <br />
 
@@ -75,6 +85,16 @@ pnpm i @modern-kit/utils
 ```ts
 import { flatten } from '@modern-kit/utils';
 
+const arr = [1, [2, [3, 4], 5]];
+const result = flatten(arr); // [1, 2, 3, 4, 5]
+```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { flatten } from '@modern-kit/utils/array/flatten';
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { flatten } from '@modern-kit/utils/dist/array/flatten';
+
 const arr = [1, [2, [3, 4], 5]];
 const result = flatten(arr); // [1, 2, 3, 4, 5]
 ```

docs/package.json

@@ -21,6 +21,7 @@
     "@docusaurus/preset-classic": "^3.7.0",
     "@mdx-js/react": "^3.0.0",
     "@modern-kit/react": "workspace:*",
+    "@modern-kit/utils": "workspace:*",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",

packages/react/README.md

@@ -38,6 +38,16 @@ const App = () => {
   return <div>Modern Kit</div>;
 }
 ```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { flatten } from '@modern-kit/utils/array/flatten';
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { flatten } from '@modern-kit/utils/dist/array/flatten';
+
+const arr = [1, [2, [3, 4], 5]];
+const result = flatten(arr); // [1, 2, 3, 4, 5]
+```
 
 <br />
 

packages/react/rollup.config.mjs

@@ -8,10 +8,10 @@ import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
 
 import {
-  componentsSubEntryKeys,
-  hooksSubEntryKeys,
-  utilsEntryKey,
-} from './subEntries.mjs';
+  componentsPathKeys,
+  hooksPathKeys,
+  utilsPathKey,
+} from './subPaths.mjs';
 
 import { getSubEntryMap, getFormatEntryFileNames } from './build.utils.mjs';
 
@@ -24,9 +24,9 @@ export default {
     hooks: './src/hooks/index.ts',
     utils: './src/utils/index.ts',
     index: './src/index.ts', // 진입 경로,
-    ...getSubEntryMap(componentsSubEntryKeys, 'components'),
-    ...getSubEntryMap(hooksSubEntryKeys, 'hooks'),
-    ...getSubEntryMap(utilsEntryKey, 'utils'),
+    ...getSubEntryMap(componentsPathKeys, 'components'),
+    ...getSubEntryMap(hooksPathKeys, 'hooks'),
+    ...getSubEntryMap(utilsPathKey, 'utils'),
   },
   output: [
     {

packages/react/subEntries.mjs → packages/react/subPaths.mjs

@@ -1,4 +1,4 @@
-export const componentsSubEntryKeys = [
+export const componentsPathKeys = [
   'AspectRatio',
   'ClientGate',
   'Mounted',
@@ -18,7 +18,7 @@ export const componentsSubEntryKeys = [
   // 컴포넌트 추가 시 추가
 ];
 
-export const hooksSubEntryKeys = [
+export const hooksPathKeys = [
   'useAsyncEffect',
   'useAsyncProcessQueue',
   'useBeforeUnload',
@@ -71,7 +71,7 @@ export const hooksSubEntryKeys = [
   // 신규 훅 추가 시 추가
 ];
 
-export const utilsEntryKey = [
+export const utilsPathKey = [
   'mergeRefs',
   'polymorphicForwardRef',
   // 신규 유틸 모듈 추가 시 추가

packages/utils/README.md

@@ -31,6 +31,16 @@ pnpm i @modern-kit/utils
 ```ts
 import { flatten } from '@modern-kit/utils';
 
+const arr = [1, [2, [3, 4], 5]];
+const result = flatten(arr); // [1, 2, 3, 4, 5]
+```
+```ts
+// SubPath 사용 예시
+// tsconfig moduleResolution 옵션이 `bundler`일 경우
+import { flatten } from '@modern-kit/utils/array/flatten';
+// tsconfig moduleResolution 옵션이 `node`일 경우
+import { flatten } from '@modern-kit/utils/dist/array/flatten';
+
 const arr = [1, [2, [3, 4], 5]];
 const result = flatten(arr); // [1, 2, 3, 4, 5]
 ```

packages/utils/build.utils.mjs

@@ -0,0 +1,42 @@
+const getEntryFileNames = (name, format, path) => {
+  const cleanName = name.replace(`${path}-`, '');
+  return `${path}/${cleanName}/index.${format}`;
+};
+
+export const getFormatEntryFileNames = (chunkInfo, format) => {
+  const prefixMap = {
+    array: 'array',
+    clipboard: 'clipboard',
+    common: 'common',
+    date: 'date',
+    device: 'device',
+    file: 'file',
+    formatter: 'formatter',
+    math: 'math',
+    object: 'object',
+    regex: 'regex',
+    storage: 'storage',
+    string: 'string',
+    style: 'style',
+    validator: 'validator',
+  };
+
+  for (const [key, value] of Object.entries(prefixMap)) {
+    if (chunkInfo.name === `${key}-index`) {
+      return `${key}/index.${format}`;
+    }
+
+    if (chunkInfo.name.startsWith(value)) {
+      return getEntryFileNames(chunkInfo.name, format, key);
+    }
+  }
+
+  return `[name].${format}`; // 기본 파일 이름
+};
+
+export const getSubEntryMap = (keys, path) => {
+  return keys.reduce((acc, entry) => {
+    acc[`${path}-${entry}`] = `./src/${path}/${entry}`;
+    return acc;
+  }, {});
+};

packages/utils/package.json

@@ -6,12 +6,22 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
+    "./dist/*": {
+      "types": "./dist/*",
+      "require": "./dist/*",
+      "import": "./dist/*"
+    },
+    "./*": {
+      "types": "./dist/*/index.d.ts",
+      "require": "./dist/*/index.cjs",
+      "import": "./dist/*/index.mjs"
+    },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [

packages/utils/rollup.config.mjs

@@ -1,23 +1,59 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
-import pkg from './package.json' assert { type: 'json' };
 import esbuild from 'rollup-plugin-esbuild';
 
+import {
+  arrayPathKeys,
+  clipboardPathKeys,
+  commonPathKeys,
+  datePathKeys,
+  deviceKeys,
+  fileKeys,
+  formatterKeys,
+  mathKeys,
+  objectKeys,
+  regexKeys,
+  storageKeys,
+  stringKeys,
+  styleKeys,
+  validatorKeys,
+} from './subPaths.mjs';
+
+import { getSubEntryMap, getFormatEntryFileNames } from './build.utils.mjs';
+
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 export default {
-  input: './src/index.ts', // 진입 경로
+  input: {
+    index: './src/index.ts', // 진입 경로
+    ...getSubEntryMap(arrayPathKeys, 'array'),
+    ...getSubEntryMap(clipboardPathKeys, 'clipboard'),
+    ...getSubEntryMap(commonPathKeys, 'common'),
+    ...getSubEntryMap(datePathKeys, 'date'),
+    ...getSubEntryMap(deviceKeys, 'device'),
+    ...getSubEntryMap(fileKeys, 'file'),
+    ...getSubEntryMap(formatterKeys, 'formatter'),
+    ...getSubEntryMap(mathKeys, 'math'),
+    ...getSubEntryMap(objectKeys, 'object'),
+    ...getSubEntryMap(regexKeys, 'regex'),
+    ...getSubEntryMap(storageKeys, 'storage'),
+    ...getSubEntryMap(stringKeys, 'string'),
+    ...getSubEntryMap(styleKeys, 'style'),
+    ...getSubEntryMap(validatorKeys, 'validator'),
+  },
   output: [
     {
-      file: pkg.main,
+      dir: './dist',
       sourcemap: true,
       format: 'cjs',
+      entryFileNames: (chunkInfo) => getFormatEntryFileNames(chunkInfo, 'cjs'),
     },
     {
-      file: pkg.module,
+      dir: './dist',
       sourcemap: true,
       format: 'esm',
+      entryFileNames: (chunkInfo) => getFormatEntryFileNames(chunkInfo, 'mjs'),
     },
   ],
   plugins: [

packages/utils/src/array/flatMap/index.ts

@@ -1,4 +1,4 @@
-import { flatten } from '../../array';
+import { flatten } from '../flatten';
 
 /**
  * 각 배열 요소를 iteratee 함수로 매핑하고 지정된 깊이까지 결과를 평탄화합니다.

packages/utils/src/array/flatMapDeep/index.ts

@@ -1,4 +1,4 @@
-import { flattenDeep } from '../../array';
+import { flattenDeep } from '../flattenDeep';
 
 type ExtractNestedArrayType<T> = T extends readonly (infer U)[]
   ? ExtractNestedArrayType<U>