diff --git a/examples/styled-components/package.json b/examples/styled-components/package.json index 33091c3d3..609a0cc9f 100644 --- a/examples/styled-components/package.json +++ b/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", diff --git a/examples/styled-components/webpack.config.babel.js b/examples/styled-components/webpack.config.babel.js index a39eeea1d..ba9c3407d 100644 --- a/examples/styled-components/webpack.config.babel.js +++ b/examples/styled-components/webpack.config.babel.js @@ -30,6 +30,7 @@ module.exports = { loader: 'react-hot-loader/webpack', options: { noRegister: true, + cacheBreaker: 1, }, }, }, diff --git a/examples/styled-components/yarn.lock b/examples/styled-components/yarn.lock index 728dd5e34..dac695eff 100644 --- a/examples/styled-components/yarn.lock +++ b/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" diff --git a/scripts/ci.sh b/scripts/ci.sh index cef574a81..5e7594b08 100755 --- a/scripts/ci.sh +++ b/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 react-dom@16.10 react-test-renderer@16.10 --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" diff --git a/src/webpack/patch.js b/src/webpack/patch.js index ee5624dc5..cf41e1e72 100644 --- a/src/webpack/patch.js +++ b/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) {