From ea14aa9c464e08e6e877a7b8c23a04685ff93f85 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:40:49 -0700
Subject: [PATCH 1/3] move inline script to a separate file for free
 minificaiton

---
 examples/example/pages/dark.js  |   6 +-
 examples/example/pages/index.js |   8 +--
 examples/example/pages/light.js |   6 +-
 next-themes/src/index.tsx       | 107 ++++++++------------------------
 next-themes/src/script.ts       |  61 ++++++++++++++++++
 next-themes/src/types.ts        |   9 ++-
 6 files changed, 96 insertions(+), 101 deletions(-)
 create mode 100644 next-themes/src/script.ts

diff --git a/examples/example/pages/dark.js b/examples/example/pages/dark.js
index facac2c..ee715d6 100644
--- a/examples/example/pages/dark.js
+++ b/examples/example/pages/dark.js
@@ -1,11 +1,7 @@
 import Link from 'next/link'
 
 const Page = () => {
-  return (
-    <Link href="/">
-      <a>Go back home</a>
-    </Link>
-  )
+  return <Link href="/">Go back home</Link>
 }
 
 Page.theme = 'dark'
diff --git a/examples/example/pages/index.js b/examples/example/pages/index.js
index 0b318c1..3e68f6e 100644
--- a/examples/example/pages/index.js
+++ b/examples/example/pages/index.js
@@ -24,13 +24,7 @@ const Index = () => {
       <br />
 
       <div>
-        <Link href="/dark">
-          <a>Forced Dark Page</a>
-        </Link>{' '}
-        •{' '}
-        <Link href="/light">
-          <a>Forced Light Page</a>
-        </Link>
+        <Link href="/dark">Forced Dark Page</Link> • <Link href="/light">Forced Light Page</Link>
       </div>
     </div>
   )
diff --git a/examples/example/pages/light.js b/examples/example/pages/light.js
index 2deacd6..26c6bfe 100644
--- a/examples/example/pages/light.js
+++ b/examples/example/pages/light.js
@@ -1,11 +1,7 @@
 import Link from 'next/link'
 
 const Page = () => {
-  return (
-    <Link href="/">
-      <a>Go back home</a>
-    </Link>
-  )
+  return <Link href="/">Go back home</Link>
 }
 
 Page.theme = 'light'
diff --git a/next-themes/src/index.tsx b/next-themes/src/index.tsx
index eb07351..d02f61b 100644
--- a/next-themes/src/index.tsx
+++ b/next-themes/src/index.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import type { UseThemeProps, ThemeProviderProps } from './types'
+import { script } from './script'
 
 const colorSchemes = ['light', 'dark']
 const MEDIA = '(prefers-color-scheme: dark)'
@@ -158,7 +159,6 @@ const Theme = ({
           attribute,
           value,
           children,
-          attrs,
           nonce
         }}
       />
@@ -177,88 +177,31 @@ const ThemeScript = React.memo(
     enableColorScheme,
     defaultTheme,
     value,
-    attrs,
+    themes,
     nonce
-  }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {
-    const defaultSystem = defaultTheme === 'system'
-
-    // Code-golfing the amount of characters in the script
-    const optimization = (() => {
-      if (attribute === 'class') {
-        const removeClasses = `c.remove(${attrs.map((t: string) => `'${t}'`).join(',')})`
-
-        return `var d=document.documentElement,c=d.classList;${removeClasses};`
-      } else {
-        return `var d=document.documentElement,n='${attribute}',s='setAttribute';`
-      }
-    })()
-
-    const fallbackColorScheme = (() => {
-      if (!enableColorScheme) {
-        return ''
-      }
-
-      const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null
-
-      if (fallback) {
-        return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`
-      } else {
-        return `if(e==='light'||e==='dark')d.style.colorScheme=e`
-      }
-    })()
-
-    const updateDOM = (name: string, literal: boolean = false, setColorScheme = true) => {
-      const resolvedName = value ? value[name] : name
-      const val = literal ? name + `|| ''` : `'${resolvedName}'`
-      let text = ''
-
-      // MUCH faster to set colorScheme alongside HTML attribute/class
-      // as it only incurs 1 style recalculation rather than 2
-      // This can save over 250ms of work for pages with big DOM
-      if (enableColorScheme && setColorScheme && !literal && colorSchemes.includes(name)) {
-        text += `d.style.colorScheme = '${name}';`
-      }
-
-      if (attribute === 'class') {
-        if (literal || resolvedName) {
-          text += `c.add(${val})`
-        } else {
-          text += `null`
-        }
-      } else {
-        if (resolvedName) {
-          text += `d[s](n,${val})`
-        }
-      }
-
-      return text
-    }
-
-    const scriptSrc = (() => {
-      if (forcedTheme) {
-        return `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-      }
-
-      if (enableSystem) {
-        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(
-          'dark'
-        )}}else{${updateDOM('light')}}}else if(e){${
-          value ? `var x=${JSON.stringify(value)};` : ''
-        }${updateDOM(value ? `x[e]` : 'e', true)}}${
-          !defaultSystem ? `else{` + updateDOM(defaultTheme, false, false) + '}' : ''
-        }${fallbackColorScheme}}catch(e){}}()`
-      }
-
-      return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${
-        value ? `var x=${JSON.stringify(value)};` : ''
-      }${updateDOM(value ? `x[e]` : 'e', true)}}else{${updateDOM(
-        defaultTheme,
-        false,
-        false
-      )};}${fallbackColorScheme}}catch(t){}}();`
-    })()
-
-    return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />
+  }: ThemeProviderProps & { defaultTheme: string }) => {
+    const scriptProps = [
+      attribute,
+      storageKey,
+      defaultTheme,
+      forcedTheme,
+      themes,
+      value,
+      enableSystem,
+      enableColorScheme
+    ]
+
+    return (
+      <script
+        suppressHydrationWarning
+        nonce={typeof window === 'undefined' ? nonce : ''}
+        dangerouslySetInnerHTML={{
+          __html: `(${script.toString()})(${scriptProps
+            .map(p => JSON.stringify(p || null))
+            .join(',')})`
+        }}
+      />
+    )
   }
 )
 
diff --git a/next-themes/src/script.ts b/next-themes/src/script.ts
new file mode 100644
index 0000000..e854ddd
--- /dev/null
+++ b/next-themes/src/script.ts
@@ -0,0 +1,61 @@
+export const script = (...args: any[]) => {
+  const [
+    attribute,
+    storageKey,
+    defaultTheme,
+    forcedTheme,
+    themes,
+    value,
+    enableSystem,
+    enableColorScheme
+  ] = args
+
+  const el = document.documentElement
+  const media = `(prefers-color-scheme: dark)`
+  const systemThemes = ['light', 'dark']
+  const isClass = attribute === 'class'
+  const classes =
+    isClass && !!value
+      ? themes.map(t => {
+          return value[t] || t
+        })
+      : themes
+
+  function updateDOM(theme: string) {
+    if (isClass) {
+      el.classList.remove(...classes)
+      el.classList.add(theme)
+    } else {
+      el.setAttribute(attribute, theme)
+    }
+
+    setColorScheme(theme)
+  }
+
+  function setColorScheme(theme: string) {
+    if (enableColorScheme && systemThemes.includes(theme)) {
+      el.style.colorScheme = theme
+    }
+  }
+
+  function getSystemTheme() {
+    return window.matchMedia(media).matches ? 'dark' : 'light'
+  }
+
+  ;(function () {
+    if (forcedTheme) {
+      updateDOM(forcedTheme)
+    } else {
+      try {
+        const e = localStorage.getItem(storageKey)
+        const themeName = e || defaultTheme
+        const isSystem = enableSystem && themeName === 'system' ? true : false
+
+        const theme = isSystem ? getSystemTheme() : e || defaultTheme
+        updateDOM(theme)
+      } catch (e) {
+        //
+      }
+    }
+  })()
+}
diff --git a/next-themes/src/types.ts b/next-themes/src/types.ts
index e59822e..e9fd918 100644
--- a/next-themes/src/types.ts
+++ b/next-themes/src/types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-interface ValueObject {
+export interface ValueObject {
   [themeName: string]: string
 }
 
@@ -35,7 +35,7 @@ export interface ThemeProviderProps {
   /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
   defaultTheme?: string | undefined
   /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
-  attribute?: string | 'class' | undefined
+  attribute?: `data-${string}` | 'class' | undefined
   /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
   value?: ValueObject | undefined
   /** Nonce string to pass to the inline script for CSP headers */
@@ -43,3 +43,8 @@ export interface ThemeProviderProps {
   /** React children */
   children: React.ReactNode
 }
+
+export type ScriptProps = Pick<
+  ThemeProviderProps,
+  'value' | 'themes' | 'defaultTheme' | 'attribute' | 'enableColorScheme' | 'storageKey'
+>

From f6f5d03235700ca3641ff103e520f11719f1dcc4 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:42:20 -0700
Subject: [PATCH 2/3] cleanup

---
 next-themes/src/types.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/next-themes/src/types.ts b/next-themes/src/types.ts
index e9fd918..1024119 100644
--- a/next-themes/src/types.ts
+++ b/next-themes/src/types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-export interface ValueObject {
+interface ValueObject {
   [themeName: string]: string
 }
 
@@ -43,8 +43,3 @@ export interface ThemeProviderProps {
   /** React children */
   children: React.ReactNode
 }
-
-export type ScriptProps = Pick<
-  ThemeProviderProps,
-  'value' | 'themes' | 'defaultTheme' | 'attribute' | 'enableColorScheme' | 'storageKey'
->

From a9138cfbd16ceb14f5a58f4a7bf6f5bb3e05fad0 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:44:44 -0700
Subject: [PATCH 3/3] simplify

---
 next-themes/src/script.ts | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/next-themes/src/script.ts b/next-themes/src/script.ts
index e854ddd..3baaa7b 100644
--- a/next-themes/src/script.ts
+++ b/next-themes/src/script.ts
@@ -1,15 +1,13 @@
-export const script = (...args: any[]) => {
-  const [
-    attribute,
-    storageKey,
-    defaultTheme,
-    forcedTheme,
-    themes,
-    value,
-    enableSystem,
-    enableColorScheme
-  ] = args
-
+export const script = (
+  attribute,
+  storageKey,
+  defaultTheme,
+  forcedTheme,
+  themes,
+  value,
+  enableSystem,
+  enableColorScheme
+) => {
   const el = document.documentElement
   const media = `(prefers-color-scheme: dark)`
   const systemThemes = ['light', 'dark']