optimize

.changeset/pretty-boats-refuse.md

@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": patch
+---
+
+Optimize

.github/workflows/docs.yml

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

examples/nextjs-pages/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@repo/eslint-config/next.js";
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig;

examples/nextjs/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@repo/eslint-config/next.js";
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig;

examples/nextjs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/tailwind/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@repo/eslint-config/next.js";
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig;

examples/vite/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react.js";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

lib/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react.js";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

lib/package.json

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

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

@@ -42,7 +42,7 @@ describe("theme-switcher", () => {
     await act(() => {
       // globalThis.window.media = LIGHT as ResolvedScheme;
       // @ts-expect-error -- ok
-      m.onchange?.();
+      q.onchange?.();
     });
     expect(hook.result.current.mode).toBe(DARK);
   });

lib/src/client/core/core.tsx

@@ -1,6 +1,5 @@
 import { DARK, LIGHT } from "../../constants";
 import { ColorSchemePreference, ResolvedScheme, useStore } from "../../utils";
-import { useEffect } from "react";
 import { noFOUCScript } from "./no-fouc";
 
 let media: MediaQueryList,
@@ -36,17 +35,18 @@ export interface CoreProps {
 
 /** Modify transition globally to avoid patched transitions */
 const modifyTransition = (themeTransition = "none", nonce = "") => {
-  const css = document.createElement("style");
+  const doc = document;
+  const css = doc.createElement("style");
   /** split by ';' to prevent CSS injection */
   css.textContent = `*,*:after,*:before{transition:${themeTransition.split(";")[0]} !important;}`;
-  nonce && css.setAttribute("nonce", nonce);
-  document.head.appendChild(css);
+  css.setAttribute("nonce", nonce);
+  doc.head.appendChild(css);
 
   return () => {
     // Force restyle
-    getComputedStyle(document.body);
+    getComputedStyle(doc.body);
     // Wait for next tick before removing
-    setTimeout(() => document.head.removeChild(css), 1);
+    setTimeout(() => doc.head.removeChild(css), 1);
   };
 };
 
@@ -62,14 +62,15 @@ const modifyTransition = (themeTransition = "none", nonce = "") => {
  * @source - Source code
  */
 export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
+  const isWindowDefined = typeof window != "undefined";
   // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  if (typeof window !== "undefined" && !window.m) noFOUCScript(k);
+  if (isWindowDefined && !window.q) noFOUCScript(k);
 
-  const [{ m: mode, s: systemMode }, setThemeState] = useStore();
+  const [{ m, s }, setThemeState] = useStore();
 
-  useEffect(() => {
+  if (!updateDOM && isWindowDefined) {
     // store global functions to local variables to avoid any interference
-    [media, updateDOM] = [m, u];
+    [media, updateDOM] = [q, u];
     /** Updating media: prefers-color-scheme*/
     media.addEventListener("change", () =>
       setThemeState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
@@ -78,13 +79,12 @@ export const Core = ({ t, nonce, k = "o" }: CoreProps) => {
     addEventListener("storage", (e: StorageEvent): void => {
       e.key === k && setThemeState(state => ({ ...state, m: e.newValue as ColorSchemePreference }));
     });
-  }, []);
-
-  useEffect(() => {
+  }
+  if (updateDOM) {
     const restoreTransitions = modifyTransition(t, nonce);
-    updateDOM(mode, systemMode);
+    updateDOM(m, s);
     restoreTransitions();
-  }, [systemMode, mode, t, nonce]);
+  }
 
   return <Script {...{ n: nonce, k }} />;
 };

lib/src/client/core/no-fouc.ts

@@ -4,7 +4,7 @@ declare global {
   // skipcq: JS-0102, JS-C1002, JS-0239
   var u: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
   // skipcq: JS-0102, JS-C1002, JS-0239
-  var m: MediaQueryList;
+  var q: MediaQueryList;
 }
 
 /** function to be injected in script tag for avoiding FOUC */
@@ -23,6 +23,6 @@ export const noFOUCScript = (storageKey: string) => {
     // System mode is decided by current system state and need not be stored in localStorage
     localStorage.setItem(storageKey, mode);
   };
-  window.m = matchMedia(`(prefers-color-scheme: ${DARK})`);
-  u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, m.matches ? DARK : "");
+  window.q = matchMedia(`(prefers-color-scheme: ${DARK})`);
+  u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, q.matches ? DARK : "");
 };

lib/src/utils.ts

@@ -11,7 +11,7 @@ export interface Store {
 /** local abstaction of RGS to avoid multiple imports */
 export const useStore = () =>
   useRGS<Store>("ndm", () => {
-    if (typeof document === "undefined") return { m: SYSTEM, s: DARK };
+    if (typeof document == "undefined") return { m: SYSTEM, s: DARK };
     const [m, s] = ["m", "sm"].map(dt => document.documentElement.getAttribute("data-" + dt));
     return {
       m: (m ?? SYSTEM) as ColorSchemePreference,

packages/config-eslint/base.js

@@ -0,0 +1,32 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import turboPlugin from "eslint-plugin-turbo";
+import tseslint from "typescript-eslint";
+import onlyWarn from "eslint-plugin-only-warn";
+
+/**
+ * A shared ESLint configuration for the repository.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+];

packages/config-eslint/next.js

@@ -1,43 +1,49 @@
-const { resolve } = require("node:path");
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginReact from "eslint-plugin-react";
+import globals from "globals";
+import pluginNext from "@next/eslint-plugin-next";
+import { config as baseConfig } from "./base.js";
 
-const project = resolve(process.cwd(), "tsconfig.json");
-
-/*
- * This is a custom ESLint configuration for use with
- * Next.js apps.
- *
- * This config extends the Vercel Engineering Style Guide.
- * For more information, see https://github.com/vercel/style-guide
+/**
+ * A custom ESLint configuration for libraries that use Next.js.
  *
- */
-
-module.exports = {
-  extends: [
-    "@vercel/style-guide/eslint/node",
-    "@vercel/style-guide/eslint/typescript",
-    "@vercel/style-guide/eslint/browser",
-    "@vercel/style-guide/eslint/react",
-    "@vercel/style-guide/eslint/next",
-    "eslint-config-turbo",
-  ].map(require.resolve),
-  parserOptions: {
-    project,
-  },
-  globals: {
-    React: true,
-    JSX: true,
-  },
-  plugins: ["only-warn"],
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
+ * @type {import("eslint").Linter.Config}
+ * */
+export const nextJsConfig = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
       },
     },
   },
-  ignorePatterns: [".*.js", "node_modules/", "dist/"],
-  // add rules configurations here
-  rules: {
-    "import/no-default-export": "off",
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+    },
   },
-};
+];

packages/config-eslint/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@repo/eslint-config",
-  "license": "MIT",
   "version": "0.0.0",
+  "type": "module",
   "private": true,
   "devDependencies": {
-    "@vercel/style-guide": "^6.0.0",
-    "eslint-config-turbo": "^2.3.3",
-    "eslint-plugin-mdx": "^3.1.5",
+    "@next/eslint-plugin-next": "^15.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-only-warn": "^1.1.0",
-    "eslint-plugin-storybook": "^0.11.1"
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-turbo": "^2.3.3",
+    "globals": "^15.14.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1"
   }
-}
+}