Note: You should use react-hot-loader v4 (beta), wich solves issues with HOCs in a general way. You don't need extract-hoc and/or extract-hoc-compose to use it.
Super simple and super dumb babel plugin that extracts HOCs from compose method, enabling simultaneous usage of react-hot-loader and recompose.
It converts this:
const EnhancedComponent = compose(
enhancer1,
enhanver2,
enhancer3
)(Component);
Into this:
const _uid = enhancer3(Component);
const _uid2 = enhanver2(_uid);
const EnhancedComponent = enhancer1(_uid2);
Single variable declaration and 'compose' name are required.
$ yarn add extract-hoc-compose -D -E
Add "extract-hoc-compose/babel" to your Babel plugins before
"react-hot-loader/babel".
The plugin must run before 'react-hot-loader/babel', however Babel 6 does not respect plugin ordering. With webpack, possible solution is to run babel-loader twice:
rules: [
{
test: /\.jsx?$/,
use: [
'babel-loader',
{
loader: 'babel-loader',
options: {
plugins: ["extract-hoc-compose/babel"],
babelrc: false
}
},
],
exclude: [/node_modules/]
},
]
Inspired by extract-hoc.
MIT