fix(useColorMode, useDark): fix full page reflows when calling useColorMode and useDark (#4001)

jpleclerc · Jean-Philippe Leclerc · antfu · web-flow · commit 905b9702b881 · 2024-07-17T13:55:04.000Z
Co-authored-by: Jean-Philippe Leclerc &lt;jpleclerc@outlook.com&gt;
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useColorMode/index.test.ts b/packages/core/useColorMode/index.test.ts
@@ -1,5 +1,5 @@
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue-demi'
+import { nextTick, ref } from 'vue-demi'
 import { nextTwoTick } from '../../.test'
 import { usePreferredDark } from '../usePreferredDark'
 import { useColorMode } from '.'
@@ -123,4 +123,51 @@ describe('useColorMode', () => {
     expect(mode.system.value).toBe('light')
     expect(mode.state.value).toBe('light')
   })
+
+  it('should call classList.add/classList.remove only if mode changed', async () => {
+    const target = document.createElement('div')
+
+    const mode = useColorMode({ selector: target, initialValue: 'light' })
+
+    await nextTick()
+
+    const addClass = vi.spyOn(target.classList, 'add')
+    const removeClass = vi.spyOn(target.classList, 'remove')
+
+    mode.value = 'light'
+
+    await nextTick()
+
+    expect(addClass).not.toHaveBeenCalled()
+    expect(removeClass).not.toHaveBeenCalled()
+
+    mode.value = 'dark'
+
+    await nextTick()
+
+    expect(addClass).toHaveBeenCalled()
+    expect(removeClass).toHaveBeenCalled()
+  })
+
+  it('should call setAttribute only if mode changed', async () => {
+    const target = document.createElement('div')
+
+    const mode = useColorMode({ selector: target, initialValue: 'light', attribute: 'data-color-mode' })
+
+    await nextTick()
+
+    const setAttr = vi.spyOn(target, 'setAttribute')
+
+    mode.value = 'light'
+
+    await nextTick()
+
+    expect(setAttr).not.toHaveBeenCalled()
+
+    mode.value = 'dark'
+
+    await nextTick()
+
+    expect(setAttr).toHaveBeenCalled()
+  })
 })
diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts
@@ -100,6 +100,8 @@ export type UseColorModeReturn<T extends string = BasicColorMode> =
     state: ComputedRef<T | BasicColorMode>
   }
 
+const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+
 /**
  * Reactive color mode with auto data persistence.
  *
@@ -152,13 +154,9 @@ export function useColorMode<T extends string = BasicColorMode>(
       if (!el)
         return
 
-      let style: HTMLStyleElement | undefined
-      if (disableTransition) {
-        style = window!.document.createElement('style')
-        const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
-        style.appendChild(document.createTextNode(styleString))
-        window!.document.head.appendChild(style)
-      }
+      const classesToAdd = new Set<string>()
+      const classesToRemove = new Set<string>()
+      let attributeToChange: { key: string, value: string } | null = null
 
       if (attribute === 'class') {
         const current = value.split(/\s/g)
@@ -167,13 +165,34 @@ export function useColorMode<T extends string = BasicColorMode>(
           .filter(Boolean)
           .forEach((v) => {
             if (current.includes(v))
-              el.classList.add(v)
+              classesToAdd.add(v)
             else
-              el.classList.remove(v)
+              classesToRemove.add(v)
           })
       }
       else {
-        el.setAttribute(attribute, value)
+        attributeToChange = { key: attribute, value }
+      }
+
+      if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
+        // Nothing changed so we can avoid reflowing the page
+        return
+
+      let style: HTMLStyleElement | undefined
+      if (disableTransition) {
+        style = window!.document.createElement('style')
+        style.appendChild(document.createTextNode(CSS_DISABLE_TRANS))
+        window!.document.head.appendChild(style)
+      }
+
+      for (const c of classesToAdd) {
+        el.classList.add(c)
+      }
+      for (const c of classesToRemove) {
+        el.classList.remove(c)
+      }
+      if (attributeToChange) {
+        el.setAttribute(attributeToChange.key, attributeToChange.value)
       }
 
       if (disableTransition) {
