fix: patch support for react-dom 16.13 (#1428)

* fix: patch support for react-dom 16.13

* chore: separate tests for 15/16.10/16-latest

examples/styled-components/package.json

@@ -23,8 +23,8 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "emotion": "^8.0.12",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-emotion": "^9.2.12",
     "react-hot-loader": "^4.6.5",
     "react-spring": "^8.0.25",

examples/styled-components/webpack.config.babel.js

@@ -30,6 +30,7 @@ module.exports = {
           loader: 'react-hot-loader/webpack',
           options: {
             noRegister: true,
+            cacheBreaker: 1,
           },
         },
       },

examples/styled-components/yarn.lock

@@ -4250,15 +4250,15 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.11.0:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
-  integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==
+react-dom@^16.13.0:
+  version "16.13.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
+  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.17.0"
+    scheduler "^0.19.0"
 
 react-emotion@^9.2.12:
   version "9.2.12"
@@ -4306,10 +4306,10 @@ react-spring@^8.0.25:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
-react@^16.11.0:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
-  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
+react@^16.13.0:
+  version "16.13.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
+  integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -4555,10 +4555,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
-  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+scheduler@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
+  integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

scripts/ci.sh

@@ -23,16 +23,32 @@ yarn test:react-dom:prepare
 # echo "\n\n"
 # echo "\n\n"
 
-echo "Installing React 16"
+echo "Installing React 16.10"
+yarn add react@16 [email protected] [email protected] --pure-lockfile
+echo "\n\n"
+
+yarn test:react-dom:prepare
+
+echo "Running tests on React 16.10 - Babel ES2015"
+yarn test:es2015
+echo "\n\n"
+
+echo "Running tests on React 16.10 - Babel Modern"
+yarn test:modern --coverage && codecov
+echo "\n\n"
+
+
+
+echo "Installing React 16:latest"
 yarn add react@16 react-dom@16 react-test-renderer@16 --pure-lockfile
 echo "\n\n"
 
 yarn test:react-dom:prepare
 
-echo "Running tests on React 16 - Babel ES2015"
+echo "Running tests on React 16:latest - Babel ES2015"
 yarn test:es2015
 echo "\n\n"
 
-echo "Running tests on React 16 - Babel Modern"
+echo "Running tests on React 16:latest - Babel Modern"
 yarn test:modern --coverage && codecov
 echo "\n\n"

src/webpack/patch.js

@@ -1,4 +1,8 @@
 const injectionStart = {
+  '16.13': [
+    'isCompatibleFamilyForHotReloading(child, element)',
+    'hotCompareElements(child.elementType, element.type, hotUpdateChild(child), child.type)'
+  ],
   '16.10': [
     'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : child.elementType === element.type || ( // Keep this check inline so it only runs on the false path:\n        isCompatibleFamilyForHotReloading(child, element)))',
     'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.elementType, element.type, hotUpdateChild(child), child.type))'
@@ -26,7 +30,10 @@ const injectionStart = {
 };
 
 const additional = {
-
+  '16.13-update': [
+    'isCompatibleFamilyForHotReloading(current, element)',
+    'hotCompareElements(current.elementType, element.type, hotUpdateChild(current), current.type)'
+  ],
   '16.10-update': [
     'current$$1.elementType === element.type || ( // Keep this check inline so it only runs on the false path:\n    isCompatibleFamilyForHotReloading(current$$1, element)))',
     '(hotCompareElements(current$$1.elementType, element.type, hotUpdateChild(current$$1), current$$1.type)))'
@@ -63,7 +70,8 @@ const additional = {
   ]
 };
 
-const ReactHotLoaderInjection = `
+
+const reactHotLoaderCode = `
 var hotUpdateChild = function (child) {
   return function (newType) {
     child.type = newType;
@@ -80,54 +88,79 @@ var hotCompareElements = function (oldType, newType) {
 };
 var hotCleanupHooks = function () {
   if (typeof resetHooks !== 'undefined') {
-     resetHooks();
+    resetHooks();
   }
 }
-var ReactDOM = {
-  evalInReactContext: function (injection) {
-    return eval(injection);
-  },
-  hotCleanup: hotCleanupHooks,
-  hotRenderWithHooks: function (current, render) {       
-    hotCleanupHooks();
-    
-    if (typeof nextCurrentHook !== 'undefined' && typeof ReactCurrentDispatcher$1 !== 'undefined') {    
-      nextCurrentHook = current !== null ? current.memoizedState : null;
-      if(typeof firstCurrentHook !== 'undefined') {
-        firstCurrentHook = nextCurrentHook;
-      }
-      
-      ReactCurrentDispatcher$1.current = nextCurrentHook === null ? HooksDispatcherOnMountInDEV : HooksDispatcherOnUpdateInDEV;
+
+var evalInReactContext = function (injection) {
+  return eval(injection);
+};
+var hotCleanup = hotCleanupHooks;
+var hotRenderWithHooks = function (current, render) {
+  hotCleanupHooks();
+
+  if (typeof nextCurrentHook !== 'undefined' && typeof ReactCurrentDispatcher$1 !== 'undefined') {
+    nextCurrentHook = current !== null ? current.memoizedState : null;
+    if (typeof firstCurrentHook !== 'undefined') {
+      firstCurrentHook = nextCurrentHook;
     }
-    
-    var rendered = render();
-    
-    hotCleanupHooks();
-    
-    return rendered;
-  },
-  setHotElementComparator: function (newComparator) {
-    hotCompareElements = newComparator
-  },
-  setHotTypeResolver: function (newResolver) {
-    hotResolveType = newResolver;
-  },
+
+    ReactCurrentDispatcher$1.current = nextCurrentHook === null ? HooksDispatcherOnMountInDEV : HooksDispatcherOnUpdateInDEV;
+  }
+
+  var rendered = render();
+
+  hotCleanupHooks();
+
+  return rendered;
+}
+var setHotElementComparator = function (newComparator) {
+  hotCompareElements = newComparator
+};
+var setHotTypeResolver = function (newResolver) {
+  hotResolveType = newResolver;
+};
+`;
+
+const CJS = `
+${reactHotLoaderCode};
+
+var ReactDOM = {
+  evalInReactContext: evalInReactContext,
+  hotCleanup: hotCleanup,
+  hotRenderWithHooks: hotRenderWithHooks,
+  setHotElementComparator: setHotElementComparator,
+  setHotTypeResolver: setHotTypeResolver,
 `;
 
-const defaultEnd = ['var ReactDOM = {', ReactHotLoaderInjection];
+const commonJSEnd = ['var ReactDOM = {', CJS];
+const commonJSEndCompact = ['var ReactDOM={', CJS];
+
+const ESM = `
+${reactHotLoaderCode};
+
+exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
+
+exports.evalInReactContext= evalInReactContext,
+exports.hotCleanup= hotCleanup,
+exports.hotRenderWithHooks= hotRenderWithHooks,
+exports.setHotElementComparator= setHotElementComparator,
+exports.setHotTypeResolver= setHotTypeResolver,
+`;
 
-const defaultEndCompact = ['var ReactDOM={', ReactHotLoaderInjection];
+const esmEnd = ['exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;', ESM];
 
 const injectionEnd = {
-  '16.10': defaultEnd,
-  '16.9': defaultEnd,
-  '16.6': defaultEnd,
-  '16.4': defaultEnd,
-  '16.6-compact': defaultEndCompact,
-  '16.4-compact': defaultEndCompact,
+  '16.13': esmEnd,
+  '16.10': commonJSEnd,
+  '16.9': commonJSEnd,
+  '16.6': commonJSEnd,
+  '16.4': commonJSEnd,
+  '16.6-compact': commonJSEndCompact,
+  '16.4-compact': commonJSEndCompact,
 };
 
-const sign = '/* 🔥 this is hot-loader/react-dom 4.8+ 🔥 */';
+const sign = '/* 🔥 this is hot-loader/react-dom 🔥 */';
 
 function additionalTransform(source) {
   for (const key in additional) {