extract-hoc-compose

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.

What it does

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.

Installation

$ yarn add extract-hoc-compose -D -E

Add "extract-hoc-compose/babel" to your Babel plugins before "react-hot-loader/babel".

Caveats

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/]
    },
]

See also

Inspired by extract-hoc.

License

MIT