Higher order component should provide access to original

[ivan-kleshnin]

After this

@branch({
  cursors ...
})
class Foo extends Component {
}

and exposing proxied Foo there is no reference to original Foo. Since wrapper does not expose any method of original and does not provide a link to original, a bunch of useful techniques and strategies that were available with mixins become blocked. For example, data loading strategy described at Yomguithereal/baobab#170 is blocked because no property of original component can pass through this proxy.

Decorators use higher-order component (HOC) approach and in HOC that's the only place where original component is used:

render() {
  return <Component {...this.props} />;
}

I believe that HOC should still keep a link to a wrapped (original) component somehow.

This should be as easy as adding

var ComposedComponent = class extends React.Component {
  static original = Component; // +++
...

in both function root and function branch.

[Yomguithereal]

That's a sensible problem indeed. Do you know if any library is currently coping with this problem and how they might solve it?

[ivan-kleshnin]

Do you know if any library is currently coping with this problem and how they might solve it?

Unfortunately, no.

[ivan-kleshnin]

It was discussed in acdlite/flummox#173
@Gaeron proposes to solve it with decorators

function statics(a) {
  return b => Object.assign(b, a)
}

@statics({
  willTransitionTo(transition) {
    transition.abort();
  }
})
@connect({
  someStore: (store) => ({
    someProp: store.getSomeProp()
  })
})
export default class SomeRoute{
  render() {
    return <div>{this.props.someProp}</div>
  }
}

I've tried the same approach with Baobab-React and everything works fine.
You may want to mention this in docs somewhere.
So I'm gonna close this issue for now.

[Yomguithereal]

This seems a nice solution @ivan-kleshnin. I don't know if this already exist but I would love to see a tiny lib pack some of the more useful react-related decorators such as this @statics and @autobind.

[ivan-kleshnin]

Never met one. I will share a link if find.

[prescottprue]

I know this is old, but just incase anyone else was looking for a library:

This part of the react-docs points to a library called hoist-non-react-static, and it is used by react-redux's connect.

[Yomguithereal]

Hello @prescottprue. I don't remember if my HOC do this work properly. Do you want to open a PR?