Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 22fb5bb

Browse files
codebender828codebender828
committed
refactor: cleanup chakra directive
1 parent a129e53 commit 22fb5bb

File tree

5 files changed

+48
-94
lines changed

5 files changed

+48
-94
lines changed

‎packages/chakra-ui-core/src/CAvatarGroup/tests/__snapshots__/CAvatarGroup.test.js.snap

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ exports[`should change avatar group size correctly 1`] = `
55
<div
66
class="css-nqilgt"
77
data-chakra-component="CAvatarGroup"
8-
zindex="0"
98
>
109
<div
1110
class="css-1vz9fru"
@@ -46,7 +45,6 @@ exports[`should render correctly 1`] = `
4645
<div
4746
class="css-nqilgt"
4847
data-chakra-component="CAvatarGroup"
49-
zindex="0"
5048
>
5149
<div
5250
class="css-m3wjcp"

‎packages/chakra-ui-core/src/CDivider/tests/__snapshots__/CDivider.test.js.snap

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ exports[`should change orientation 1`] = `
1111
</DocumentFragment>
1212
`;
1313

14-
exports[`should have corresponding aria-orientation attribute 1`] = `
15-
<DocumentFragment>
16-
<hr
17-
aria-orientation="horizontal"
18-
class="css-cgtghy"
19-
data-chakra-component="CDivider"
20-
data-testid="divider"
21-
/>
22-
</DocumentFragment>
23-
`;
24-
2514
exports[`should render correctly 1`] = `
2615
<DocumentFragment>
2716
<hr

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

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,59 @@
11
import { css } from 'emotion'
22
import Css from '../Css'
3-
import styleProps from '../config/props'
4-
import { camelize, kebabify } from '../utils'
5-
6-
/** Filter attrs and return object of chakra props */
7-
function filterChakraProps (attrs) {
8-
const pure = {}
9-
for (const prop in attrs) {
10-
if (styleProps[camelize(prop)]) {
11-
pure[camelize(prop)] = attrs[prop]
12-
}
13-
}
14-
return pure
15-
}
3+
import { kebabify, extractChakraAttrs } from '../utils'
164

175
/** Purify Chakra attributes */
18-
function purifyAttrs (el, props) {
6+
const purifyAttrs = (el, props) => {
197
for (const attr in props) {
208
el.removeAttribute(attr)
9+
el.removeAttribute(kebabify(attr))
2110
}
2211
}
2312

2413
/** Purify's Chakra Attributes from VNode object */
25-
function purifyVNodeAttrs (vnode, props) {
14+
const purifyVNodeAttrs = (vnode, props) => {
2615
if (props && vnode.data.attrs) {
2716
for (const attr in props) {
2817
delete vnode.data.attrs[kebabify(attr)]
2918
}
3019
}
3120
}
3221

33-
/** Creates className from styles object */
34-
function createClassName (styleObject, theme, hasBindingValue = false) {
35-
const pure = filterChakraProps(styleObject)
36-
if (hasBindingValue) {
37-
const className = css(Css(styleObject)(theme))
38-
return [className, pure]
39-
}
40-
const className = css(Css(pure)(theme))
41-
return [className, pure]
42-
}
43-
4422
/** Creates SSR `v-chakra` directive for Nuxt */
4523
export function createServerDirective (theme) {
46-
return (vnode, directive) => {
47-
const [className, pure] = createClassName(vnode.data.attrs, theme)
24+
/** Applies server-side className */
25+
const applyServerClassName = (vnode, className, styleAttrs) => {
4826
if (vnode.data.class) {
4927
vnode.data.class += ` ${className}`
5028
} else {
5129
vnode.data.class = className
5230
}
53-
purifyVNodeAttrs(vnode, pure)
31+
32+
/**
33+
* Only remove style attributes
34+
* from VNode if directive has no
35+
* arguments
36+
**/
37+
if (styleAttrs) {
38+
purifyVNodeAttrs(vnode, styleAttrs)
39+
}
40+
}
41+
42+
return (vnode, directive) => {
43+
const { styleAttrs } = extractChakraAttrs(vnode.data.attrs)
44+
const className = css(Css(styleAttrs)(theme))
45+
applyServerClassName(vnode, className, styleAttrs)
5446

5547
if (directive.value) {
5648
if (typeof directive.value === 'object') {
57-
const [className, pure] = createClassName(directive.value, theme, true)
58-
if (vnode.data.class) {
59-
vnode.data.class += ` ${className}`
60-
} else {
61-
vnode.data.class = className
62-
}
63-
purifyVNodeAttrs(vnode, pure)
49+
const className = css(Css(directive.value)(theme))
50+
applyServerClassName(vnode, className)
6451
}
6552

6653
if (typeof directive.value === 'function') {
6754
const styles = directive.value(theme)
68-
const [className, pure] = createClassName(styles, theme, true)
69-
if (vnode.data.class) {
70-
vnode.data.class += ` ${className}`
71-
} else {
72-
vnode.data.class = className
73-
}
74-
purifyVNodeAttrs(vnode, pure)
55+
const className = css(Css(styles)(theme))
56+
applyServerClassName(vnode, className)
7557
}
7658
}
7759
}
@@ -80,29 +62,30 @@ export function createServerDirective (theme) {
8062
/** Creates Client `v-chakra` Directive */
8163
export function createClientDirective (theme) {
8264
function applyClientStyles (el, binding, vnode) {
83-
const [className, pure] = createClassName(vnode.data.attrs, theme)
65+
const { styleAttrs } = extractChakraAttrs(vnode.data.attrs)
66+
// console.log({ styleAttrs, nativeAttrs })
67+
const className = css(Css(styleAttrs)(theme))
8468
el.classList.add(className)
85-
purifyAttrs(el, pure)
69+
purifyAttrs(el, styleAttrs)
8670

8771
if (binding.value) {
8872
if (typeof binding.value === 'object') {
89-
const [className, pure] = createClassName(binding.value, theme, true)
73+
const className = css(Css(binding.value)(theme))
9074
el.classList.add(className)
91-
purifyAttrs(el, pure)
9275
}
9376

9477
if (typeof binding.value === 'function') {
9578
const styles = binding.value(theme)
96-
const [className, pure] = createClassName(styles, theme, true)
79+
const className = css(Css(styles)(theme))
9780
el.classList.add(className)
98-
purifyAttrs(el, pure)
9981
}
10082
}
10183
}
10284

10385
return {
10486
bind: applyClientStyles,
10587
update: applyClientStyles,
88+
componentUpdated: applyClientStyles,
10689
unbind: applyClientStyles
10790
}
10891
}

‎packages/chakra-ui-core/src/utils/components.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css } from 'emotion'
22
import __css from '@styled-system/css'
33
import { parsePseudoStyles } from '../CPseudoBox/utils'
44
import { systemProps } from './styled-system'
5-
import { purgeChakraAttrs, hasOwn, extractChakraAttrs } from './object'
5+
import { hasOwn, extractChakraAttrs } from './object'
66

77
export const isVueComponent = (value) => {
88
return (!!value && !!value.$el)
@@ -64,32 +64,31 @@ export const createStyledAttrsMixin = (name, isPseudo) => ({
6464
const $attrs = this.$data.attrs$
6565
const styles = Object.assign({}, this.componentStyles || {}, $attrs)
6666

67-
const styleProps = extractChakraAttrs(styles)
68-
const attrs = purgeChakraAttrs(styles, styleProps)
67+
const { styleAttrs, nativeAttrs } = extractChakraAttrs(styles)
6968
return {
70-
styleProps,
71-
attrs
69+
styleAttrs,
70+
nativeAttrs
7271
}
7372
},
7473
className () {
75-
const { styleProps } = this.splitProps
74+
const { styleAttrs } = this.splitProps
7675
if (isPseudo) {
77-
const { pseudoStyles, baseStyles } = parsePseudoStyles(styleProps)
76+
const { pseudoStyles, baseStyles } = parsePseudoStyles(styleAttrs)
7877
const _baseStyles = systemProps({ ...baseStyles, theme: this.theme })
7978
const _pseudoStyles = __css(pseudoStyles)(this.theme)
8079
return css({
8180
..._baseStyles,
8281
..._pseudoStyles
8382
})
8483
}
85-
const boxStylesObject = systemProps({ ...styleProps, theme: this.theme })
84+
const boxStylesObject = systemProps({ ...styleAttrs, theme: this.theme })
8685
return css(boxStylesObject)
8786
},
8887
/** Computed attributes object */
8988
computedAttrs () {
9089
return {
9190
...name && { 'data-chakra-component': name },
92-
...this.splitProps.attrs
91+
...this.splitProps.nativeAttrs
9392
}
9493
},
9594
/** Computed listeners object */

‎packages/chakra-ui-core/src/utils/object.js

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { pickBy, startsWith } from 'lodash-es'
22
import styleProps from '../config/props'
3-
import { camelize, kebabify } from './strings'
3+
import { camelize } from './strings'
44

55
/**
66
* Clears out all undefined properties from an object.
@@ -43,33 +43,18 @@ export function filterBaseStyles (props) {
4343

4444
/** Filter attrs and return object of chakra props */
4545
export function extractChakraAttrs (attrs) {
46-
const pure = {}
46+
const styleAttrs = {}
47+
const nativeAttrs = {}
48+
4749
for (const _prop in attrs) {
4850
const prop = camelize(_prop)
4951
if (styleProps[prop]) {
50-
pure[prop] = attrs[_prop]
52+
styleAttrs[prop] = attrs[_prop]
53+
} else {
54+
nativeAttrs[_prop] = attrs[_prop]
5155
}
5256
}
53-
return pure
54-
}
55-
56-
/**
57-
* Purify's Chakra Attributes from VNode object
58-
* @param {Object} attrs
59-
* @param {Object} styleAttributes
60-
* @returns {Object} Non-chakra style attributes
61-
*/
62-
export function purgeChakraAttrs (attrs, styleAttributes = {}) {
63-
for (const attr in styleAttributes) {
64-
// If attr is provided in ca-case
65-
const prop = camelize(attr)
66-
// If
67-
const _prop_ = attr.toLowerCase()
68-
if (attrs[prop]) delete attrs[prop]
69-
if (attrs[_prop_]) delete attrs[_prop_]
70-
else delete attrs[kebabify(attr)]
71-
}
72-
return attrs
57+
return { styleAttrs, nativeAttrs }
7358
}
7459

7560
/**

0 commit comments

Comments
 (0)