Merge pull request #12 from react18-tools/fix-supress-hydration-warning

refactor: supressHydrationWarning and improve readability

Author: mayank1513

examples/nextjs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs/tsconfig.json

@@ -1,13 +1,21 @@
 {
-  "exclude": ["node_modules"],
+  "exclude": [
+    "node_modules"
+  ],
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
     "outDir": "dist",
     "plugins": [
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
-  "include": ["src", "next.config.js", "next-env.d.ts", ".next/types/**/*.ts"]
+  "include": [
+    "src",
+    "next.config.js",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ]
 }

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-darkmode
 
+## 1.0.2
+
+### Patch Changes
+
+- 722eeae: Supress Hydration Warning
+
 ## 1.0.1
 
 ### Patch Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-darkmode",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Unleash the Power of React Server Components! Use dark/light mode on your site with confidence, without losing any advantages of React Server Components",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/client/core/core.test.tsx

@@ -1,6 +1,6 @@
 import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, test } from "vitest";
-import { Core, s } from "./core";
+import { Core, noFOUCScript } from "./core";
 import { useMode } from "../../hooks";
 import { DARK, LIGHT } from "../../constants";
 
@@ -9,7 +9,7 @@ describe("theme-switcher", () => {
   afterEach(cleanup);
 
   beforeEach(() => {
-    s(STORAGE_KEY);
+    noFOUCScript(STORAGE_KEY);
     render(<Core />);
   });
 

lib/src/client/core/core.tsx

@@ -1,14 +1,16 @@
 import { DARK, LIGHT } from "../../constants";
-import { ColorSchemePreference, ResolvedScheme, Store, useStore } from "../../utils";
-import { useEffect } from "react";
+import { ColorSchemePreference, ResolvedScheme, useStore } from "../../utils";
+import { memo, useEffect } from "react";
 
 declare global {
+  // skipcq: JS-0102, JS-0239
   var u: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
+  // skipcq: JS-0102, JS-0239
   var m: MediaQueryList;
 }
 
 /** function to be injected in script tag for avoiding FOUC */
-export const s = (storageKey: string) => {
+export const noFOUCScript = (storageKey: string) => {
   const [SYSTEM, DARK] = ["system", "dark"] as const;
   window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
     const resolvedMode = mode === SYSTEM ? systemMode : mode;
@@ -30,6 +32,23 @@ export const s = (storageKey: string) => {
 let media: MediaQueryList,
   updateDOM: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
 
+interface ScriptProps {
+  /** nonce */
+  n?: string;
+  /** storageKey */
+  k: string;
+}
+
+/** Avoid rerender of script */
+const Script = memo(({ n, k }: ScriptProps) => (
+  <script
+    suppressHydrationWarning
+    // skipcq: JS-0440
+    dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${k}')` }}
+    nonce={n}
+  />
+));
+
 export interface CoreProps {
   /** themeTransition: force apply CSS transition property to all the elements during theme switching. E.g., `all .3s`
    * @defaultValue 'none'
@@ -70,7 +89,7 @@ const modifyTransition = (themeTransition = "none", nonce = "") => {
  */
 export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
   // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  if (typeof window !== "undefined" && !window.m) s(k);
+  if (typeof window !== "undefined" && !window.m) noFOUCScript(k);
 
   const [{ m: mode, s: systemMode }, setThemeState] = useStore();
 
@@ -79,7 +98,7 @@ export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
     [media, updateDOM] = [m, u];
     /** Updating media: prefers-color-scheme*/
     media.addEventListener("change", () =>
-      setThemeState(state => ({ ...state, s: media.matches ? DARK : LIGHT }) as Store),
+      setThemeState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
     );
     /** Sync the tabs */
     addEventListener("storage", (e: StorageEvent): void => {
@@ -93,5 +112,5 @@ export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
     restoreTransitions();
   }, [systemMode, mode, t, nonce]);
 
-  return <script dangerouslySetInnerHTML={{ __html: `(${s.toString()})('${k}')` }} nonce={nonce} />;
+  return <Script {...{ n: nonce, k }} />;
 };

lib/src/constants.ts

@@ -1,7 +1,7 @@
-import { ColorSchemePreference } from "./utils";
+import { ColorSchemePreference, ResolvedScheme } from "./utils";
 
 export const SYSTEM: ColorSchemePreference = "system";
-export const DARK: ColorSchemePreference = "dark";
-export const LIGHT: ColorSchemePreference = "";
+export const DARK: ResolvedScheme = "dark";
+export const LIGHT: ResolvedScheme = "";
 
 export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];

lib/src/hooks/use-mode.ts

@@ -27,7 +27,7 @@ export const useMode = (): UseModeYeild => {
   return {
     mode,
     systemMode,
-    resolvedMode: (mode === SYSTEM ? systemMode : mode) as ResolvedScheme, // resolvedMode is the actual mode that will be used
+    resolvedMode: (mode === SYSTEM ? systemMode : mode) as ResolvedScheme,
     setMode,
   };
 };

lib/src/utils.ts

@@ -11,7 +11,7 @@ export interface Store {
 /** local abstaction of RGS to avoid multiple imports */
 export const useStore = () =>
   useRGS<Store>("ndm", () => {
-    if (typeof document === "undefined") return { m: SYSTEM, s: DARK as ResolvedScheme };
+    if (typeof document === "undefined") return { m: SYSTEM, s: DARK };
     const el = document.documentElement;
     return {
       m: (el.getAttribute("data-m") ?? SYSTEM) as ColorSchemePreference,

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [722eeae]
+  - [email protected]
+
 ## 0.0.9
 
 ### Patch Changes