PureComponents, by default

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