Permalink
Browse files

PureComponents, by default (#34)

This update adjusts the create-emotion-styled HOC to create
React.PureComponent styled components, by default. This is for an
overall performance boost, as PureComponent classes perform faster
than default Component classes.

This should be safe, as we've been using PureComponents exclusively,
at the library level, for a while now. Not to mention, React Redux
also defaults to PureComponents.

This behaviour can be customized by defining `{ pure: false }` in a
new argument for `create-emotion-styled`.
  • Loading branch information...
ItsJonQ committed Dec 3, 2018
1 parent 8bd98d1 commit 952152b25361b10aced2e903c78482bdefade224
@@ -1,7 +1,6 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"flowtype.flow-for-vscode",
"esbenp.prettier-vscode",
"jpoissonnier.vscode-styled-components"
]
@@ -24,7 +24,18 @@ const contextTypes = {
[scopeChannel]: PropTypes.object,
}

function createEmotionStyled(emotion: Object, view: ReactType) {
const defaultProps = {
pure: true,
}

function createEmotionStyled(
emotion: Object,
view: ReactType,
options: Object,
) {
// Custom Fancy, non-Emotion default options
const {pure} = {...defaultProps, ...options}

let createStyled: CreateStyled = (tag, options) => {
if (process.env.NODE_ENV !== 'production') {
if (tag === undefined) {
@@ -85,7 +96,9 @@ function createEmotionStyled(emotion: Object, view: ReactType) {
}
}

class Styled extends view.Component<*, {theme: Object}> {
const OuterBaseComponent = pure ? view.PureComponent : view.Component

class Styled extends OuterBaseComponent<*, {theme: Object}> {
unsubscribe: number
unsubscribeFrame: number
mergedProps: Object
@@ -0,0 +1,27 @@
import React from 'react'
import {mount} from 'enzyme'
import createStyled from '../index'

test('Creates a React.PureComponent instance, by default', () => {
const Comp = createStyled()('div')``
const wrapper = mount(<Comp />)
const el = wrapper.getNodes()[0]

expect(el instanceof React.PureComponent).toBe(true)
})

test('Can create a React.Component instance, if defined', () => {
const Comp = createStyled({pure: false})('div')``
const wrapper = mount(<Comp />)
const el = wrapper.getNodes()[0]

expect(el instanceof React.Component).toBe(true)
})

test('Can create a React.PureComponent instance, if defined', () => {
const Comp = createStyled({pure: true})('div')``
const wrapper = mount(<Comp />)
const el = wrapper.getNodes()[0]

expect(el instanceof React.PureComponent).toBe(true)
})
@@ -0,0 +1,13 @@
// @flow
import React from 'react'
import * as emotion from '../emotion/index'
import createEmotionStyled from '../create-emotion-styled'

/**
* A custom HOC that wraps the default createEmotionStyled to allow
* for options, being passed through a custom argument.
*/

export default function createStyled(options) {
return createEmotionStyled(emotion, React, options)
}
@@ -1,8 +1,6 @@
// @flow
import React from 'react'
import * as emotion from '../emotion/index'
import createEmotionStyled from '../create-emotion-styled'
import createStyled from '../create-styled'

export default createEmotionStyled(emotion, React)
export default createStyled({pure: true})

export * from '../emotion/index'

0 comments on commit 952152b

Please sign in to comment.