fix: update memo updater and comparator. fix #1135

gaearon · Dec 19, 2018 · 826a57c · 826a57c
1 parent 17d25c5
commit 826a57c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/reconciler/componentComparator.js b/src/reconciler/componentComparator.js
@@ -8,6 +8,7 @@ import { hotComparisonOpen } from '../global/generation'
 import {
   isForwardType,
   isMemoType,
+  isReactClass,
   isReloadableComponent,
 } from '../internal/reactUtils'
 import { areSwappable } from './utils'
@@ -19,7 +20,7 @@ const getInnerComponentType = component => {
   return unwrapper ? unwrapper() : component
 }
 
-const compareComponents = (oldType, newType, setNewType) => {
+const compareComponents = (oldType, newType, setNewType, baseType) => {
   let defaultResult = oldType === newType
 
   if ((oldType && !newType) || (!oldType && newType)) {
@@ -49,7 +50,21 @@ const compareComponents = (oldType, newType, setNewType) => {
       oldType.type === newType.type ||
       areSwappable(oldType.type, newType.type)
     ) {
-      setNewType(newType.type)
+      if (baseType) {
+        // memo form different fibers, why?
+        if (oldType === baseType) {
+          setNewType(newType)
+        } else {
+          setNewType(newType.type)
+        }
+      } else {
+        if (isReactClass(newType.type)) {
+          setNewType(newType)
+        } else {
+          setNewType(newType.type)
+        }
+      }
+
       return true
     }
     return defaultResult
@@ -76,7 +91,7 @@ const compareComponents = (oldType, newType, setNewType) => {
 const knownPairs = new WeakMap()
 const emptyMap = new WeakMap()
 
-export const hotComponentCompare = (oldType, newType, setNewType) => {
+export const hotComponentCompare = (oldType, newType, setNewType, baseType) => {
   const hotActive = hotComparisonOpen()
   let result = oldType === newType
 
@@ -87,7 +102,7 @@ export const hotComponentCompare = (oldType, newType, setNewType) => {
   // comparison should be active only if hot update window
   // or it would merge components it shall not
   if (hotActive) {
-    result = compareComponents(oldType, newType, setNewType)
+    result = compareComponents(oldType, newType, setNewType, baseType)
     const pair = knownPairs.get(oldType) || new WeakMap()
     pair.set(newType, result)
     knownPairs.set(oldType, pair)

diff --git a/src/webpack/patch.js b/src/webpack/patch.js
@@ -1,34 +1,34 @@
 const injectionStart = {
   '16.6': [
     'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : child.elementType === element.type)',
-    'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.elementType, element.type, updateChild(child)))'
+    'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.elementType, element.type, updateChild(child), child.type))'
   ],
   '16.6-compact': [
     'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:child.elementType===element.type)',
-    'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:hotCompareElements(child.elementType,element.type, updateChild(child)))'
+    'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:hotCompareElements(child.elementType,element.type, updateChild(child), child.type))'
   ],
   '16.4': [
     'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : child.type === element.type) {',
-    'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.type, element.type, updateChild(child))) {'
+    'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.type, element.type, updateChild(child), child.type)) {'
   ],
   '16.4-compact': [
     'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:child.type===element.type)',
-    'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:hotCompareElements(child.type,element.type, updateChild(child)))'
+    'if(child.tag===Fragment?element.type===REACT_FRAGMENT_TYPE:hotCompareElements(child.type,element.type, updateChild(child), child.type))'
   ],
 };
 
 const additional = {
   '16.6-update': [
     'if (current$$1 !== null && current$$1.elementType === element.type) {',
-    'if (current$$1 !== null && hotCompareElements(current$$1.elementType, element.type, updateChild(current$$1))) {'
+    'if (current$$1 !== null && hotCompareElements(current$$1.elementType, element.type, updateChild(current$$1),current$$1.type)) {'
   ],
   '16.6-update-compact': [
     'if(current$$1!==null&&current$$1.elementType===element.type)',
-    'if(current$$1!==null&&hotCompareElements(current$$1.elementType,element.type,updateChild(current$$1)))'
+    'if(current$$1!==null&&hotCompareElements(current$$1.elementType,element.type,updateChild(current$$1),current$$1.type))'
   ],
   '16.4-update': [
     'if (current !== null && current.type === element.type) {',
-    'if (current !== null && hotCompareElements(current.type, element.type, updateChild(current))) {'
+    'if (current !== null && hotCompareElements(current.type, element.type, updateChild(current),current.type)) {'
   ],
   '16.4-update-compact': [
     'if (current!== null&&current.type===element.type)',
@@ -72,6 +72,8 @@ const injectionEnd = {
   '16.4-compact': defaultEndCompact,
 };
 
+const sign = '/* 🔥 this is hot-loader/react-dom 🔥 */';
+
 function additionalTransform(source) {
   for (const key in additional) {
     source = source.split(additional[key][0]).join(additional[key][1])
@@ -89,11 +91,12 @@ function transform(source) {
       source.indexOf(injectionStart[key][0]) > 0 &&
       source.indexOf(injectionEnd[key][0]) > 0
     ) {
-      return additionalTransform(
+      const result = additionalTransform(
         source
           .replace(injectionStart[key][0], injectionStart[key][1])
           .replace(injectionEnd[key][0], injectionEnd[key][1])
-      ) + '/** react is now 🔥 */'
+      );
+      return `${sign}\n${result}\n${sign}`;
     }
   }
   return source;