Repository: gaearon/react-hot-loader
Branch: master
Commit: 07d1f4e080f1
Files: 323
Total size: 617.5 KB
Directory structure:
gitextract_mfr81t7r/
├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── LICENSE
├── PATRONS.md
├── README.md
├── babel.js
├── docs/
│ └── Troubleshooting.md
├── examples/
│ ├── SSR/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ ├── HiddenComponent.js
│ │ │ ├── index.js
│ │ │ ├── server.js
│ │ │ └── template.js
│ │ └── webpack.config.babel.js
│ ├── all-possible-containers/
│ │ ├── .babelrc
│ │ ├── .editorconfig
│ │ ├── .flowconfig
│ │ ├── .gitignore
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── App.js
│ │ │ │ ├── ChildrenAsFunctionComponent.js
│ │ │ │ ├── ChildrenAsFunctionExample.js
│ │ │ │ ├── ClassComponent.js
│ │ │ │ ├── ConnectedChildrenAFComponent.js
│ │ │ │ ├── ConsumerClassComponent.js
│ │ │ │ ├── ConsumerConnectedComponent.js
│ │ │ │ ├── ConsumerFunctionComponent.js
│ │ │ │ ├── ConsumerPureClassComponent.js
│ │ │ │ ├── Counter.js
│ │ │ │ ├── ErrorBoundary.js
│ │ │ │ ├── FunctionComponent.js
│ │ │ │ ├── FunctionConsumerPureClassComponent.js
│ │ │ │ ├── Hook.js
│ │ │ │ ├── LazyComponent.js
│ │ │ │ ├── Modal.js
│ │ │ │ ├── ModalComponent.js
│ │ │ │ ├── PureClassComponent.js
│ │ │ │ ├── SomethingWithHooks.js
│ │ │ │ └── _editMe.js
│ │ │ ├── context.js
│ │ │ ├── index.js
│ │ │ └── wcl.js
│ │ └── webpack.config.js
│ ├── async-components/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ ├── Counter2.js
│ │ │ ├── chunks/
│ │ │ │ ├── async-component.js
│ │ │ │ ├── loadable-components.js
│ │ │ │ ├── react-imported-component.js
│ │ │ │ ├── react-loadable.js
│ │ │ │ └── react-universal-component.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── async-portals/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ ├── DeferredRender.js
│ │ │ ├── HiddenComponent.js
│ │ │ ├── Portal.js
│ │ │ ├── async-component.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── decorators/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── electron-typescript/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── App.tsx
│ │ │ ├── Counter.tsx
│ │ │ ├── development.html
│ │ │ ├── index.tsx
│ │ │ └── production.html
│ │ ├── main.js
│ │ ├── package.json
│ │ ├── tsconfig.json
│ │ └── webpack.config.js
│ ├── hotCold/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ ├── index.js
│ │ │ └── reactHotLoader.setup.js
│ │ └── webpack.config.babel.js
│ ├── indeterminateComponent/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── mobx/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── multiple-hocs/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── parcel/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── index.html
│ │ ├── package.json
│ │ └── src/
│ │ ├── App.js
│ │ ├── Counter.js
│ │ ├── Problem.js
│ │ └── index.js
│ ├── preact/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ ├── Internal.js
│ │ │ ├── hotLoaderSetup.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── react-bootstrap/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── react-refetch/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Characters.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── redux/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── index_csp.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── HookComponent.js
│ │ │ ├── MyComponent.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── styled-components/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── index_csp.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Async.js
│ │ │ ├── Counter.js
│ │ │ ├── Spring.js
│ │ │ ├── config.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ ├── typescript/
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── Counter.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── webpack.config.babel.js
│ ├── typescript-no-babel/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── Counter.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── webpack.config.js
│ ├── webpack/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.js
│ │ │ ├── Counter.js
│ │ │ └── index.js
│ │ └── webpack.config.babel.js
│ └── webpack-modern/
│ ├── .babelrc
│ ├── .gitignore
│ ├── package.json
│ ├── src/
│ │ ├── App.js
│ │ ├── Counter.js
│ │ └── index.js
│ └── webpack.config.babel.js
├── index.d.ts
├── index.js
├── package.json
├── patch.js
├── rollup.config.js
├── root.d.ts
├── root.js
├── scripts/
│ ├── ci.sh
│ ├── react-15.ci.sh
│ ├── react-16.ci.sh
│ └── react-17.ci.sh
├── src/
│ ├── AppContainer.dev.js
│ ├── AppContainer.prod.js
│ ├── adapters/
│ │ └── preact.js
│ ├── babel.dev.js
│ ├── babel.prod.js
│ ├── configuration.js
│ ├── errorReporter.js
│ ├── fresh/
│ │ └── babel.js
│ ├── global/
│ │ ├── generation.js
│ │ └── modules.js
│ ├── hot.dev.js
│ ├── hot.prod.js
│ ├── index.dev.js
│ ├── index.prod.js
│ ├── internal/
│ │ ├── constants.js
│ │ ├── getReactStack.js
│ │ ├── reactUtils.js
│ │ └── stack/
│ │ ├── hydrateFiberStack.js
│ │ └── hydrateLegacyStack.js
│ ├── logger.js
│ ├── proxy/
│ │ ├── constants.js
│ │ ├── createClassProxy.js
│ │ ├── index.js
│ │ ├── inject.js
│ │ ├── transferStaticProps.js
│ │ └── utils.js
│ ├── reactHotLoader.js
│ ├── reconciler/
│ │ ├── componentComparator.js
│ │ ├── fiberUpdater.js
│ │ ├── hotReplacementRender.js
│ │ ├── index.js
│ │ ├── proxies.js
│ │ ├── proxyAdapter.js
│ │ ├── resolver.js
│ │ └── utils.js
│ ├── utils/
│ │ └── runQueue.js
│ ├── utils.dev.js
│ ├── utils.prod.js
│ └── webpack/
│ ├── index.js
│ ├── makeIdentitySourceMap.js
│ ├── patch.js
│ └── webpackTagCommonJSExports.js
├── test/
│ ├── .eslintrc.js
│ ├── AppContainer.dev.test.js
│ ├── __babel_fixtures__/
│ │ ├── bindings.js
│ │ ├── class-properties/
│ │ │ ├── arguments.js
│ │ │ ├── arrow-function-in-constructor.js
│ │ │ ├── async-functions-expression-body.js
│ │ │ ├── async-functions.js
│ │ │ ├── block-body.js
│ │ │ ├── default-params.js
│ │ │ ├── destructured-params.js
│ │ │ ├── expression-body.js
│ │ │ ├── nested-arguments.js
│ │ │ ├── nested-new.target.js
│ │ │ ├── new.target.js
│ │ │ ├── not-a-function.js
│ │ │ ├── not-an-arrow-function.js
│ │ │ ├── same-name-as-class-method.js
│ │ │ └── static-property.js
│ │ ├── counter.js
│ │ ├── drop-hot-half.prod.js
│ │ ├── drop-hot.prod.js
│ │ ├── hooks.js
│ │ ├── issue-246.js
│ │ ├── local-hooks.js
│ │ └── name-clash.js
│ ├── __snapshots__/
│ │ └── babel.test.js.snap
│ ├── babel.test.js
│ ├── build.test.js
│ ├── cases/
│ │ ├── hooks/
│ │ │ └── useContext.test.js
│ │ └── memo/
│ │ └── memo.test.js
│ ├── global/
│ │ ├── generation.test.js
│ │ └── modules.test.js
│ ├── hot/
│ │ ├── .gitignore
│ │ ├── createPatchedReact.js
│ │ ├── react-dom.integration.spec.js
│ │ └── react-dom.no-integration.spec.js
│ ├── hot.dev.test.js
│ ├── index.dev.test.js
│ ├── internal/
│ │ ├── getReactStack.test.js
│ │ └── reactUtils.test.js
│ ├── prod/
│ │ ├── AppContainer.prod.test.js
│ │ ├── hot.prod.test.js
│ │ └── utils.prod.test.js
│ ├── proxy/
│ │ ├── consistency.test.js
│ │ ├── helper.js
│ │ ├── instance-descriptor.test.js
│ │ ├── instance-method.test.js
│ │ ├── instance-property.test.js
│ │ ├── lifecycle-method.test.js
│ │ ├── static-descriptor.test.js
│ │ ├── static-method.test.js
│ │ ├── static-property.test.js
│ │ └── unmounting.test.js
│ ├── reactHotLoader.test.js
│ ├── reconciler/
│ │ └── proxyAdapter.test.js
│ ├── reconciler.test.js
│ └── utils.test.js
├── testConfig/
│ ├── babel.js
│ └── setupTests.js
└── webpack.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
[
"env",
{
"modules": false,
"loose": true
}
],
"react"
],
"plugins": [
["transform-class-properties", { "loose": true }],
"transform-object-rest-spread",
"dynamic-import-node"
]
}
================================================
FILE: .eslintignore
================================================
node_modules/
__babel_fixtures__/
dist/
coverage/
examples/
babel.js
index.js
patch.js
webpack.js
root.js
test/hot/react-dom
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: ['airbnb', 'prettier', 'prettier/react'],
parser: 'babel-eslint',
rules: {
'no-underscore-dangle': ['error', { allow: ['__standin_getCurrent'] }],
'no-console': ['error', { allow: ['warn', 'error'] }],
'no-plusplus': 'off',
'no-continue': 'off',
'no-restricted-syntax': 'off',
'no-prototype-builtins': 'off',
'no-param-reassign': 'off',
'no-constant-condition': 'off',
'no-shadow': 'off',
'class-methods-use-this': 'off',
'import/no-extraneous-dependencies': 'off',
'import/prefer-default-export': 'off',
'react/prop-types': 'off',
'react/prefer-stateless-function': 'off',
'react/no-multi-comp': 'off',
'react/prefer-es6-class': 'off',
'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
'react/require-default-props': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
'jsx-a11y/click-events-have-key-events': 'off',
},
globals: {
__REACT_HOT_LOADER__: true,
},
};
================================================
FILE: .gitattributes
================================================
*.js text eol=lf
================================================
FILE: .gitignore
================================================
node_modules/
dist/
coverage/
.DS_Store
================================================
FILE: .prettierignore
================================================
__babel_fixtures__/
__snapshots__/
node_modules/
dist/
package.json
CHANGELOG.md
.cache
babel.js
index.js
patch.js
root.js
test/hot/react-dom
coverage
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"trailingComma": "all",
"semi": true,
"printWidth": 120
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 8
- 10
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
- export PATH="$HOME/.yarn/bin:$PATH"
script:
- yarn ci
notifications:
email: false
cache:
yarn: true
directories:
- ".eslintcache"
- "node_modules"
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["orta.vscode-jest", "editorconfig.editorconfig", "dbaeumer.vscode-eslint"]
}
================================================
FILE: .vscode/settings.json
================================================
{
"debug.node.autoAttach": "on"
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [4.13.0](https://github.com/gaearon/react-hot-loader/compare/v4.12.20...v4.13.0) (2020-09-22)
### Bug Fixes
* tailUpdate might be blocked by a PureComponent ([#1448](https://github.com/gaearon/react-hot-loader/issues/1448)) ([e44103a](https://github.com/gaearon/react-hot-loader/commit/e44103a))
* when module.hot is not truthy ([#1451](https://github.com/gaearon/react-hot-loader/issues/1451)) ([ec3447f](https://github.com/gaearon/react-hot-loader/commit/ec3447f))
### Features
* support React 17 ([#1557](https://github.com/gaearon/react-hot-loader/issues/1557)) ([c05396b](https://github.com/gaearon/react-hot-loader/commit/c05396b)), closes [#1425](https://github.com/gaearon/react-hot-loader/issues/1425)
### [4.12.21](https://github.com/gaearon/react-hot-loader/compare/v4.12.20...v4.12.21) (2020-04-30)
### Bug Fixes
* add peerDependenciesMeta in package.json (#1433)
### [4.12.20](https://github.com/gaearon/react-hot-loader/compare/v4.12.19...v4.12.20) (2020-03-14)
### Bug Fixes
* patch support for react-dom 16.13 ([#1428](https://github.com/gaearon/react-hot-loader/issues/1428)) ([5475fe7](https://github.com/gaearon/react-hot-loader/commit/5475fe7))
### [4.12.19](https://github.com/gaearon/react-hot-loader/compare/v4.12.18...v4.12.19) (2020-01-22)
### Bug Fixes
* don't record signatures of local hooks, fixes [#1412](https://github.com/gaearon/react-hot-loader/issues/1412) ([#1413](https://github.com/gaearon/react-hot-loader/issues/1413)) ([c159844](https://github.com/gaearon/react-hot-loader/commit/c159844))
### [4.12.18](https://github.com/gaearon/react-hot-loader/compare/v4.12.17...v4.12.18) (2019-11-16)
### Bug Fixes
* (regression) hook order change is causing React error, fixes [#1393](https://github.com/gaearon/react-hot-loader/issues/1393) ([6707b4b](https://github.com/gaearon/react-hot-loader/commit/6707b4b))
* production babel plugin might perform eager replacement, fixes [#1388](https://github.com/gaearon/react-hot-loader/issues/1388) ([b94adb3](https://github.com/gaearon/react-hot-loader/commit/b94adb3))
### [4.12.17](https://github.com/gaearon/react-hot-loader/compare/v4.12.16...v4.12.17) (2019-11-12)
### Bug Fixes
* move @types/react from to peer dependencies, fixes [#1391](https://github.com/gaearon/react-hot-loader/issues/1391) ([5ab2cab](https://github.com/gaearon/react-hot-loader/commit/5ab2cab))
### [4.12.16](https://github.com/gaearon/react-hot-loader/compare/v4.12.15...v4.12.16) (2019-11-06)
### Bug Fixes
* dont write to elementType if it is not defined, fixes [#1357](https://github.com/gaearon/react-hot-loader/issues/1357) ([1072303](https://github.com/gaearon/react-hot-loader/commit/1072303))
* explain why RHL could not be activated, fixes [#1362](https://github.com/gaearon/react-hot-loader/issues/1362) ([9561d66](https://github.com/gaearon/react-hot-loader/commit/9561d66))
* more @types/react to dependencies, fixes [#1359](https://github.com/gaearon/react-hot-loader/issues/1359) ([af42c1a](https://github.com/gaearon/react-hot-loader/commit/af42c1a))
* use logger.warn instead of console to report tail update, fixes [#1386](https://github.com/gaearon/react-hot-loader/issues/1386) ([fbc890a](https://github.com/gaearon/react-hot-loader/commit/fbc890a))
## [4.12.15](https://github.com/gaearon/react-hot-loader/compare/v4.12.14...v4.12.15) (2019-10-08)
### Bug Fixes
* React 16.10 support ([b7ed82a](https://github.com/gaearon/react-hot-loader/commit/b7ed82a))
## [4.12.14](https://github.com/gaearon/react-hot-loader/compare/v4.12.13...v4.12.14) (2019-09-23)
### Bug Fixes
* autodetect underupdated state and trigger an automatic update, fixes [#1342](https://github.com/gaearon/react-hot-loader/issues/1342) ([33c54f5](https://github.com/gaearon/react-hot-loader/commit/33c54f5))
* resolve all components to their last versions, [#1342](https://github.com/gaearon/react-hot-loader/issues/1342) ([62bc67e](https://github.com/gaearon/react-hot-loader/commit/62bc67e))
## [4.12.13](https://github.com/gaearon/react-hot-loader/compare/v4.12.12...v4.12.13) (2019-09-12)
### Bug Fixes
* error overlay should not be injected into the first instance, fixes [#1337](https://github.com/gaearon/react-hot-loader/issues/1337) ([c019663](https://github.com/gaearon/react-hot-loader/commit/c019663))
* return null for null types, fixes [#1324](https://github.com/gaearon/react-hot-loader/issues/1324) ([08d7ed1](https://github.com/gaearon/react-hot-loader/commit/08d7ed1))
* run hot in batched mode, fixes [#1332](https://github.com/gaearon/react-hot-loader/issues/1332) ([e801daf](https://github.com/gaearon/react-hot-loader/commit/e801daf))
## [4.12.12](https://github.com/gaearon/react-hot-loader/compare/v4.12.11...v4.12.12) (2019-08-27)
### Bug Fixes
* error overlay could fail by itself ([da50985](https://github.com/gaearon/react-hot-loader/commit/da50985))
* resolve undefined types to undefined, fixes [#1324](https://github.com/gaearon/react-hot-loader/issues/1324) ([73eeb4e](https://github.com/gaearon/react-hot-loader/commit/73eeb4e))
* speedup levenshtein comparison, fixes [#1087](https://github.com/gaearon/react-hot-loader/issues/1087) ([b81dcb0](https://github.com/gaearon/react-hot-loader/commit/b81dcb0))
## [4.12.11](https://github.com/gaearon/react-hot-loader/compare/v4.12.10...v4.12.11) (2019-08-12)
### Features
* react 16.9 support, [1320](https://github.com/gaearon/react-hot-loader/pull/1320) by @Bnaya
### Bug Fixes
* add noRegister option to webpack, [#1315](https://github.com/gaearon/react-hot-loader/issues/1315) ([e562375](https://github.com/gaearon/react-hot-loader/commit/e562375))
* remove circular deps from hot-loader ([2cb544d](https://github.com/gaearon/react-hot-loader/commit/2cb544d))
## [4.12.10](https://github.com/gaearon/react-hot-loader/compare/v4.12.9...v4.12.10) (2019-07-27)
### Bug Fixes
* append react-hot-dom patch note to the ProxyFacade, fixes [#1311](https://github.com/gaearon/react-hot-loader/issues/1311) ([81bbb6a](https://github.com/gaearon/react-hot-loader/commit/81bbb6a))
* use void IIFE for webpack plugin, fixes [#1309](https://github.com/gaearon/react-hot-loader/issues/1309) ([6089822](https://github.com/gaearon/react-hot-loader/commit/6089822))
## [4.12.9](https://github.com/gaearon/react-hot-loader/compare/v4.12.8...v4.12.9) (2019-07-23)
### Bug Fixes
* forcely update Context Provider, fixes [#1207](https://github.com/gaearon/react-hot-loader/issues/1207) ([897a68d](https://github.com/gaearon/react-hot-loader/commit/897a68d))
* updating shallowequal dependency ([9269580](https://github.com/gaearon/react-hot-loader/commit/9269580))
## [4.12.8](https://github.com/gaearon/react-hot-loader/compare/v4.12.7...v4.12.8) (2019-07-18)
### Bug Fixes
* script error on IE11 due to lack of Object.entries ([6672b26](https://github.com/gaearon/react-hot-loader/commit/6672b26))
## [4.12.7](https://github.com/gaearon/react-hot-loader/compare/v4.12.6...v4.12.7) (2019-07-16)
### Bug Fixes
* false negative comparisons with react-hot-dom enabled, fixes [#1299](https://github.com/gaearon/react-hot-loader/issues/1299) ([a1c5c31](https://github.com/gaearon/react-hot-loader/commit/a1c5c31))
* reload hooks when hook body changes ([4795456](https://github.com/gaearon/react-hot-loader/commit/4795456))
## [4.12.6](https://github.com/gaearon/react-hot-loader/compare/v4.12.5...v4.12.6) (2019-07-10)
### Bug Fixes
* do not update hooks while updating hooks, fixes [#1294](https://github.com/gaearon/react-hot-loader/issues/1294) ([afa8ed4](https://github.com/gaearon/react-hot-loader/commit/afa8ed4))
## [4.12.5](https://github.com/gaearon/react-hot-loader/compare/v4.12.4...v4.12.5) (2019-07-07)
### Bug Fixes
* babel 7.5, fixes [#1292](https://github.com/gaearon/react-hot-loader/issues/1292) ([4441d6d](https://github.com/gaearon/react-hot-loader/commit/4441d6d))
## [4.12.4](https://github.com/gaearon/react-hot-loader/compare/v4.12.3...v4.12.4) (2019-07-06)
### Bug Fixes
* remove lodash, [#1269](https://github.com/gaearon/react-hot-loader/issues/1269) ([8ad1b46](https://github.com/gaearon/react-hot-loader/commit/8ad1b46))
## [4.12.3](https://github.com/gaearon/react-hot-loader/compare/v4.12.2...v4.12.3) (2019-07-04)
### Bug Fixes
* babel plugin should use only extrernals hooks, fixes [#1285](https://github.com/gaearon/react-hot-loader/issues/1285) ([c435eaa](https://github.com/gaearon/react-hot-loader/commit/c435eaa))
* make type comparison stronger ([1b9f2da](https://github.com/gaearon/react-hot-loader/commit/1b9f2da))
* prevent different typeof of components to be merged ([357249c](https://github.com/gaearon/react-hot-loader/commit/357249c))
* regression of registered type comparison, fixes [#1284](https://github.com/gaearon/react-hot-loader/issues/1284) ([49851be](https://github.com/gaearon/react-hot-loader/commit/49851be))
## [4.12.2](https://github.com/gaearon/react-hot-loader/compare/v4.12.1...v4.12.2) (2019-07-03)
### Bug Fixes
* [babel][prod] separate default and root 'hot' detection, fixes [#1283](https://github.com/gaearon/react-hot-loader/issues/1283) ([c6d29c9](https://github.com/gaearon/react-hot-loader/commit/c6d29c9))
## [4.12.1](https://github.com/gaearon/react-hot-loader/compare/v4.12.0...v4.12.1) (2019-07-03)
### Bug Fixes
* clone node for signature, fixes [#1268](https://github.com/gaearon/react-hot-loader/issues/1268) ([ed3e1d9](https://github.com/gaearon/react-hot-loader/commit/ed3e1d9))
* memo components are not updated ([5bca98c](https://github.com/gaearon/react-hot-loader/commit/5bca98c))
* use deep clone for fresh signature, fixes [#1280](https://github.com/gaearon/react-hot-loader/issues/1280) ([d796af8](https://github.com/gaearon/react-hot-loader/commit/d796af8))
# [4.12.0](https://github.com/gaearon/react-hot-loader/compare/v4.11.2...v4.12.0) (2019-06-30)
### Features
* disable hot replacement render if react-dom is patched, see [#1274](https://github.com/gaearon/react-hot-loader/issues/1274) ([b93eb1d](https://github.com/gaearon/react-hot-loader/commit/b93eb1d))
## [4.11.2](https://github.com/gaearon/react-hot-loader/compare/v4.11.1...v4.11.2) (2019-06-30)
### Bug Fixes
* babel-plugin is not compatible with commonjs module output if babel 7 is used #1268.
## [4.11.1](https://github.com/gaearon/react-hot-loader/compare/v4.11.0...v4.11.1) (2019-06-15)
### Bug Fixes
* hot render of forward props component ([4ba7530](https://github.com/gaearon/react-hot-loader/commit/4ba7530))
* regression in hidden components reconcilation ([3f8efc4](https://github.com/gaearon/react-hot-loader/commit/3f8efc4))
* update react-fresh babel plugin ([2fafd44](https://github.com/gaearon/react-hot-loader/commit/2fafd44))
# [4.11.0](https://github.com/gaearon/react-hot-loader/compare/v4.9.0...v4.11.0) (2019-06-10)
### Bug Fixes
* source map consumer could be synchronous ([05a6c8e](https://github.com/gaearon/react-hot-loader/commit/05a6c8e))
### Features
* backport React.Fresh to handle hooks order change ([e5c4bb4](https://github.com/gaearon/react-hot-loader/commit/e5c4bb4))
# [4.10.0](https://github.com/gaearon/react-hot-loader/compare/v4.9.0...v4.10.0) (2019-06-02)
### Features
* transparent class wrapping, fixes [#304](https://github.com/gaearon/react-hot-loader/issues/304) ([9fe4cad](https://github.com/gaearon/react-hot-loader/commit/9fe4cad))
# [4.9.0](https://github.com/gaearon/react-hot-loader/compare/v4.8.8...v4.9.0) (2019-06-02)
### Bug Fixes
* false positive hot merge for forwardRef and Memo components, fixes [#1257](https://github.com/gaearon/react-hot-loader/issues/1257) ([dbf1047](https://github.com/gaearon/react-hot-loader/commit/dbf1047))
* improve hot api for production mode - error reporting and babel plugin ([6b29911](https://github.com/gaearon/react-hot-loader/commit/6b29911))
### Features
* support hooks update on HMR, fixes [#1256](https://github.com/gaearon/react-hot-loader/issues/1256) ([7ab076c](https://github.com/gaearon/react-hot-loader/commit/7ab076c))
## [4.8.8](https://github.com/gaearon/react-hot-loader/compare/v4.8.7...v4.8.8) (2019-05-23)
### Bug Fixes
* disable RHL when NODE_ENV == test, fixes [#1252](https://github.com/gaearon/react-hot-loader/issues/1252) ([6f56d87](https://github.com/gaearon/react-hot-loader/commit/6f56d87))
## [4.8.7](https://github.com/gaearon/react-hot-loader/compare/v4.8.6...v4.8.7) (2019-05-20)
### Bug Fixes
* remove checks. fixes [#1252](https://github.com/gaearon/react-hot-loader/issues/1252) ([2b2f733](https://github.com/gaearon/react-hot-loader/commit/2b2f733))
## [4.8.6](https://github.com/gaearon/react-hot-loader/compare/v4.8.5...v4.8.6) (2019-05-18)
### Bug Fixes
* No HMR missing error in SSR ([956e52b](https://github.com/gaearon/react-hot-loader/commit/956e52b))
* trailing commas at entrypoints, fixes [#1226](https://github.com/gaearon/react-hot-loader/issues/1226) ([989eebf](https://github.com/gaearon/react-hot-loader/commit/989eebf))
## [4.8.5](https://github.com/gaearon/react-hot-loader/compare/v4.8.4...v4.8.5) (2019-05-16)
### Bug Fixes
* correct memo fiber updater, fixes [#1230](https://github.com/gaearon/react-hot-loader/issues/1230) ([a185494](https://github.com/gaearon/react-hot-loader/commit/a185494))
* make API more error prone, fixes [#1228](https://github.com/gaearon/react-hot-loader/issues/1228) ([a6ba488](https://github.com/gaearon/react-hot-loader/commit/a6ba488))
* move react-dom notification to AppContainer, fixes [#1227](https://github.com/gaearon/react-hot-loader/issues/1227) ([28bfdd4](https://github.com/gaearon/react-hot-loader/commit/28bfdd4))
* update root endpoint, fixes [#1226](https://github.com/gaearon/react-hot-loader/issues/1226), [#1240](https://github.com/gaearon/react-hot-loader/issues/1240) ([608805a](https://github.com/gaearon/react-hot-loader/commit/608805a))
* use simpler conditions for index.js, implements [#1244](https://github.com/gaearon/react-hot-loader/issues/1244) ([4811d57](https://github.com/gaearon/react-hot-loader/commit/4811d57))
* webpack plugin fails on hot-loader/react-dom, fixes #[#1234](https://github.com/gaearon/react-hot-loader/issues/1234) ([826eee3](https://github.com/gaearon/react-hot-loader/commit/826eee3))
* webpack-plugin - use RHL global variable, fixes [#1251](https://github.com/gaearon/react-hot-loader/issues/1251) ([f036d36](https://github.com/gaearon/react-hot-loader/commit/f036d36))
## [4.8.4](https://github.com/gaearon/react-hot-loader/compare/v4.8.3...v4.8.4) (2019-04-15)
### Bug Fixes
* document the importance of import order, fixes [#1209](https://github.com/gaearon/react-hot-loader/issues/1209) ([5f50ee4](https://github.com/gaearon/react-hot-loader/commit/5f50ee4))
* dont skip first update or plain components ([432e0f8](https://github.com/gaearon/react-hot-loader/commit/432e0f8))
* remove Object.assign, fixes [#1226](https://github.com/gaearon/react-hot-loader/issues/1226) ([c5af009](https://github.com/gaearon/react-hot-loader/commit/c5af009))
## [4.8.3](https://github.com/gaearon/react-hot-loader/compare/v4.8.2...v4.8.3) (2019-04-05)
### Bug Fixes
* Allow refs on lazy components ([798e37f](https://github.com/gaearon/react-hot-loader/commit/798e37f))
* invariant violation react 15 ([1351f2d](https://github.com/gaearon/react-hot-loader/commit/1351f2d))
## [4.8.1](https://github.com/gaearon/react-hot-loader/compare/v4.8.0...v4.8.1) (2019-03-29)
### Bug Fixes
* root hot for parcel bundler, fixes [#1082](https://github.com/gaearon/react-hot-loader/issues/1082) ([a16679b](https://github.com/gaearon/react-hot-loader/commit/a16679b))
# [4.8.0](https://github.com/gaearon/react-hot-loader/compare/v4.7.2...v4.8.0) (2019-03-07)
### Features
* support 16.8.4 ([38b63cd](https://github.com/gaearon/react-hot-loader/commit/38b63cd))
## [4.7.2](https://github.com/gaearon/react-hot-loader/compare/v4.7.1...v4.7.2) (2019-03-04)
### Bug Fixes
* safer reads from context consumer ([7942d26](https://github.com/gaearon/react-hot-loader/commit/7942d26))
* suppress error message on a server side, fixes [#1188](https://github.com/gaearon/react-hot-loader/issues/1188) ([b12b430](https://github.com/gaearon/react-hot-loader/commit/b12b430))
## [4.7.1](https://github.com/gaearon/react-hot-loader/compare/v4.7.0...v4.7.1) (2019-02-20)
### Bug Fixes
* destructed Context.Provider breaking registrations. fixes [#1184](https://github.com/gaearon/react-hot-loader/issues/1184) ([8240111](https://github.com/gaearon/react-hot-loader/commit/8240111))
* do not poison memoized props ([9f6ab6e](https://github.com/gaearon/react-hot-loader/commit/9f6ab6e))
* rethrow an error is hot comparison is not open ([8befa5a](https://github.com/gaearon/react-hot-loader/commit/8befa5a))
# [4.7.0](https://github.com/gaearon/react-hot-loader/compare/v4.6.5...v4.7.0) (2019-02-18)
### Bug Fixes
* complain if hot patches not present, fixes [#1173](https://github.com/gaearon/react-hot-loader/issues/1173) ([efc3d6b](https://github.com/gaearon/react-hot-loader/commit/efc3d6b))
* deactivate RHL in dev mode if eval not allowed ([f995b0d](https://github.com/gaearon/react-hot-loader/commit/f995b0d))
* disable ErrorBoundaries for a first run, fixes [#1172](https://github.com/gaearon/react-hot-loader/issues/1172) ([2a834c2](https://github.com/gaearon/react-hot-loader/commit/2a834c2))
* Support Context.Provider reload and React.memo, fixes [#1169](https://github.com/gaearon/react-hot-loader/issues/1169) ([09e48eb](https://github.com/gaearon/react-hot-loader/commit/09e48eb))
### Features
* activate pureRender by default ([4e971b5](https://github.com/gaearon/react-hot-loader/commit/4e971b5))
* implement flexible hot injections ([b7e8f5e](https://github.com/gaearon/react-hot-loader/commit/b7e8f5e))
* make errors retryable to mitigate hooks update ([9967fde](https://github.com/gaearon/react-hot-loader/commit/9967fde))
## [4.6.5](https://github.com/gaearon/react-hot-loader/compare/v4.6.4...v4.6.5) (2019-01-31)
### Bug Fixes
* babel plugin produces a broken code ([6f8573f](https://github.com/gaearon/react-hot-loader/commit/6f8573f))
## [4.6.4](https://github.com/gaearon/react-hot-loader/compare/v4.6.3...v4.6.4) (2019-01-31)
### Bug Fixes
* do not shadow component name ([4b02767](https://github.com/gaearon/react-hot-loader/commit/4b02767))
* do not supress HMR errors ([be79d2f](https://github.com/gaearon/react-hot-loader/commit/be79d2f))
* fix wrong react-dom name resolution installation ([6f829a0](https://github.com/gaearon/react-hot-loader/commit/6f829a0))
* opt-out for module safety net, fixes [#1102](https://github.com/gaearon/react-hot-loader/issues/1102), [#1159](https://github.com/gaearon/react-hot-loader/issues/1159) ([93d0b1f](https://github.com/gaearon/react-hot-loader/commit/93d0b1f))
* remove platform checks from production bundle, fixes [#1162](https://github.com/gaearon/react-hot-loader/issues/1162) ([24d0448](https://github.com/gaearon/react-hot-loader/commit/24d0448))
* update fiber cached type, fixes [#1139](https://github.com/gaearon/react-hot-loader/issues/1139) ([35984ff](https://github.com/gaearon/react-hot-loader/commit/35984ff))
## [4.6.3](https://github.com/gaearon/react-hot-loader/compare/v4.6.2...v4.6.3) (2018-12-19)
### Bug Fixes
* context information is not always properly emulated in hot-render, fixes [#1094](https://github.com/gaearon/react-hot-loader/issues/1094) ([100fc9c](https://github.com/gaearon/react-hot-loader/commit/100fc9c))
* RHL could update non-relative components ([5d4f226](https://github.com/gaearon/react-hot-loader/commit/5d4f226))
* update memo updater and comparator. fix [#1135](https://github.com/gaearon/react-hot-loader/issues/1135) ([826a57c](https://github.com/gaearon/react-hot-loader/commit/826a57c))
## [4.6.2](https://github.com/gaearon/react-hot-loader/compare/v4.6.1...v4.6.2) (2018-12-18)
### Bug Fixes
* allow multiple 'hot' in one file, registering only the first one ([68c2a0a](https://github.com/gaearon/react-hot-loader/commit/68c2a0a))
* error overlay initialization prior body, fixes [#1127](https://github.com/gaearon/react-hot-loader/issues/1127) ([9177aba](https://github.com/gaearon/react-hot-loader/commit/9177aba))
## [4.6.1](https://github.com/gaearon/react-hot-loader/compare/4.6.0...4.6.1) (2018-12-17)
### Bug Fixes
* display hmr errors as hmr errors, [#1131](https://github.com/gaearon/react-hot-loader/issues/1131) ([615790f](https://github.com/gaearon/react-hot-loader/commit/615790f))
* error overlay is not server side friendly, [#1126](https://github.com/gaearon/react-hot-loader/issues/1126) ([40e3ff2](https://github.com/gaearon/react-hot-loader/commit/40e3ff2))
* hmr error detection is flaky ([9d3a2c0](https://github.com/gaearon/react-hot-loader/commit/9d3a2c0))
* secure wrapped/uwrapped comparison ([a62bacd](https://github.com/gaearon/react-hot-loader/commit/a62bacd))
* webpack plugin outputs es2015 code ([8a66401](https://github.com/gaearon/react-hot-loader/commit/8a66401))
# [4.6.0](https://github.com/gaearon/react-hot-loader/compare/v4.5.3...v4.6.0) (2018-12-13)
### Features
* implement flexible error boundaries ([1846019](https://github.com/gaearon/react-hot-loader/commit/1846019))
* new root/hot for better error management. Fixes [#1078](https://github.com/gaearon/react-hot-loader/issues/1078), [#1111](https://github.com/gaearon/react-hot-loader/issues/1111) ([3029428](https://github.com/gaearon/react-hot-loader/commit/3029428))
## [4.5.3](https://github.com/gaearon/react-hot-loader/compare/v4.5.2...v4.5.3) (2018-12-07)
### Bug Fixes
* enable class equality, but disable class merge, when not hot ([8d214b3](https://github.com/gaearon/react-hot-loader/commit/8d214b3))
* react-dom hot-replacement is too active ([8827a40](https://github.com/gaearon/react-hot-loader/commit/8827a40))
## [4.5.2](https://github.com/gaearon/react-hot-loader/compare/v4.5.1...v4.5.2) (2018-12-06)
### Bug Fixes
* forwardRef to be remounted every frame. React-router to merge components ([3b11866](https://github.com/gaearon/react-hot-loader/commit/3b11866))
* React-router to merge components ([f45fee0](https://github.com/gaearon/react-hot-loader/commit/f45fee0))
* remove early reject, [#1115](https://github.com/gaearon/react-hot-loader/issues/1115) ([0a28144](https://github.com/gaearon/react-hot-loader/commit/0a28144))
## [4.5.1](https://github.com/gaearon/react-hot-loader/compare/v4.5.0...v4.5.1) (2018-11-21)
### Bug Fixes
* add lodash.merge as dep ([1de55d6](https://github.com/gaearon/react-hot-loader/commit/1de55d6))
# [4.5.0](https://github.com/gaearon/react-hot-loader/compare/v4.4.0...v4.5.0) (2018-11-20)
### Bug Fixes
* handle older React versions ([a03c1c3](https://github.com/gaearon/react-hot-loader/commit/a03c1c3))
* hot-render forwardRef ([5f362ad](https://github.com/gaearon/react-hot-loader/commit/5f362ad))
* IE11 compact, [#1099](https://github.com/gaearon/react-hot-loader/issues/1099) ([f8ef550](https://github.com/gaearon/react-hot-loader/commit/f8ef550))
### Features
* webpack patch/inject mode ([42d637b](https://github.com/gaearon/react-hot-loader/commit/42d637b))
## 4.4.0-1 (2018-11-01)
### Bug Fixes
- `forwardRef` reconciliation [#1100](https://github.com/gaearon/react-hot-loader/pull/1100)
## [4.4.0](https://github.com/gaearon/react-hot-loader/compare/v4.3.11...v4.3.12) (2018-11-01)
### Features
* React 16.5 and React 16.6 support. forwardRef, memo, lazy [#1084](https://github.com/gaearon/react-hot-loader/pull/1084)
* Webpack loader [#1098](https://github.com/gaearon/react-hot-loader/pull/1098)
* mark RHL sideEffect-free in production mode [#1096](https://github.com/gaearon/react-hot-loader/pull/1096)
* babel plugin will remove `hot` in production [#1091](https://github.com/gaearon/react-hot-loader/pull/1091)
### Bug Fixes
* babel plugin will remove calls to `hot` in production mode to remove side-effect on webpack [#1081](https://github.com/gaearon/react-hot-loader/pull/1081)
* class methods, deleted on update, will be deleted from proxy [#1091](https://github.com/gaearon/react-hot-loader/pull/1091)
## [4.3.11](https://github.com/gaearon/react-hot-loader/compare/v4.3.9...v4.3.11) (2018-09-20)
### Bug Fixes
* hot fixing ES5 literals in index.js ([80f6b63](https://github.com/gaearon/react-hot-loader/commit/80f6b63))
## [4.3.10](https://github.com/gaearon/react-hot-loader/compare/v4.3.9...v4.3.10) (2018-09-20)
### Bug Fixes
* IE10/CSP compatibility. [#1073](https://github.com/gaearon/react-hot-loader/pull/1073)
## [4.3.7](https://github.com/gaearon/react-hot-loader/compare/v4.3.6...v4.3.7) (2018-09-13)
### Bug Fixes
* babel 7 compatibility. [#1043](https://github.com/gaearon/react-hot-loader/issues/1043) ([acad937](https://github.com/gaearon/react-hot-loader/commit/acad937))
## [4.3.6](https://github.com/gaearon/react-hot-loader/compare/v4.3.5...v4.3.6) (2018-09-04)
### Bug Fixes
* don't inadvertendly call getters ([322e746](https://github.com/gaearon/react-hot-loader/commit/322e746))
## [4.3.5](https://github.com/gaearon/react-hot-loader/compare/4.3.4...4.3.5) (2018-08-23)
### Bug Fixes
* dont hot-swap registered components, [#1050](https://github.com/gaearon/react-hot-loader/issues/1050) ([cf165a6](https://github.com/gaearon/react-hot-loader/commit/cf165a6))
* use the same conditions for index and patch ([f67d5b9](https://github.com/gaearon/react-hot-loader/commit/f67d5b9))
## [4.3.4](https://github.com/gaearon/react-hot-loader/compare/v4.3.3...v4.3.4) (2018-07-25)
### Bug Fixes
* element could be double-proxied ([#1033](https://github.com/gaearon/react-hot-loader/pull/1033))
* Components, not directly inherited from React.Components, like StyledComponents, are not working ([#1031](https://github.com/gaearon/react-hot-loader/pull/1031))
## [4.3.3](https://github.com/gaearon/react-hot-loader/compare/4.3.1...4.3.3) (2018-06-15)
### Bug Fixes
* add _this to sandbox variables, [#1020](https://github.com/gaearon/react-hot-loader/issues/1020) ([e5284ab](https://github.com/gaearon/react-hot-loader/commit/e5284ab))
## [4.3.2](https://github.com/gaearon/react-hot-loader/compare/4.3.1...4.3.2) (2018-06-13)
### Bug Fixes
* Add cold API to TypeScript definitions
## [4.3.1](https://github.com/gaearon/react-hot-loader/compare/4.3.0...4.3.1) (2018-06-09)
### Bug Fixes
* Preact could pass arguments to the render, fix [#1013](https://github.com/gaearon/react-hot-loader/issues/1013) ([605da10](https://github.com/gaearon/react-hot-loader/commit/605da10))
* Support _this10 and over ([bb47ca4](https://github.com/gaearon/react-hot-loader/commit/bb47ca4))
* Handle lazy indeterminate static properties(Relay) [#1014](https://github.com/gaearon/react-hot-loader/pull/1014)
# [4.3.0](https://github.com/gaearon/react-hot-loader/compare/v4.2.0...v4.3.0) (2018-06-05)
### Bug Fixes
* Context Provider could crash due update, [#944](https://github.com/gaearon/react-hot-loader/issues/944) ([b0e2b5b](https://github.com/gaearon/react-hot-loader/commit/b0e2b5b))
* RHL babel plugin will ignore react and react-hot-loader, fixes [#900](https://github.com/gaearon/react-hot-loader/issues/900) ([e90a25c](https://github.com/gaearon/react-hot-loader/commit/e90a25c))
* RHL should add new class methods ([111d56e](https://github.com/gaearon/react-hot-loader/commit/111d56e))
* Multiple problems with methods update. Revert behavior back to v4.1.2 [#1001](https://github.com/gaearon/react-hot-loader/issues/1001)
### Features
* Preact support [#952](https://github.com/gaearon/react-hot-loader/issues/952) ([2b40f57](https://github.com/gaearon/react-hot-loader/commit/2b40f57))
* Cold components [#991](https://github.com/gaearon/react-hot-loader/issues/991) ([9bcff36](https://github.com/gaearon/react-hot-loader/commit/9bcff36))
## [4.2.0](https://github.com/gaearon/react-hot-loader/compare/v4.1.3...v4.2.0) (2018-05-16)
## Changes
* Stateless Components will be converted to React.Component ones (as they were prior 4.1.0) [#977](https://github.com/gaearon/react-hot-loader/pull/977)
## Features
* Basic support for React 16 Context [#979](https://github.com/gaearon/react-hot-loader/issues/979)
## Bug fixes
* pure components wont update [#959](https://github.com/gaearon/react-hot-loader/issues/959), [#944](https://github.com/gaearon/react-hot-loader/issues/944)
* better babel compliance ("this5"), [#969](https://github.com/gaearon/react-hot-loader/issues/969)
* sideeffect-less updates [#970](https://github.com/gaearon/react-hot-loader/pull/970)
* render as a class property [#924](https://github.com/gaearon/react-hot-loader/issues/924)
* issues around reactLifecyclesCompat.polyfill [#951](https://github.com/gaearon/react-hot-loader/issues/951)
* more examples and test cases
* multiple reconsilation related bug fixes
## [4.1.3](https://github.com/gaearon/react-hot-loader/compare/v4.1.2...v4.1.3) (2018-05-08)
### Bug Fixes
* always update bound functions. [#949](https://github.com/gaearon/react-hot-loader/issues/949) ([7819c71](https://github.com/gaearon/react-hot-loader/commit/7819c71))
* Fragment with a single element. fixes [#956](https://github.com/gaearon/react-hot-loader/issues/956) ([7e80881](https://github.com/gaearon/react-hot-loader/commit/7e80881))
* props merge order. [#967](https://github.com/gaearon/react-hot-loader/issues/967) ([#968](https://github.com/gaearon/react-hot-loader/issues/968)) ([1f8adb9](https://github.com/gaearon/react-hot-loader/commit/1f8adb9))
## [4.1.2](https://github.com/gaearon/react-hot-loader/compare/4.1.0...4.1.2) (2018-04-24)
### Bug Fixes
* condition render in Fragments [#942](https://github.com/gaearon/react-hot-loader/issues/942) ([#943](https://github.com/gaearon/react-hot-loader/issues/943)) ([2549a18](https://github.com/gaearon/react-hot-loader/commit/2549a18))
## [4.1.1](https://github.com/gaearon/react-hot-loader/compare/4.1.0...4.1.1) (2018-04-24)
### Bug Fixes
* Proxy should keep methods own props. [#918](https://github.com/gaearon/react-hot-loader/issues/918) ([a84dcd0](https://github.com/gaearon/react-hot-loader/commit/a84dcd0))
## [4.1.0](https://github.com/gaearon/react-hot-loader/compare/4.0.1...4.1.0) (2018-04-18)
### Features
* 🚀 React 16.3 support ([#918](https://github.com/gaearon/react-hot-loader/issues/918))
* 🧙🏻♂️ StatelessFunctionComponents are not wrapped by Stateful components anymore ([#873](https://github.com/gaearon/react-hot-loader/issues/873))
* 🧠Improved TypeScript support (no more than documentation) ([#884](https://github.com/gaearon/react-hot-loader/issues/884))
### Bug Fixes
* support babel temporal `_this3` ([#928](https://github.com/gaearon/react-hot-loader/issues/928))
## [4.0.1](https://github.com/gaearon/react-hot-loader/compare/v4.0.0...v4.0.1) (2018-04-01)
### Bug Fixes
* fix double proxy registration ([#915](https://github.com/gaearon/react-hot-loader/issues/915)) ([f8532df](https://github.com/gaearon/react-hot-loader/commit/f8532df)), closes [#912](https://github.com/gaearon/react-hot-loader/issues/912)
* replace `.includes` by `.indexOf` (IE11 fix) ([#906](https://github.com/gaearon/react-hot-loader/issues/906)) ([87ad586](https://github.com/gaearon/react-hot-loader/commit/87ad586))
* break render recursion (MobX fix) ([#889](https://github.com/gaearon/react-hot-loader/issues/889)) ([33f2376](https://github.com/gaearon/react-hot-loader/commit/33f2376))
### Docs
* Improve TypeScript documentation ([#914](https://github.com/gaearon/react-hot-loader/issues/914)) ([d3b91de](https://github.com/gaearon/react-hot-loader/commit/d3b91de))
# [4.0.0](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-rc.0...v4.0.0) (2018-02-27)
### Bug Fixes
* proper children reconcile for nested tags, fixes [#869](https://github.com/gaearon/react-hot-loader/issues/869) ([#871](https://github.com/gaearon/react-hot-loader/issues/871)) ([2de4e58](https://github.com/gaearon/react-hot-loader/commit/2de4e58))
# [4.0.0-rc.0](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.23...v4.0.0-rc.0) (2018-02-19)
# [4.0.0-beta.23](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.22...v4.0.0-beta.23) (2018-02-18)
### Bug Fixes
* disable RHL when HMR is not activated ([#863](https://github.com/gaearon/react-hot-loader/issues/863)) ([ffe0035](https://github.com/gaearon/react-hot-loader/commit/ffe0035))
* fix various bugs ([#857](https://github.com/gaearon/react-hot-loader/issues/857)) ([8fa1d42](https://github.com/gaearon/react-hot-loader/commit/8fa1d42)), closes [#845](https://github.com/gaearon/react-hot-loader/issues/845) [#843](https://github.com/gaearon/react-hot-loader/issues/843)
* transfer original prototype methods ([#859](https://github.com/gaearon/react-hot-loader/issues/859)) ([0b7997f](https://github.com/gaearon/react-hot-loader/commit/0b7997f)), closes [#845](https://github.com/gaearon/react-hot-loader/issues/845) [#843](https://github.com/gaearon/react-hot-loader/issues/843) [#858](https://github.com/gaearon/react-hot-loader/issues/858)
# [4.0.0-beta.22](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.21...v4.0.0-beta.22) (2018-02-10)
### Bug Fixes
* fix reconciler warnings ([#852](https://github.com/gaearon/react-hot-loader/issues/852)) ([963677f](https://github.com/gaearon/react-hot-loader/commit/963677f)), closes [#843](https://github.com/gaearon/react-hot-loader/issues/843)
### Features
* ship flat bundles ([#844](https://github.com/gaearon/react-hot-loader/issues/844)) ([7580552](https://github.com/gaearon/react-hot-loader/commit/7580552))
# [4.0.0-beta.21](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.20...v4.0.0-beta.21) (2018-02-05)
### Bug Fixes
* fix proxy adapter ([#842](https://github.com/gaearon/react-hot-loader/issues/842)) ([9bb8251](https://github.com/gaearon/react-hot-loader/commit/9bb8251))
# [4.0.0-beta.20](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.19...v4.0.0-beta.20) (2018-02-04)
# [4.0.0-beta.19](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.18...v4.0.0-beta.19) (2018-02-03)
### Bug Fixes
* **areComponentsEqual:** fix behaviour ([#829](https://github.com/gaearon/react-hot-loader/issues/829)) ([d4dcd07](https://github.com/gaearon/react-hot-loader/commit/d4dcd07))
* **prop-types:** add prop-types as dependency ([#823](https://github.com/gaearon/react-hot-loader/issues/823)) ([c2b7c3c](https://github.com/gaearon/react-hot-loader/commit/c2b7c3c))
* regenerate overriden members ([#837](https://github.com/gaearon/react-hot-loader/issues/837)) ([39d4f5b](https://github.com/gaearon/react-hot-loader/commit/39d4f5b)), closes [#836](https://github.com/gaearon/react-hot-loader/issues/836)
# [4.0.0-beta.18](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.17...v4.0.0-beta.18) (2018-01-25)
### Bug Fixes
* break cyclic dependency ([#822](https://github.com/gaearon/react-hot-loader/issues/822)) ([328d793](https://github.com/gaearon/react-hot-loader/commit/328d793)), closes [#820](https://github.com/gaearon/react-hot-loader/issues/820)
# [4.0.0-beta.17](https://github.com/gaearon/react-hot-loader/compare/4.0.0-beta.16...v4.0.0-beta.17) (2018-01-22)
### Features
* remove useless dependencies ([e1b83e5](https://github.com/gaearon/react-hot-loader/commit/e1b83e5)), closes [#808](https://github.com/gaearon/react-hot-loader/issues/808)
### Bug Fixes
* warn about errors [#814](https://github.com/gaearon/react-hot-loader/issues/814)
* handle wrong module [#813](https://github.com/gaearon/react-hot-loader/issues/#813)
# [4.0.0-beta.16](https://github.com/theKashey/react-hot-loader/compare/v4.0.0-beta.15-1...v4.0.0-beta.16) (2018-01-21)
* **react-hot-loader:** Hard code consts from stand-in [#807](https://github.com/gaearon/react-hot-loader/issues/807))
* **react-hot-loader:** Support React 16 Fragments [#799](https://github.com/gaearon/react-hot-loader/issues/799))
* **react-hot-loader:** Suppress some warnings [#804](https://github.com/gaearon/react-hot-loader/issues/804))
* **react-hot-loader:** Better Electron support [#794](https://github.com/gaearon/react-hot-loader/issues/794))
* **react-stand-in:** Fix IE11 regression (again)
# [4.0.0-beta.15](https://github.com/theKashey/react-hot-loader/compare/v4.0.0-beta.14...v4.0.0-beta.15) (2018-01-16)
* **react-deep-force-update:** remove from the project
* **react-stand-in:** fix MobX (Cannot assign to read only property 'render', [#796](https://github.com/gaearon/react-hot-loader/issues/796))
# [4.0.0-beta.14](https://github.com/theKashey/react-hot-loader/compare/v4.0.0-beta.13...v4.0.0-beta.14) (2018-01-14)
* **react-hot-loader:** support IE11 ([#772](https://github.com/gaearon/react-hot-loader/issues/772))
* **react-stand-in:** support Relay Classis/Modern([#775](https://github.com/gaearon/react-hot-loader/issues/775))
# [4.0.0-beta.13](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.12...v4.0.0-beta.13) (2018-01-09)
### Features
* **react-hot-loader:** detect wrong usage of `hot` ([#766](https://github.com/gaearon/react-hot-loader/issues/766)) ([b9738c7](https://github.com/gaearon/react-hot-loader/commit/b9738c7)), closes [#765](https://github.com/gaearon/react-hot-loader/issues/765)
# [4.0.0-beta.12](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.11...v4.0.0-beta.12) (2018-01-02)
### Bug Fixes
* target ES5 for production code ([b1d6d05](https://github.com/gaearon/react-hot-loader/commit/b1d6d05)), closes [#758](https://github.com/gaearon/react-hot-loader/issues/758)
# [4.0.0-beta.11](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.10...v4.0.0-beta.11) (2017-12-30)
### Bug Fixes
* **build:** fix builded files ([f4aa275](https://github.com/gaearon/react-hot-loader/commit/f4aa275))
# [4.0.0-beta.10](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.9...v4.0.0-beta.10) (2017-12-30)
### Bug Fixes
* **babel:** do not use capital letters ([#754](https://github.com/gaearon/react-hot-loader/issues/754)) ([bf48675](https://github.com/gaearon/react-hot-loader/commit/bf48675)), closes [#753](https://github.com/gaearon/react-hot-loader/issues/753)
# [4.0.0-beta.9](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.8...v4.0.0-beta.9) (2017-12-30)
### Bug Fixes
* **react-hot-loader:** require `react-hot-loader/patch` in each file ([3038538](https://github.com/gaearon/react-hot-loader/commit/3038538)), closes [#750](https://github.com/gaearon/react-hot-loader/issues/750)
# [4.0.0-beta.8](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.7...v4.0.0-beta.8) (2017-12-29)
### Bug Fixes
* **react-hot-loader:** fix missing export ([239ca5d](https://github.com/gaearon/react-hot-loader/commit/239ca5d))
# [4.0.0-beta.7](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.6...v4.0.0-beta.7) (2017-12-29)
### Bug Fixes
* handle async loading of patch ([#739](https://github.com/gaearon/react-hot-loader/issues/739)) ([af8bd4b](https://github.com/gaearon/react-hot-loader/commit/af8bd4b))
* **react-hot-loader:** fix componentWillUpdate ([95a9e79](https://github.com/gaearon/react-hot-loader/commit/95a9e79))
* use safe defineProperty ([f901192](https://github.com/gaearon/react-hot-loader/commit/f901192))
### Features
* replace warnings by `configure({ debug: true })` ([4f079c6](https://github.com/gaearon/react-hot-loader/commit/4f079c6))
# [4.0.0-beta.6](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.5...v4.0.0-beta.6) (2017-12-27)
Same as 4.0.0-beta.5, fix build problem.
# [4.0.0-beta.5](https://github.com/gaearon/react-hot-loader/compare/v4.0.0-beta.4...v4.0.0-beta.5) (2017-12-27)
### Bug Fixes
* improve decorators support (autobind)
([56883c9](https://github.com/gaearon/react-hot-loader/commit/56883c9))
* support nested children
([#735](https://github.com/gaearon/react-hot-loader/issues/735))
([5c81655](https://github.com/gaearon/react-hot-loader/commit/5c81655))
# Manual changelog
### 4.0.0-beta.4
* Handle terminal node in stack (#728)
### 4.0.0-beta.3
* Use setTimeout to tick (#726)
### 4.0.0-beta.2
* Bunch of fixes (#725)
### 4.0.0-beta.1
* Remove webpack plugin (#707)
* Replace react-proxy by react-stand-in (#707)
* Replace react-deep-force-update by reconciler (#703)
* Add `hot` HOC (#707)
* Add `areComponentsEqual` (#304)
* `warnings` flag now controls reconciler, not dev patch.
### 3.1.1
* Revert fix arrow function that uses props in constructor (#670)
* Remove babel-template dependency (#671)
### 3.1.0
* Add an option to disable warnings (#669)
* Fix arrow function that uses props in constructor (#670)
### 3.0.0
* Add React 16 support (#629, #658)
* Remove RedBox as default error catcher (#494)
### 3.0.0-beta.6
* Use production versions of `patch` and `AppContainer` if no `module.hot`
available, so it doesn't break people using `NODE_ENV=test`. (#398)
* Opt out of transforming static class properties. (#381)
### 3.0.0-beta.5
* Makes the class properties portion of the Babel plugin work with async
functions. (#372)
* Change the output of the tagger code in the Babel plugin so that it doesn't
break the output of `babel-node`. (#374)
### 3.0.0-beta.4
* Extends the Babel plugin to enable hot reloading of class properties. (#322)
* Fixes a bug in the Webpack loader from a component importing a module with the
same basename. (#347)
### 3.0.0-beta.3
* Fixes broken import of RedBox, which led to confusing stack traces when
applications threw errors. (#314)
* Add `module.hot` checks to conditional `require()`s to remove unnecessary
warnings when using server rendering. (#302)
### 3.0.0-beta.2
* Patch `React.createFactory` (#287)
* Fix props typo (#285)
### 3.0.0-beta.1
* Adds complete React Router support. Async routes should work fine now. (#272)
* Fixes a nasty bug which caused unwrapped component to render. (#266, #272)
* Fixes an issue that caused components with `shouldComponentUpdate`
optimizations not getting redrawn (#269,
2a1e384d54e1919117f70f75dd20ad2490b1d9f5)
* Internal: a rewrite and much better test coverage.
### 3.0.0-beta.0
* Fixes an issue when used in Webpack 2
(https://github.com/gaearon/react-hot-loader/issues/263)
* **Breaking change:** instead of
```js
;
```
````
you now need to write
```js
````
(#250)
**See
[this commit](https://github.com/gaearon/react-hot-boilerplate/commit/b52c727937a499f3efdc5dceb74ae952aa318c3a)
as an update reference!**
### 3.0.0-alpha
Big changes both to internals and usage. No docs yet but you can look at
https://github.com/gaearon/react-hot-boilerplate/pull/61 for an example.
### 2.0.0-alpha
**Experimental release that isn't really representative on what will go in 2.0,
but uses the new engine.**
Some ideas of what should be possible with the new engine:
* There is no requirement to pass `getRootInstances()` anymore, so React Hot
Loader doesn't need `react/lib/ReactMount` or walk the tree, which was
somewhat fragile and changing between versions
* Static methods and properties are now hot-reloaded
* Instance getters and setters are now hot reloaded
* Static getters and setters are now hot reloaded
* Deleted instance methods are now deleted during hot reloading
* Single method form of
[autobind-decorator](https://github.com/andreypopp/autobind-decorator) is now
supported
What might get broken:
* We no longer overwrite or even touch the original class. Every time makeHot is
invoked, it will return a special proxy class. This means a caveat: for
example, static methods will only be hot-reloaded if you refer to them as
`this.constructor.doSomething()` instead of `FooBar.doSomething()`. This is
because React Hot Loader calls `makeHot` right before exporting, so `FooBar`
still refers to the original class. Similarly, `this.constructor === App` will
be `false` inside `App` unless you call `App = makeHot(App)` manually, which
you can't do with React Hot Loader. **I'm not sure how much of a problem this
will be, so let me know if it pains you.** In the longer term, we will
deprecate React Hot Loader in favor of a Babel plugin which will be able to
rewrite class definitions correctly, so it shouldn't be a problem for a long
time. If there is demand, we can introduce a mode that rewrites passed
classes, too.
### 1.3.1
* Fix import for ReactMount to support 15.4.0
(**[#430](https://github.com/gaearon/react-hot-loader/pull/430)**)
### 1.3.0
* Recover from module errors on module level
(**[#187](https://github.com/gaearon/react-hot-loader/pull/187)**)
### 1.2.9
* Silently ignore exports that raise an error when accessed (#114)
* Update `source-map` dependency
### 1.2.8
* Remove React from peerDependencies
* Update React Hot API to support React 0.14 beta 1
### 1.2.7
* Preserve CommonJS `exports` context in the wrapping closure
(**[#124](https://github.com/gaearon/react-hot-loader/issues/124)**)
### 1.2.6
* Fix autobinding on newly added methods for `createClass`-style classes
### 1.2.5
* Fix “React is not defined” error
### 1.2.4
* Avoid updating each class twice in React 0.12
### 1.2.3
* Explicitly exclude `react/lib` files from processing. You **should** use
`exclude: /node_modules/` in configuration, but at least this doesn't blow up
for those who don't.
### 1.2.2
* Fix crash on React 0.13. Now compatible!
### 1.2.1
* Don't try to flatten inheritance chains, as it causes problems with `super`
* Instead, automatically opt custom base classes into hot reloading as long as
they descend from `React.Component` (in React 0.13). If your custom base class
doesn't do that but you'd still want to have hot reloading, you need to
manually opt it in via `module.makeHot` API.
### 1.2.0
* Support hot-reloading components without a base class
(**[react-hot-api#5](https://github.com/gaearon/react-hot-api/issues/5)**)
* Support hot-reloading inheritance chains
(**[react-hot-api#10](https://github.com/gaearon/react-hot-api/issues/10)**)
* Support using React 0.13 as an external
### 1.1.7
* Add React 0.13 RC2 to peerDeps
### 1.1.6
* Allow React 0.13 RC1
* Better support for ES6 inheritance
* Fix reloading for modules with null prototype chain (**#82**)
### 1.1.5
* Wrap user code in IEFF to prevent losing `"use strict"`. Fixes #75
### 1.1.4
* Fix crash when hot-reloading element factory. (Note: React discourages
exporting factories.)
### 1.1.3
* Avoid warnings on React 0.13
### 1.1.2
* Compatibility with React 0.13.0-beta.1
### 1.1.1
* Fix edge cases by requiring `react/lib/ReactMount` in transformed source files
* Add a warning if `ReactMount` doesn't return anything useful (e.g. when using
external React)
### 1.1.0
* Skipping `node_modules` entirely
[wasn't](https://github.com/gaearon/react-hot-loader/issues/58)
[the best idea](https://github.com/gaearon/react-hot-loader/issues/55).
Instead, we now specifically skip `node_modules/react/`,
`node_modules/webpack/` and `node_modules/react-hot-loader/`. However you are
still **encouraged** to
[add `exclude: /node_modules/` to your loader config](https://github.com/gaearon/react-hot-boilerplate/blob/master/webpack.config.js#L24)
for best performance.
* Now modules that don't export any valid React classes in `module.exports` or
any its properties will not be auto-accepted. This prevents hot loader from
trying to handle non-React updates and allows changes in plain JS files to
propagate to components that can handle them. For example, this allows
[react-jss](https://github.com/jsstyles/react-jss) mixin to apply hot updates
to JSS styles.
### 1.0.7
* Skip `node_modules` entirely. Fixes
[#54](https://github.com/gaearon/react-hot-loader/issues/54) on Windows.
### 1.0.6
* Add `require('react-hot-loader/Injection')` to override Hot Loader behavior.
Now you can supply your own way of getting root component instances, so Hot
Loader can also work in environment where `require('react/lib/ReactMount')` is
not available (for example,
[when React is used as standalone bundle and not NPM package](https://github.com/gaearon/react-hot-loader/issues/53)).
### 1.0.5
* Fix stack overflow when hotifying same class twice
([#52](https://github.com/gaearon/react-hot-loader/issues/52))
### 1.0.4
* Allow both `module.exports` and its properties be components (Fixes
[#50](https://github.com/gaearon/react-hot-loader/issues/50))
### 1.0.3
* In addition to hotifying `module.exports` by default, also hotify all its own
properties
### 1.0.2
* Don't try to hot-replace `module.export`ed `ReactElement`s
### 1.0.1
* Delay `require`ing `ReactMount` to avoid circular dependencies
* Don't process React or Webpack internals to avoid potential issues
### 1.0.0
* Don't rely on `createClass` regex or any other regex
* Only `module.exports` is hot by default
* Supports ES6 classes when they land in React 0.13
* Supports dynamically created classes
* Manual mode
See
[what changed and how to migrate to 1.0](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#migrating-to-10).
### 0.5.0
* Adds source map support, contributed by
[Jake Riesterer](https://github.com/jRiest)
### 0.4.5
* Collapse all hot loader code in one line so it doesn't obscure beginning of
file.
### 0.4.4
* Errors occuring in module definition (such as `ReferenceError`) should not
disable further reloading (fixes
**[#29](https://github.com/gaearon/react-hot-loader/issues/29)**)
### 0.4.3
* Support lowercase `react` reference name and usage with ES6 classes
(`createClass(MyComponent.prototype)`) via
**[#27](https://github.com/gaearon/react-hot-loader/issues/27)**
### 0.4.2
* Catch errors in modules and log them instead of reloading (fixes
**[#21](https://github.com/gaearon/react-hot-loader/issues/21)**)
### 0.4.1
* Use more precise
[`React.createClass` regex](https://github.com/gaearon/react-hot-loader/commit/f71c6785131adcc85b91789da0d0a0b9f1a9713f)
to avoid matching own code when hot loader is applied to all JS files.
### 0.4.0
* Ignore files that contain no `createClass` calls (fixes
**[#17](https://github.com/gaearon/react-hot-loader/issues/17)**)
* Remove the need for pitch loader (fixes
**[#19](https://github.com/gaearon/react-hot-loader/issues/19)**)
* Improve performance by only using one loader instead of two
* Now that performance is acceptable, remove desktop notifications and `notify`
option
* It is now recommended that you use `devtool: 'eval'` because it's much faster
and has no downsides anymore
### 0.3.1
* Avoid warnings on old browsers with missing `Notification` API
* Errors don't cause page reload anymore
### 0.3.0
* Use React 0.11
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Code of Conduct
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to `react-hot-loader`
As the creators and maintainers of this project, we want to ensure that
`react-hot-loader` lives and continues to grow and evolve. The evolution of the
library should never be blocked by any single person's time. One of the simplest
ways of doing this is by encouraging a larger set of shallow contributors.
Through this, we hope to mitigate the problems of a project that needs updates
but there's no-one who has the power to do so.
## Code contributions
Here is a quick guide to doing code contributions to the library.
1. Find some issue you're interested in, or a feature that you'd like to tackle.
Also make sure that no one else is already working on it. We don't want you
to be disappointed.
2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/react-hot-loader.git`
3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
4. Make your changes and commit: `git add` and `git commit`
5. Make sure that the tests still pass: `yarn test:es2015 --watch` and `yarn test:modern --watch`
6. Push your branch: `git push -u origin your-branch-name`
7. Submit a pull request to the upstream react-hot-loader repository.
8. Choose a descriptive title and describe your changes briefly.
9. Wait for a maintainer to review your PR, make changes if it's being
recommended, and get it merged.
10. Perform a celebratory dance! :dancer:
### How do I set up the project?
1. First make sure you have [yarn](https://yarnpkg.com/) installed.
2. Run `yarn` and let `yarn dev` running in background, you are ready!
3. You can also run `yarn test:watch` to run tests in watch mode.
### How do I check if it really works?
There is a lot of examples in the project, they are all under `examples/`
folder. Choose an example to test and follow these steps:
1. Run `yarn`
2. Run `yarn install file:../packages/react-hot-loader`
3. Test it!
## Credits
Heavily inspired from
[styled-components contributing guidelines](https://github.com/styled-components/styled-components/blob/master/CONTRIBUTING.md).
================================================
FILE: ISSUE_TEMPLATE.md
================================================
If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.
### Description
What you are reporting:
### Expected behavior
What you think should happen:
### Actual behavior
What actually happens:
### Environment
React Hot Loader version:
Run these commands in the project folder and fill in their results:
1. `node -v`:
2. `npm -v`:
Then, specify:
1. Operating system:
2. Browser and version:
### Reproducible Demo
Please take the time to create a new project that reproduces the issue.
You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.
Push to GitHub and paste the link here.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2016 Dan Abramov
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: PATRONS.md
================================================
# Patrons
The work on React Hot Loader, [React Transform](https://github.com/gaearon/babel-plugin-react-transform), [Redux](https://github.com/rackt/redux), and related projects was [funded by the community](https://www.patreon.com/reactdx).
Meet some of the outstanding companies and individuals that made it possible:
* [Webflow](https://github.com/webflow)
* [Ximedes](https://www.ximedes.com/)
* [Herman J. Radtke III](http://hermanradtke.com)
* [Ken Wheeler](http://kenwheeler.github.io/)
* [Chung Yen Li](https://www.facebook.com/prototocal.lee)
* [Sunil Pai](https://twitter.com/threepointone)
* [Charlie Cheever](https://twitter.com/ccheever)
* [Eugene G](https://twitter.com/e1g)
* [Matt Apperson](https://twitter.com/mattapperson)
* [Jed Watson](https://twitter.com/jedwatson)
* [Sasha Aickin](https://twitter.com/xander76)
* [Stefan Tennigkeit](https://twitter.com/whobubble)
* [Sam Vincent](https://twitter.com/samvincent)
* Olegzandr Denman
================================================
FILE: README.md
================================================
# React Hot Loader
[![Build Status][build-badge]][build] [![version][version-badge]][package]
[![Code Coverage][coverage-badge]][coverage]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat]
[![Backers on Open Collective][oc-backer-badge]](#backers)
[![Sponsors on Open Collective][oc-sponsor-badge]](#sponsors)
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
Tweak React components in real time ⚛️⚡️
Watch
**[Dan Abramov's talk on Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs).**
# Moving towards next step
React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It's time to make a next step.
**React-Hot-Loader is expected to be replaced by [React Fast Refresh](https://github.com/facebook/react/issues/16604)**. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.
* `React Native` - [supports Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh) since 0.61.
* `parcel 2` - [supports Fast Refresh](https://github.com/facebook/react/issues/16604#issuecomment-556082893) since alpha 3.
* `webpack` - [supports Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin/) using a plugin.
* `other bundler` - no support yet, use React-Hot-Loader
* `create-react-app` - [supports Fast Refresh](https://create-react-app.dev/docs/advanced-configuration/) with FAST_REFRESH env since 4.
* `next.js` - [supports Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh) since 9.4
## Install
```
npm install react-hot-loader
```
> Note: You can safely install react-hot-loader as a regular dependency instead
> of a dev dependency as it automatically ensures it is not executed in
> production and the footprint is minimal.
## Getting started
1. Add `react-hot-loader/babel` to your `.babelrc`:
```js
// .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
```
2. Mark your root component as _hot-exported_:
```js
// App.js
import { hot } from 'react-hot-loader/root';
const App = () =>
Hello World!
;
export default hot(App);
```
3. Make sure `react-hot-loader` is required before `react` and `react-dom`:
* or `import 'react-hot-loader'` in your main file (before React)
* or prepend your webpack entry point with `react-hot-loader/patch`, for example:
```js
// webpack.config.js
module.exports = {
entry: ['react-hot-loader/patch', './src'],
// ...
};
```
4. If you need hooks support, use [`@hot-loader/react-dom`](#hot-loaderreact-dom)
### Hook support
Hooks would be auto updated on HMR if they _should_ be.
There is only one condition for it - a non zero dependencies list.
```js
❄️ useState(initialState); // will never updated (preserve state)
❄️ useEffect(effect); // no need to update, updated on every render
❄️ useEffect(effect, []); // "on mount" hook. "Not changing the past"
🔥 useEffect(effect, [anyDep]); // would be updated
🔥 useEffect(effect, ["hot"]); // the simplest way to make hook reloadable
```
**Plus**
* any hook would be reloaded on a function body change. Enabled by default, controlled by `reloadHooksOnBodyChange` option.
* you may configure RHL to reload any hook by setting `reloadLifeCycleHooks` option to true.
**To disable hooks reloading** - set configuration option:
```js
import { setConfig } from 'react-hot-loader';
setConfig({
reloadHooks: false,
});
```
With this option set **all** `useEffects`, `useCallbacks` and `useMemo` would be updated on Hot Module Replacement.
### Hooks reset
Hooks would be reset if their order changes. Adding, removing or moving around would
cause a local tree remount.
**Babel plugin is required** for this operation. Without it changing hook order would throw an error
which would be propagated till the nearest class-based component.
## `@hot-loader/react-dom`
[`@hot-loader/react-dom`](https://github.com/hot-loader/react-dom) replaces the "react-dom" package of the same version, but with additional patches to support hot reloading.
There are 2 ways to install it:
* Use **yarn** name resolution, so `@hot-loader/react-dom` would be installed instead of `react-dom`
```
yarn add react-dom@npm:@hot-loader/react-dom
```
* Use [webpack aliases](https://webpack.js.org/configuration/resolve/#resolvealias)
```
yarn add @hot-loader/react-dom
```
```js
// webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
};
```
### Old API
**Note:** There is also an old version of `hot`, used prior to version 4.5.4. **Please use the new one**,
as it is much more resilient to js errors that you may make during development.
Meanwhile, not all the bundlers are compatible with new `/root` API, for example **[parcel](http://parceljs.org/) is not**.
React-Hot-Load will throw an error, asking you to use the old API, if such incompatibility would be detected.
It is almost the same, but you have to pass `module` inside `hot`.
```js
import { hot } from 'react-hot-loader';
const App = () =>
Hello World!
;
export default hot(module)(App);
```
3. [Run webpack with Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr):
```sh
webpack-dev-server --hot
```
## What about production?
The webpack patch, `hot`, Babel plugin, `@hot-loader/react-dom` etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.
Just ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:
```
NODE_ENV=production webpack --mode production
```
`NODE_ENV=production` is needed for the Babel plugin, while `--mode production` uses [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) to set `process.env.NODE_ENV` inside the compiled code itself, which is used by `hot` and `@hot-loader/react-dom`.
Make sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.
## Limitations
* (that's the goal) React-Hot-Loader would not change the past, only update the present - no lifecycle event would be called on component update. As a result, any code changes made to `componentWillUnmount` or `componentDidMount` would be ignored for already created components.
* (that's the goal) React-Hot-Loader would not update any object, including component `state`.
* (1%) React-Hot-Loader may not apply some changes made to a component's `constructor`. Unless an existing component is recreated, RHL would typically _inject_ new data into that component, but there is no way to detect the actual change or the way it was applied, especially if the change was made to a function. This is because of the way React-Hot-Loader works - it knows what class functions are, not how they were created. See [#1001](https://github.com/gaearon/react-hot-loader/issues/1001) for details.
## Recipes
### Migrating from [create-react-app](https://github.com/facebookincubator/create-react-app)
1. Run `npm run eject`
2. Install React Hot Loader (`npm install --save-dev react-hot-loader`)
3. In `config/webpack.config.dev.js`, add `'react-hot-loader/babel'` to Babel
loader configuration. The loader should now look like:
```js
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: ['react-hot-loader/babel'],
},
}
```
4. Mark your App (`src/App.js`) as _hot-exported_:
```js
// ./containers/App.js
import React from 'react';
import { hot } from 'react-hot-loader';
const App = () =>
Hello World!
;
export default hot(module)(App);
```
### Migrating from [create-react-app](https://github.com/facebookincubator/create-react-app) without ejecting
Users [report](https://github.com/gaearon/react-hot-loader/pull/729#issuecomment-354097936), that it is possible to use [react-app-rewire-hot-loader](https://github.com/cdharris/react-app-rewire-hot-loader) to setup React-hot-loader without ejecting.
### TypeScript
As of version 4, React Hot Loader requires you to pass your code through [Babel](http://babeljs.io/) to transform it so that it can be hot-reloaded. This can be a pain point for TypeScript users, who usually do not need to integrate Babel as part of their build process.
Fortunately, it's simpler than it may seem! Babel will happily parse TypeScript syntax and can act as an alternative to the TypeScript compiler, so you can safely replace `ts-loader` or `awesome-typescript-loader` in your Webpack configuration with `babel-loader`. Babel won't typecheck your code, but you can use [`fork-ts-checker-webpack-plugin`](https://github.com/Realytics/fork-ts-checker-webpack-plugin) (and/or invoke `tsc --noEmit`) as part of your build process instead.
A sample configuration:
```js
{
// ...you'll probably need to configure the usual Webpack fields like "mode" and "entry", too.
resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] },
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
babelrc: false,
presets: [
[
"@babel/preset-env",
{ targets: { browsers: "last 2 versions" } } // or whatever your project requires
],
"@babel/preset-typescript",
"@babel/preset-react"
],
plugins: [
// plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin()
]
};
```
For a full example configuration of TypeScript with React Hot Loader and newest beta version of Babel, check [here](https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript).
As an alternative to this approach, it's possible to chain Webpack loaders so that your code passes through Babel and then TypeScript (or TypeScript and then Babel), but this approach is not recommended as it is more complex and may be significantly less performant. Read more [discussion here](https://github.com/gaearon/react-hot-loader/issues/884).
### Parcel
Parcel supports Hot Module Reloading out of the box, just follow step 1 and 2 of [Getting Started](https://github.com/gaearon/react-hot-loader/tree/master#getting-started).
We also have a [full example running Parcel + React Hot Loader](https://github.com/gaearon/react-hot-loader/tree/master/examples/parcel).
### Electron
You need something to mark your modules as hot in order to use React Hot Loader.
One way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also [this example Electron app](https://github.com/s-h-a-d-o-w/rhl-electron-quick-start).
A webpack-less way of doing it to use `electron-compile` (which is also used by [`electron-forge`](https://electronforge.io)) - see [this example](https://github.com/rllola/hmr-example-issue-2). While it requires less configuration, something to keep in mind is that `electron-compile`'s HMR will always reload all modules, regardless of what was actually edited.
### Source Maps
If you use `devtool: 'source-map'` (or its equivalent), source maps will be
emitted to hide hot reloading code.
Source maps slow down your project. Use `devtool: 'eval'` for best build
performance.
Hot reloading code is just one line in the beginning and one line at the end of
each module so you might not need source maps at all.
### Linking
If you are using `npm link` or `yarn link` for development purposes, there is a chance you will get error `Module not found: Error: Cannot resolve module 'react-hot-loader'` or the linked package is not hot reloaded.
There are 2 ways to fix `Module not found`:
* Use [`include` in loader configuration](https://github.com/gaearon/react-hot-boilerplate/blob/master/webpack.config.js#L22) to only opt-in your app's files to processing.
* Alternatively if you are using webpack, override the module resolution in your config:
```js
{
resolve: {
alias: {
'react-hot-loader': path.resolve(path.join(__dirname, './node_modules/react-hot-loader')),
}
}
}
```
And to make your linked package to be hot reloaded, it will need to use the patched version of `react` and `react-dom`, if you're using webpack, add this options to the alias config
```js
{
resolve: {
alias: {
'react-hot-loader': path.resolve(path.join(__dirname, './node_modules/react-hot-loader')),
// add these 2 lines below so linked package will reference the patched version of `react` and `react-dom`
'react': path.resolve(path.join(__dirname, './node_modules/react')),
'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom')),
// or point react-dom above to './node_modules/@hot-loader/react-dom' if you are using it
}
}
}
```
## Preact
React-hot-loader should work out of the box with `preact-compat`, but, in case of pure preact, you will need
to configure it:
* create configuration file (setupHotLoader.js)
```js
import reactHotLoader from 'react-hot-loader';
import preact from 'preact';
reactHotLoader.preact(preact);
```
* dont forget to import it
#### Preact limitations
* HOCs and Decorators as not supported yet. For Preact React-Hot-Loader v4 behave as v3.
## React Native
React Native
**[supports hot reloading natively](https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html)**
as of version 0.22.
Using React Hot Loader with React Native can cause unexpected issues (see #824) and is not recommended.
## Webpack plugin
We recommend using the `babel` plugin, but there are some situations where you are unable to. If so, try the `webpack` plugin / `webpack-loader` (as seen in v3).
Remember - the `webpack` plugin is **not compatible** with class-based components. The `babel` plugin
will inject special methods to every class, to make `class members` (like onClick) hot-updatable, while the `webpack` plugin would leave classes as is, without any _instrumentation_.
```js
class MyComponent extends React.Component {
onClick = () => this.setState(); // COULD NOT UPDATE
variable = 1; // this is ok
render() {} // this is ok
}
```
But `webpack-loader` could help with TypeScript or _spreading_ "cold API" [to all node_modules](https://github.com/gaearon/react-hot-loader#disabling-a-type-change-for-all-node_modules).
> It is possible to enable this loader for all the files, but if you use `babel` plugin, you need to enable this loader for `react-dom` only. Place it after babel-loader, if babel-loader is present.
```js
// webpack.config.js
module.exports = {
module: {
rules: [
// would only land a "hot-patch" to react-dom
{
test: /\.js$/,
include: /node_modules\/react-dom/,
use: ['react-hot-loader/webpack'],
},
],
},
};
```
Webpack plugin will also land a "hot" patch to react-dom, making React-Hot-Loader more compliant to [the principles](https://github.com/gaearon/react-hot-loader/issues/1118).
If you are not using `babel` plugin you might need to apply `webpack-loader` to all the files.
```js
{
test: /\.jsx?$/,
include: /node_modules/,
use: ['react-hot-loader/webpack']
},
```
### Code Splitting
If you want to use Code Splitting + React Hot Loader, the simplest solution is to pick a library compatible with this one:
* [React Lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)
* [Imported Component](https://github.com/theKashey/react-imported-component)
* [React Universal Component](https://github.com/faceyspacey/react-universal-component)
* [React-Loadable](https://github.com/jamiebuilds/react-loadable)
If you use a not-yet-friendly library, like [react-async-component](https://github.com/ctrlplusb/react-async-component),
or are having problems with hot reloading failing to reload code-split components,
you can manually mark the components below the code-split boundaries.
```js
// AsyncHello.js
import { asyncComponent } from 'react-async-component';
// asyncComponent could not `hot-reload` itself.
const AsyncHello = asyncComponent({
resolve: () => import('./Hello'),
});
export default AsyncHello;
```
Note that `Hello` is the component at the root of this particular
code-split chunk.
```js
// Hello.js
import { hot } from 'react-hot-loader/root';
const Hello = () => 'Hello';
export default hot(Hello); // <-- module will reload itself
```
Wrapping this root component with `hot()` will ensure that it is hot reloaded correctly.
### Out-of-bound warning
You may see the following warning when code-split components are updated:
```console
React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.
```
This is because the hot reloading of code-split components happens asynchronously. If you had an `App.js` that implemented
the `AsyncHello` component above and you modified `AsyncHello`, it would be bundled and reloaded at the same time as
`App.js`. However, the core hot reloading logic is synchronous, meaning that it's possible for the hot reload to run before
the updates to the split component have landed.
In this case, RHL uses a special _tail update detection_ logic, where it notes that an an update to a split component
has happened after the core hot reloading logic has already finished, and it triggers another update cycle to ensure
that all changes are applied.
The warning is informational - it is a notice that this tail update logic is triggered, and does not indicate a problem
in the configuration or useage of `react-hot-loader`.
If the tail update detection is not something you want or need, you can disable this behavior by setting
`setConfig({ trackTailUpdates:false })`.
### Checking Element `type`s
Because React Hot Loader creates proxied versions of your components, comparing
reference types of elements won't work:
```js
const element = ;
console.log(element.type === Component); // false
```
React Hot Loader exposes a function `areComponentsEqual` to make it possible:
```js
import { areComponentsEqual } from 'react-hot-loader';
const element = ;
areComponentsEqual(element.type, Component); // true
```
Another way - compare "rendered" element type
```js
const element = ;
console.log(element.type === .type); // true
// better - precache rendered type
const element = ;
const ComponentType = .type;
console.log(element.type === ComponentType); // true
```
But you might have to provide all required props. See [original issue](https://github.com/gaearon/react-hot-loader/issues/304).
This is most reliable way to compare components, but it will not work with required props.
Another way - compare Component name.
> Not all components have a name. **In production displayName could not exists.**
```js
const element = ;
console.log(element.displayName === 'Component'); // true
```
This is something we did not solve yet. Cold API could help keep original types.
### Webpack ExtractTextPlugin
webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development:
```js
new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css',
disable: NODE_ENV !== 'production',
});
```
#### Disabling a type change (❄️)
It is possible to disable React-Hot-Loader for a specific component, especially to
enable common way to type comparison.
See #991 for the idea behind ⛄️, and #304 about "type comparison" problem.
```js
import { cold } from 'react-hot-loader';
cold(SomeComponent) // this component will ignored by React-Hot-Loader
.type === SomeComponent // true
```
If you will update `cold` component React-Hot-Loader will complain (on error level), and then
React will cold-replace Component with a internal state lose.
> Reach-Hot-Loader: cold element got updated
##### Disabling a type change for all node_modules
You may _cold_ all components from node_modules. This will not work for HOC(like Redux) or dynamically created Components, but might help in most of situations, when type changes
are not welcomed, and modules are not expected to change.
```js
import { setConfig, cold } from 'react-hot-loader';
setConfig({
onComponentRegister: (type, name, file) => file.indexOf('node_modules') > 0 && cold(type),
// some components are not visible as top level variables,
// thus its not known where they were created
onComponentCreate: (type, name) => name.indexOf('styled') > 0 && cold(type),
});
```
! To be able to "cold" components from 'node_modules' you have to apply babel to node_modules, while this
folder is usually excluded.
You may add one more babel-loader, with only one React-Hot-Loader plugin inside to solve this.
**Consider using webpack-loader** for this.
##### React-Hooks
React hooks are not _really_ supported by React-Hot-Loader. Mostly due to our internal
processes of re-rendering React Tree, which is required to reconcile an updated application
before React will try to rerender it, and fail to do that, obviously.
* hooks **should work** for versions 4.6.0 and above (`pureSFC` is enabled by default).
* hooks will produce **errors** on every hot-update without patches to `react-dom`.
* hooks **may loss the state** without patches to `react-dom`.
* hooks does not support adding new hooks on the fly
* change in hooks for a mounted components will cause a runtime exception, and a `retry` button (at the nearest class component) will be shown.
Pressing a `retry` button will basically remount tree branch.
To mitigate any hook-related issues (and disable their hot-reloadability) - `cold` them.
* _cold_ components using hooks.
```js
import { setConfig, cold } from 'react-hot-loader';
setConfig({
onComponentCreate: (type, name) =>
(String(type).indexOf('useState') > 0 || String(type).indexOf('useEffect') > 0) && cold(type),
});
```
## API
### `hot(Component, options)`
Mark a component as hot.
#### Babel plugin
Right now babel plugin has only one option, enabled by default.
* `safetyNet` - will help you properly setup ReactHotLoader.
You may disable it to get more control on the module execution order.
```js
//.babelrc
{
"plugins": [
[
"react-hot-loader/babel",
{
"safetyNet": false
}
]
]
}
```
#### Important
**!!** Use `hot` only for module `exports`, not for module `imports`. **!!**
```js
import { hot } from 'react-hot-loader/root';
const App = () => 'Hello World!';
export default hot(App);
```
Keep in mind - by importing `react-hot-loader/root` you are setting up a boundary for update event propagation.
The higher(in module hierarchy) you have it - the more stuff would be updated on Hot Module Replacement.
To make RHL more reliable and safe, please place `hot` _below_ (ie somewhere in _imported_ modules):
* react-dom
* redux store creation
* any data, you want to preserve between updates
* big libraries
You may(but it's not required) place `hot` to the every route/page/feature/lazy chunk, thus make updates more scoped.
You don't need to wrap every component with `hot`, application works fine with a single one.
### (old)`hot(module, options)(Component, options)`
Mark a component as hot. The "new" hot is just hidding the first part - `hot(module)`, giving you
only the second `(App)`. The "new" hot is using old API.
```js
import { hot } from 'react-hot-loader';
const App = () => 'Hello World!';
export default hot(module)(App);
```
### `AppContainer`
Mark application as hot reloadable. (**Prefer** using `hot` helper, see below for migration details).
This low-level approach lets you make **hot **imports\_\_, not exports.
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
const render = Component => {
ReactDOM.render(
,
document.getElementById('root'),
);
};
render(App);
// webpack Hot Module Replacement API
if (module.hot) {
// keep in mind - here you are configuring HMR to accept CHILDREN MODULE
// while `hot` would configure HMR for the CURRENT module
module.hot.accept('./containers/App', () => {
// if you are using harmony modules ({modules:false})
render(App);
// in all other cases - re-require App manually
render(require('./containers/App'));
});
}
```
### areComponentsEqual(Component1, Component2)
Test if two components have the same type.
```js
import { areComponentsEqual } from 'react-hot-loader';
import Component1 from './Component1';
import Component2 from './Component2';
areComponentsEqual(Component1, Component2); // true or false
```
### setConfig(config)
Set a new configuration for React Hot Loader.
Available options are:
* `logLevel`: specify log level, default to `"error"`, available values are: `['debug', 'log', 'warn', 'error']`
* `pureSFC`: enable Stateless Functional Component. If disabled they will be converted to React Components.
Default value: false.
* `ignoreSFC`: skip "patch" for SFC. "Hot loading" could still work, with webpack-patch present
* `pureRender`: do not amend `render` method of any component.
* for the rest see [index.d.ts](https://github.com/gaearon/react-hot-loader/blob/master/index.d.ts#L62-L133).
```js
// rhlConfig.js
import { setConfig } from 'react-hot-loader';
setConfig({ logLevel: 'debug' });
```
**It is important** to set configuration before any other action will take a place
```js
// index.js
import './rhlConfig' // <-- extract configuration to a separate file, and import it in the beggining
import React from 'react'
....
```
## Migrating from v3
### AppContainer vs hot
Prior v4 the right way to setup React Hot Loader was to wrap your Application
with `AppContainer`, set setup module acceptance by yourself. This approach is
still valid but only for advanced use cases, prefer using `hot` helper.
**React Hot Loader v3:**
```js
// App.js
import React from 'react';
const App = () =>
Hello world!
;
export default App;
```
```js
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
const render = Component => {
ReactDOM.render(
,
document.getElementById('root'),
);
};
render(App);
// webpack Hot Module Replacement API
if (module.hot) {
module.hot.accept('./containers/App', () => {
// if you are using harmony modules ({modules:false})
render(App);
// in all other cases - re-require App manually
render(require('./containers/App'));
});
}
```
**React Hot Loader v4:**
```js
// App.js
import React from 'react';
import { hot } from 'react-hot-loader';
const App = () =>
Hello world!
;
export default hot(module)(App);
```
```js
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
ReactDOM.render(, document.getElementById('root'));
```
### Patch is optional
> Since 4.0 till 4.8
Code is automatically patched, you can safely remove `react-hot-loader/patch` from your webpack config,
if react-hot-loader is required before React in any other way.
### Error Boundary is inside every component
> Since 4.5.4
On Hot Module Update we will inject `componentDidCatch` and a _special_ `render`
to every Class-based component you have, making [Error Boundaries](https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries) more local.
After update we will remove all sugar, keeping only Boundaries you've created.
You can provide your own `errorReporter`, via `setConfig({errorReporter})` or opt-out from
root ErrorBoundaries setting `errorBoundary={false}` prop on `AppContainer` or `hot`.
However - this option affects only SFC behavior, and any ClassComponent would boundary itself.
```js
import { setConfig } from 'react-hot-loader';
import ErrorBoundary from './ErrorBoundary';
// ErrorBoundary will be given error and errorInfo prop.
setConfig({ errorReporter: ErrorBoundary });
```
If `errorReporter` is not set - full screen error overlay would be shown.
#### Setting global Error Reporter
Global Error Reporter would, created a fixed overlay on top the page,
would be used to display errors, not handled by `errorReporter`, and
any HMR error.
You may change, or disable this global error overlay
```js
// to disable
setConfig({ ErrorOverlay: () => null });
// to change
setConfig({ ErrorOverlay: MyErrorOverlay });
```
The UX of existing overlay is a subject to change, and we are open to any proposals.
## Known limitations and side effects
### Note about `hot`
`hot` accepts only React Component (Stateful or Stateless), resulting the `HotExported` variant of it.
The `hot` function will setup current module to _self-accept_ itself on reload, and will **ignore** all the changes, made for non-React components.
You may mark as many modules as you want. But `HotExportedComponent` **should be the only used export** of a _hot_-module.
> Note: Please note how often we have used `exported` keyword. `hot` is for exports.
> Note: Does nothing in production mode, just passes App through.
### New Components keep executing the old code
There is no way to hot-update constructor code, as result even new components
will be born as the first ones, and then grow into the last ones. As of today, this issue cannot be solved.
## Troubleshooting
If it doesn't work, in 99% of cases it's a configuration issue. A missing option, a
wrong path or port. webpack is very strict about configuration, and the best way
to find out what's wrong is to compare your project to an already working setup,
check out
**[examples](https://github.com/gaearon/react-hot-loader/tree/master/examples)**,
bit by bit.
If something doesn't work, in 99% of cases it's an issue with your code. The Component
didn't get registered, due to HOC or Decorator around it, which is making it
invisible to the Babel plugin or webpack loader.
We're also gathering
**[Troubleshooting Recipes](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)**
so send a PR if you have a lesson to share!
### Switch into debug mode
Debug mode adds additional warnings and can tells you why React Hot Loader is
not working properly in your application.
```js
import { setConfig } from 'react-hot-loader';
setConfig({ logLevel: 'debug' });
```
## Contributors
This project exists thanks to all the people who contribute. [Contribute](CONTRIBUTING.md).
[![contributors][oc-contributors-img]](https://github.com/gaearon/react-hot-loader/graphs/contributors)
## Backers
Thank you to all our backers! 🙏 [Become a backer][oc-backer-link]
[![backers][oc-backer-img]][oc-backer-link]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor][oc-sponsor-link]
## License
MIT
[build-badge]: https://img.shields.io/travis/gaearon/react-hot-loader.svg?style=flat-square
[build]: https://travis-ci.org/gaearon/react-hot-loader
[coverage-badge]: https://img.shields.io/codecov/c/github/gaearon/react-hot-loader.svg?style=flat-square
[coverage]: https://codecov.io/github/gaearon/react-hot-loader
[version-badge]: https://img.shields.io/npm/v/react-hot-loader.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-hot-loader
[license-badge]: https://img.shields.io/npm/l/react-hot-loader.svg?style=flat-square
[license]: https://github.com/gaearon/react-hot-loader/blob/next/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[chat]: https://gitter.im/gaearon/react-hot-loader
[chat-badge]: https://img.shields.io/gitter/room/gaearon/react-hot-loader.svg?style=flat-square
[github-watch-badge]: https://img.shields.io/github/watchers/gaearon/react-hot-loader.svg?style=social
[github-watch]: https://github.com/gaearon/react-hot-loader/watchers
[github-star-badge]: https://img.shields.io/github/stars/gaearon/react-hot-loader.svg?style=social
[github-star]: https://github.com/gaearon/react-hot-loader/stargazers
[oc-backer-badge]: https://opencollective.com/react-hot-loader/backers/badge.svg
[oc-sponsor-badge]: https://opencollective.com/react-hot-loader/sponsors/badge.svg
[oc-contributors-img]: https://opencollective.com/react-hot-loader/contributors.svg?width=890&button=false
[oc-backer-img]: https://opencollective.com/react-hot-loader/backers.svg?width=890
[oc-backer-link]: https://opencollective.com/react-hot-loader#backers
[oc-sponsor-link]: https://opencollective.com/react-hot-loader#sponsor
================================================
FILE: babel.js
================================================
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/babel.production.min.js');
} else {
module.exports = require('./dist/babel.development.js');
}
================================================
FILE: docs/Troubleshooting.md
================================================
This file serves as a repository of common problems setting up React Hot Loader, and solutions to them.
Know a problem? Feel free to send a PR with edits.
### What Should It Look Like?
#### When the page loads
#### When you save a file
If you don't see some of the messages, or some of the requests, or if some of the requests fail, this may be a symptom of an incorrect configuration. Comparing your setup with [React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate) may help you find the mistake. If hot loading appears to be working but you still do not see all of the above messages, you may need to check your dev server's [clientLogLevel](https://webpack.js.org/configuration/dev-server/#devserver-clientloglevel) setting. Depending on what it is set to, you may not see all of these messages, so you may need to adjust this setting to ensure that your configuration is correct.
##### Common TypeScript Mistake
If you're a TypeScript user then to get set up with HMR then it's not unusual to alias `module` as an `any` like so:
```ts
const anyModule = module as any;
if (anyModule.hot) {
anyModule.hot.accept('./app', () => render(App));
}
```
**DON'T DO THIS.** It will result in full page reloads each time you make a change. Instead do something like this:
```ts
if ((module as any).hot) {
(module as any).hot.accept('./app', () => render(App));
}
```
or this:
```ts
declare const module: any;
if (module.hot) {
module.hot.accept('./app', () => render(App));
}
```
Then you should see the expected messages / get the expected behaviour:
```
[HMR] Updated modules:
// ...
[HMR] App is up to date.
```
---
### Can't Build
#### Cannot resolve 'file' or 'directory' `react/lib/ReactMount`
If you're using a precompiled React instead of `react` npm package, React Hot Loader configuration will need a few tweaks. See [Usage with External React](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#usage-with-external-react).
Make sure you have `'.js'` in `resolve.extensions` section of Webpack config, or Webpack won't be able to find any JS files without explicitly specifying extension in `require`.
#### SyntaxError: 'import' and 'export' may only appear at the top level
If you're using React Hot Loader together with [Babel](https://babeljs.io/) (ex 6to5), make sure React Hot Loader stays **to the left** of Babel in `loaders` array in Webpack config:
```js
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }
```
Webpack applies `loaders` right to left, and we need to feed Babel's _output_ to React Hot Loader, not vice versa.
#### Error: Invalid path './' (or similar)
If you're using a relative output path in your Webpack config, wrap it in a call to `path.resolve()`:
```js
var path = require('path');
module.exports = {
...,
output: {
path: path.resolve('./my-relative-path'),
...
}
};
```
If you used WebpackDevServer CLI mode and after switching to Node it crashes with `Error: Invalid path ''`, you probably didn't have `path` specified in `output` at all. You can just put `path: __dirname` there, as it won't matter for development config.
### Module not found: Error: Cannot resolve module 'react-hot-loader'
Most likely you used `npm link` or `yarn link` to use a development version of a package in a different folder, and React Hot Loader processed it by mistake. Read the guide about linking package in [README linking section](../README.md#linking)
---
### Page Throws an Error
#### Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined
#### Uncaught TypeError: Cannot read property 'env' of undefined
#### [socket.io] Cannot use 'in' operator to search for 'document' in undefined
Make sure you have `exclude: /node_modules/` or, better, `include: path.join(__dirname, 'src')` (path depends on your application) in loader configuration [just like on this line](https://github.com/gaearon/react-hot-boilerplate/blob/fbdbd93956241320bc3960d350c4dd0030cc6e84/webpack.config.js#L27). You never need to process `node_modules` with React Hot Loader. If you use other loaders such as `jsx?harmony` or `babel`, most likely they **also** need to have `include` specified.
---
### Can't Hot Reload
Generally, the best way to fix this class of errors is to compare your setup to [React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate) very carefully and see what's different.
#### Try WebpackDevServer Node Interface Instead of CLI!
WebpackDevServer CLI mode [behaves slightly differently](https://github.com/webpack/webpack-dev-server/issues/106) from its Node API. When in doubt, I suggest you use Node API like [React Hot Boilerplate does](https://github.com/gaearon/react-hot-boilerplate/blob/master/server.js).
#### Check your NODE_ENV value
If you are seeing an error like this:
```
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.
```
You may have `NODE_ENV` set to either `production` or `test`. Setting `NODE_ENV` to either of these will cause `react-hot-loader` to compile in production mode. Try setting `NODE_ENV` to something like `development`.
#### Uncaught RangeError: Maximum call stack size exceeded
When using WebpackDevServer CLI flag `--hot`, the plugin `new HotModuleReplacementPlugin()` should not be used and vice versa, they are mutually exclusive but the desired effect will work with any of them.
#### No 'Access-Control-Allow-Origin' header is present on the requested resource.
If you're trying to access Webpack Dev Server from a URL served on another port, you may try:
* Changing `WebpackDevServer` options to include CORS header:
```js
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
headers: { 'Access-Control-Allow-Origin': '*' },
});
```
* Making sure that `webpack-dev-server` **client host and port** in `webpack.config.js` matches those of your development server:
```js
entry: [
'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server',
'./src/app',
];
```
#### The following modules couldn't be hot updated: (They would need a full reload!)
**If you get this warning when editing a root component**, this may be because you don't export anything from it, and call `React.render` from there. Put your root component in a separate file (e.g. `App.jsx`) and `require` it from `index.js` where you call `React.render`.
You also get this warning in v1.x if you write your root component as [stateless plain function](http://facebook.github.io/react/docs/reusable-components.html#stateless-functions) instead of using `React.Component`. This problem is already solved completely in the upcoming [v3.x](https://github.com/gaearon/react-hot-boilerplate/pull/61).
This warning may also appear **if you edit some non-component file** which is `require`d from files other than components. This means hot update bubbled up, but the app couldn't handle it. This is normal! Just refresh.
If you get this warning **together with a 404 for `hot-update.json` file**, you're probably using an ancient version of `webpack-dev-server` (just update it).
#### I see “[WDS] Hot Module Replacement enabled” but nothing happens when I edit `App.js`
If you're running Node 0.11.13, you might want to try updating to 0.12. Some people reported this helped solve this problem. Also **make sure that your `require`s have the same filename casing as the files.** Having `App.js` and doing `require('app')` might trip the watcher on some systems.
OS X also has a rarely-occuring bug that causes some folders to get 'broken' with regards to file system change monitoring. Here are some suggested [fixes](http://feedback.livereload.com/knowledgebase/articles/86239).
#### I see “[HMR] Nothing hot updated.” and nothing happens when I edit `App.js`
If you have several entry points in `entry` configuration option, make sure `webpack/hot/only-dev-server` **is in each of them:**
```js
entry: {
app: ['./src/app', 'webpack/hot/only-dev-server'],
editor: ['./src/editor', 'webpack/hot/only-dev-server'],
...,
client: 'webpack-dev-server/client?http://localhost:3000'
}
```
You will have to include "client.js" in your host page for the hot updates to work. For example:
```html
```
The entry points that don't have `webpack/hot/only-dev-server` (or `webpack/hot/dev-server` if you fancy occasional reloads) won't know how to apply hot updates.
#### Syntax error: Unexpected token <
If you combine WebpackDevServer with an existing server like Express and get this error message on hot updates, it is because Webpack is configured to request hot updates _from the current hostname_. So if your Express server is on `8000` and `publicPath` in Webpack config is `/build/`, it will request hot updates from `http://localhost:8000/build/`, which in your case is served by Express. Instead, you need to set `publicPath` to point to the port where WebpackDevServer is running. For example, it could be `http://localhost:9000/build/`.
#### Not enough watchers
Verify that if you have enough available watchers in your system. If this value is too low, the file watcher in Webpack won't recognize the changes:
```
cat /proc/sys/fs/inotify/max_user_watches
```
Arch users, add `fs.inotify.max_user_watches=524288` to `/etc/sysctl.d/99-sysctl.conf` and then execute `sysctl --system`. Ubuntu users (and possibly others): `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`.
#### 404 errors for `hot-update.json` files
First, make sure you have recent versions of Webpack and Webpack Dev Server (>= 1.7 is fine). Earlier versions use 404 code when no updates were available, so it wasn't technically an error.
Now, take a look at the path where they are requested. Webpack uses `output.publicPath` from Webpack config to determine this path. If you forget to specify it, Webpack will request updates from a relative path to the current one, so any client-side routing will break it.
Normally you want it to be `'/'` if you're serving scripts from root, something like `'/scripts/'` if you have a virtual path for scripts, and something like `'http://localhost:port/scripts/` if you're using Webpack only for scripts but have another primary server like Express. **This config variable must also match `publicPath` option specified when creating `WebpackDevServer` instance.** [Take a look at React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate/blob/master/server.js#L6) to get an idea.
---
### Misc
#### It's slowing down my build!
Make sure you have `include` limited to your app's modules in loader configuration [just like on this line](https://github.com/gaearon/react-hot-boilerplate/blob/fbdbd93956241320bc3960d350c4dd0030cc6e84/webpack.config.js#L27). You never need to process `node_modules` with React Hot Loader.
#### My bundle is so large!
Make sure you have separate configs for development and production. You don't need `react-hot` in `loaders` or `webpack-dev-server/client` or `webpack/hot/only-dev-server` in production config. They are only for development. For easier maintenance, you can set an environment variable before invoking Webpack and read it in config.
Also make sure you have these plugins in production config:
```js
// removes a lot of debugging code in React
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
// keeps hashes consistent between compilations
new webpack.optimize.OccurrenceOrderPlugin(),
// minifies your code
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
});
```
Oh, and don't forget to remove `devtool: 'eval'` from a production config. Otherwise Uglify won't uglify anything at all.
#### I can access my Single Page App (SPA) only via `/` on refresh
The problem is that by default **WebpackDevServer** doesn't deal with HTML5 History correctly and the server won't route the url as it should. You can fix this issue by setting `historyApiFallback: true`. Here's a full example:
```js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
historyApiFallback: true,
}).listen(port, ip, function(err) {
if (err) {
return console.log(err);
}
console.log('Listening at ' + ip + ':' + port);
});
```
After this you should be able to access your SPA via any url that has been defined in it.
#### React-hot-loader: a Unknown was found where a Unknown was expected.
The problem is that after hot module update some branches of React Tree differs from the previous versions.
As result React-hot-loader will not update these branches at all, and you may lose internal components state.
The `equality` of Components are defined as:
1. They have same variable names in the same files. Ie they are both MyComponent from MyComponent.js
2. They have same displayName and similar code.
> Note: similar code is not _equal_ code. RHL will stand some small changes in code, or even adding a new method in class.
#### Not all of my code got updated.
Hot module replacement is a tricky thing. Just double check that you are not exporting anything else from the
modules with `hot` exported components – functions, constants, anything NOT REACT.
`hot` function setups module self-acceptance. And it may be a dangerous thing.
#### RHL is not working for Electron or Parcel
`hot` function is not tested in these environments, yet. Please use `old school` AppContainer and setup HRM manually.
#### RHL is not working with Webpack DLL
React Hot Loader rely on a Babel transformation that register all exports in a global. That's why dependencies included in [Webpack DLL](https://webpack.js.org/plugins/dll-plugin/#dllplugin) will not work.
#### React-hot-loader: fatal error caused by XXX - no instrumentation found.
React-hot-loader found an Element without instrumentation due to a wrong configuration.
To fix this issue - just require RHL before React.
Example of a wrong configuration:
```js
import * as React from 'react';
import { hot } from 'react-hot-loader'; // React is not patched
```
Example of correct configurations:
```js
import { hot } from 'react-hot-loader';
import * as React from 'react'; // React is now patched
```
```js
import React from 'react';
import { hot } from 'react-hot-loader'; // React is now patched
```
================================================
FILE: examples/SSR/.babelrc
================================================
{
"presets": [
"env",
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-class-properties",
"dynamic-import-node"
]
}
================================================
FILE: examples/SSR/.gitignore
================================================
node_modules
================================================
FILE: examples/SSR/package.json
================================================
{
"name": "react-hot-loader-ssr",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack",
"start": "babel-node ./src/server.js",
"start:webpack": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"babel-cli": "^6.26.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "next",
"react-portal": "^4.1.2"
}
}
================================================
FILE: examples/SSR/src/App.js
================================================
import { hot, setConfig } from 'react-hot-loader';
import * as React from 'react';
import Counter from './Counter';
// import hidden from './HiddenComponent';
const App = () => (
`;
};
================================================
FILE: examples/SSR/webpack.config.babel.js
================================================
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['webpack/hot/dev-server', './src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
//exclude: /node_modules|packages/, // should work without exclude
test: /\.js$/,
use: 'babel-loader',
},
],
},
plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin()],
};
================================================
FILE: examples/all-possible-containers/.babelrc
================================================
{
"presets": [
"@babel/preset-flow",
"@babel/preset-react",
[
"@babel/preset-env",
{
"modules": false
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
},
"development": {
"plugins": [
"react-hot-loader/babel"
]
},
"production": {
"plugins": [
"@babel/plugin-transform-react-constant-elements",
"@babel/plugin-transform-react-inline-elements",
"babel-plugin-transform-react-pure-class-to-function",
"babel-plugin-transform-react-remove-prop-types"
]
}
}
}
================================================
FILE: examples/all-possible-containers/.editorconfig
================================================
[*]
charset=utf-8
end_of_line=crlf
insert_final_newline=false
indent_style=space
indent_size=2
================================================
FILE: examples/all-possible-containers/.flowconfig
================================================
[include]
src/
[ignore]
.*/__tests__/.*
================================================
FILE: examples/all-possible-containers/.gitignore
================================================
.idea
dist
node_modules
================================================
FILE: examples/all-possible-containers/LICENSE
================================================
MIT License
Copyright (c) 2017 Eli Sherer
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: examples/all-possible-containers/README.md
================================================
# react-hot-loader-repro918
Reproduce an issue for gaearon/react-hot-loader#918
================================================
FILE: examples/all-possible-containers/package.json
================================================
{
"name": "react-hot-loader-repro918",
"version": "1.0.0",
"license": "UNLICENSED",
"description": "Reproduce an issue for gaearon/react-hot-loader#918",
"repository": {
"type": "git",
"url": "https://github.com/elisherer/react-hot-loader-repro918"
},
"author": {
"name": "Eli Sherer",
"email": "eli.sherer@gmail.com",
"url": "http://www.sherer.co.il"
},
"private": true,
"main": "src/index.js",
"scripts": {
"build": "cross-env NODE_ENV=production webpack -p",
"start": "webpack-serve --port 8080 --host 0.0.0.0",
"start:link": "cp -R ../../dist ./node_modules/react-hot-loader && cp -R ../../*.js ./node_modules/react-hot-loader"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-react-constant-elements": "^7.0.0",
"@babel/plugin-transform-react-inline-elements": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "8.0.0",
"babel-plugin-transform-react-pure-class-to-function": "1.0.1",
"babel-plugin-transform-react-remove-prop-types": "0.4.13",
"cross-env": "5.1.4",
"html-webpack-plugin": "3.2.0",
"jsx-compress-loader": "^0.0.1",
"react-hot-loader": "4.3.10",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "4.6.0",
"webpack-cli": "2.0.15",
"webpack-serve": "0.3.2"
}
}
================================================
FILE: examples/all-possible-containers/src/components/App.js
================================================
// @flow
import { hot } from 'react-hot-loader/root';
import React from 'react';
import Context from '../context';
import Counter from './Counter';
import ErrorBoundary from './ErrorBoundary';
import ModalComponent from './ModalComponent';
import ClassComponent from './ClassComponent';
import FunctionComponent from './FunctionComponent';
import PureClassComponent from './PureClassComponent';
import ConsumerClassComponent from './ConsumerClassComponent';
import ConsumerFunctionComponent from './ConsumerFunctionComponent';
import ConsumerPureClassComponent from './ConsumerPureClassComponent';
import ChildrenAsFunctionExample from './ChildrenAsFunctionExample';
import ConsumerConnectedComponent from './ConsumerConnectedComponent';
import ConnectedChildrenAFComponent from './ConnectedChildrenAFComponent';
import FunctionConsumerPureClassComponent from './FunctionConsumerPureClassComponent';
import HookedComponent from './Hook';
import { EDIT_ME } from './_editMe';
const Secret = (() => {
const A = () => (
component A
);
const B = () => 'wrong';
return { A, B };
})();
class App extends React.Component {
state = {
error: null,
errorInfo: null,
open: false,
};
render() {
const { open, error, errorInfo } = this.state;
const { A, B } = Secret;
return (
);
export default FunctionComponent;
================================================
FILE: examples/all-possible-containers/src/components/FunctionConsumerPureClassComponent.js
================================================
import React from 'react';
import Context from '../context';
import { EDIT_ME } from './_editMe';
/**
* The bug is reproduced in this file, edit the content of PureTest and see it doesn't update
* (Changing the PureComponent to Component makes the HMR work)
*/
class PureTest extends React.PureComponent {
render() {
return (
new render + {this.state.value} state + {this.props.n}
);
}
}
RHL.register(App, 'App', 'test.js');
const Enhanced = mapProps(props => ({ n: props.n * 5 }))(App);
RHL.register(Enhanced, 'Enhanced', 'test.js');
wrapper.setProps({ children: });
}
expect(wrapper.text()).toBe('new render + old state + 20');
});
it('should work with react-lifecycle-compact', () => {
class Component extends React.Component {
static getDerivedStateFromProps() {
return {};
}
}
/* eslint-disable no-underscore-dangle */
polyfill(Component);
expect(Component.prototype.componentWillReceiveProps.__suppressDeprecationWarning).toBe(true);
const Proxy = .type;
expect(Proxy.prototype.componentWillReceiveProps.__suppressDeprecationWarning).toBe(true);
/* eslint-enable */
});
});
});
================================================
FILE: test/__babel_fixtures__/bindings.js
================================================
import P, { Q } from "left-pad";
const A = 42;
function B() {
function R() {}
class S {}
const T = 42;
}
export class C {
U() {
function V() {
class W {}
}
}
}
const D = class X {};
let E = D;
var Y = require("left-pad");
var { Z } = require("left-pad");
export default React.createClass({});
================================================
FILE: test/__babel_fixtures__/class-properties/arguments.js
================================================
class Foo {
bar = (a, b) => {
arguments;
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/arrow-function-in-constructor.js
================================================
class Foo {
constructor() {
this.onClick = (e) => e.target.value
}
}
================================================
FILE: test/__babel_fixtures__/class-properties/async-functions-expression-body.js
================================================
class Foo {
bar = async (a, b) => await b(a)
}
================================================
FILE: test/__babel_fixtures__/class-properties/async-functions.js
================================================
class Foo {
bar = async (a, b) => {
return await a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/block-body.js
================================================
class Foo {
bar = (a, b) => {
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/default-params.js
================================================
class Foo {
bar = (a = "foo") => {
return `${a}bar`;
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/destructured-params.js
================================================
class Foo {
bar = ({ a }, { b }) => {
return `${a}${b}`;
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/expression-body.js
================================================
class Foo {
onClick = (e) => e.target.value
}
================================================
FILE: test/__babel_fixtures__/class-properties/nested-arguments.js
================================================
class Foo {
bar = (a, b) => {
() => {
arguments;
}
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/nested-new.target.js
================================================
class Foo {
bar = (a, b) => {
() => {
new.target;
}
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/new.target.js
================================================
class Foo {
bar = (a, b) => {
new.target;
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/not-a-function.js
================================================
class Foo {
bar = 2;
}
================================================
FILE: test/__babel_fixtures__/class-properties/not-an-arrow-function.js
================================================
class Foo {
bar = function (a, b) {
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/class-properties/same-name-as-class-method.js
================================================
class Foo {
bar = (a, b) => {
return a(b);
};
bar() {
return 2
}
}
================================================
FILE: test/__babel_fixtures__/class-properties/static-property.js
================================================
class Foo {
static bar = (a, b) => {
return a(b);
};
}
================================================
FILE: test/__babel_fixtures__/counter.js
================================================
class Counter { }
export default () =>
================================================
FILE: test/__babel_fixtures__/drop-hot-half.prod.js
================================================
import { hot } from 'react-hot-loader';
import { hot as rootHot } from 'react-hot-loader/root';
const control = compose(
withDebug,
withDebug,
)(App);
const targetCase1 = compose(
withDebug,
withDebug,
hot(module),
)(App);
const targetCase2 = compose(
withDebug,
withDebug,
rootHot,
)(App);
const removeHot1 = hot(control);
const removeHot2 = hot(module)(control);
const removeHot3 = rootHot(control);
================================================
FILE: test/__babel_fixtures__/drop-hot.prod.js
================================================
import React from 'react'
import { hot, foo } from 'react-hot-loader'
import { hot as namedHot, foo as namedFoo } from 'react-hot-loader'
import { hot as rootHot } from 'react-hot-loader/root'
import { hot as namedHot2 } from 'react-hot-loader'
import { hot as notRHLHot } from 'not-react-hot-loader'
import * as RHL from 'react-hot-loader'
import * as RHL2 from 'react-hot-loader'
import * as NOTRHL from 'not-react-hot-loader'
const App = () =>
Hello World!
const a = hot(module)(App);
const z = rootHot(App);
const b = namedHot(module)(App);
const c = namedHot2(module)(App);
const d = RHL.hot(module)(App);
const e = RHL2.hot(module)(App);
foo(module)(App);
notRHLHot(module)(App);
namedFoo(module)(App);
RHL.foo(module)(App);
NOTRHL.hot(module)(App);
// should not drop incomplete reference
namedFoo(module);
export { a, b, c, d, e, z };
================================================
FILE: test/__babel_fixtures__/hooks.js
================================================
import React, {useState} from 'react';
import {useExternalHook} from 'external-hook'
const NoHooks = () =>
no hooks
;
const UseStateHook = () => {
useState(42);
};
const UseStateHooks = () => {
useState(42);
useState(24);
};
const useEffectHook = () => {
React.useEffect(() => ({}));
useState(24);
React.useState(42);
};
const useForwardRefHook = React.forwardRef(() => {
React.useEffect(() => ({}));
useState(24);
React.useState(42);
});
const useForwardRefFunctionHook = React.forwardRef(function () {
React.useEffect(() => ({}));
useState(24);
React.useState(42);
});
const useCustomHook = () => {
useState(42);
useEffectHook();
useExternalHook();
};
const useCustomHookAgain = () => {
useState(42);
useEffectHook();
useExternalHook();
};
const useInnerHook = ({useHookFromProps}) => {
const useHookBase = () => useState();
const useHook = () => useState(useHookFromProps(useHookBase()));
useHookFromProps();
{
// sub scope
useHook();
}
};
function useFunc () {
useState(42);
useEffectHook();
};
================================================
FILE: test/__babel_fixtures__/issue-246.js
================================================
export function spread(...args) {
return args.push(1)
}
================================================
FILE: test/__babel_fixtures__/local-hooks.js
================================================
import {useState} from "react";
function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}
function Component2() {
const useRippleHandler = () => {};
useRippleHandler();
useRippleHandler();
}
function Component3() {
const useRippleHandler = function () {};
useRippleHandler();
useRippleHandler();
}
const useInnerHook = ({useHookFromProps}) => {
const useHookBase = () => useState();
const useHook = () => useState(useHookFromProps(useHookBase()));
useHookFromProps();
{
// sub scope
useHook();
}
};
const OnlyThisOneUsesExternalHook = () => {
useInnerHook();
useState();
};
// check for "return ["
================================================
FILE: test/__babel_fixtures__/name-clash.js
================================================
const _default = 10;
export default 42;
================================================
FILE: test/__snapshots__/babel.test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods arguments.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
var _arguments = arguments;
_classCallCheck(this, Foo);
this.bar = function (a, b) {
_arguments;
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods arrow function in constructor.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.onClick = function (e) {
return e.target.value;
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods async functions expression body.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step(\\"next\\", value); }, function (err) { step(\\"throw\\", err); }); } } return step(\\"next\\"); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
var _this = this;
_classCallCheck(this, Foo);
this.bar = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(a, b) {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return b(a);
case 2:
return _context.abrupt(\\"return\\", _context.sent);
case 3:
case \\"end\\":
return _context.stop();
}
}
}, _callee, _this);
}));
return function (_x, _x2) {
return _ref.apply(this, arguments);
};
}();
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods async functions.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step(\\"next\\", value); }, function (err) { step(\\"throw\\", err); }); } } return step(\\"next\\"); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
var _this = this;
_classCallCheck(this, Foo);
this.bar = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(a, b) {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return a(b);
case 2:
return _context.abrupt(\\"return\\", _context.sent);
case 3:
case \\"end\\":
return _context.stop();
}
}
}, _callee, _this);
}));
return function (_x, _x2) {
return _ref.apply(this, arguments);
};
}();
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods block body.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (a, b) {
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods default params.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function () {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \\"foo\\";
return a + \\"bar\\";
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods destructured params.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (_ref, _ref2) {
var a = _ref.a;
var b = _ref2.b;
return \\"\\" + a + b;
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods expression body.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.onClick = function (e) {
return e.target.value;
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods nested arguments.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
var _arguments = arguments;
_classCallCheck(this, Foo);
this.bar = function (a, b) {
(function () {
_arguments;
});
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods nested new.target.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (a, b) {
(function () {
new.target;
});
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods new.target.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (a, b) {
new.target;
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods not a function.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = 2;
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods not an arrow function.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (a, b) {
return a(b);
};
}
_createClass(Foo, [{
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods same name as class method.js 1`] = `
"\\"use strict\\";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
this.bar = function (a, b) {
return a(b);
};
}
_createClass(Foo, [{
key: \\"bar\\",
value: function bar() {
return 2;
}
}, {
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return Foo;
}();
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" copies arrow function body block onto hidden class methods static property.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Foo = function Foo() {
_classCallCheck(this, Foo);
};
Foo.bar = function (a, b) {
return a(b);
};
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components bindings.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.C = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\"value\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _leftPad = require(\\"left-pad\\");
var _leftPad2 = _interopRequireDefault(_leftPad);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var A = 42;
function B() {
function R() {}
var S = function S() {
_classCallCheck(this, S);
};
var T = 42;
}
var C = exports.C = function () {
function C() {
_classCallCheck(this, C);
}
_createClass(C, [{
key: \\"U\\",
value: function U() {
function V() {
var W = function W() {
_classCallCheck(this, W);
};
}
}
}, {
key: \\"__reactstandin__regenerateByEval\\",
// @ts-ignore
value: function __reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}]);
return C;
}();
var D = function X() {
_classCallCheck(this, X);
};
var E = D;
var Y = require(\\"left-pad\\");
var _require = require(\\"left-pad\\"),
Z = _require.Z;
var _default = React.createClass({
displayName: \\"_default\\"
});
exports.default = _default;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(A, \\"A\\", __FILENAME__);
reactHotLoader.register(B, \\"B\\", __FILENAME__);
reactHotLoader.register(C, \\"C\\", __FILENAME__);
reactHotLoader.register(D, \\"D\\", __FILENAME__);
reactHotLoader.register(E, \\"E\\", __FILENAME__);
reactHotLoader.register(_default, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components counter.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\\"Cannot call a class as a function\\"); } }
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var Counter = function Counter() {
_classCallCheck(this, Counter);
};
var _default = function _default() {
return React.createElement(
\\"div\\",
null,
React.createElement(Counter, null)
);
};
exports.default = _default;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Counter, \\"Counter\\", __FILENAME__);
reactHotLoader.register(_default, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components drop hot half.prod.js 1`] = `
"'use strict';
var _reactHotLoader = require('react-hot-loader');
var _root = require('react-hot-loader/root');
var control = compose(withDebug, withDebug)(App);
var targetCase1 = compose(withDebug, withDebug, (0, _reactHotLoader.hot)(module))(App);
var targetCase2 = compose(withDebug, withDebug, _root.hot)(App);
var removeHot1 = (0, _reactHotLoader.hot)(control);
var removeHot2 = control;
var removeHot3 = control;"
`;
exports[`babel Targetting "es2015" tags potential React components drop hot.prod.js 1`] = `
"'use strict';
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.z = exports.e = exports.d = exports.c = exports.b = exports.a = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactHotLoader = require('react-hot-loader');
var RHL = _interopRequireWildcard(_reactHotLoader);
var RHL2 = _interopRequireWildcard(_reactHotLoader);
var _root = require('react-hot-loader/root');
var _notReactHotLoader = require('not-react-hot-loader');
var NOTRHL = _interopRequireWildcard(_notReactHotLoader);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var App = function App() {
return _react2.default.createElement(
'div',
null,
'Hello World!'
);
};
var a = App;
var z = App;
var b = App;
var c = App;
var d = App;
var e = App;
(0, _reactHotLoader.foo)(module)(App);
(0, _notReactHotLoader.hot)(module)(App);
(0, _reactHotLoader.foo)(module)(App);
RHL.foo(module)(App);
NOTRHL.hot(module)(App);
// should not drop incomplete reference
(0, _reactHotLoader.foo)(module);
exports.a = a;
exports.b = b;
exports.c = c;
exports.d = d;
exports.e = e;
exports.z = z;"
`;
exports[`babel Targetting "es2015" tags potential React components hooks.js 1`] = `
"'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _externalHook = require('external-hook');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var NoHooks = function NoHooks() {
return _react2.default.createElement(
'div',
null,
'no hooks'
);
};
var UseStateHook = function UseStateHook() {
(0, _react.useState)(42);
};
__signature__(UseStateHook, 'useState{(42)}');
var UseStateHooks = function UseStateHooks() {
(0, _react.useState)(42);
(0, _react.useState)(24);
};
__signature__(UseStateHooks, 'useState{(42)}\\\\nuseState{(24)}');
var useEffectHook = function useEffectHook() {
_react2.default.useEffect(function () {
return {};
});
(0, _react.useState)(24);
_react2.default.useState(42);
};
__signature__(useEffectHook, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}');
var useForwardRefHook = _react2.default.forwardRef(__signature__(function () {
_react2.default.useEffect(function () {
return {};
});
(0, _react.useState)(24);
_react2.default.useState(42);
}, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}'));
var useForwardRefFunctionHook = _react2.default.forwardRef(__signature__(function () {
_react2.default.useEffect(function () {
return {};
});
(0, _react.useState)(24);
_react2.default.useState(42);
}, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}'));
var useCustomHook = function useCustomHook() {
(0, _react.useState)(42);
useEffectHook();
(0, _externalHook.useExternalHook)();
};
__signature__(useCustomHook, 'useState{(42)}\\\\nuseEffectHook{}\\\\nuseExternalHook{}', function () {
return [useEffectHook, _externalHook.useExternalHook];
});
var useCustomHookAgain = function useCustomHookAgain() {
(0, _react.useState)(42);
useEffectHook();
(0, _externalHook.useExternalHook)();
};
__signature__(useCustomHookAgain, 'useState{(42)}\\\\nuseEffectHook{}\\\\nuseExternalHook{}', function () {
return [useEffectHook, _externalHook.useExternalHook];
});
var useInnerHook = function useInnerHook(_ref) {
var useHookFromProps = _ref.useHookFromProps;
var useHookBase = function useHookBase() {
return (0, _react.useState)();
};
__signature__(useHookBase, 'useState{}');
var useHook = function useHook() {
return (0, _react.useState)(useHookFromProps(useHookBase()));
};
__signature__(useHook, 'useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}', function () {
return [useHookFromProps, useHookBase];
});
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, 'useHookFromProps{}\\\\nuseHook{}');
function useFunc() {
(0, _react.useState)(42);
useEffectHook();
}
__signature__(useFunc, 'useState{(42)}\\\\nuseEffectHook{}', function () {
return [useEffectHook];
});
;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(NoHooks, 'NoHooks', __FILENAME__);
reactHotLoader.register(UseStateHook, 'UseStateHook', __FILENAME__);
reactHotLoader.register(UseStateHooks, 'UseStateHooks', __FILENAME__);
reactHotLoader.register(useEffectHook, 'useEffectHook', __FILENAME__);
reactHotLoader.register(useForwardRefHook, 'useForwardRefHook', __FILENAME__);
reactHotLoader.register(useForwardRefFunctionHook, 'useForwardRefFunctionHook', __FILENAME__);
reactHotLoader.register(useCustomHook, 'useCustomHook', __FILENAME__);
reactHotLoader.register(useCustomHookAgain, 'useCustomHookAgain', __FILENAME__);
reactHotLoader.register(useInnerHook, 'useInnerHook', __FILENAME__);
reactHotLoader.register(useFunc, 'useFunc', __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components issue 246.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.spread = spread;
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function spread() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return args.push(1);
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(spread, \\"spread\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components local hooks.js 1`] = `
"\\"use strict\\";
var _react = require(\\"react\\");
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}
__signature__(Component1, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component2() {
var useRippleHandler = function useRippleHandler() {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component2, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component3() {
var useRippleHandler = function useRippleHandler() {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component3, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
var useInnerHook = function useInnerHook(_ref) {
var useHookFromProps = _ref.useHookFromProps;
var useHookBase = function useHookBase() {
return (0, _react.useState)();
};
__signature__(useHookBase, \\"useState{}\\");
var useHook = function useHook() {
return (0, _react.useState)(useHookFromProps(useHookBase()));
};
__signature__(useHook, \\"useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}\\", function () {
return [useHookFromProps, useHookBase];
});
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, \\"useHookFromProps{}\\\\nuseHook{}\\");
var OnlyThisOneUsesExternalHook = function OnlyThisOneUsesExternalHook() {
useInnerHook();
(0, _react.useState)();
};
// check for \\"return [\\"
__signature__(OnlyThisOneUsesExternalHook, \\"useInnerHook{}\\\\nuseState{}\\", function () {
return [useInnerHook];
});
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Component1, \\"Component1\\", __FILENAME__);
reactHotLoader.register(Component2, \\"Component2\\", __FILENAME__);
reactHotLoader.register(Component3, \\"Component3\\", __FILENAME__);
reactHotLoader.register(useInnerHook, \\"useInnerHook\\", __FILENAME__);
reactHotLoader.register(OnlyThisOneUsesExternalHook, \\"OnlyThisOneUsesExternalHook\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "es2015" tags potential React components name clash.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
var _default = 10;
var _default2 = 42;
exports.default = _default2;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(_default, \\"_default\\", __FILENAME__);
reactHotLoader.register(_default2, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods arguments.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
arguments;
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods arrow function in constructor.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.onClick = e => e.target.value;
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods async functions expression body.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = async (a, b) => await b(a);
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods async functions.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = async (a, b) => {
return await a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods block body.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods default params.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a = \\"foo\\") => {
return \`\${a}bar\`;
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods destructured params.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = ({ a }, { b }) => {
return \`\${a}\${b}\`;
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods expression body.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.onClick = e => e.target.value;
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods nested arguments.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
() => {
arguments;
};
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods nested new.target.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
() => {
new.target;
};
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods new.target.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
new.target;
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods not a function.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = 2;
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods not an arrow function.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = function (a, b) {
return a(b);
};
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods same name as class method.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {
constructor() {
this.bar = (a, b) => {
return a(b);
};
}
bar() {
return 2;
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" copies arrow function body block onto hidden class methods static property.js 1`] = `
"\\"use strict\\";
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Foo {}
Foo.bar = (a, b) => {
return a(b);
};
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Foo, \\"Foo\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components bindings.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.C = undefined;
var _leftPad = require(\\"left-pad\\");
var _leftPad2 = _interopRequireDefault(_leftPad);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
const A = 42;
function B() {
function R() {}
class S {}
const T = 42;
}
class C {
U() {
function V() {
class W {}
}
}
// @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
}
}
exports.C = C;
const D = class X {};
let E = D;
var Y = require(\\"left-pad\\");
var { Z } = require(\\"left-pad\\");
const _default = React.createClass({
displayName: \\"_default\\"
});
exports.default = _default;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(A, \\"A\\", __FILENAME__);
reactHotLoader.register(B, \\"B\\", __FILENAME__);
reactHotLoader.register(C, \\"C\\", __FILENAME__);
reactHotLoader.register(D, \\"D\\", __FILENAME__);
reactHotLoader.register(E, \\"E\\", __FILENAME__);
reactHotLoader.register(_default, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components counter.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
class Counter {}
const _default = () => React.createElement(
\\"div\\",
null,
React.createElement(Counter, null)
);
exports.default = _default;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Counter, \\"Counter\\", __FILENAME__);
reactHotLoader.register(_default, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components drop hot half.prod.js 1`] = `
"'use strict';
var _reactHotLoader = require('react-hot-loader');
var _root = require('react-hot-loader/root');
const control = compose(withDebug, withDebug)(App);
const targetCase1 = compose(withDebug, withDebug, (0, _reactHotLoader.hot)(module))(App);
const targetCase2 = compose(withDebug, withDebug, _root.hot)(App);
const removeHot1 = (0, _reactHotLoader.hot)(control);
const removeHot2 = control;
const removeHot3 = control;"
`;
exports[`babel Targetting "modern" tags potential React components drop hot.prod.js 1`] = `
"'use strict';
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.z = exports.e = exports.d = exports.c = exports.b = exports.a = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactHotLoader = require('react-hot-loader');
var RHL = _interopRequireWildcard(_reactHotLoader);
var RHL2 = _interopRequireWildcard(_reactHotLoader);
var _root = require('react-hot-loader/root');
var _notReactHotLoader = require('not-react-hot-loader');
var NOTRHL = _interopRequireWildcard(_notReactHotLoader);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const App = () => _react2.default.createElement(
'div',
null,
'Hello World!'
);
const a = App;
const z = App;
const b = App;
const c = App;
const d = App;
const e = App;
(0, _reactHotLoader.foo)(module)(App);
(0, _notReactHotLoader.hot)(module)(App);
(0, _reactHotLoader.foo)(module)(App);
RHL.foo(module)(App);
NOTRHL.hot(module)(App);
// should not drop incomplete reference
(0, _reactHotLoader.foo)(module);
exports.a = a;
exports.b = b;
exports.c = c;
exports.d = d;
exports.e = e;
exports.z = z;"
`;
exports[`babel Targetting "modern" tags potential React components hooks.js 1`] = `
"'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _externalHook = require('external-hook');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
const NoHooks = () => _react2.default.createElement(
'div',
null,
'no hooks'
);
const UseStateHook = () => {
(0, _react.useState)(42);
};
__signature__(UseStateHook, 'useState{(42)}');
const UseStateHooks = () => {
(0, _react.useState)(42);
(0, _react.useState)(24);
};
__signature__(UseStateHooks, 'useState{(42)}\\\\nuseState{(24)}');
const useEffectHook = () => {
_react2.default.useEffect(() => ({}));
(0, _react.useState)(24);
_react2.default.useState(42);
};
__signature__(useEffectHook, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}');
const useForwardRefHook = _react2.default.forwardRef(__signature__(() => {
_react2.default.useEffect(() => ({}));
(0, _react.useState)(24);
_react2.default.useState(42);
}, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}'));
const useForwardRefFunctionHook = _react2.default.forwardRef(__signature__(function () {
_react2.default.useEffect(() => ({}));
(0, _react.useState)(24);
_react2.default.useState(42);
}, 'useEffect{}\\\\nuseState{(24)}\\\\nuseState{(42)}'));
const useCustomHook = () => {
(0, _react.useState)(42);
useEffectHook();
(0, _externalHook.useExternalHook)();
};
__signature__(useCustomHook, 'useState{(42)}\\\\nuseEffectHook{}\\\\nuseExternalHook{}', () => [useEffectHook, _externalHook.useExternalHook]);
const useCustomHookAgain = () => {
(0, _react.useState)(42);
useEffectHook();
(0, _externalHook.useExternalHook)();
};
__signature__(useCustomHookAgain, 'useState{(42)}\\\\nuseEffectHook{}\\\\nuseExternalHook{}', () => [useEffectHook, _externalHook.useExternalHook]);
const useInnerHook = ({ useHookFromProps }) => {
const useHookBase = () => (0, _react.useState)();
__signature__(useHookBase, 'useState{}');
const useHook = () => (0, _react.useState)(useHookFromProps(useHookBase()));
__signature__(useHook, 'useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}', () => [useHookFromProps, useHookBase]);
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, 'useHookFromProps{}\\\\nuseHook{}');
function useFunc() {
(0, _react.useState)(42);
useEffectHook();
}
__signature__(useFunc, 'useState{(42)}\\\\nuseEffectHook{}', () => [useEffectHook]);
;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(NoHooks, 'NoHooks', __FILENAME__);
reactHotLoader.register(UseStateHook, 'UseStateHook', __FILENAME__);
reactHotLoader.register(UseStateHooks, 'UseStateHooks', __FILENAME__);
reactHotLoader.register(useEffectHook, 'useEffectHook', __FILENAME__);
reactHotLoader.register(useForwardRefHook, 'useForwardRefHook', __FILENAME__);
reactHotLoader.register(useForwardRefFunctionHook, 'useForwardRefFunctionHook', __FILENAME__);
reactHotLoader.register(useCustomHook, 'useCustomHook', __FILENAME__);
reactHotLoader.register(useCustomHookAgain, 'useCustomHookAgain', __FILENAME__);
reactHotLoader.register(useInnerHook, 'useInnerHook', __FILENAME__);
reactHotLoader.register(useFunc, 'useFunc', __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components issue 246.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
exports.spread = spread;
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function spread(...args) {
return args.push(1);
}
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(spread, \\"spread\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components local hooks.js 1`] = `
"\\"use strict\\";
var _react = require(\\"react\\");
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}
__signature__(Component1, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component2() {
const useRippleHandler = () => {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component2, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component3() {
const useRippleHandler = function () {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component3, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
const useInnerHook = ({ useHookFromProps }) => {
const useHookBase = () => (0, _react.useState)();
__signature__(useHookBase, \\"useState{}\\");
const useHook = () => (0, _react.useState)(useHookFromProps(useHookBase()));
__signature__(useHook, \\"useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}\\", () => [useHookFromProps, useHookBase]);
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, \\"useHookFromProps{}\\\\nuseHook{}\\");
const OnlyThisOneUsesExternalHook = () => {
useInnerHook();
(0, _react.useState)();
};
// check for \\"return [\\"
__signature__(OnlyThisOneUsesExternalHook, \\"useInnerHook{}\\\\nuseState{}\\", () => [useInnerHook]);
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Component1, \\"Component1\\", __FILENAME__);
reactHotLoader.register(Component2, \\"Component2\\", __FILENAME__);
reactHotLoader.register(Component3, \\"Component3\\", __FILENAME__);
reactHotLoader.register(useInnerHook, \\"useInnerHook\\", __FILENAME__);
reactHotLoader.register(OnlyThisOneUsesExternalHook, \\"OnlyThisOneUsesExternalHook\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components name clash.js 1`] = `
"\\"use strict\\";
Object.defineProperty(exports, \\"__esModule\\", {
value: true
});
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
const _default = 10;
const _default2 = 42;
exports.default = _default2;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(_default, \\"_default\\", __FILENAME__);
reactHotLoader.register(_default2, \\"default\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
================================================
FILE: test/babel.test.js
================================================
import path from 'path';
import fs from 'fs';
import { transformFileSync } from 'babel-core';
/* eslint-disable import/no-unresolved, import/extensions */
import { getOptions, TARGETS } from '../testConfig/babel';
import plugin from '../src/babel.dev';
/* eslint-enable import/no-unresolved, import/extensions */
const babelPlugin = path.resolve(__dirname, '../src/babel.dev');
const babelPluginProd = path.resolve(__dirname, '../src/babel.prod');
const FIXTURES_DIR = path.join(__dirname, '__babel_fixtures__');
function trim(str) {
return str.replace(/^\s+|\s+$/, '');
}
function addRHLPlugin(babel, prod = false) {
babel.plugins.push(prod ? babelPluginProd : babelPlugin);
return babel;
}
describe('babel', () => {
TARGETS.forEach(target => {
describe(`Targetting "${target}"`, () => {
describe('tags potential React components', () => {
fs.readdirSync(FIXTURES_DIR).forEach(fixtureName => {
const fixtureFile = path.join(FIXTURES_DIR, fixtureName);
const isForProd = fixtureName.endsWith('.prod.js');
if (fs.statSync(fixtureFile).isFile()) {
it(fixtureName.split('-').join(' '), () => {
const actual = transformFileSync(fixtureFile, addRHLPlugin(getOptions(target), isForProd)).code;
const codeWithoutFilename = actual.replace(
new RegExp(`["']${fixtureFile.replace(/\\/g, '/')}["']`, 'g'),
'__FILENAME__',
);
expect(trim(codeWithoutFilename)).toMatchSnapshot();
});
}
});
});
describe('copies arrow function body block onto hidden class methods', () => {
const fixturesDir = path.join(FIXTURES_DIR, 'class-properties');
fs.readdirSync(fixturesDir).forEach(fixtureName => {
const fixtureFile = path.join(fixturesDir, fixtureName);
if (fs.statSync(fixtureFile).isFile()) {
it(fixtureName.split('-').join(' '), () => {
const actual = transformFileSync(fixtureFile, addRHLPlugin(getOptions(target))).code;
const codeWithoutFilename = actual.replace(
new RegExp(`["']${fixtureFile.replace(/\\/g, '/')}["']`, 'g'),
'__FILENAME__',
);
expect(trim(codeWithoutFilename)).toMatchSnapshot();
});
}
});
});
});
});
describe('babel helpers', () => {
const { shouldIgnoreFile } = plugin;
it('should ignore react and hot-loader', () => {
expect(shouldIgnoreFile('node_modules/react')).toBe(true);
expect(shouldIgnoreFile('node_modules\\react')).toBe(true);
expect(shouldIgnoreFile('node_modules/react/xyz')).toBe(true);
expect(shouldIgnoreFile('node_modules/react-hot-loader')).toBe(true);
expect(shouldIgnoreFile('node_modules/react-hot-loader/xyz')).toBe(true);
});
it('should pass all other files', () => {
expect(shouldIgnoreFile('react')).toBe(false);
expect(shouldIgnoreFile('node_modules/react-select')).toBe(false);
expect(shouldIgnoreFile('node_modules\\react-select')).toBe(false);
expect(shouldIgnoreFile('some_modules/react/xyz')).toBe(false);
expect(shouldIgnoreFile('node_modules/react-cold-loader')).toBe(false);
expect(shouldIgnoreFile('react-hot-loader.js')).toBe(false);
});
});
});
================================================
FILE: test/build.test.js
================================================
/* eslint-disable camelcase */
import { REGENERATE_METHOD as REGENERATE_METHOD_std } from '../src/proxy';
import { REGENERATE_METHOD as REGENERATE_METHOD_rhl } from '../src/internal/constants';
describe('Consistency tests', () => {
it('Should be constant con', () => {
expect(REGENERATE_METHOD_rhl).toBe(REGENERATE_METHOD_std);
});
});
================================================
FILE: test/cases/hooks/useContext.test.js
================================================
/* eslint-env browser */
/* eslint-disable no-lone-blocks, global-require */
import 'babel-polyfill';
import React from 'react';
import TestRenderer from 'react-test-renderer';
import ReactHotLoader, { AppContainer, setConfig } from '../../../src/index.dev';
import { configureGeneration } from '../../../src/global/generation';
// jest.mock('react-dom', () => require('@hot-loader/react-dom'));
describe(`Hooks: useContext`, () => {
beforeEach(() => {
ReactHotLoader.reset();
setConfig({
ignoreSFC: true,
});
configureGeneration(1, 1);
});
if (React.useContext) {
it('use', () => {
let failed = false;
const context = React.createContext(0);
const Wrapper = () => {
const ctx = React.useContext(context);
if (ctx) {
return `pass ${ctx}`;
}
failed = true;
return 'fail';
};
ReactHotLoader.register(Wrapper, 'wrapper', 'hook-test');
const wrapper = TestRenderer.create(
,
);
expect(wrapper.toJSON()).toEqual('pass 1');
expect(failed).toBe(false);
{
ReactHotLoader.register(Wrapper, 'wrapper', 'hook-test');
wrapper.update(
,
);
expect(wrapper.toJSON()).toEqual('pass 2');
expect(failed).toBe(false);
}
});
} else {
it('target platform does not support useContext', () => {
expect(true).toBe(true);
});
}
});
================================================
FILE: test/cases/memo/memo.test.js
================================================
/* eslint-env browser */
import 'babel-polyfill';
import React from 'react';
import TestRenderer from 'react-test-renderer';
import ReactHotLoader, { AppContainer } from '../../../src/index.dev';
import { configureGeneration } from '../../../src/global/generation';
// jest.mock('react-dom', () => require('@hot-loader/react-dom'));
describe(`React.memo`, () => {
beforeEach(() => {
ReactHotLoader.reset();
configureGeneration(1, 1);
});
const snapShot = {
children: ['this is component 2'],
props: {},
type: 'div',
};
if (React.memo) {
it('memo wrapping functional component', () => {
const Memo = React.memo(() =>
## License
MIT
[build-badge]: https://img.shields.io/travis/gaearon/react-hot-loader.svg?style=flat-square
[build]: https://travis-ci.org/gaearon/react-hot-loader
[coverage-badge]: https://img.shields.io/codecov/c/github/gaearon/react-hot-loader.svg?style=flat-square
[coverage]: https://codecov.io/github/gaearon/react-hot-loader
[version-badge]: https://img.shields.io/npm/v/react-hot-loader.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-hot-loader
[license-badge]: https://img.shields.io/npm/l/react-hot-loader.svg?style=flat-square
[license]: https://github.com/gaearon/react-hot-loader/blob/next/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[chat]: https://gitter.im/gaearon/react-hot-loader
[chat-badge]: https://img.shields.io/gitter/room/gaearon/react-hot-loader.svg?style=flat-square
[github-watch-badge]: https://img.shields.io/github/watchers/gaearon/react-hot-loader.svg?style=social
[github-watch]: https://github.com/gaearon/react-hot-loader/watchers
[github-star-badge]: https://img.shields.io/github/stars/gaearon/react-hot-loader.svg?style=social
[github-star]: https://github.com/gaearon/react-hot-loader/stargazers
[oc-backer-badge]: https://opencollective.com/react-hot-loader/backers/badge.svg
[oc-sponsor-badge]: https://opencollective.com/react-hot-loader/sponsors/badge.svg
[oc-contributors-img]: https://opencollective.com/react-hot-loader/contributors.svg?width=890&button=false
[oc-backer-img]: https://opencollective.com/react-hot-loader/backers.svg?width=890
[oc-backer-link]: https://opencollective.com/react-hot-loader#backers
[oc-sponsor-link]: https://opencollective.com/react-hot-loader#sponsor
================================================
FILE: babel.js
================================================
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/babel.production.min.js');
} else {
module.exports = require('./dist/babel.development.js');
}
================================================
FILE: docs/Troubleshooting.md
================================================
This file serves as a repository of common problems setting up React Hot Loader, and solutions to them.
Know a problem? Feel free to send a PR with edits.
### What Should It Look Like?
#### When the page loads
#### When you save a file
If you don't see some of the messages, or some of the requests, or if some of the requests fail, this may be a symptom of an incorrect configuration. Comparing your setup with [React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate) may help you find the mistake. If hot loading appears to be working but you still do not see all of the above messages, you may need to check your dev server's [clientLogLevel](https://webpack.js.org/configuration/dev-server/#devserver-clientloglevel) setting. Depending on what it is set to, you may not see all of these messages, so you may need to adjust this setting to ensure that your configuration is correct.
##### Common TypeScript Mistake
If you're a TypeScript user then to get set up with HMR then it's not unusual to alias `module` as an `any` like so:
```ts
const anyModule = module as any;
if (anyModule.hot) {
anyModule.hot.accept('./app', () => render(App));
}
```
**DON'T DO THIS.** It will result in full page reloads each time you make a change. Instead do something like this:
```ts
if ((module as any).hot) {
(module as any).hot.accept('./app', () => render(App));
}
```
or this:
```ts
declare const module: any;
if (module.hot) {
module.hot.accept('./app', () => render(App));
}
```
Then you should see the expected messages / get the expected behaviour:
```
[HMR] Updated modules:
// ...
[HMR] App is up to date.
```
---
### Can't Build
#### Cannot resolve 'file' or 'directory' `react/lib/ReactMount`
If you're using a precompiled React instead of `react` npm package, React Hot Loader configuration will need a few tweaks. See [Usage with External React](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#usage-with-external-react).
Make sure you have `'.js'` in `resolve.extensions` section of Webpack config, or Webpack won't be able to find any JS files without explicitly specifying extension in `require`.
#### SyntaxError: 'import' and 'export' may only appear at the top level
If you're using React Hot Loader together with [Babel](https://babeljs.io/) (ex 6to5), make sure React Hot Loader stays **to the left** of Babel in `loaders` array in Webpack config:
```js
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }
```
Webpack applies `loaders` right to left, and we need to feed Babel's _output_ to React Hot Loader, not vice versa.
#### Error: Invalid path './' (or similar)
If you're using a relative output path in your Webpack config, wrap it in a call to `path.resolve()`:
```js
var path = require('path');
module.exports = {
...,
output: {
path: path.resolve('./my-relative-path'),
...
}
};
```
If you used WebpackDevServer CLI mode and after switching to Node it crashes with `Error: Invalid path ''`, you probably didn't have `path` specified in `output` at all. You can just put `path: __dirname` there, as it won't matter for development config.
### Module not found: Error: Cannot resolve module 'react-hot-loader'
Most likely you used `npm link` or `yarn link` to use a development version of a package in a different folder, and React Hot Loader processed it by mistake. Read the guide about linking package in [README linking section](../README.md#linking)
---
### Page Throws an Error
#### Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined
#### Uncaught TypeError: Cannot read property 'env' of undefined
#### [socket.io] Cannot use 'in' operator to search for 'document' in undefined
Make sure you have `exclude: /node_modules/` or, better, `include: path.join(__dirname, 'src')` (path depends on your application) in loader configuration [just like on this line](https://github.com/gaearon/react-hot-boilerplate/blob/fbdbd93956241320bc3960d350c4dd0030cc6e84/webpack.config.js#L27). You never need to process `node_modules` with React Hot Loader. If you use other loaders such as `jsx?harmony` or `babel`, most likely they **also** need to have `include` specified.
---
### Can't Hot Reload
Generally, the best way to fix this class of errors is to compare your setup to [React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate) very carefully and see what's different.
#### Try WebpackDevServer Node Interface Instead of CLI!
WebpackDevServer CLI mode [behaves slightly differently](https://github.com/webpack/webpack-dev-server/issues/106) from its Node API. When in doubt, I suggest you use Node API like [React Hot Boilerplate does](https://github.com/gaearon/react-hot-boilerplate/blob/master/server.js).
#### Check your NODE_ENV value
If you are seeing an error like this:
```
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.
```
You may have `NODE_ENV` set to either `production` or `test`. Setting `NODE_ENV` to either of these will cause `react-hot-loader` to compile in production mode. Try setting `NODE_ENV` to something like `development`.
#### Uncaught RangeError: Maximum call stack size exceeded
When using WebpackDevServer CLI flag `--hot`, the plugin `new HotModuleReplacementPlugin()` should not be used and vice versa, they are mutually exclusive but the desired effect will work with any of them.
#### No 'Access-Control-Allow-Origin' header is present on the requested resource.
If you're trying to access Webpack Dev Server from a URL served on another port, you may try:
* Changing `WebpackDevServer` options to include CORS header:
```js
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
headers: { 'Access-Control-Allow-Origin': '*' },
});
```
* Making sure that `webpack-dev-server` **client host and port** in `webpack.config.js` matches those of your development server:
```js
entry: [
'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server',
'./src/app',
];
```
#### The following modules couldn't be hot updated: (They would need a full reload!)
**If you get this warning when editing a root component**, this may be because you don't export anything from it, and call `React.render` from there. Put your root component in a separate file (e.g. `App.jsx`) and `require` it from `index.js` where you call `React.render`.
You also get this warning in v1.x if you write your root component as [stateless plain function](http://facebook.github.io/react/docs/reusable-components.html#stateless-functions) instead of using `React.Component`. This problem is already solved completely in the upcoming [v3.x](https://github.com/gaearon/react-hot-boilerplate/pull/61).
This warning may also appear **if you edit some non-component file** which is `require`d from files other than components. This means hot update bubbled up, but the app couldn't handle it. This is normal! Just refresh.
If you get this warning **together with a 404 for `hot-update.json` file**, you're probably using an ancient version of `webpack-dev-server` (just update it).
#### I see “[WDS] Hot Module Replacement enabled” but nothing happens when I edit `App.js`
If you're running Node 0.11.13, you might want to try updating to 0.12. Some people reported this helped solve this problem. Also **make sure that your `require`s have the same filename casing as the files.** Having `App.js` and doing `require('app')` might trip the watcher on some systems.
OS X also has a rarely-occuring bug that causes some folders to get 'broken' with regards to file system change monitoring. Here are some suggested [fixes](http://feedback.livereload.com/knowledgebase/articles/86239).
#### I see “[HMR] Nothing hot updated.” and nothing happens when I edit `App.js`
If you have several entry points in `entry` configuration option, make sure `webpack/hot/only-dev-server` **is in each of them:**
```js
entry: {
app: ['./src/app', 'webpack/hot/only-dev-server'],
editor: ['./src/editor', 'webpack/hot/only-dev-server'],
...,
client: 'webpack-dev-server/client?http://localhost:3000'
}
```
You will have to include "client.js" in your host page for the hot updates to work. For example:
```html
```
The entry points that don't have `webpack/hot/only-dev-server` (or `webpack/hot/dev-server` if you fancy occasional reloads) won't know how to apply hot updates.
#### Syntax error: Unexpected token <
If you combine WebpackDevServer with an existing server like Express and get this error message on hot updates, it is because Webpack is configured to request hot updates _from the current hostname_. So if your Express server is on `8000` and `publicPath` in Webpack config is `/build/`, it will request hot updates from `http://localhost:8000/build/`, which in your case is served by Express. Instead, you need to set `publicPath` to point to the port where WebpackDevServer is running. For example, it could be `http://localhost:9000/build/`.
#### Not enough watchers
Verify that if you have enough available watchers in your system. If this value is too low, the file watcher in Webpack won't recognize the changes:
```
cat /proc/sys/fs/inotify/max_user_watches
```
Arch users, add `fs.inotify.max_user_watches=524288` to `/etc/sysctl.d/99-sysctl.conf` and then execute `sysctl --system`. Ubuntu users (and possibly others): `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`.
#### 404 errors for `hot-update.json` files
First, make sure you have recent versions of Webpack and Webpack Dev Server (>= 1.7 is fine). Earlier versions use 404 code when no updates were available, so it wasn't technically an error.
Now, take a look at the path where they are requested. Webpack uses `output.publicPath` from Webpack config to determine this path. If you forget to specify it, Webpack will request updates from a relative path to the current one, so any client-side routing will break it.
Normally you want it to be `'/'` if you're serving scripts from root, something like `'/scripts/'` if you have a virtual path for scripts, and something like `'http://localhost:port/scripts/` if you're using Webpack only for scripts but have another primary server like Express. **This config variable must also match `publicPath` option specified when creating `WebpackDevServer` instance.** [Take a look at React Hot Boilerplate](https://github.com/gaearon/react-hot-boilerplate/blob/master/server.js#L6) to get an idea.
---
### Misc
#### It's slowing down my build!
Make sure you have `include` limited to your app's modules in loader configuration [just like on this line](https://github.com/gaearon/react-hot-boilerplate/blob/fbdbd93956241320bc3960d350c4dd0030cc6e84/webpack.config.js#L27). You never need to process `node_modules` with React Hot Loader.
#### My bundle is so large!
Make sure you have separate configs for development and production. You don't need `react-hot` in `loaders` or `webpack-dev-server/client` or `webpack/hot/only-dev-server` in production config. They are only for development. For easier maintenance, you can set an environment variable before invoking Webpack and read it in config.
Also make sure you have these plugins in production config:
```js
// removes a lot of debugging code in React
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
// keeps hashes consistent between compilations
new webpack.optimize.OccurrenceOrderPlugin(),
// minifies your code
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
});
```
Oh, and don't forget to remove `devtool: 'eval'` from a production config. Otherwise Uglify won't uglify anything at all.
#### I can access my Single Page App (SPA) only via `/` on refresh
The problem is that by default **WebpackDevServer** doesn't deal with HTML5 History correctly and the server won't route the url as it should. You can fix this issue by setting `historyApiFallback: true`. Here's a full example:
```js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
historyApiFallback: true,
}).listen(port, ip, function(err) {
if (err) {
return console.log(err);
}
console.log('Listening at ' + ip + ':' + port);
});
```
After this you should be able to access your SPA via any url that has been defined in it.
#### React-hot-loader: a Unknown was found where a Unknown was expected.
The problem is that after hot module update some branches of React Tree differs from the previous versions.
As result React-hot-loader will not update these branches at all, and you may lose internal components state.
The `equality` of Components are defined as:
1. They have same variable names in the same files. Ie they are both MyComponent from MyComponent.js
2. They have same displayName and similar code.
> Note: similar code is not _equal_ code. RHL will stand some small changes in code, or even adding a new method in class.
#### Not all of my code got updated.
Hot module replacement is a tricky thing. Just double check that you are not exporting anything else from the
modules with `hot` exported components – functions, constants, anything NOT REACT.
`hot` function setups module self-acceptance. And it may be a dangerous thing.
#### RHL is not working for Electron or Parcel
`hot` function is not tested in these environments, yet. Please use `old school` AppContainer and setup HRM manually.
#### RHL is not working with Webpack DLL
React Hot Loader rely on a Babel transformation that register all exports in a global. That's why dependencies included in [Webpack DLL](https://webpack.js.org/plugins/dll-plugin/#dllplugin) will not work.
#### React-hot-loader: fatal error caused by XXX - no instrumentation found.
React-hot-loader found an Element without instrumentation due to a wrong configuration.
To fix this issue - just require RHL before React.
Example of a wrong configuration:
```js
import * as React from 'react';
import { hot } from 'react-hot-loader'; // React is not patched
```
Example of correct configurations:
```js
import { hot } from 'react-hot-loader';
import * as React from 'react'; // React is now patched
```
```js
import React from 'react';
import { hot } from 'react-hot-loader'; // React is now patched
```
================================================
FILE: examples/SSR/.babelrc
================================================
{
"presets": [
"env",
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-class-properties",
"dynamic-import-node"
]
}
================================================
FILE: examples/SSR/.gitignore
================================================
node_modules
================================================
FILE: examples/SSR/package.json
================================================
{
"name": "react-hot-loader-ssr",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack",
"start": "babel-node ./src/server.js",
"start:webpack": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"babel-cli": "^6.26.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "next",
"react-portal": "^4.1.2"
}
}
================================================
FILE: examples/SSR/src/App.js
================================================
import { hot, setConfig } from 'react-hot-loader';
import * as React from 'react';
import Counter from './Counter';
// import hidden from './HiddenComponent';
const App = () => (