Merge pull request #3 from react18-tools/fix/doc-comments

mayank1513 · web-flow · commit d3ba198fe1a5 · 2024-06-09T18:35:58.000+05:30
Fix/doc-comments
diff --git a/.tkb b/.tkb
@@ -125,14 +125,20 @@
       "id": "W_uPAM5Vm86aJ8yEEMKHh",
       "description": "Update examples\n- Add example for tailwind",
       "columnId": "column-todo"
+    },
+    "zE0aqgk59cyZ95s5TkECd": {
+      "id": "zE0aqgk59cyZ95s5TkECd",
+      "description": "Update doc comments",
+      "columnId": "column-todo"
     }
   },
   "columns": [
     {
       "id": "column-todo",
       "title": "To do",
       "tasksIds": [
-        "W_uPAM5Vm86aJ8yEEMKHh"
+        "W_uPAM5Vm86aJ8yEEMKHh",
+        "zE0aqgk59cyZ95s5TkECd"
       ]
     },
     {
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
     <html lang="en">
       <body className={inter.className}>
         <ServerTarget />
-        <Core />
+        <Core t="all .5s" />
         <Layout>
           <Header />
           {children}
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md
@@ -0,0 +1,7 @@
+# nextjs-darkmode
+
+## 0.0.1
+
+### Patch Changes
+
+- Update doc comments, improve minification.
diff --git 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": "0.0.0",
+  "version": "0.0.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",
diff --git a/lib/src/client/core/core.tsx b/lib/src/client/core/core.tsx
@@ -1,40 +1,37 @@
-import { COOKIE_KEY, DARK, LIGHT, MAX_AGE, SYSTEM, modes } from "../../constants";
+import { COOKIE_KEY, DARK, LIGHT, SYSTEM, modes } from "../../constants";
 import { ColorSchemePreference, Store, useStore } from "../../utils";
 import { useEffect } from "react";
 
 const useEffectMinify = useEffect;
+const localStorageMinify = localStorage;
 export interface CoreProps {
   /** force apply CSS transition property to all the elements during theme switching. E.g., `all .3s` */
   t?: string;
 }
 
+/** Modify transition globally to avoid patched transitions */
 const modifyTransition = (documentMinify: Document, themeTransition = "none") => {
   const css = documentMinify.createElement("style");
   /** split by ';' to prevent CSS injection */
-  const transition = `transition: ${themeTransition.split(";")[0]} !important;`;
-  css.appendChild(
-    documentMinify.createTextNode(
-      `*{-webkit-${transition}-moz-${transition}-o-${transition}-ms-${transition}${transition}}`,
-    ),
-  );
-  documentMinify.head.appendChild(css);
+  css.textContent = `*{transition:${themeTransition.split(";")[0]} !important;}`;
+  const head = documentMinify.head;
+  head.appendChild(css);
 
   return () => {
     // Force restyle
     getComputedStyle(documentMinify.body);
     // Wait for next tick before removing
-    setTimeout(() => {
-      documentMinify.head.removeChild(css);
-    }, 1);
+    setTimeout(() => head.removeChild(css), 1);
   };
 };
 
 /**
- *
+ *  The Core component wich applies classes and transitions.
+ * Cookies are set only if corresponding ServerTarget is detected.
  *
  * @example
  * ```tsx
- * <Core />
+ * <Core [t="background-color .3s"]/>
  * ```
  *
  * @source - Source code
@@ -53,7 +50,7 @@ export const Core = ({ t }: CoreProps) => {
 
     setThemeState(state => ({
       ...state,
-      m: (localStorage.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
+      m: (localStorageMinify?.getItem(COOKIE_KEY) ?? SYSTEM) as ColorSchemePreference,
     }));
     /** Sync the tabs */
     const storageListener = (e: StorageEvent): void => {
@@ -83,10 +80,10 @@ export const Core = ({ t }: CoreProps) => {
     });
     restoreTransitions();
     // System mode is decided by current system state and need not be stored in localStorage
-    localStorage.setItem(COOKIE_KEY, mode);
+    localStorageMinify?.setItem(COOKIE_KEY, mode);
     if (serverTargetEl)
-      documentMinify.cookie = `${COOKIE_KEY}=${resolvedMode};max-age=${MAX_AGE};SameSite=Strict;`;
-  }, [resolvedMode, systemMode, mode]);
+      documentMinify.cookie = `${COOKIE_KEY}=${resolvedMode};max-age=31536000;SameSite=Strict;`;
+  }, [resolvedMode, systemMode, mode, t]);
 
   return null;
 };
diff --git a/lib/src/client/switch/switch.tsx b/lib/src/client/switch/switch.tsx
@@ -13,11 +13,11 @@ export interface SwitchProps extends HTMLProps<HTMLElement> {
 }
 
 /**
- *
+ * Switch button to quickly toggle user preference.
  *
  * @example
  * ```tsx
- * <Switch />
+ * <Switch [size={20} skipSystem]/>
  * ```
  *
  * @source - Source code
diff --git a/lib/src/constants.ts b/lib/src/constants.ts
@@ -3,7 +3,6 @@ import { ColorSchemePreference } from "./utils";
 export const SYSTEM: ColorSchemePreference = "system";
 export const DARK: ColorSchemePreference = "dark";
 export const LIGHT: ColorSchemePreference = "light";
-export const MAX_AGE = 31536000;
 
 export const COOKIE_KEY = "gx";
 export const modes: ColorSchemePreference[] = [SYSTEM, DARK, LIGHT];
diff --git a/lib/src/hooks/use-mode.ts b/lib/src/hooks/use-mode.ts
@@ -9,11 +9,11 @@ export interface UseModeYeild {
 }
 
 /**
- *
+ * use this hook to gain access to mode state and setter.
  *
  * @example
  * ```tsx
- * const [] = useMode(options);
+ * const {resolvedMode, setMode} = useMode(options);
  * ```
  *
  * @source - Source code
diff --git a/lib/src/server/server-target/server-target.tsx b/lib/src/server/server-target/server-target.tsx
@@ -3,6 +3,7 @@ import { COOKIE_KEY, LIGHT } from "../../constants";
 
 /**
  * Server Side target for avoiding flash of un-themed content.
+ *
  * @example
  * ```tsx
  * <html>
@@ -13,6 +14,8 @@ import { COOKIE_KEY, LIGHT } from "../../constants";
  *   </body>
  * </html>
  * ```
+ *
+ * @source - Source code
  */
 export const ServerTarget = () => {
   const rm = cookies().get(COOKIE_KEY)?.value ?? LIGHT;
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
@@ -0,0 +1,8 @@
+# @repo/shared
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - nextjs-darkmode@0.0.1
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",

Original file line number	Diff line number	Diff line change
`@@ -125,14 +125,20 @@`
`125`	`125`	`"id": "W_uPAM5Vm86aJ8yEEMKHh",`
`126`	`126`	`"description": "Update examples\n- Add example for tailwind",`
`127`	`127`	`"columnId": "column-todo"`
	`128`	`+ },`
	`129`	`+ "zE0aqgk59cyZ95s5TkECd": {`
	`130`	`+ "id": "zE0aqgk59cyZ95s5TkECd",`
	`131`	`+ "description": "Update doc comments",`
	`132`	`+ "columnId": "column-todo"`
`128`	`133`	`}`
`129`	`134`	`},`
`130`	`135`	`"columns": [`
`131`	`136`	`{`
`132`	`137`	`"id": "column-todo",`
`133`	`138`	`"title": "To do",`
`134`	`139`	`"tasksIds": [`
`135`		`- "W_uPAM5Vm86aJ8yEEMKHh"`
	`140`	`+ "W_uPAM5Vm86aJ8yEEMKHh",`
	`141`	`+ "zE0aqgk59cyZ95s5TkECd"`
`136`	`142`	`]`
`137`	`143`	`},`
`138`	`144`	`{`
Original file line number	Diff line number	Diff line change
`@@ -13,11 +13,11 @@ export interface SwitchProps extends HTMLProps<HTMLElement> {`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`/**`
`16`		`- *`
	`16`	`+ * Switch button to quickly toggle user preference.`
`17`	`17`	`*`
`18`	`18`	`* @example`
`19`	`19`	* ```tsx
`20`		`- * <Switch />`
	`20`	`+ * <Switch [size={20} skipSystem]/>`
`21`	`21`	* ```
`22`	`22`	`*`
`23`	`23`	`* @source - Source code`
Original file line number	Diff line number	Diff line change
`@@ -9,11 +9,11 @@ export interface UseModeYeild {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`/**`
`12`		`- *`
	`12`	`+ * use this hook to gain access to mode state and setter.`
`13`	`13`	`*`
`14`	`14`	`* @example`
`15`	`15`	* ```tsx
`16`		`- * const [] = useMode(options);`
	`16`	`+ * const {resolvedMode, setMode} = useMode(options);`
`17`	`17`	* ```
`18`	`18`	`*`
`19`	`19`	`* @source - Source code`