@ihabdevteam/core 0.9.4 → 0.9.6

package/dist/packages/core/src/components/SplashLogo.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import { useLatestRef } from '../hooks/useLatestRef';
 import './SplashLogo.css';
 /**
  * 앱에 처음 들어올 때 로고를 한 번 보여 주는 연출.
@@ -22,11 +23,20 @@ import './SplashLogo.css';
  * @public
  */
 export default function SplashLogo({ logo, alt, onDone, durationMs = 3000, }) {
+    // onDone 을 의존성에 그대로 두면 **다시 그릴 때마다 타이머가 새로 걸린다.** 부모가
+    // durationMs 보다 자주 다시 그리면 스플래시가 영영 안 끝난다 — 자료를 받아오는 동안
+    // 앱 뿌리가 다시 그리는 것은 흔한 일이고, 그게 바로 스플래시가 떠 있는 때다.
+    // 실측: 인라인 화살표로 다섯 번 다시 그리니 새 타이머 5개·취소 5회. 같은 콜백이면 0.
+    //
+    // 게다가 이 파일 위 예시가 `onDone={() => setShowSplash(false)}` 다 — 권하는 꼴이
+    // 곧 덫에 걸리는 꼴이었다. 그래서 부르는 쪽에 안정된 콜백을 요구하는 대신 여기서
+    // 담는다. 타이머는 한 번만 걸고, 울릴 때 **그때의 최신 콜백**을 부른다.
+    const onDoneRef = useLatestRef(onDone);
     useEffect(() => {
-        if (!onDone)
+        if (!onDoneRef.current)
             return;
-        const timer = setTimeout(onDone, durationMs);
+        const timer = setTimeout(() => onDoneRef.current?.(), durationMs);
         return () => clearTimeout(timer);
-    }, [onDone, durationMs]);
+    }, [durationMs, onDoneRef]);
     return (_jsx("div", { className: "splash-logo", style: { ['--splash-logo-duration']: `${durationMs}ms` }, "aria-hidden": "true", children: _jsx("img", { src: logo, alt: alt, className: "splash-logo__image" }) }));
 }

package/dist/packages/core/src/hooks/useWordDataStats.d.ts

@@ -8,7 +8,15 @@ export interface ImgStats {
 }
 /**
  * 단어쌍 인덱스와 이미지 캐시 현황을 읽어 반환하는 훅.
- * `words` 의존성이 변경될 때마다 1초 뒤 갱신 (비동기 빌드 완료 대기).
+ * 낱말 목록이 바뀔 때마다, 그리고 1초 뒤 한 번 더 갱신한다(비동기 빌드 완료 대기).
+ *
+ * `words` 는 **바뀌었다는 신호로만** 쓴다 — effect 안에서 내용을 읽지 않는다. 통계는
+ * 모듈 레벨 인덱스에서 나온다. 그래서 길이를 신호로 삼는다. 참조로 삼으면 안 되는데,
+ * 통계를 담는 setState 가 매번 새 객체라 리렌더가 나고, 인라인 배열을 넘긴 호출부에서는
+ * 그 리렌더가 다시 새 배열을 만들어 끝나지 않는다(실측: 힙이 터졌다).
+ *
+ * 길이가 그대로인 채 내용만 통째로 바뀌는 경우는 이 신호로 못 잡는다. 그때는 돌려주는
+ * `refreshStats()` 를 직접 부르면 된다.
  */
 /**
  * @public

package/dist/packages/core/src/hooks/useWordDataStats.js

@@ -4,7 +4,15 @@ import { getPairIndex } from '../utils/wordPairIndex';
 import { getImageExistenceStats } from '../utils/imageConfig';
 /**
  * 단어쌍 인덱스와 이미지 캐시 현황을 읽어 반환하는 훅.
- * `words` 의존성이 변경될 때마다 1초 뒤 갱신 (비동기 빌드 완료 대기).
+ * 낱말 목록이 바뀔 때마다, 그리고 1초 뒤 한 번 더 갱신한다(비동기 빌드 완료 대기).
+ *
+ * `words` 는 **바뀌었다는 신호로만** 쓴다 — effect 안에서 내용을 읽지 않는다. 통계는
+ * 모듈 레벨 인덱스에서 나온다. 그래서 길이를 신호로 삼는다. 참조로 삼으면 안 되는데,
+ * 통계를 담는 setState 가 매번 새 객체라 리렌더가 나고, 인라인 배열을 넘긴 호출부에서는
+ * 그 리렌더가 다시 새 배열을 만들어 끝나지 않는다(실측: 힙이 터졌다).
+ *
+ * 길이가 그대로인 채 내용만 통째로 바뀌는 경우는 이 신호로 못 잡는다. 그때는 돌려주는
+ * `refreshStats()` 를 직접 부르면 된다.
  */
 /**
  * @public
@@ -34,7 +42,7 @@ export function useWordDataStats(words) {
         refreshStats();
         const t = setTimeout(refreshStats, 1000);
         return () => clearTimeout(t);
-    }, [words, refreshStats]);
+    }, [words?.length, refreshStats]);
     /* eslint-enable react-hooks/set-state-in-effect */
     return { pairStats, imgStats, setPairStats, setImgStats, refreshStats };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",
@@ -101,6 +101,7 @@
     "prepare": "npm run build",
     "prepublishOnly": "npm run build && npm run audit:exports && npm pack --dry-run > /dev/null",
     "dev": "vite serve playground --config playground/vite.config.ts",
+    "typecheck:playground": "tsc -p playground/tsconfig.json --noEmit",
     "build-playground": "vite build playground --config playground/vite.config.js",
     "preview-playground": "vite preview --outDir playground/dist",
     "smoke-test": "node ./scripts/smoke-test.js",