Skip to content

Commit 5475fe7

Browse files
authored
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
1 parent 08d8b15 commit 5475fe7

File tree

5 files changed

+108
-58
lines changed

5 files changed

+108
-58
lines changed

examples/styled-components/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
"dependencies": {
2424
"babel-polyfill": "^6.26.0",
2525
"emotion": "^8.0.12",
26-
"react": "^16.11.0",
27-
"react-dom": "^16.11.0",
26+
"react": "^16.13.0",
27+
"react-dom": "^16.13.0",
2828
"react-emotion": "^9.2.12",
2929
"react-hot-loader": "^4.6.5",
3030
"react-spring": "^8.0.25",

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

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = {
3030
loader: 'react-hot-loader/webpack',
3131
options: {
3232
noRegister: true,
33+
cacheBreaker: 1,
3334
},
3435
},
3536
},

examples/styled-components/yarn.lock

+13-13
Original file line numberDiff line numberDiff line change
@@ -4250,15 +4250,15 @@ rc@^1.2.7:
42504250
minimist "^1.2.0"
42514251
strip-json-comments "~2.0.1"
42524252

4253-
react-dom@^16.11.0:
4254-
version "16.11.0"
4255-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
4256-
integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==
4253+
react-dom@^16.13.0:
4254+
version "16.13.0"
4255+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
4256+
integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
42574257
dependencies:
42584258
loose-envify "^1.1.0"
42594259
object-assign "^4.1.1"
42604260
prop-types "^15.6.2"
4261-
scheduler "^0.17.0"
4261+
scheduler "^0.19.0"
42624262

42634263
react-emotion@^9.2.12:
42644264
version "9.2.12"
@@ -4306,10 +4306,10 @@ react-spring@^8.0.25:
43064306
"@babel/runtime" "^7.3.1"
43074307
prop-types "^15.5.8"
43084308

4309-
react@^16.11.0:
4310-
version "16.11.0"
4311-
resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
4312-
integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
4309+
react@^16.13.0:
4310+
version "16.13.0"
4311+
resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
4312+
integrity sha512-TSavZz2iSLkq5/oiE7gnFzmURKZMltmi193rm5HEoUDAXpzT9Kzw6oNZnGoai/4+fUnm7FqS5dwgUL34TujcWQ==
43134313
dependencies:
43144314
loose-envify "^1.1.0"
43154315
object-assign "^4.1.1"
@@ -4555,10 +4555,10 @@ sax@^1.2.4:
45554555
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
45564556
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
45574557

4558-
scheduler@^0.17.0:
4559-
version "0.17.0"
4560-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
4561-
integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
4558+
scheduler@^0.19.0:
4559+
version "0.19.0"
4560+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
4561+
integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==
45624562
dependencies:
45634563
loose-envify "^1.1.0"
45644564
object-assign "^4.1.1"

scripts/ci.sh

+19-3
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,32 @@ yarn test:react-dom:prepare
2323
# echo "\n\n"
2424
# echo "\n\n"
2525

26-
echo "Installing React 16"
26+
echo "Installing React 16.10"
27+
yarn add react@16 [email protected] [email protected] --pure-lockfile
28+
echo "\n\n"
29+
30+
yarn test:react-dom:prepare
31+
32+
echo "Running tests on React 16.10 - Babel ES2015"
33+
yarn test:es2015
34+
echo "\n\n"
35+
36+
echo "Running tests on React 16.10 - Babel Modern"
37+
yarn test:modern --coverage && codecov
38+
echo "\n\n"
39+
40+
41+
42+
echo "Installing React 16:latest"
2743
yarn add react@16 react-dom@16 react-test-renderer@16 --pure-lockfile
2844
echo "\n\n"
2945

3046
yarn test:react-dom:prepare
3147

32-
echo "Running tests on React 16 - Babel ES2015"
48+
echo "Running tests on React 16:latest - Babel ES2015"
3349
yarn test:es2015
3450
echo "\n\n"
3551

36-
echo "Running tests on React 16 - Babel Modern"
52+
echo "Running tests on React 16:latest - Babel Modern"
3753
yarn test:modern --coverage && codecov
3854
echo "\n\n"

src/webpack/patch.js

+73-40
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
const injectionStart = {
2+
'16.13': [
3+
'isCompatibleFamilyForHotReloading(child, element)',
4+
'hotCompareElements(child.elementType, element.type, hotUpdateChild(child), child.type)'
5+
],
26
'16.10': [
37
'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)))',
48
'if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : hotCompareElements(child.elementType, element.type, hotUpdateChild(child), child.type))'
@@ -26,7 +30,10 @@ const injectionStart = {
2630
};
2731

2832
const additional = {
29-
33+
'16.13-update': [
34+
'isCompatibleFamilyForHotReloading(current, element)',
35+
'hotCompareElements(current.elementType, element.type, hotUpdateChild(current), current.type)'
36+
],
3037
'16.10-update': [
3138
'current$$1.elementType === element.type || ( // Keep this check inline so it only runs on the false path:\n isCompatibleFamilyForHotReloading(current$$1, element)))',
3239
'(hotCompareElements(current$$1.elementType, element.type, hotUpdateChild(current$$1), current$$1.type)))'
@@ -63,7 +70,8 @@ const additional = {
6370
]
6471
};
6572

66-
const ReactHotLoaderInjection = `
73+
74+
const reactHotLoaderCode = `
6775
var hotUpdateChild = function (child) {
6876
return function (newType) {
6977
child.type = newType;
@@ -80,54 +88,79 @@ var hotCompareElements = function (oldType, newType) {
8088
};
8189
var hotCleanupHooks = function () {
8290
if (typeof resetHooks !== 'undefined') {
83-
resetHooks();
91+
resetHooks();
8492
}
8593
}
86-
var ReactDOM = {
87-
evalInReactContext: function (injection) {
88-
return eval(injection);
89-
},
90-
hotCleanup: hotCleanupHooks,
91-
hotRenderWithHooks: function (current, render) {
92-
hotCleanupHooks();
93-
94-
if (typeof nextCurrentHook !== 'undefined' && typeof ReactCurrentDispatcher$1 !== 'undefined') {
95-
nextCurrentHook = current !== null ? current.memoizedState : null;
96-
if(typeof firstCurrentHook !== 'undefined') {
97-
firstCurrentHook = nextCurrentHook;
98-
}
99-
100-
ReactCurrentDispatcher$1.current = nextCurrentHook === null ? HooksDispatcherOnMountInDEV : HooksDispatcherOnUpdateInDEV;
94+
95+
var evalInReactContext = function (injection) {
96+
return eval(injection);
97+
};
98+
var hotCleanup = hotCleanupHooks;
99+
var hotRenderWithHooks = function (current, render) {
100+
hotCleanupHooks();
101+
102+
if (typeof nextCurrentHook !== 'undefined' && typeof ReactCurrentDispatcher$1 !== 'undefined') {
103+
nextCurrentHook = current !== null ? current.memoizedState : null;
104+
if (typeof firstCurrentHook !== 'undefined') {
105+
firstCurrentHook = nextCurrentHook;
101106
}
102-
103-
var rendered = render();
104-
105-
hotCleanupHooks();
106-
107-
return rendered;
108-
},
109-
setHotElementComparator: function (newComparator) {
110-
hotCompareElements = newComparator
111-
},
112-
setHotTypeResolver: function (newResolver) {
113-
hotResolveType = newResolver;
114-
},
107+
108+
ReactCurrentDispatcher$1.current = nextCurrentHook === null ? HooksDispatcherOnMountInDEV : HooksDispatcherOnUpdateInDEV;
109+
}
110+
111+
var rendered = render();
112+
113+
hotCleanupHooks();
114+
115+
return rendered;
116+
}
117+
var setHotElementComparator = function (newComparator) {
118+
hotCompareElements = newComparator
119+
};
120+
var setHotTypeResolver = function (newResolver) {
121+
hotResolveType = newResolver;
122+
};
123+
`;
124+
125+
const CJS = `
126+
${reactHotLoaderCode};
127+
128+
var ReactDOM = {
129+
evalInReactContext: evalInReactContext,
130+
hotCleanup: hotCleanup,
131+
hotRenderWithHooks: hotRenderWithHooks,
132+
setHotElementComparator: setHotElementComparator,
133+
setHotTypeResolver: setHotTypeResolver,
115134
`;
116135

117-
const defaultEnd = ['var ReactDOM = {', ReactHotLoaderInjection];
136+
const commonJSEnd = ['var ReactDOM = {', CJS];
137+
const commonJSEndCompact = ['var ReactDOM={', CJS];
138+
139+
const ESM = `
140+
${reactHotLoaderCode};
141+
142+
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
143+
144+
exports.evalInReactContext= evalInReactContext,
145+
exports.hotCleanup= hotCleanup,
146+
exports.hotRenderWithHooks= hotRenderWithHooks,
147+
exports.setHotElementComparator= setHotElementComparator,
148+
exports.setHotTypeResolver= setHotTypeResolver,
149+
`;
118150

119-
const defaultEndCompact = ['var ReactDOM={', ReactHotLoaderInjection];
151+
const esmEnd = ['exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;', ESM];
120152

121153
const injectionEnd = {
122-
'16.10': defaultEnd,
123-
'16.9': defaultEnd,
124-
'16.6': defaultEnd,
125-
'16.4': defaultEnd,
126-
'16.6-compact': defaultEndCompact,
127-
'16.4-compact': defaultEndCompact,
154+
'16.13': esmEnd,
155+
'16.10': commonJSEnd,
156+
'16.9': commonJSEnd,
157+
'16.6': commonJSEnd,
158+
'16.4': commonJSEnd,
159+
'16.6-compact': commonJSEndCompact,
160+
'16.4-compact': commonJSEndCompact,
128161
};
129162

130-
const sign = '/* 🔥 this is hot-loader/react-dom 4.8+ 🔥 */';
163+
const sign = '/* 🔥 this is hot-loader/react-dom 🔥 */';
131164

132165
function additionalTransform(source) {
133166
for (const key in additional) {

0 commit comments

Comments
 (0)