feat(v-chakra): add support for Nuxt.js

Author: codebender828

package.json

@@ -96,6 +96,7 @@
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",
+    "defu": "^2.0.4",
     "dotenv-defaults": "^1.1.1",
     "emotion": "^10.0.27",
     "eslint": "^5.16.0",

packages/chakra-ui-core/src/Chakra/index.js

@@ -2,7 +2,7 @@ import VScrollLock from 'v-scroll-lock'
 import { merge } from 'lodash-es'
 import { parsePackIcons } from '../utils/icons'
 import internalIcons from '../lib/internal-icons'
-import { createCharkaDirective } from '../directives'
+import { createClientDirective } from '../directives'
 import defaultTheme from '../../../chakra-ui-theme/src'
 import useToast from '../CToast'
 
@@ -63,7 +63,7 @@ const Chakra = {
     // Recursively merge extended theme variables
     const mergedTheme = merge(defaultTheme, options.extendTheme)
 
-    Vue.directive('chakra', createCharkaDirective(mergedTheme))
+    Vue.directive('chakra', createClientDirective(mergedTheme))
 
     // Bind theme and icons to prototype
     Vue.prototype.$chakra = {

packages/chakra-ui-core/src/directives/chakra.directive.js

@@ -1,14 +1,14 @@
 import { css } from 'emotion'
 import Css from '../Css'
 import styleProps from '../config/props'
-import { camelize } from '../utils'
+import { camelize, kebabify } from '../utils'
 
 /** Filter attrs and return object of chakra props */
 function filterChakraProps (attrs) {
   const pure = {}
   for (const prop in attrs) {
     if (styleProps[camelize(prop)]) {
-      pure[prop] = attrs[prop]
+      pure[camelize(prop)] = attrs[prop]
     }
   }
   return pure
@@ -21,6 +21,15 @@ function purifyAttrs (el, props) {
   }
 }
 
+/** Purify's Chakra Attributes from VNode object */
+function purifyVNodeAttrs (vnode, props) {
+  if (props && vnode.data.attrs) {
+    for (const attr in props) {
+      delete vnode.data.attrs[kebabify(attr)]
+    }
+  }
+}
+
 /** Creates className from styles object */
 function createClassName (styleObject, theme, hasBindingValue = false) {
   const pure = filterChakraProps(styleObject)
@@ -32,11 +41,46 @@ function createClassName (styleObject, theme, hasBindingValue = false) {
   return [className, pure]
 }
 
-/** Creates Chakra Directive */
-export default function createCharkaDirective (theme) {
+/** Creates SSR `v-chakra` directive for Nuxt */
+export function createServerDirective (theme) {
+  return (vnode, directive) => {
+    const [className, pure] = createClassName(vnode.data.attrs, theme)
+    if (vnode.data.class) {
+      vnode.data.class += ` ${className}`
+    } else {
+      vnode.data.class = className
+    }
+    purifyVNodeAttrs(vnode, pure)
+
+    if (directive.value) {
+      if (typeof directive.value === 'object') {
+        const [className, pure] = createClassName(directive.value, theme, true)
+        if (vnode.data.class) {
+          vnode.data.class += ` ${className}`
+        } else {
+          vnode.data.class = className
+        }
+        purifyVNodeAttrs(vnode, pure)
+      }
+
+      if (typeof directive.value === 'function') {
+        const styles = directive.value(theme)
+        const [className, pure] = createClassName(styles, theme, true)
+        if (vnode.data.class) {
+          vnode.data.class += ` ${className}`
+        } else {
+          vnode.data.class = className
+        }
+        purifyVNodeAttrs(vnode, pure)
+      }
+    }
+  }
+};
+
+/** Creates Client `v-chakra` Directive */
+export function createClientDirective (theme) {
   return {
     bind (el, binding, vnode) {
-      console.log(vnode)
       const [className, pure] = createClassName(vnode.data.attrs, theme)
       el.classList.add(className)
       purifyAttrs(el, pure)

packages/chakra-ui-core/src/directives/index.js

@@ -1,2 +1,2 @@
 export { default as ClickOutsideDirective } from './clickoutside.directive'
-export { default as createCharkaDirective } from './chakra.directive'
+export * from './chakra.directive'

packages/nuxt-chakra/example/nuxt.config.js

@@ -6,7 +6,8 @@ module.exports = {
   buildDir: resolve(__dirname, '.nuxt'),
   srcDir: __dirname,
   modules: [
-    { handler: require('../') }
+    { handler: require('../') },
+    '@nuxtjs/emotion'
   ],
   build: {
     transpile: [

packages/nuxt-chakra/example/pages/directive.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div
+      v-chakra
+      p="3"
+      bg="red.100"
+      rounded="md"
+      color="red.500"
+      font-weight="bold"
+    >
+      Welcome to Chakra directive
+    </div>
+    <div>
+      <div
+        v-chakra="{
+          p: 3,
+          shadow: 'sm',
+          h1: {
+            bg: 'blue.100'
+          },
+        }"
+      >
+        <h1>Title</h1>
+        <p>Text</p>
+      </div>
+    </div>
+    <div
+      v-chakra="theme => ({
+        shadow: 'sm',
+        bg: theme.colors.blue[800],
+        color: theme.colors.yellow[300],
+        p: {
+          fontWeight: 'bold',
+          p: 3
+        }
+      })"
+    >
+      <p>Computed styles</p>
+    </div>
+    <div>
+      <button
+        v-chakra="{
+          ':hover': { bg: 'green.400' },
+          ':focus': { shadow: 'outline' }
+        }"
+        font-weight="bold"
+        px="4"
+        py="3"
+        color="white"
+        rounded="md"
+        bg="blue.400"
+        outline="none"
+      >
+        Button
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Directive'
+}
+</script>

packages/nuxt-chakra/example/pages/index.vue

@@ -11,6 +11,9 @@
       <c-heading text-align="center" mb="4">
         ⚡️ Hello chakra-ui/vue
       </c-heading>
+      <c-link as="nuxt-link" to="/directive">
+        Go to directive ->
+      </c-link>
       <c-flex justify="center" direction="column" align="center">
         <c-box mb="3">
           <c-icon-button
@@ -98,7 +101,8 @@ import {
   CIconButton,
   CFlex,
   CHeading,
-  CText
+  CText,
+  CLink
 } from '@chakra-ui/vue'
 
 export default {
@@ -120,7 +124,8 @@ export default {
     CIconButton,
     CFlex,
     CHeading,
-    CText
+    CText,
+    CLink
   },
   data () {
     return {

packages/nuxt-chakra/lib/module.js

@@ -1,15 +1,56 @@
 const { resolve } = require('path')
+const defu = require('defu')
+const { defaultTheme } = require('@chakra-ui/vue')
+const { parsePackIcons } = require('@chakra-ui/vue/src/utils/icons')
+const internalIcons = require('@chakra-ui/vue/src/lib/internal-icons')
+const { createServerDirective } = require('@chakra-ui/vue/src/directives/chakra.directive')
 
 module.exports = function (moduleOptions) {
-  /**
-   * Merge defaults from Nuxt config
-   */
-  const options = Object.assign({}, this.options.chakra, moduleOptions)
+  const { nuxt } = this
 
+  const options = {
+    ...this.options.chakra,
+    ...moduleOptions
+  }
+
+  // Recursively merge extended theme variables
+  const theme = defu(defaultTheme, options.extendTheme)
+
+  // Resolve icons
+  let packIcons = {}
+  if (options.icons && options.icons.iconPack) {
+    packIcons = parsePackIcons(options.icons.iconPack, options.icons.iconSet)
+  }
+
+  // Transpile lodash-es
+  nuxt.options.build.transpile.push('lodash-es')
+
+  // Transpile @chakra-ui.
+  nuxt.options.build.transpile.push('@chakra-ui')
+
+  if (nuxt.options.render.bundleRenderer.directives) {
+    nuxt.options.render.bundleRenderer.directives.chakra = createServerDirective(theme)
+  } else {
+    nuxt.options.render.bundleRenderer.directives = {
+      chakra: createServerDirective(theme)
+    }
+  }
+
+  // Icons
+  const icons = {
+    ...internalIcons,
+    ...packIcons,
+    ...(options.icons && options.icons.extend)
+  }
+
+  // Global bindings and plugins
   this.addPlugin({
     src: resolve(__dirname, 'plugin.js'),
     fileName: 'chakra.js',
-    options
+    options: {
+      theme,
+      icons
+    }
   })
 }
 

packages/nuxt-chakra/lib/plugin.js

@@ -1,4 +1,16 @@
 import Vue from 'vue'
-import Chakra from '@chakra-ui/vue'
 
-Vue.use(Chakra, <%= JSON.stringify(options, null, 2) %>)
+Vue.prototype.$chakra = {
+  theme: <%= JSON.stringify(options.theme, null, 2) %>,
+  icons: <%= JSON.stringify(options.icons, null, 2) %>
+}
+
+if (process.client) {
+  // Toast
+  const useToast = require('@chakra-ui/vue/src/CToast').default
+  Vue.prototype.$toast = useToast()
+
+  // VScrollLock
+  const VScrollLock = require('v-scroll-lock').default
+  Vue.use(VScrollLock)
+} 

yarn.lock

@@ -9210,6 +9210,11 @@ defu@^1.0.0:
   resolved "https://registry.yarnpkg.com/defu/-/defu-1.0.0.tgz#43acb09dfcf81866fa3b0fc047ece18e5c30df71"
   integrity sha512-1Y1KRFxiiq+LYsZ3iP7xYSR8bHfmHFOUpDunZCN1ld1fGfDJWJIvkUBtjl3apnBwPuJtL/H7cwwlLYX8xPkraQ==
 
+defu@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-2.0.4.tgz#09659a6e87a8fd7178be13bd43e9357ebf6d1c46"
+  integrity sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg==
+
 del@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"