Permalink
Browse files

perf: evalute slots() once in functional component render functions (#…

…1438)

* perf(input-group): evalute slots() once

* perf(card): evalulate slots() once

* perf(jumbotron): evalulate slots() once

* perf(media): evaluate slots() once
  • Loading branch information...
tmorehouse committed Dec 8, 2017
1 parent 39eb237 commit 3c42477137a4d4459c5d16b4c138426bd3121442
@@ -27,6 +27,7 @@ export default {
// The order of the conditionals matter.
// We are building the component markup in order.
let childNodes = []
const $slots = slots()
let img = props.imgSrc
? h(CardImg, { props: pluckProps(cardImgProps, props, unPrefixPropName.bind(null, 'img')) })
: null
@@ -37,16 +38,16 @@ export default {
childNodes.push(img)
}
}
if (props.header || slots().header) {
childNodes.push(h(CardHeader, { props: pluckProps(headerProps, props) }, slots().header))
if (props.header || $slots.header) {
childNodes.push(h(CardHeader, { props: pluckProps(headerProps, props) }, $slots.header))
}
if (props.noBody) {
childNodes.push(slots().default)
childNodes.push($slots.default)
} else {
childNodes.push(h(CardBody, { props: pluckProps(bodyProps, props) }, slots().default))
childNodes.push(h(CardBody, { props: pluckProps(bodyProps, props) }, $slots.default))
}
if (props.footer || slots().footer) {
childNodes.push(h(CardFooter, { props: pluckProps(footerProps, props) }, slots().footer))
if (props.footer || $slots.footer) {
childNodes.push(h(CardFooter, { props: pluckProps(footerProps, props) }, $slots.footer))
}
if (img && props.imgBottom) {
// Below the footer placement.
@@ -29,20 +29,21 @@ export default {
props: props,
render (h, { props, data, slots }) {
let childNodes = []
const $slots = slots()
// Left Slot / Prop
if (slots().left) {
if ($slots.left) {
childNodes.push(slots().left)
} else if (props.left) {
childNodes.push(h(InputGroupAddon, { domProps: { innerHTML: props.left } }))
}
// Default slot
childNodes.push(slots().default)
childNodes.push($slots.default)
// Right slot / prop
if (slots().right) {
childNodes.push(slots().right)
if ($slots.right) {
childNodes.push($slots.right)
} else if (props.right) {
childNodes.push(h(InputGroupAddon, { domProps: { innerHTML: props.right } }))
}
@@ -55,32 +55,33 @@ export default {
// The order of the conditionals matter.
// We are building the component markup in order.
let childNodes = []
const $slots = slots()
// Header
if (props.header || slots().header) {
if (props.header || $slots.header) {
childNodes.push(h(
props.headerTag,
{
class: {
[`display-${props.headerLevel}`]: Boolean(props.headerLevel)
}
},
slots().header || props.header
$slots.header || props.header
))
}
// Lead
if (props.lead || slots().lead) {
if (props.lead || $slots.lead) {
childNodes.push(h(
props.leadTag,
{ staticClass: 'lead' },
slots().lead || props.lead
$slots.lead || props.lead
))
}
// Default slot
if (slots().default) {
childNodes.push(slots().default)
if ($slots.default) {
childNodes.push($slots.default)
}
// If fluid, wrap content in a container/container-fluid
@@ -26,19 +26,20 @@ export default {
props,
render (h, { props, data, slots, children }) {
let childNodes = props.noBody ? children : []
const $slots = slots()
if (!props.noBody) {
if (slots().aside && !props.rightAlign) {
if ($slots.aside && !props.rightAlign) {
childNodes.push(
h(MediaAside, { staticClass: 'mr-3', props: { verticalAlign: props.verticalAlign } }, slots().aside)
h(MediaAside, { staticClass: 'mr-3', props: { verticalAlign: props.verticalAlign } }, $slots.aside)
)
}
childNodes.push(h(MediaBody, slots().default))
childNodes.push(h(MediaBody, $slots.default))
if (slots().aside && props.rightAlign) {
if ($slots.aside && props.rightAlign) {
childNodes.push(
h(MediaAside, { staticClass: 'ml-3', props: { verticalAlign: props.verticalAlign } }, slots().aside)
h(MediaAside, { staticClass: 'ml-3', props: { verticalAlign: props.verticalAlign } }, $slots.aside)
)
}
}

0 comments on commit 3c42477

Please sign in to comment.