Support React.Fragments. #799

gaearon · Jan 16, 2018 · 086a58a · 086a58a
1 parent 624990c
commit 086a58a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/react-hot-loader/src/internal/reactUtils.js b/packages/react-hot-loader/src/internal/reactUtils.js
@@ -1,3 +1,4 @@
+import React from 'react'
 /* eslint-disable no-underscore-dangle */
 
 export const isCompositeComponent = type => typeof type === 'function'
@@ -18,3 +19,6 @@ export const updateInstance = instance => {
     updater.enqueueForceUpdate(instance)
   }
 }
+
+export const isFragmentNode = ({ type }) =>
+  React.Fragment && type === React.Fragment
diff --git a/packages/react-hot-loader/src/reconciler/hotReplacementRender.js b/packages/react-hot-loader/src/reconciler/hotReplacementRender.js
@@ -1,7 +1,11 @@
 import { PROXY_KEY, UNWRAP_PROXY } from 'react-stand-in'
 import levenshtein from 'fast-levenshtein'
 import { getIdByType, updateProxyById } from './proxies'
-import { updateInstance, getComponentDisplayName } from '../internal/reactUtils'
+import {
+  updateInstance,
+  getComponentDisplayName,
+  isFragmentNode,
+} from '../internal/reactUtils'
 import reactHotLoader from '../reactHotLoader'
 import logger from '../logger'
 
@@ -156,8 +160,17 @@ const mergeInject = (a, b, instance) => {
   return NO_CHILDREN
 }
 
+const transformFlowNode = flow =>
+  flow.reduce((acc, node) => {
+    if (isFragmentNode(node) && node.props && node.props.children) {
+      return [...acc, ...node.props.children]
+    } else {
+      return [...acc, node]
+    }
+  }, [])
+
 const hotReplacementRender = (instance, stack) => {
-  const flow = filterNullArray(asArray(render(instance)))
+  const flow = transformFlowNode(filterNullArray(asArray(render(instance))))
 
   const { children } = stack