Refactor and upgrade r18gs

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nextjs-darkmode
 
+## 1.0.7
+
+### Patch Changes
+
+- 0357fca: Upgrade r18gs
+
 ## 1.0.5
 
 ### 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.6",
+  "version": "1.0.7",
   "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",
@@ -74,7 +74,7 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
-    "r18gs": "^2.0.0"
+    "r18gs": "^2.0.1"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

lib/src/client/switch/switch.test.tsx

@@ -24,7 +24,7 @@ describe("switch", () => {
   test("color-scheme-toggle with skip system", async ({ expect }) => {
     const hook = renderHook(() => useMode());
     act(() => {
-      hook.result.current.setMode(SYSTEM);
+      hook.result.current.setMode(LIGHT);
     });
     render(<Switch skipSystem>Switch with children</Switch>);
     const element = screen.getByTestId("switch");

lib/src/client/switch/switch.tsx

@@ -27,45 +27,31 @@ export const Switch = ({
   size = 24,
   skipSystem,
   children,
-  ...props
+  ...tagProps
 }: SwitchProps) => {
-  const [state, setState] = useStore();
+  const [{ m, s }, setState] = useStore();
+  const n = modes.length - (skipSystem ? 1 : 0);
   /** toggle mode */
-  const handleModeSwitch = () => {
-    let index = modes.indexOf(state.m);
-    const n = modes.length;
-    if (skipSystem && index === n - 1) index = 0;
+  tagProps.onClick = () =>
     setState({
-      ...state,
-      m: modes[(index + 1) % n],
+      s,
+      m: modes[(modes.indexOf(m) + 1) % n],
     });
-  };
-  if (children) {
-    return (
-      // @ts-expect-error -- too complex types
-      <Tag
-        suppressHydrationWarning
-        {...props}
-        data-testid="switch"
-        // skipcq: JS-0417
-        onClick={handleModeSwitch}>
-        {/* @ts-expect-error -> we are setting the CSS variable */}
-        <div className={styles.switch} style={{ "--size": `${size}px` }} />
-        {children}
-      </Tag>
-    );
+
+  const className = styles.switch;
+  const style = { "--size": `${size}px` };
+
+  if (!children) {
+    tagProps.className += " " + className;
+    tagProps.style = { ...tagProps.style, ...style };
   }
+
   return (
-    <Tag
-      // Hydration warning is caused when the data from localStorage differs from the default data provided while rendering on server
-      suppressHydrationWarning
-      {...props}
-      className={[props.className, styles.switch].join(" ")}
-      // @ts-expect-error -> we are setting the CSS variable
-      style={{ "--size": `${size}px` }}
-      data-testid="switch"
-      // skipcq: JS-0417 -> tradeoff between size and best practices
-      onClick={handleModeSwitch}
-    />
+    // @ts-expect-error -- too complex types
+    <Tag suppressHydrationWarning {...tagProps} data-testid="switch">
+      {/* @ts-expect-error -> we are setting the CSS variable */}
+      {children && <div {...{ className, style }} />}
+      {children}
+    </Tag>
   );
 };

lib/src/constants.ts

@@ -4,4 +4,4 @@ export const SYSTEM: ColorSchemePreference = "system";
 export const DARK: ResolvedScheme = "dark";
 export const LIGHT: ResolvedScheme = "";
 
-export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];
+export const modes: ColorSchemePreference[] = [DARK, LIGHT, SYSTEM];

lib/src/utils.ts

@@ -12,9 +12,9 @@ export interface Store {
 export const useStore = () =>
   useRGS<Store>("ndm", () => {
     if (typeof document === "undefined") return { m: SYSTEM, s: DARK };
-    const el = document.documentElement;
+    const [m, s] = ["m", "sm"].map(dt => document.documentElement.getAttribute("data-" + dt));
     return {
-      m: (el.getAttribute("data-m") ?? SYSTEM) as ColorSchemePreference,
-      s: el.getAttribute("data-sm") as ResolvedScheme,
+      m: (m ?? SYSTEM) as ColorSchemePreference,
+      s: s as ResolvedScheme,
     };
   });

packages/shared/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @repo/shared
 
+## 0.0.14
+
+### Patch Changes
+
+- 0357fca: Upgrade r18gs
+- Updated dependencies [0357fca]
+  - nextjs-darkmode@1.0.7
+
 ## 0.0.13
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
     "@repo/scripts": "workspace:*",
     "nextjs-darkmode": "workspace:*",
     "nextjs-themes": "^4.0.3",
-    "r18gs": "^2.0.0",
+    "r18gs": "^2.0.1",
     "react-live": "^4.1.8",
     "react18-loaders": "^1.1.3"
   },