fix: theme replacer

Author: codebender828

packages/nuxt/src/module.ts

@@ -4,6 +4,7 @@ import {
   createResolver,
   addServerPlugin,
   installModule,
+  addPluginTemplate,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
 import { ChakraPluginOptions } from "@chakra-ui/vue-next"
@@ -35,8 +36,22 @@ export default defineNuxtModule<ChakraPluginOptions>({
     installModule("@nuxtjs/emotion")
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = resolve("./runtime")
+    const templatesDir = resolve("./templates")
+    nuxt.options.build.transpile.push("@chakra-ui")
     nuxt.options.build.transpile.push(runtimeDir)
     addServerPlugin(resolve(runtimeDir, "chakra.server"))
-    addPlugin(resolve(runtimeDir, "chakra.universal"))
+    // addPluginTemplate(resolve(templatesDir, "chakra.universal.t"))
+    addPluginTemplate({
+      src: resolve(templatesDir, "chakra.universal.t.js"),
+      options: {
+        theme: theme,
+        cssReset: true,
+        icons: {},
+        emotionCacheOptions: {
+          key: "chakra",
+        },
+        isBaseTheme: true,
+      } as ChakraPluginOptions,
+    })
   },
 })

packages/nuxt/src/templates/chakra.universal.t.ts

@@ -0,0 +1,91 @@
+import { defineNuxtPlugin } from "#imports"
+import Chakra, {
+  chakra,
+  cookieStorageManagerSSR,
+  extendChakra,
+  ColorModeConstants,
+  ColorModeScriptProps,
+  ChakraPluginOptions,
+} from "@chakra-ui/vue-next"
+import { domElements } from "@chakra-ui/vue-system"
+import { parseCookies } from "h3"
+
+type AllowedSSRColorMode = Exclude<
+  ColorModeScriptProps["initialColorMode"],
+  "system"
+>
+
+const extendedTheme = <%= (function() {
+  // keep a list of serialized functions
+  const functions = []
+
+  // json replacer - returns a placeholder for functions
+  const jsonReplacer = (key, val) => {
+    if (typeof val === 'function') {
+      functions.push(val.toString())
+      return "{func_" + (functions.length - 1) + "}"
+    }
+    return val
+  };
+
+  // regex replacer - replaces placeholders with functions
+  const funcReplacer = (match, id) => {
+    return functions[id]
+  }
+
+  const result = JSON
+    .stringify(options.extendTheme || {}, jsonReplacer, 2)
+    .replace(/"\{func_(\d+)\}"/g, funcReplacer)
+
+  return result
+})() %>
+
+
+export default defineNuxtPlugin((nuxtApp) => {
+
+  // SSR Color Mode Handling
+  let ssrColorMode: AllowedSSRColorMode
+  const event = nuxtApp.ssrContext?.event
+  if (event) {
+    const parsedCookies = parseCookies(event)
+    const colorMode = parsedCookies[ColorModeConstants.CookieStorageKey]
+    if (colorMode) {
+      ssrColorMode = colorMode as AllowedSSRColorMode
+    } else {
+      // TODO: Replace with options color mode
+      ssrColorMode = "light"
+    }
+  }
+
+  const app = nuxtApp.vueApp
+  const isBrowser = typeof document !== "undefined"
+
+  // Variable merging
+  const cssReset = <%= options.cssReset %>
+  const icons = <%= JSON.stringify(options.icons, null, 2) %>
+  const isBaseTheme = <%= options.isBaseTheme %>
+  const emotionCacheOptions = <%= JSON.stringify(options.emotionCacheOptions || {}, null, 2) %>
+
+  const pluginOptions: ChakraPluginOptions = {
+    cssReset,
+    extendTheme: extendedTheme,
+    icons,
+    emotionCacheOptions,
+    isBaseTheme
+  }
+
+  // Install plugin
+  app.use(
+    Chakra,
+    extendChakra({
+      ...pluginOptions,
+      colorModeManager: cookieStorageManagerSSR(
+        ColorModeConstants.CookieStorageKey
+      ),
+    })
+  )
+
+  domElements.forEach((tag) => {
+    app.component(`chakra.${tag}`, chakra(tag))
+  })
+})