From 0de5b344e7b19d6ef397b54b8868afcd3bdc9ebf Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Mon, 17 Jun 2024 13:06:25 +0530
Subject: [PATCH 1/5] refactor: supressHydrationWarning and improve readability

---
 lib/src/client/core/core.test.tsx |  4 ++--
 lib/src/client/core/core.tsx      | 29 ++++++++++++++++++++++++-----
 lib/src/constants.ts              |  6 +++---
 lib/src/hooks/use-mode.ts         |  2 +-
 lib/src/utils.ts                  |  2 +-
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/lib/src/client/core/core.test.tsx b/lib/src/client/core/core.test.tsx
index 299e71e8..5f116ba5 100644
--- a/lib/src/client/core/core.test.tsx
+++ b/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 />);
   });
 
diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
index 73eff48f..1106e0c9 100644
--- a/lib/src/client/core/core.tsx
+++ b/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 { 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 }} />;
 };
diff --git a/lib/src/constants.ts b/lib/src/constants.ts
index ef4f4f53..51104fe9 100644
--- a/lib/src/constants.ts
+++ b/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];
diff --git a/lib/src/hooks/use-mode.ts b/lib/src/hooks/use-mode.ts
index 9ad06b8e..ca168756 100644
--- a/lib/src/hooks/use-mode.ts
+++ b/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,
   };
 };
diff --git a/lib/src/utils.ts b/lib/src/utils.ts
index 9f537944..314447dc 100644
--- a/lib/src/utils.ts
+++ b/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,

From 01f7089d270e945564d15d2674def4bc180230cf Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Mon, 17 Jun 2024 13:28:22 +0530
Subject: [PATCH 2/5] docs(changeset): Supress Hydration Warning

---
 .changeset/poor-boats-buy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/poor-boats-buy.md

diff --git a/.changeset/poor-boats-buy.md b/.changeset/poor-boats-buy.md
new file mode 100644
index 00000000..f7304c3a
--- /dev/null
+++ b/.changeset/poor-boats-buy.md
@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": patch
+---
+
+Supress Hydration Warning

From f7da6260f90f8987a3b28c5645514d06dd3e29e7 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Mon, 17 Jun 2024 13:29:30 +0530
Subject: [PATCH 3/5] RELEASING: Releasing 2 package(s)

Releases:
  nextjs-darkmode@1.0.2
  @repo/shared@0.0.10
---
 .changeset/poor-boats-buy.md | 5 -----
 lib/CHANGELOG.md             | 6 ++++++
 lib/package.json             | 2 +-
 packages/shared/CHANGELOG.md | 7 +++++++
 packages/shared/package.json | 2 +-
 5 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/poor-boats-buy.md

diff --git a/.changeset/poor-boats-buy.md b/.changeset/poor-boats-buy.md
deleted file mode 100644
index f7304c3a..00000000
--- a/.changeset/poor-boats-buy.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"nextjs-darkmode": patch
----
-
-Supress Hydration Warning
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md
index 62ca6581..641699e0 100644
--- a/lib/CHANGELOG.md
+++ b/lib/CHANGELOG.md
@@ -1,5 +1,11 @@
 # nextjs-darkmode
 
+## 1.0.2
+
+### Patch Changes
+
+- 722eeae: Supress Hydration Warning
+
 ## 1.0.1
 
 ### Patch Changes
diff --git a/lib/package.json b/lib/package.json
index cdb84cb4..655bce37 100644
--- a/lib/package.json
+++ b/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",
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index b37632ba..a96c3144 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [722eeae]
+  - nextjs-darkmode@1.0.2
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/packages/shared/package.json b/packages/shared/package.json
index e1b8acc7..c5948a07 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",

From 7125acc5362540f8051d9d17185c6445306805f3 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Mon, 17 Jun 2024 13:33:09 +0530
Subject: [PATCH 4/5] remove unused variable

---
 lib/src/client/core/core.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
index 1106e0c9..442558dd 100644
--- a/lib/src/client/core/core.tsx
+++ b/lib/src/client/core/core.tsx
@@ -1,5 +1,5 @@
 import { DARK, LIGHT } from "../../constants";
-import { ColorSchemePreference, ResolvedScheme, Store, useStore } from "../../utils";
+import { ColorSchemePreference, ResolvedScheme, useStore } from "../../utils";
 import { memo, useEffect } from "react";
 
 declare global {

From e7de9d590a19be3717488b2b86aa43f9f0ec0bc8 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Mon, 17 Jun 2024 13:34:38 +0530
Subject: [PATCH 5/5] fix: update nextjs example

---
 examples/nextjs/next-env.d.ts |  1 +
 examples/nextjs/tsconfig.json | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts
index 4f11a03d..fd36f949 100644
--- a/examples/nextjs/next-env.d.ts
+++ b/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.
diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
index aaddcaa8..12ccfa01 100644
--- a/examples/nextjs/tsconfig.json
+++ b/examples/nextjs/tsconfig.json
@@ -1,5 +1,7 @@
 {
-  "exclude": ["node_modules"],
+  "exclude": [
+    "node_modules"
+  ],
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
     "outDir": "dist",
@@ -7,7 +9,13 @@
       {
         "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"
+  ]
 }