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`.

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "flowtype.flow-for-vscode",
     "esbenp.prettier-vscode",
     "jpoissonnier.vscode-styled-components"
   ]

src/create-emotion-styled/index.js

@@ -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

src/create-styled/__tests__/create-styled.test.js

@@ -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)
+})

src/create-styled/index.js

@@ -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)
+}

src/styled/index.js

@@ -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'