Support for higher-order-components such as recompose

A pattern that I tend to use is the following:

import React from 'react';
import { withState } from 'recompose'; // or any of the HOCs from recompose

const enhancer = withState('value', 'setValue', 0);
const MyComponent = ({ value, setValue }) => (
  <div>
    <span>Value: {String(value)}</span>
    <button onClick={() => setValue(value + 1)}>Increment</button>
  </div>
);
export default enhancer(MyComponent);

Because MyComponent is not being exported as a const or default, it is not being picked up by babel-plugin-functional-hmr.

Is there a way I can adjust my pattern or is there something that could be done regarding babel-plugin-functional-hmr to get this experience working with HMR?

[ckknight]

@Gyran Thank you, this is working like a dream.

[Gyran]

We have a branch that supports that pattern (https://github.com/bvic23/babel-plugin-functional-hmr/compare/master...Yepstr:hoc). I’m not sure that it works 100% but it works good enough for us. If anyone want to continue to work on it I’d be glad to help.