perf: refactor to enable tree-shaking transition code

Author: danielroe

src/runtime/plugin.client.ts

@@ -2,13 +2,12 @@ import { computed, reactive, watch } from 'vue'
 
 import type { ColorModeInstance } from './types'
 import { defineNuxtPlugin, isVue2, isVue3, useRouter, useHead, useState } from '#imports'
-import { globalName, storageKey, dataValue } from '#color-mode-options'
+import { globalName, storageKey, dataValue, disableTransition } from '#color-mode-options'
 
 // Initialise to empty object to avoid hard error when hydrating app in test mode
 const helper = (window[globalName] || {}) as unknown as {
   preference: string
   value: string
-  disableTransition: boolean
   getColorScheme: () => string
   addColorScheme: (className: string) => void
   removeColorScheme: (className: string) => void
@@ -90,14 +89,14 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   watch(() => colorMode.value, (newValue, oldValue) => {
     let style: HTMLStyleElement | undefined
-    if (helper.disableTransition) {
+    if (disableTransition) {
       style = window!.document.createElement('style')
       style.appendChild(document.createTextNode('*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'))
       window!.document.head.appendChild(style)
     }
     helper.removeColorScheme(oldValue)
     helper.addColorScheme(newValue)
-    if (helper.disableTransition) {
+    if (disableTransition) {
       // Calling getComputedStyle forces the browser to redraw
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const _ = window!.getComputedStyle(style!).opacity

src/script.js

@@ -11,7 +11,6 @@
 
   const preference = (ls && ls.getItem && ls.getItem('<%= options.storageKey %>')) || '<%= options.preference %>'
   let value = preference === 'system' ? getColorScheme() : preference
-  const disableTransition = '<%= options.disableTransition %>'
   // Applied forced color mode
   const forcedColorMode = de.getAttribute('data-color-mode-forced')
   if (forcedColorMode) {
@@ -23,8 +22,6 @@
   w['<%= options.globalName %>'] = {
     preference,
     value,
-    // @ts-ignore
-    disableTransition: disableTransition === 'true',
     getColorScheme,
     addColorScheme,
     removeColorScheme