Merge pull request #8 from react18-tools/patch/update-rgs

Patch/update rgs

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-darkmode
 
+## 0.1.1
+
+### Patch Changes
+
+- 70a2236: Fix: FOUC
+
 ## 0.1.0
 
 ### Minor Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-darkmode",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
@@ -67,7 +67,7 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "r18gs": "^1.0.2"
+    "r18gs": "^1.1.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

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

@@ -1,9 +1,8 @@
 import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, test } from "vitest";
-import { ServerTarget } from "../../server";
 import { Core } from "./core";
 import { useMode } from "../../hooks";
-import { COOKIE_KEY, DARK, LIGHT, SYSTEM } from "../../constants";
+import { COOKIE_KEY, DARK, LIGHT, MEDIA } from "../../constants";
 
 describe("theme-switcher", () => {
   afterEach(cleanup);
@@ -35,5 +34,13 @@ describe("theme-switcher", () => {
     expect(hook.result.current.mode).toBe(DARK);
   });
 
-  test.todo("test media change event -- not supported by fireEvent");
+  test("test media change event", async ({ expect }) => {
+    const hook = renderHook(() => useMode());
+    await act(() => {
+      // globalThis.window.media = LIGHT as ResolvedScheme;
+      // @ts-expect-error -- ok
+      matchMedia(MEDIA).onchange?.();
+    });
+    expect(hook.result.current.mode).toBe(DARK);
+  });
 });

lib/src/client/core/core.tsx

@@ -1,4 +1,4 @@
-import { COOKIE_KEY, DARK, LIGHT, SYSTEM, modes } from "../../constants";
+import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM, modes } from "../../constants";
 import { ColorSchemePreference, Store, useStore } from "../../utils";
 import { useEffect } from "react";
 
@@ -41,17 +41,11 @@ export const Core = ({ t, nonce }: CoreProps) => {
   const resolvedMode = mode === SYSTEM ? systemMode : mode; // resolvedMode is the actual mode that will be used
 
   useEffect(() => {
-    const media = matchMedia(`(prefers-color-scheme: ${DARK})`);
+    const media = matchMedia(MEDIA);
     /** Updating media: prefers-color-scheme*/
     const updateSystemColorScheme = () =>
       setThemeState(state => ({ ...state, s: media.matches ? DARK : LIGHT }) as Store);
-    updateSystemColorScheme();
     media.addEventListener("change", updateSystemColorScheme);
-
-    setThemeState(state => ({
-      ...state,
-      m: (localStorage.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
-    }));
     /** Sync the tabs */
     const storageListener = (e: StorageEvent): void => {
       if (e.key === COOKIE_KEY)

lib/src/constants.ts

@@ -6,3 +6,5 @@ export const LIGHT: ColorSchemePreference = "light";
 
 export const COOKIE_KEY = "gx";
 export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];
+
+export const MEDIA = `(prefers-color-scheme: ${DARK})`;

lib/src/utils.ts

@@ -1,5 +1,5 @@
 import useRGS from "r18gs";
-import { DARK, SYSTEM } from "./constants";
+import { COOKIE_KEY, DARK, LIGHT, MEDIA, SYSTEM } from "./constants";
 
 export type ColorSchemePreference = "system" | "dark" | "light";
 export type ResolvedScheme = "dark" | "light";
@@ -14,4 +14,13 @@ const DEFAULT_STORE_VAL: Store = {
 };
 
 /** local abstaction of RGS to avoid multiple imports */
-export const useStore = () => useRGS<Store>("ndm", DEFAULT_STORE_VAL);
+export const useStore = () =>
+  useRGS<Store>("ndm", () =>
+    typeof localStorage === "undefined"
+      ? /* v8 ignore next */
+        DEFAULT_STORE_VAL
+      : {
+          m: (localStorage.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
+          s: (matchMedia(MEDIA).matches ? DARK : LIGHT) as ResolvedScheme,
+        },
+  );

lib/vitest.setup.ts

@@ -1,14 +1,19 @@
 import { vi } from "vitest";
 
+const mediaListeners: (() => void)[] = [];
 // mock matchMedia
 Object.defineProperty(window, "matchMedia", {
   writable: true,
   value: vi.fn().mockImplementation((query: string) => ({
     matches: query.includes(window.media),
     media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
+    onchange() {
+      this.matches = query.includes(window.media);
+      mediaListeners.forEach(listener => listener());
+    },
+    addEventListener: (_: string, listener: () => void) => mediaListeners.push(listener),
+    removeEventListener: (_: string, listener: () => void) =>
+      mediaListeners.splice(mediaListeners.indexOf(listener), 1),
     dispatchEvent: vi.fn(),
   })),
 });

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [70a2236]
+  - [email protected]
+
 ## 0.0.4
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
     "@repo/scripts": "workspace:*",
     "nextjs-darkmode": "workspace:*",
     "nextjs-themes": "^3.1.1",
-    "r18gs": "^1.0.2",
+    "r18gs": "^1.1.0",
     "react-live": "^4.1.6",
     "react18-loaders": "^1.1.1"
   },

packages/shared/vitest.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   test: {
     environment: "jsdom",
     globals: true,
-    setupFiles: [],
+    setupFiles: ["vitest.setup.ts"],
     coverage: {
       include: ["src/**"],
       exclude: ["src/**/index.ts", "src/**/declaration.d.ts"],

packages/shared/vitest.setup.ts

@@ -0,0 +1,37 @@
+import { vi } from "vitest";
+
+const mediaListeners: (() => void)[] = [];
+// mock matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: query.includes(window.media),
+    media: query,
+    onchange() {
+      this.matches = query.includes(window.media);
+      mediaListeners.forEach(listener => listener());
+    },
+    addEventListener: (_: string, listener: () => void) => mediaListeners.push(listener),
+    removeEventListener: (_: string, listener: () => void) =>
+      mediaListeners.splice(mediaListeners.indexOf(listener), 1),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+declare global {
+  interface Window {
+    media: "dark" | "light";
+  }
+  // skipcq: JS-0102
+  var cookies: Record<string, { value: string }>; // eslint-disable-line no-var -- let is not supported in defining global due to block scope
+}
+Object.defineProperty(window, "media", {
+  writable: true,
+  value: "dark",
+});
+
+globalThis.cookies = {};
+
+vi.mock("next/headers", () => ({
+  cookies: () => ({ get: (cookieName: string) => globalThis.cookies[cookieName] }),
+}));