fix: move script to head and set forced color mode on <html> element (

#128)
nuxt-modules · Feb 21, 2022 · 273f07e · 273f07e
1 parent 3a3e8c9
commit 273f07e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/src/runtime/plugin.server.ts b/src/runtime/plugin.server.ts
@@ -10,7 +10,6 @@ const addScript = (head) => {
   head.script.push({
     hid,
     innerHTML: script,
-    pbody: true
   })
   const serializeProp = '__dangerouslyDisableSanitizersByTagID'
   head[serializeProp] = head[serializeProp] || {}
@@ -25,7 +24,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     forced: false
   })).value
 
-  const bodyAttrs = {}
+  const htmlAttrs = {}
 
   if (isVue2) {
     const app = nuxtApp.nuxt2Context.app
@@ -35,28 +34,20 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       app.head = function () {
         const head = originalHead.call(this) || {}
         addScript(head)
-        head.bodyAttrs = bodyAttrs
+        head.htmlAttrs = htmlAttrs
         return head
       }
     } else {
       addScript(app.head)
-      app.head.bodyAttrs = bodyAttrs
+      app.head.htmlAttrs = htmlAttrs
     }
   }
 
   if (isVue3) {
-    useMeta({ bodyAttrs })
-
-    // Workaround until we have support in vueuse/head
-    if ('renderMeta' in nuxtApp.ssrContext) {
-      const originalRender = nuxtApp.ssrContext.renderMeta
-      nuxtApp.ssrContext.renderMeta = async () => {
-        const result = await originalRender()
-        // Remove any after https://github.com/nuxt/framework/pull/3257 is merged
-        ;(result as any).bodyScriptsPrepend = `<script>${script}</script>` + ((result as any).bodyScriptsPrepend || '')
-        return result
-      }
-    }
+    useMeta({
+      htmlAttrs,
+      script: [{ children: script }]
+    })
   }
 
   useRouter().afterEach((to) => {
@@ -65,9 +56,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       : to.meta.colorMode
 
     if (forcedColorMode && forcedColorMode !== 'system') {
-      colorMode.value = forcedColorMode
+      colorMode.value = htmlAttrs['data-color-mode-forced'] = forcedColorMode
       colorMode.forced = true
-      bodyAttrs['data-color-mode-forced'] = forcedColorMode
     } else {
       if (forcedColorMode === 'system') {
         console.warn('You cannot force the colorMode to system at the page level.')

diff --git a/src/script.ts b/src/script.ts
@@ -2,15 +2,14 @@
 
 // Global variable minimizers
 const w = window
-const d = document
-const de = d.documentElement
+const de = document.documentElement
 
 const knownColorSchemes = ['dark', 'light']
 
 const preference = window.localStorage.getItem('<%= options.storageKey %>') || '<%= options.preference %>'
 let value = preference === 'system' ? getColorScheme() : preference
 // Applied forced color mode
-const forcedColorMode = d.body.getAttribute('data-color-mode-forced')
+const forcedColorMode = de.getAttribute('data-color-mode-forced')
 if (forcedColorMode) {
   value = forcedColorMode
 }