neato - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/theme/useEffectiveThemeState.d.ts

@@ -8,4 +8,4 @@ import { Dispatch, SetStateAction } from "react";
  *
- * 초기값을 "light"로 설정하지만, useThemeHydration에서 즉시 동기화됩니다.
- * SSR 호환성을 위해 서버와 클라이언트의 초기 렌더링이 일치해야 합니다.
+ * 초기값을 getInitialEffectiveTheme()으로 설정하여
+ * 클라이언트에서는 처음부터 올바른 테마를 가집니다.
  */
@@ -12,0 +12,0 @@ export declare const useEffectiveThemeState: () => [{

dist/theme/useEffectiveThemeState.js

 import { create } from "@ilokesto/caro-kann";
 /**
+ * 초기 테마를 감지하는 함수
+ * - 서버 사이드: 항상 "light" 반환 (SSR 안전성)
+ * - 클라이언트: DOM에서 현재 테마 상태를 읽어서 반환
+ * - theme-script.ts가 이미 실행되어 dark 클래스가 있다면 "dark" 반환
+ *
+ * 이렇게 하면 페이지 로드/로케일 변경 시에도 깜빡임이 없습니다.
+ */
+function getInitialEffectiveTheme() {
+    // SSR에서는 항상 light (서버는 사용자의 테마를 알 수 없음)
+    if (typeof window === "undefined") {
+        return "light";
+    }
+    // 클라이언트: theme-script.ts가 이미 실행되었으므로 DOM 상태를 신뢰
+    // 이 코드는 모듈 로드 시점에 한 번만 실행됩니다
+    return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+/**
  * 실제 적용되는 테마 상태 관리 훅
@@ -8,8 +25,8 @@ * - effectiveTheme: 실제로 화면에 적용되는 테마 ("light" | "dark")
  *
- * 초기값을 "light"로 설정하지만, useThemeHydration에서 즉시 동기화됩니다.
- * SSR 호환성을 위해 서버와 클라이언트의 초기 렌더링이 일치해야 합니다.
+ * 초기값을 getInitialEffectiveTheme()으로 설정하여
+ * 클라이언트에서는 처음부터 올바른 테마를 가집니다.
  */
 export const useEffectiveThemeState = create({
-    effectiveTheme: "light",
+    effectiveTheme: getInitialEffectiveTheme(),
     isHydrated: false,
 });

package.json

 {
   "name": "neato",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "A powerful utility library for efficient CSS class management in React applications",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

57724

1.24%

Lines of code

1075

1.61%

No dependency changes