Merge pull request #12 from react18-tools/refactor

Refactor

Author: mayank1513

.github/workflows/publish.yml

@@ -8,9 +8,7 @@ on:
 
 jobs:
   publish:
-    # Don't run just after creating repo from template
-    # Also avoid running after merging set-up PR
-    if: github.run_number > 2 && github.event.repository.owner.login == 'react18-tools'
+    if: github.event.repository.owner.login == 'react18-tools'
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -35,7 +33,7 @@ jobs:
       - name: Test
         run: pnpm test
       - name: Copy Readme file
-        run: cp ./README.md ./lib # will be uncommented while rebranding
+        run: cp ./README.md ./lib
       - name: Apply changesets, publish and create release, branches and tags
         run: node ./scripts/publish.js
         env:

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # nthul
 
+## 1.0.1
+
+### Patch Changes
+
+- Refactor to minify
+
 ## 1.0.0
 
 ### Major Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "nthul",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/client/color-switch/color-switch.tsx

@@ -27,7 +27,7 @@ interface ColorSwitchProps extends HTMLProps<HTMLDivElement> {
  *
  * @source - Source code
  */
-export function ColorSwitch({ targetId, skipSystem, size, ...props }: ColorSwitchProps) {
+export const ColorSwitch = ({ targetId, skipSystem, size, ...props }: ColorSwitchProps) => {
   const {
     setColorSchemePreference,
     resolvedColorScheme: rcs,

lib/src/client/theme-switcher/theme-switcher.tsx

@@ -1,9 +1,8 @@
-import useRGS from "r18gs";
 import type { SetStateAction } from "r18gs";
 import type { ColorSchemePreference, ThemeState } from "../../constants";
-import { DEFAULT_ID, DEFAULT_THEME_STATE } from "../../constants";
+import { DEFAULT_ID,  useRGSMinify } from "../../constants";
 import { useEffect } from "react";
-
+const useEffectMinify = useEffect;
 export interface ThemeSwitcherProps {
   /** id of target element to apply classes to. This is useful when you want to apply theme only to specific container. */
   targetId?: string;
@@ -17,11 +16,11 @@ export interface ThemeSwitcherProps {
 
 /** Add media query listener */
 const useMediaQuery = (setThemeState: SetStateAction<ThemeState>) => {
-  useEffect(() => {
+  useEffectMinify(() => {
     // set event listener for media
     const media = matchMedia("(prefers-color-scheme: dark)");
     const updateSystemColorScheme = () => {
-      setThemeState(state => ({ ...state, systemColorScheme: media.matches ? "dark" : "light" }));
+      setThemeState(state => ({ ...state, s: media.matches ? "dark" : "light" }));
     };
     updateSystemColorScheme();
     media.addEventListener("change", updateSystemColorScheme);
@@ -31,65 +30,57 @@ const useMediaQuery = (setThemeState: SetStateAction<ThemeState>) => {
   }, [setThemeState]);
 };
 
-export interface LoadSyncedStateProps extends ThemeSwitcherProps {
-  setThemeState: SetStateAction<ThemeState>;
-}
-
-const parseState = (str?: string | null) => {
+const parseState = (str?: string | null): Partial<ThemeState> => {
   const parts = (str ?? ",system").split(",") as [string, ColorSchemePreference];
-  return { theme: parts[0], colorSchemePreference: parts[1] };
+  return { t: parts[0], c: parts[1] };
 };
 
 let tInit = 0;
 
-const useLoadSyncedState = ({ dontSync, targetId, setThemeState }: LoadSyncedStateProps) => {
-  useEffect(() => {
+const useLoadSyncedState = ( setThemeState: SetStateAction<ThemeState>, dontSync?:boolean, targetId?:string  ) => {
+  useEffectMinify(() => {
     if (dontSync) return;
     tInit = Date.now();
     const key = targetId ?? DEFAULT_ID;
     setThemeState(state => ({ ...state, ...parseState(localStorage.getItem(key)) }));
-    const storageListener = (e: StorageEvent) => {
+    const storageListener = (e: StorageEvent):void => {
       if (e.key === key) setThemeState(state => ({ ...state, ...parseState(e.newValue) }));
     };
-    window.addEventListener("storage", storageListener);
+    addEventListener("storage", storageListener);
+    // skipcq: JS-0045
     return () => {
-      window.removeEventListener("storage", storageListener);
+      removeEventListener("storage", storageListener);
     };
   }, [dontSync, setThemeState, targetId]);
 };
 
 const modifyTransition = (themeTransition = "none", targetId?: string) => {
-  const css = document.createElement("style");
+  const documentMinify = document;
+  const css = documentMinify.createElement("style");
   /** split by ';' to prevent CSS injection */
   const transition = `transition: ${themeTransition.split(";")[0]} !important;`;
   const targetSelector = targetId
     ? `#${targetId},#${targetId} *,#${targetId} ~ *,#${targetId} ~ * *`
     : "*";
   css.appendChild(
-    document.createTextNode(
+    documentMinify.createTextNode(
       `${targetSelector}{-webkit-${transition}-moz-${transition}-o-${transition}-ms-${transition}${transition}}`,
     ),
   );
-  document.head.appendChild(css);
+  documentMinify.head.appendChild(css);
 
   return () => {
     // Force restyle
-    (() => window.getComputedStyle(document.body))();
+    (() => getComputedStyle(documentMinify.body))();
     // Wait for next tick before removing
     setTimeout(() => {
-      document.head.removeChild(css);
+      documentMinify.head.removeChild(css);
     }, 1);
   };
 };
 
-export interface ApplyClassesProps {
-  targets: (HTMLElement | null)[];
-  theme: string;
-  resolvedColorScheme: "light" | "dark";
-  styles?: Record<string, string>;
-}
-
-const applyClasses = ({ targets, theme, resolvedColorScheme, styles }: ApplyClassesProps) => {
+/** Apply classes to the targets */
+const applyClasses = ( targets: (HTMLElement | null)[], theme: string, resolvedColorScheme: "light" | "dark", styles?: Record<string, string>) => {
   let cls = ["dark", "light", `th-${theme}`, resolvedColorScheme];
   if (styles) cls = cls.map(c => styles[c] ?? c);
 
@@ -104,29 +95,24 @@ const applyClasses = ({ targets, theme, resolvedColorScheme, styles }: ApplyClas
   });
 };
 
-export interface UpdateDOMProps {
-  targetId?: string;
-  themeState: ThemeState;
-  dontSync?: boolean;
-  styles?: Record<string, string>;
-}
-
-const updateDOM = ({ targetId, themeState, dontSync, styles }: UpdateDOMProps) => {
-  const { theme, colorSchemePreference: csp, systemColorScheme: scs } = themeState;
+/** Update DOM */
+const updateDOM = (themeState: ThemeState, targetId?: string, dontSync?: boolean, styles?:Record<string, string>) => {
+  const { t: theme, c: csp, s: scs } = themeState;
   const resolvedColorScheme = csp === "system" ? scs : csp;
   const key = targetId ?? DEFAULT_ID;
   // update DOM
   let shoulCreateCookie = false;
-  const target = document.getElementById(key);
+  const documentMinify = document;
+  const target = documentMinify.getElementById(key);
   shoulCreateCookie = !dontSync && target?.getAttribute("data-nth") === "next";
 
   /** do not update documentElement for local targets */
-  const targets = targetId ? [target] : [target, document.documentElement];
+  const targets = targetId ? [target] : [target, documentMinify.documentElement];
 
-  applyClasses({ targets, styles, resolvedColorScheme, theme });
+  applyClasses( targets,theme, resolvedColorScheme, styles);
 
   if (shoulCreateCookie)
-    document.cookie = `${key}=${theme},${resolvedColorScheme}; max-age=31536000; SameSite=Strict;`;
+    documentMinify.cookie = `${key}=${theme},${resolvedColorScheme}; max-age=31536000; SameSite=Strict;`;
 };
 
 /**
@@ -140,22 +126,19 @@ export const ThemeSwitcher = ({
   styles,
 }: ThemeSwitcherProps) => {
   if (targetId === "") throw new Error("id can not be an empty string");
-  const [themeState, setThemeState] = useRGS<ThemeState>(
-    targetId ?? DEFAULT_ID,
-    DEFAULT_THEME_STATE,
-  );
+  const [themeState, setThemeState] = useRGSMinify(targetId);
 
   useMediaQuery(setThemeState);
 
-  useLoadSyncedState({ dontSync, targetId, setThemeState });
+  useLoadSyncedState(setThemeState , dontSync, targetId);
 
   /** update DOM and storage */
-  useEffect(() => {
+  useEffectMinify(() => {
     const restoreTransitions = modifyTransition(themeTransition, targetId);
-    updateDOM({ targetId, themeState, dontSync, styles });
+    updateDOM(themeState, targetId,  dontSync, styles);
     if (!dontSync && tInit < Date.now() - 300) {
       // save to localStorage
-      const { theme, colorSchemePreference } = themeState;
+      const { t: theme, c: colorSchemePreference } = themeState;
       const stateToSave = [theme, colorSchemePreference].join(",");
       const key = targetId ?? DEFAULT_ID;
       localStorage.setItem(key, stateToSave);

lib/src/constants.ts

@@ -1,16 +1,24 @@
+import useRGS from "r18gs";
+
 /** shared constants -- keep in separate files for better tree-shaking and dependency injection */
 export const DEFAULT_ID = "nthul";
 
 export type ColorSchemePreference = "system" | "dark" | "light";
 
 export interface ThemeState {
-  colorSchemePreference: ColorSchemePreference;
-  systemColorScheme: "dark" | "light";
-  theme: string;
+  /** ColorSchemePreference */
+  c: ColorSchemePreference;
+  /** SystemColorScheme */
+  s: "dark" | "light";
+  /** Theme */
+  t: string;
 }
 
-export const DEFAULT_THEME_STATE = {
-  colorSchemePreference: "system" as ColorSchemePreference,
-  systemColorScheme: "light" as "light" | "dark",
-  theme: "",
+const DEFAULT_THEME_STATE:ThemeState = {
+  c: "system" as ColorSchemePreference,
+  s: "light",
+  t: "",
 };
+
+/** To avoid multiple r18gs imports */
+export const useRGSMinify = (targetId?:string) => useRGS<ThemeState>(targetId??DEFAULT_ID, DEFAULT_THEME_STATE);

lib/src/hooks/use-theme.ts

@@ -1,6 +1,5 @@
-import useRGS from "r18gs";
-import type { ColorSchemePreference, ThemeState } from "../constants";
-import { DEFAULT_ID, DEFAULT_THEME_STATE } from "../constants";
+import type { ColorSchemePreference } from "../constants";
+import { useRGSMinify } from "../constants";
 
 export interface UseTheme {
   theme: string;
@@ -17,16 +16,18 @@ export interface UseTheme {
  * @returns themeState and setter fucntions
  */
 export const useTheme = (targetId?: string): UseTheme => {
-  const [themeState, setState] = useRGS<ThemeState>(targetId ?? DEFAULT_ID, DEFAULT_THEME_STATE);
-  const { colorSchemePreference: csp, systemColorScheme: scs } = themeState;
+  const [themeState, setState] = useRGSMinify(targetId);
+  const { c: csp, s: scs, t } = themeState;
   return {
-    ...themeState,
+    theme: t,
+    colorSchemePreference: csp,
+    systemColorScheme: scs,
     resolvedColorScheme: csp === "system" ? scs : csp,
     setColorSchemePreference: (colorSchemePreference: ColorSchemePreference) => {
-      setState({ ...themeState, colorSchemePreference });
+      setState({ ...themeState, c: colorSchemePreference });
     },
     setTheme: (theme: string) => {
-      setState({ ...themeState, theme });
+      setState({ ...themeState, t: theme });
     },
   };
 };

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
 ## 0.0.1
 
 ### Patch Changes

packages/shared/package.json

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

scripts/publish.js

@@ -1,5 +1,7 @@
 /** It is assumed that this is called only from the default branch. */
-const { execSync } = require("child_process");
+const { execSync, exec } = require("child_process");
+const fs = require("fs");
+const path = require("path");
 
 // Apply changesets if any -- e.g., coming from pre-release branches
 try {
@@ -16,7 +18,8 @@ try {
   // no changesets to be applied
 }
 
-const { version: VERSION, name } = require("../lib/package.json");
+const packageJSON = require("../lib/package.json");
+const { version: VERSION, name } = packageJSON;
 const LATEST_VERSION = execSync(`npm view ${name} version`).toString();
 
 console.log({ VERSION, LATEST_VERSION });
@@ -39,3 +42,27 @@ execSync("cd lib && pnpm build && npm publish --provenance --access public");
 execSync(
   `gh release create ${VERSION} --generate-notes --latest -n "$(sed '1,/^## /d;/^## /,$d' CHANGELOG.md)" --title "Release v${VERSION}"`,
 );
+
+// update canonicals
+
+const publishCanonical = (canonical) => {
+  packageJSON.name = canonical;
+  fs.writeFileSync(pkgPath, JSON.stringify(packageJSON, null, 2));
+  exec("cd lib && pnpm build && npm publish --provenance --access public");
+}
+
+const canonicals = [`@mayank1513/${name}`, 'nextjs-themes-ultra']
+const pkgPath = path.join(__dirname, "../lib/package.json");
+canonicals.forEach(publishCanonical);
+
+// lite version
+packageJson.peerDependencies.r18gs = "^1";
+delete packageJson.dependencies;
+
+const liteCanonicals = ['nthul-lite', '@mayank1513/nthul-lite', 'nextjs-themes-ultralite'];
+
+liteCanonicals.forEach(publishCanonical);
+
+const toDeprecate = ['@mayank1513/nthul', '@mayank1513/nthul-lite']
+
+toDeprecate.forEach(pkg => exec(`npm deprecate ${pkg} "Please use <https://www.npmjs.com/package/${pkg.slice('/')[1]}> instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist.`))