Minify

README.md

@@ -220,7 +220,7 @@ If you are using CSP rules for CSS files, you can pass `nonce` argument to the `
 
 Show different images based on the current theme:
 
-```jsx
+```ts
 import Image from "next/image";
 import { useMode } from "nextjs-darkmode/hooks";
 

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.

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-darkmode
 
+## 1.0.4
+
+### Patch Changes
+
+- 4cc739a: Do not export the NoFOUCScript.
+
 ## 1.0.3
 
 ### Patch Changes

lib/README.md

@@ -220,7 +220,7 @@ If you are using CSP rules for CSS files, you can pass `nonce` argument to the `
 
 Show different images based on the current theme:
 
-```jsx
+```ts
 import Image from "next/image";
 import { useMode } from "nextjs-darkmode/hooks";
 

lib/package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-darkmode",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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,8 +1,9 @@
 import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, test } from "vitest";
-import { Core, noFOUCScript } from "./core";
+import { Core } from "./core";
 import { useMode } from "../../hooks";
 import { DARK, LIGHT } from "../../constants";
+import { noFOUCScript } from "./no-fouc";
 
 const STORAGE_KEY = "o";
 describe("theme-switcher", () => {

lib/src/client/core/core.tsx

@@ -1,33 +1,7 @@
 import { DARK, LIGHT } from "../../constants";
 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 noFOUCScript = (storageKey: string) => {
-  const [SYSTEM, DARK] = ["system", "dark"] as const;
-  window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
-    const resolvedMode = mode === SYSTEM ? systemMode : mode;
-    const el = document.documentElement;
-    if (resolvedMode === DARK) el.classList.add(DARK);
-    else el.classList.remove(DARK);
-    [
-      ["sm", systemMode],
-      ["rm", resolvedMode],
-      ["m", mode],
-    ].forEach(([dataLabel, value]) => el.setAttribute(`data-${dataLabel}`, value));
-    // System mode is decided by current system state and need not be stored in localStorage
-    localStorage.setItem(storageKey, mode);
-  };
-  window.m = matchMedia(`(prefers-color-scheme: ${DARK})`);
-  u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, m.matches ? DARK : "");
-};
+import { noFOUCScript } from "./no-fouc";
 
 let media: MediaQueryList,
   updateDOM: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
@@ -40,14 +14,17 @@ interface ScriptProps {
 }
 
 /** Avoid rerender of script */
-const Script = memo(({ n, k }: ScriptProps) => (
-  <script
-    suppressHydrationWarning
-    // skipcq: JS-0440
-    dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${k}')` }}
-    nonce={n}
-  />
-));
+const Script = memo(
+  ({ n, k }: ScriptProps) => (
+    <script
+      suppressHydrationWarning
+      // skipcq: JS-0440
+      dangerouslySetInnerHTML={{ __html: `(${noFOUCScript.toString()})('${k}')` }}
+      nonce={n}
+    />
+  ),
+  () => false,
+);
 
 export interface CoreProps {
   /** themeTransition: force apply CSS transition property to all the elements during theme switching. E.g., `all .3s`

lib/src/client/core/no-fouc.ts

@@ -0,0 +1,28 @@
+import { ColorSchemePreference, ResolvedScheme } from "../../utils";
+
+declare global {
+  // skipcq: JS-0102, JS-C1002, JS-0239
+  var u: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
+  // skipcq: JS-0102, JS-C1002, JS-0239
+  var m: MediaQueryList;
+}
+
+/** function to be injected in script tag for avoiding FOUC */
+export const noFOUCScript = (storageKey: string) => {
+  const [SYSTEM, DARK] = ["system", "dark"] as const;
+  window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
+    const resolvedMode = mode === SYSTEM ? systemMode : mode;
+    const el = document.documentElement;
+    if (resolvedMode === DARK) el.classList.add(DARK);
+    else el.classList.remove(DARK);
+    [
+      ["sm", systemMode],
+      ["rm", resolvedMode],
+      ["m", mode],
+    ].forEach(([dataLabel, value]) => el.setAttribute(`data-${dataLabel}`, value));
+    // System mode is decided by current system state and need not be stored in localStorage
+    localStorage.setItem(storageKey, mode);
+  };
+  window.m = matchMedia(`(prefers-color-scheme: ${DARK})`);
+  u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, m.matches ? DARK : "");
+};

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [4cc739a]
+  - nextjs-darkmode@1.0.4
+
 ## 0.0.11
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",