Add proper styled-components rendering optimisation

This implements specific rendering logic that skips
StyledComponents entirely, if a new enough version
of styled-component is installed and the optimisation
can be applied.

It does this by computing "attrs" manually and
skipping the styled-components logic entirely by
rendering the target directly.

Author: kitten

src/render/index.js

@@ -22,3 +22,8 @@ export {
   mount as mountClassComponent,
   update as updateClassComponent
 } from './classComponent'
+
+export {
+  isStyledElement,
+  mount as mountStyledComponent
+} from './styledComponent'

src/render/styledComponent.js

@@ -0,0 +1,94 @@
+// @flow
+
+import { createElement, type ComponentType, type Node } from 'react'
+
+import { getChildrenArray } from '../element'
+import { readContextValue } from '../internals'
+import { mount as mountFunctionComponent } from './functionComponent'
+
+import type {
+  DefaultProps,
+  ForwardRefElement,
+  Frame,
+  Visitor,
+  ComponentStatics
+} from '../types'
+
+let styledComponents: any
+try {
+  styledComponents = require('styled-components')
+} catch (_error) {}
+
+type AttrsFn = (context: mixed) => DefaultProps
+type Attr = void | AttrsFn | { [propName: string]: ?AttrsFn }
+
+type StyledComponentStatics = {
+  styledComponentId: string,
+  attrs: Attr | Attr[],
+  target: ComponentType<DefaultProps> & ComponentStatics
+}
+
+/** Computes a StyledComponent's props with attributes */
+const computeAttrsProps = (
+  input: Attr[],
+  props: DefaultProps,
+  theme: mixed
+): any => {
+  const executionContext = { ...props, theme }
+
+  const attrs = input.reduce((acc, attr) => {
+    if (typeof attr === 'function') {
+      return Object.assign(acc, attr(executionContext))
+    } else if (typeof attr !== 'object' || attr === null) {
+      return acc
+    }
+
+    for (const key in attr) {
+      const attrProp = attr[key]
+      if (typeof attrProp === 'function') {
+        acc[key] = attrProp(executionContext)
+      } else if (attr.hasOwnProperty(key)) {
+        acc[key] = attrProp
+      }
+    }
+
+    return acc
+  }, {})
+
+  return Object.assign(attrs, props)
+}
+
+/** Checks whether a ForwardRefElement is a StyledComponent element */
+export const isStyledElement = (element: ForwardRefElement): boolean %checks =>
+  typeof element.type.styledComponentId === 'string'
+
+/** This is an optimised faux mounting strategy for StyledComponents.
+    It is only enabled when styled-components is installed and the component
+    can safely be skipped */
+export const mount = (
+  element: ForwardRefElement,
+  queue: Frame[],
+  visitor: Visitor
+): Node => {
+  if (
+    styledComponents === undefined ||
+    styledComponents.ThemeContext === undefined
+  ) {
+    // styled-components is not installed or incompatible, so the component will have to be
+    // mounted normally
+    const { render } = element.type
+    return mountFunctionComponent(render, element.props, queue, visitor)
+  } else if (typeof element.type.target !== 'function') {
+    // StyledComponents rendering DOM elements can safely be skipped like normal DOM elements
+    return element.props.children || null
+  }
+
+  const type = ((element.type: any): StyledComponentStatics)
+
+  // Imitate styled-components' attrs props without computing styles
+  const theme = readContextValue(styledComponents.ThemeContext) || {}
+  const attrs: Attr[] = Array.isArray(type.attrs) ? type.attrs : [type.attrs]
+  const props = computeAttrsProps(attrs, element.props, theme)
+
+  return createElement((type.target: any), props)
+}

src/visitor.js

@@ -6,7 +6,9 @@ import { typeOf, shouldConstruct, getChildrenArray } from './element'
 import {
   mountFunctionComponent,
   mountClassComponent,
-  mountLazyComponent
+  mountLazyComponent,
+  mountStyledComponent,
+  isStyledElement
 } from './render'
 
 import type {
@@ -62,6 +64,9 @@ import {
 // the event loop is not interrupted for too long
 const YIELD_AFTER_MS = process.env.NODE_ENV !== 'production' ? 20 : 5
 
+// A no-op function for styled-components' ComponentStyle class
+const NOOP_GEN_CLASSNAME = () => ''
+
 const render = (
   type: ComponentType<DefaultProps> & ComponentStatics,
   props: DefaultProps,
@@ -132,21 +137,19 @@ export const visitElement = (
 
     case REACT_FORWARD_REF_TYPE: {
       const refElement = ((element: any): ForwardRefElement)
-      if (
-        typeof refElement.type.styledComponentId === 'string' &&
-        typeof refElement.type.target !== 'function'
-      ) {
-        // This is an optimization that's specific to styled-components
-        // We can safely skip them if they're not wrapping a component
-        return getChildrenArray(refElement.props.children)
+
+      // If we find a StyledComponent, we trigger a specific optimisation
+      // that allows quick rendering of them without computing styles
+      let child = null
+      if (isStyledElement(refElement)) {
+        child = mountStyledComponent(refElement, queue, visitor)
       } else {
-        const {
-          props,
-          type: { render }
-        } = refElement
-        const child = mountFunctionComponent(render, props, queue, visitor)
-        return getChildrenArray(child)
+        const { render } = refElement.type
+        const props = refElement.props
+        child = mountFunctionComponent(render, props, queue, visitor)
       }
+
+      return getChildrenArray(child)
     }
 
     case REACT_ELEMENT_TYPE: {