Merge pull request #45 from react18-tools/alpha

Optimize, and minify

Author: mayank1513

.github/workflows/docs.yml

@@ -29,13 +29,11 @@ jobs:
           git pull
       - run: npm i -g pnpm && pnpm i --no-frozen-lockfile
         name: Install dependencies
-      - name: Test
-        run: npm test
       - run: git stash --include-untracked
         name: clean up working directory
       - run: npx @turbo/codemod update . && pnpm update --latest -r
         name: Update dependencies
-      - run: pnpm build
+      - run: pnpm build --filter @examples/app
         name: Build all apps to make sure it is not broken due to dependency upgrades
       - name: Run unit tests
         run: pnpm test

lib/package.json

@@ -134,7 +134,7 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
-    "r18gs": "3.0.1"
+    "r18gs": "2.0.2"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

lib/src/client/force-color-scheme/force-color-scheme.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { useEffect } from "react";
-import { useForcedStore } from "../../store";
+import { useThemeStore } from "../../store";
 import { ColorSchemeType } from "../../types";
 
 /** Force color scheme on a page */
 export const ForceColorScheme = (props: {
   colorScheme: ColorSchemeType;
   targetSelector?: string;
 }) => {
-  const [_, setState] = useForcedStore(props.targetSelector);
+  const [_, setState] = useThemeStore(props.targetSelector);
   useEffect(() => {
     setState(state => ({ ...state, fc: props.colorScheme }));
     return () => {

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

@@ -1,10 +1,10 @@
 "use client";
 import { useEffect } from "react";
-import { useForcedStore } from "../../store";
+import { useThemeStore } from "../../store";
 
 /** Force theme on a page */
 export const ForceTheme = (props: { theme: string; targetSelector?: string }) => {
-  const [_, setState] = useForcedStore(props.targetSelector);
+  const [_, setState] = useThemeStore(props.targetSelector);
   useEffect(() => {
     setState(state => ({ ...state, f: props.theme }));
     return () => {

lib/src/client/switcher/switcher.tsx

@@ -1,14 +1,12 @@
-import { useEffect } from "react";
 import { ThemeSwitcherProps } from "../theme-switcher";
 import { DARK, DEFAULT_ID, LIGHT } from "../../constants";
-import { useForcedStore, useThemeStore } from "../../store";
+import { UNDEFINED, useThemeStore } from "../../store";
 import type { ResolveFunc, UpdateDOMFunc, UpdateForcedPropsFunc } from "../theme-switcher/no-fouc";
 
 let media: MediaQueryList;
 let updateDOM: UpdateDOMFunc;
 let resolveTheme: ResolveFunc;
 let updateForcedProps: UpdateForcedPropsFunc;
-let updateForcedState: UpdateForcedPropsFunc;
 
 /** disable transition while switching theme */
 const modifyTransition = (themeTransition = "none") => {
@@ -44,35 +42,24 @@ export const Switcher = ({
   const k = targetSelector || "#" + DEFAULT_ID;
 
   const [state, setState] = useThemeStore(targetSelector);
-  const [forced] = useForcedStore(targetSelector);
 
-  useEffect(() => {
-    if (typeof m !== "undefined")
-      [media, updateDOM, resolveTheme, updateForcedProps, updateForcedState] = [m, u, r, f, g];
+  if (typeof m != UNDEFINED && !updateForcedProps) {
+    [media, updateDOM, resolveTheme, updateForcedProps] = [m, u, r, f];
 
     media.addEventListener("change", () =>
       setState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
     );
     addEventListener("storage", e => {
       if (e.key === k) setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
     });
-  }, []);
-
-  useEffect(() => {
+  }
+  if (updateForcedProps) {
+    updateForcedProps(forcedTheme, forcedColorScheme);
     const restoreThansitions = modifyTransition(themeTransition);
     updateDOM(resolveTheme(state), k);
     restoreThansitions();
-    localStorage.setItem(k, JSON.stringify(state));
-  }, [state]);
-
-  useEffect(() => {
-    updateForcedProps(forcedTheme, forcedColorScheme);
-    updateDOM(resolveTheme(state), k);
-  }, [forcedColorScheme, forcedTheme]);
-
-  useEffect(() => {
-    updateForcedState(forced.f, forced.fc);
-    updateDOM(resolveTheme(state), k);
-  }, [forced]);
+    const { f, fc, ...others } = state;
+    localStorage.setItem(k, JSON.stringify(others));
+  }
   return null;
 };

lib/src/client/theme-switcher/no-fouc.ts

@@ -20,8 +20,6 @@ declare global {
   var r: ResolveFunc;
   // skipcq: JS-0102, JS-C1002, JS-0239
   var f: UpdateForcedPropsFunc;
-  // skipcq: JS-0102, JS-C1002, JS-0239 update forcedState
-  var g: UpdateForcedPropsFunc;
 }
 
 export type ScriptArgs = [
@@ -70,13 +68,10 @@ export const noFOUCScript = (
     forcedColorScheme = forcedColorSchemeProp_ = forcedColorSchemeProp;
   };
 
-  window.g = (forcedThemeState, forcedColorSchemeState) => {
-    forcedTheme = forcedThemeProps_ ?? forcedThemeState;
-    forcedColorScheme = forcedColorSchemeProp_ ?? forcedColorSchemeState;
-  };
-
   f(forcedTheme_, forcedColorScheme_);
   window.r = (store: ThemeStoreType) => {
+    forcedTheme = forcedThemeProps_ ?? store.f;
+    forcedColorScheme = forcedColorSchemeProp_ ?? store.fc;
     const colorSchemePref = forcedColorScheme ?? store.c;
     const colorScheme = colorSchemePref === initialState.c ? store.s : colorSchemePref;
     const theme = colorScheme === "" ? store.t : colorScheme === initialState.d ? store.d : store.l;

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

@@ -1,6 +1,6 @@
 import { ColorSchemeType } from "../../types";
 import { noFOUCScript, type ScriptArgs } from "./no-fouc";
-import { initialState } from "../../store";
+import { initialState, UNDEFINED } from "../../store";
 import { DEFAULT_ID } from "../../constants";
 import { Switcher } from "../switcher";
 
@@ -53,7 +53,7 @@ const Script = ({
     forcedColorScheme,
   ] as ScriptArgs;
   // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  typeof window !== "undefined" && noFOUCScript(...args);
+  typeof window != UNDEFINED && noFOUCScript(...args);
   return (
     <script
       // skipcq: JS-0440

lib/src/hooks/use-theme.ts

@@ -1,5 +1,4 @@
-import { useEffect } from "react";
-import { useForcedStore, useThemeStore } from "../store";
+import { UNDEFINED, useThemeStore } from "../store";
 import { ResolveFunc } from "../client/theme-switcher/no-fouc";
 import { ColorSchemeType, ResolvedColorSchemeType } from "../types";
 import { DARK, LIGHT, SYSTEM } from "../constants";
@@ -37,10 +36,7 @@ export interface UseThemeYield {
 
 export const useTheme = (targetSelector?: string): UseThemeYield => {
   const [state, setState] = useThemeStore(targetSelector);
-  const [_, setForcedState] = useForcedStore(targetSelector);
-  useEffect(() => {
-    resolveTheme = window.r;
-  }, []);
+  if (!resolveTheme && typeof window != UNDEFINED) resolveTheme = window.r;
 
   /** helper */
   const setter =
@@ -67,8 +63,8 @@ export const useTheme = (targetSelector?: string): UseThemeYield => {
       if (index === -1 || (skipSystem && index === len - 1)) index = 0;
       setter("c")(colorSchemes[(index + 1) % len]);
     },
-    setForcedColorScheme: fc => setForcedState(state => ({ ...state, fc })),
-    setForcedTheme: f => setForcedState(state => ({ ...state, f })),
+    setForcedColorScheme: setter<ColorSchemeType>("fc"),
+    setForcedTheme: setter<string>("f"),
   };
 
   if (resolveTheme) {

lib/src/store.ts

@@ -14,6 +14,11 @@ export interface ThemeStoreType {
   c: ColorSchemeType;
   /** systemColorScheme */
   s: ResolvedColorSchemeType;
+
+  /** forced theme */
+  f?: string;
+  /** forced colorScheme */
+  fc?: ColorSchemeType;
 }
 
 /** @internal */
@@ -25,23 +30,13 @@ export const initialState: ThemeStoreType = {
   s: LIGHT,
 };
 
+export const UNDEFINED = "undefined";
+
 /** @internal store */
 export const useThemeStore = (targetSelector?: string) => {
   const key = targetSelector ?? "#" + DEFAULT_ID;
   return useRGS<ThemeStoreType>(key, () => {
-    const str = typeof m !== "undefined" && localStorage.getItem(key);
+    const str = typeof m !== UNDEFINED && localStorage.getItem(key);
     return str ? { ...JSON.parse(str), s: m.matches ? DARK : LIGHT } : initialState;
   });
 };
-
-/** @internal */
-export interface ForcedStoreType {
-  /** forced theme */ f?: string;
-  /** forced colorScheme */ fc?: ColorSchemeType;
-}
-
-/** @internal */
-export const useForcedStore = (targetSelector?: string) => {
-  const key = `${targetSelector ?? `#${DEFAULT_ID}`}-`;
-  return useRGS<ForcedStoreType>(key, {});
-};