build(nuxt): copy runtime

Author: codebender828

.eslintignore

@@ -5,4 +5,5 @@ dist
 # documentation for adding ESLint for Vue 3 projects running on Vite.
 # For this reason, we ignore the playground directory.
 playground
-snapshots.js
+snapshots.js
+chakra.universal.t.js

examples/nuxt-app/app.vue

@@ -5,6 +5,7 @@
     justify-content="center"
     align-items="center"
   >
+    <CButton>Hello Chakra</CButton>
     <chakra.button
       @click="toggleColorMode"
       px="4"
@@ -16,6 +17,8 @@
       Click me to toggle | {{ colorMode }}
     </chakra.button>
 
+    <client-only><c-avatar name="Jonathan Bakebwa" /></client-only>
+
     <chakra.button px="4" py="3" bg="$brand" font-weight="bold">
       Extended Component
     </chakra.button>

packages/nuxt/package.json

@@ -17,7 +17,7 @@
   "author": "Jonathan Bakebwa [email protected]",
   "license": "MIT",
   "scripts": {
-    "build": "tsup && pnpm build:types",
+    "build": "tsup --onSuccess 'cp -a src/templates dist' && pnpm build:types",
     "build:fast": "tsup",
     "dev": "tsup --watch",
     "clean": "rimraf dist .turbo",

packages/nuxt/src/module.ts

@@ -95,7 +95,7 @@ export default defineNuxtModule<ChakraModuleOptions>({
     addPlugin(resolve(runtimeDir, "chakra.factory.universal"))
     addPluginTemplate(
       {
-        src: resolve(templatesDir, "chakra.universal.t.ts"),
+        src: resolve(templatesDir, "chakra.universal.t.js"),
         options: {
           extendTheme,
           cssReset,

packages/nuxt/src/templates/chakra.universal.t.ts renamed to packages/nuxt/src/templates/chakra.universal.t.js

@@ -3,15 +3,10 @@ import Chakra, {
   cookieStorageManagerSSR,
   extendChakra,
   ColorModeConstants,
-  ColorModeScriptProps,
   extendTheme
 } from "@chakra-ui/vue-next"
 import { parseCookies } from "h3"
 
-type AllowedSSRColorMode = Exclude<
-  ColorModeScriptProps["initialColorMode"],
-  "system"
->
 
 const extendedTheme = <%= (function() {
   // keep a list of serialized functions
@@ -42,14 +37,14 @@ const extendedTheme = <%= (function() {
 export default defineNuxtPlugin((nuxtApp) => {
 
   // SSR Color Mode Handling
-  let ssrColorMode: AllowedSSRColorMode
+  let ssrColorMode
   const event = nuxtApp.ssrContext?.event
 
   if (event) {
     const parsedCookies = parseCookies(event)
     const colorMode = parsedCookies[ColorModeConstants.CookieStorageKey]
     if (colorMode) {
-      ssrColorMode = colorMode as AllowedSSRColorMode
+      ssrColorMode = colorMode
     } else {
       // TODO: Replace with options color mode
       ssrColorMode = "light"

packages/nuxt/test/fixture/nuxt.config.ts

@@ -1,6 +1,6 @@
-import { defineNuxtConfig } from 'nuxt/config'
-import emotionModule from '../..'
+import { defineNuxtConfig } from "nuxt/config"
+import chakraModule from "../.."
 
 export default defineNuxtConfig({
-  modules: [emotionModule]
+  modules: [chakraModule],
 })

packages/nuxt/tsconfig.json

@@ -1,5 +1,6 @@
 {
   // "extends": "../../tsconfig.json",
   "extends": "./playground/.nuxt/tsconfig.json",
-  "include": ["src", "./index.tsx", "./index.ts"]
+  "include": ["src", "./index.tsx", "./index.ts"],
+  "exclude": ["src/templates"]
 }