feat: import build process

Author: codebender828

modules/nuxt/build.config.ts

@@ -0,0 +1,10 @@
+import { defineBuildConfig } from "unbuild"
+
+export default defineBuildConfig({
+  declaration: true,
+  entries: [
+    "src/module",
+    { input: "src/runtime/", outDir: `dist/runtime`, ext: "mjs" },
+  ],
+  failOnWarn: false,
+})

modules/nuxt/chakra-shims.d.ts

@@ -0,0 +1 @@
+import type * as Chakra from "@chakra-ui/vue-next"

modules/nuxt/package.json

@@ -9,7 +9,7 @@
     }
   },
   "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "types": "./dist/module.d.ts",
   "files": [
     "dist"
   ],
@@ -30,7 +30,8 @@
     "@chakra-ui/vue-next": "workspace:*",
     "@emotion/css": "^11.10.5",
     "@emotion/server": "^11.10.0",
-    "@nuxtjs/emotion": "1.0.0"
+    "@nuxtjs/emotion": "1.0.0",
+    "unbuild": "^1.1.1"
   },
   "peerDependencies": {
     "vue": "^3.1.4"

modules/nuxt/playground/app.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { chakra, useColorMode } from "@chakra-ui/vue-next"
+import { chakra, useColorMode, CHStack } from "@chakra-ui/vue-next"
 
 const { colorMode, toggleColorMode } = useColorMode()
 </script>

modules/nuxt/playground/nuxt.config.ts

@@ -5,11 +5,11 @@ import type * as NuxtSchema from "@nuxt/schema"
 export default defineNuxtConfig({
   ssr: true,
   modules: [chakraModule],
-  // chakra: {
-  //   extendTheme: {
-  //     colors: {
-  //       $brand: "#f5f",
-  //     },
-  //   },
-  // },
+  chakra: {
+    extendTheme: {
+      colors: {
+        $brand: "#f5f",
+      },
+    },
+  },
 })

modules/nuxt/src/module.ts

@@ -4,7 +4,6 @@ import {
   createResolver,
   addServerPlugin,
   installModule,
-  addPluginTemplate,
   addComponent,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
@@ -14,7 +13,6 @@ import {
   extendTheme as _extendTheme,
 } from "@chakra-ui/vue-next"
 import { mergeWith } from "@chakra-ui/utils"
-import * as ChakraComponents from "@chakra-ui/vue-next"
 
 /** Chakra UI Vue SSR Context State */
 export interface ChakraUISSRContext {
@@ -29,31 +27,17 @@ declare global {
   }
 }
 
-function getChakraComponents() {
-  const Components = []
-  const _ChakraComponents = ChakraComponents as Record<string, any>
-  for (const component in _ChakraComponents) {
-    /**
-     * Group of strict checks to make sure that
-     * we only generate types for components.
-     */
-    if (
-      component.startsWith("C") &&
-      _ChakraComponents[component]?.name &&
-      _ChakraComponents[component]?.setup &&
-      typeof _ChakraComponents[component]?.setup === "function"
-    ) {
-      Components.push(_ChakraComponents[component])
-    }
-  }
-
-  return Components
-}
 export type ChakraModuleOptions = Omit<ChakraPluginOptions, "colorModeManager">
 
 const defaultModuleOptions: ChakraModuleOptions = {
   cssReset: true,
-  isBaseTheme: false,
+  isBaseTheme: true,
+}
+
+declare module "@nuxt/schema" {
+  interface AppConfig {
+    $chakraConfig: ChakraModuleOptions
+  }
 }
 
 export default defineNuxtModule<ChakraModuleOptions>({
@@ -77,37 +61,22 @@ export default defineNuxtModule<ChakraModuleOptions>({
 
     nuxt.options.build.transpile.push("@chakra-ui")
 
+    nuxt.options.appConfig.$chakraConfig = {
+      extendTheme,
+      isBaseTheme,
+      icons,
+      cssReset,
+      emotionCacheOptions,
+    }
+
     // Install emotion module
     installModule("@nuxtjs/emotion")
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = resolve("./runtime")
     nuxt.options.build.transpile.push(runtimeDir)
 
-    for (const Component of getChakraComponents()) {
-      addComponent({
-        name: Component.name,
-        export: Component.name,
-        filePath: "@chakra-ui/vue-next",
-      })
-    }
-
     // Resolve template and inject plugin
     addPlugin(resolve(runtimeDir, "chakra"))
     addServerPlugin(resolve(runtimeDir, "chakra.server"))
-    // addPluginTemplate(
-    //   {
-    //     src: resolve(runtimeDir, "templates/chakra.universal.t.js"),
-    //     options: {
-    //       extendTheme,
-    //       cssReset,
-    //       icons,
-    //       emotionCacheOptions,
-    //       isBaseTheme,
-    //     } as ChakraPluginOptions,
-    //   },
-    //   {
-    //     append: true,
-    //   }
-    // )
   },
 })

modules/nuxt/src/runtime/chakra.ts

@@ -1,5 +1,5 @@
 import type * as NuxtAppTypes from "nuxt/app"
-import { defineNuxtPlugin } from "#imports"
+import { defineNuxtPlugin, useAppConfig } from "#imports"
 import Chakra, {
   chakra,
   cookieStorageManagerSSR,
@@ -10,16 +10,26 @@ import Chakra, {
 } from "@chakra-ui/vue-next"
 import { domElements } from "@chakra-ui/vue-system"
 import { parseCookies } from "h3"
+import type { ChakraModuleOptions } from "../module"
 
 type AllowedSSRColorMode = Exclude<
   ColorModeScriptProps["initialColorMode"],
   "system"
 >
 
+declare module "@nuxt/schema" {
+  interface App {
+    $chakraConfig: ChakraModuleOptions
+  }
+}
+
 export default defineNuxtPlugin((nuxtApp) => {
   const app = nuxtApp.vueApp
   const isBrowser = typeof document !== "undefined"
 
+  const config = useAppConfig()
+  const chakraConfig = config.$chakraConfig
+
   // SSR Color Mode Handling
   let ssrColorMode
   const event = nuxtApp.ssrContext?.event
@@ -39,10 +49,21 @@ export default defineNuxtPlugin((nuxtApp) => {
   app.use(
     Chakra,
     extendChakra({
-      cssReset: true,
+      ...(chakraConfig.emotionCacheOptions && {
+        emotionCacheOptions: chakraConfig.emotionCacheOptions,
+      }),
+      ...(chakraConfig.cssReset && {
+        cssReset: chakraConfig.cssReset,
+      }),
       extendTheme: extendTheme({
-        colors: {
-          $brand: "#f5f",
+        ...(chakraConfig.extendTheme && chakraConfig.extendTheme),
+        config: {
+          ...(chakraConfig.extendTheme?.config && {
+            extendTheme: chakraConfig.extendTheme.config,
+          }),
+          initialColorMode: isBrowser
+            ? window.$chakraSSRContext?.theme?.ssrColorMode
+            : ssrColorMode,
         },
       }),
       colorModeManager: cookieStorageManagerSSR(

modules/nuxt/src/runtime/templates/chakra.universal.t.js

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

modules/nuxt/tsconfig.json

@@ -3,7 +3,6 @@
   "version": "2.0.0-beta.1",
   "main": "dist/chakra-ui-c-accordion.cjs.js",
   "module": "dist/chakra-ui-c-accordion.esm.js",
-  "typings": "dist/chakra-ui-c-accordion.d.ts",
   "files": [
     "dist"
   ],