Update related issues

README.md

@@ -343,6 +343,8 @@ Set a new configuration for React Hot Loader.
 Available options are:
 
 * `logLevel`: specify log level, default to `"error"`, available values are: `['debug', 'log', 'warn', 'error']`
+* `pureSFC`: enable Stateless Functional Component. If disabled they will be converted to React Components.
+  Default value: false.
 
 ```js
 import { setConfig } from 'react-hot-loader'

src/configuration.js

@@ -1,5 +1,6 @@
 const configuration = {
   logLevel: 'error',
+  pureSFC: false,
 }
 
 export default configuration

src/proxy/createClassProxy.js

@@ -16,6 +16,7 @@ import {
   proxyClassCreator,
 } from './utils'
 import { inject, checkLifeCycleMethods, mergeComponents } from './inject'
+import config from '../configuration'
 
 const has = Object.prototype.hasOwnProperty
 
@@ -239,12 +240,14 @@ function createClassProxy(InitialComponent, proxyKey, options) {
       const result = CurrentComponent(props, context)
 
       // simple SFC
-      if (!CurrentComponent.contextTypes) {
-        if (!ProxyFacade.isStatelessFunctionalProxy) {
-          setSFPFlag(ProxyFacade, true)
-        }
+      if (config.pureSFC) {
+        if (!CurrentComponent.contextTypes) {
+          if (!ProxyFacade.isStatelessFunctionalProxy) {
+            setSFPFlag(ProxyFacade, true)
+          }
 
-        return renderOptions.componentDidRender(result)
+          return renderOptions.componentDidRender(result)
+        }
       }
       setSFPFlag(ProxyFacade, false)
 

src/reconciler/hotReplacementRender.js

@@ -22,6 +22,8 @@ const stackReport = () => {
   logger.warn('in', rev[0].name, rev)
 }
 
+const REACT_CONTEXT_CURRENT_VALUE = '_currentValue'
+
 const areNamesEqual = (a, b) =>
   a === b || (UNDEFINED_NAMES[a] && UNDEFINED_NAMES[b])
 const isReactClass = fn => fn && !!fn.render
@@ -214,8 +216,13 @@ const mergeInject = (a, b, instance) => {
 
 const transformFlowNode = flow =>
   flow.reduce((acc, node) => {
-    if (isFragmentNode(node) && node.props && node.props.children) {
-      return [...acc, ...filterNullArray(asArray(node.props.children))]
+    if (node && isFragmentNode(node)) {
+      if (node.props && node.props.children) {
+        return [...acc, ...filterNullArray(asArray(node.props.children))]
+      }
+      if (node.children) {
+        return [...acc, ...filterNullArray(asArray(node.children))]
+      }
     }
     return [...acc, node]
   }, [])
@@ -279,6 +286,15 @@ const hotReplacementRender = (instance, stack) => {
 
     // text node
     if (typeof child !== 'object' || !stackChild || !stackChild.instance) {
+      if (stackChild && stackChild.children && stackChild.children.length) {
+        logger.error(
+          'React-hot-loader: reconciliation failed',
+          'could not dive into [',
+          child,
+          '] while some elements are still present in the tree.',
+        )
+        stackReport()
+      }
       return
     }
 
@@ -296,11 +312,20 @@ const hotReplacementRender = (instance, stack) => {
       return
     }
 
-    if (typeof child.type !== 'function') {
+    // React context consumer
+    if (child.type && typeof child.type === 'object' && child.type.Consumer) {
+      next({
+        children: (child.props ? child.props.children : child.children[0])(
+          child.type[REACT_CONTEXT_CURRENT_VALUE],
+        ),
+      })
+    } else if (typeof child.type !== 'function') {
       next(
         // move types from render to the instances of hydrated tree
         mergeInject(
-          asArray(child.props ? child.props.children : child.children),
+          transformFlowNode(
+            asArray(child.props ? child.props.children : child.children),
+          ),
           stackChild.instance.children,
           stackChild.instance,
         ),

test/proxy/consistency.test.js

@@ -3,6 +3,7 @@
 import React from 'react'
 import { createMounter, ensureNoWarnings } from './helper'
 import createProxy from '../../src/proxy'
+import configuration from '../../src/configuration'
 
 const createFixtures = () => ({
   modern: {
@@ -349,13 +350,25 @@ describe('consistency', () => {
       expect(instance instanceof App).toBe(true)
     })
 
-    it('should wrap SFC by SFC', () => {
-      const App = () => <div />
+    describe('should wrap SFC by SFC', () => {
+      it('should wrap SFC by SFC Component', () => {
+        const App = () => <div />
 
-      const Proxy = createProxy(App).get()
-      expect('isStatelessFunctionalProxy' in Proxy).toBe(false)
-      mount(<Proxy />).instance()
-      expect(Proxy.isStatelessFunctionalProxy).toBe(true)
+        const Proxy = createProxy(App).get()
+        expect('isStatelessFunctionalProxy' in Proxy).toBe(false)
+        mount(<Proxy />).instance()
+        expect(Proxy.isStatelessFunctionalProxy).toBe(false)
+      })
+
+      it('should wrap SFC by SFC Pure', () => {
+        const App = () => <div />
+        configuration.pureSFC = true
+        const Proxy = createProxy(App).get()
+        expect('isStatelessFunctionalProxy' in Proxy).toBe(false)
+        mount(<Proxy />).instance()
+        configuration.pureSFC = false
+        expect(Proxy.isStatelessFunctionalProxy).toBe(true)
+      })
     })
 
     it('should wrap SFC with Context by Proxy', () => {

test/reconciler.test.js

@@ -5,6 +5,7 @@ import { increment as incrementGeneration } from '../src/global/generation'
 import { areComponentsEqual } from '../src/utils.dev'
 import logger from '../src/logger'
 import reactHotLoader from '../src/reactHotLoader'
+import configuration from '../src/configuration'
 
 jest.mock('../src/logger')
 
@@ -361,72 +362,97 @@ describe('reconciler', () => {
       expect(wrapper.text()).toContain(43)
     })
 
-    it('should assmeble props for nested children', () => {
-      const RenderChildren = ({ children }) => <div>{children}</div>
-      const RenderProp = jest
-        .fn()
-        .mockImplementation(({ prop }) => <div>{prop}</div>)
-      const DefaultProp = jest.fn().mockImplementation(({ prop }) => (
-        <div>
-          {prop ? (
-            <div>42</div>
-          ) : (
-            <div>
-              <div>24</div>
-            </div>
-          )}
-        </div>
-      ))
-      DefaultProp.defaultProps = {
-        prop: 'defaultValue',
-      }
-
-      const App = () => (
-        <RenderChildren>
+    describe('should assmeble props for nested children', () => {
+      const testSuite = () => {
+        const RenderChildren = ({ children }) => <div>{children}</div>
+        const RenderProp = jest
+          .fn()
+          .mockImplementation(({ prop }) => <div>{prop}</div>)
+        const DefaultProp = jest.fn().mockImplementation(({ prop }) => (
           <div>
-            <RenderChildren>
-              <div className="1">
-                <div className="1.1">
-                  <div className="1.2">
-                    <RenderProp value={42} />
+            {prop ? (
+              <div>42</div>
+            ) : (
+              <div>
+                <div>24</div>
+              </div>
+            )}
+          </div>
+        ))
+        DefaultProp.defaultProps = {
+          prop: 'defaultValue',
+        }
+
+        const App = () => (
+          <RenderChildren>
+            <div>
+              <RenderChildren>
+                <div className="1">
+                  <div className="1.1">
+                    <div className="1.2">
+                      <RenderProp value={42} />
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div className="2">
-                <div className="2.1">
-                  <RenderProp value={24} />
-                  <DefaultProp />
+                <div className="2">
+                  <div className="2.1">
+                    <RenderProp value={24} />
+                    <DefaultProp />
+                  </div>
                 </div>
-              </div>
-            </RenderChildren>
-          </div>
-        </RenderChildren>
-      )
+              </RenderChildren>
+            </div>
+          </RenderChildren>
+        )
 
-      logger.warn.mockClear()
+        logger.warn.mockClear()
 
-      const wrapper = mount(
-        <AppContainer>
-          <div>
-            <App />
-          </div>
-        </AppContainer>,
-      )
+        const wrapper = mount(
+          <AppContainer>
+            <div>
+              <App />
+            </div>
+          </AppContainer>,
+        )
 
-      incrementGeneration()
-      wrapper.setProps({ update: 'now' })
+        incrementGeneration()
+        wrapper.setProps({ update: 'now' })
+        return { RenderProp, DefaultProp }
+      }
+
+      it('for Component SFC', () => {
+        const { RenderProp, DefaultProp } = testSuite()
 
-      expect(RenderProp).toHaveBeenCalledTimes(4)
-      expect(RenderProp.mock.calls[0][0]).toEqual({ value: 42 })
-      expect(RenderProp.mock.calls[1][0]).toEqual({ value: 24 })
-      expect(RenderProp.mock.calls[2][0]).toEqual({ value: 42 })
-      expect(RenderProp.mock.calls[3][0]).toEqual({ value: 24 })
+        expect(RenderProp).toHaveBeenCalledTimes(6)
+        expect(RenderProp.mock.calls[0][0]).toEqual({ value: 42 })
+        expect(RenderProp.mock.calls[1][0]).toEqual({ value: 24 })
+        expect(RenderProp.mock.calls[2][0]).toEqual({ value: 42 })
+        expect(RenderProp.mock.calls[3][0]).toEqual({ value: 24 })
 
-      expect(DefaultProp).toHaveBeenCalledTimes(2)
-      expect(DefaultProp.mock.calls[0][0]).toEqual({ prop: 'defaultValue' })
-      expect(DefaultProp.mock.calls[1][0]).toEqual({ prop: 'defaultValue' })
+        expect(DefaultProp).toHaveBeenCalledTimes(3)
+        expect(DefaultProp.mock.calls[0][0]).toEqual({ prop: 'defaultValue' })
+        expect(DefaultProp.mock.calls[1][0]).toEqual({ prop: 'defaultValue' })
+
+        expect(logger.warn).not.toHaveBeenCalled()
+      })
 
-      expect(logger.warn).not.toHaveBeenCalled()
+      it('for Pure SFC', () => {
+        configuration.pureSFC = true
+        const { RenderProp, DefaultProp } = testSuite()
+        configuration.pureSFC = false
+
+        expect(RenderProp).toHaveBeenCalledTimes(4)
+        expect(RenderProp.mock.calls[0][0]).toEqual({ value: 42 })
+        expect(RenderProp.mock.calls[1][0]).toEqual({ value: 24 })
+        expect(RenderProp.mock.calls[2][0]).toEqual({ value: 42 })
+        expect(RenderProp.mock.calls[3][0]).toEqual({ value: 24 })
+
+        expect(DefaultProp).toHaveBeenCalledTimes(2)
+        expect(DefaultProp.mock.calls[0][0]).toEqual({ prop: 'defaultValue' })
+        expect(DefaultProp.mock.calls[1][0]).toEqual({ prop: 'defaultValue' })
+
+        expect(logger.warn).not.toHaveBeenCalled()
+      })
     })
 
     describe('when an error occurs in render', () => {