From 086a58a6bd68a1bcee5a057204ee180ba957cff8 Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Tue, 16 Jan 2018 22:25:17 +1100
Subject: [PATCH] Support React.Fragments. #799

---
 .../react-hot-loader/src/internal/reactUtils.js |  4 ++++
 .../src/reconciler/hotReplacementRender.js      | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/react-hot-loader/src/internal/reactUtils.js b/packages/react-hot-loader/src/internal/reactUtils.js
index 1580a060c..ed751cd67 100644
--- 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
index 55545b286..ea5e5abf5 100644
--- 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