connect decorators is unavailable with Babel 6 & it's messing with class inheritance

[singggum3b]

@connect((props)=>({
    imagesLoaded: Media.getters.imagesLoaded,
    headReady: Media.getters.headReady
}))
class MasterPage extends React.Component {
    constructor(props,context) {
        super(props,context);
    }
    buildPage(props,state) {
        return (
            <div className="page">
                I'm MasterPage
            </div>
        )
    }
    buildComponent(props, state) {
        return (
            <div className="app">
                {this.buildPage(props,state)}
                {props.children}
            </div>
        )
    }
    render() {
        console.log(this.buildPage); 
        return this.buildComponent(this.props,this.state);
    }
}

class IndexPage extends MasterPage {
    constructor(props,context) {
        super(props,context);
        console.log(this.buildPage);
    }
    buildPage(props,state) {
        return (
            <div className="index-page">
                I'm Index Page
            </div>
        )
    }
}

===>> buildPage always stuck with MasterPage class unless i'm explicitly override it in IndexPage. This more likely a problem with decorator support but nevertheless its making connect decorator unusable.

[Sinewyk]

1. Don't use inheritance. Use composition
2. You can probably ditch the decorator pattern until it's supported. You can use jscodeshift to do it through all your files ... anyway you just have to use it when exporting your file. the Decorator pattern is just sugar.

In case of 1, that means that IndexPage would simply become:

class IndexPage extends React.Component {
    constructor() {
        super();
    }
    render() {
        const children = this.props.children;
        // I'll suppose this.props.children can be a unique element for simplicity
        return <div className="index-page">
            {children}
        </div>;

        // OR
        return React.cloneElement(this.props.children, {
                className: children.props.className + ' index-page'
                // or use the classnames package
                className: classnames(children.props.className, 'index-page')
            });
        )
    }
}

// and use simply like that
<IndexPage>
    <MasterPage/> {/* Of course you'll have to rework MasterPage too */}
</IndexPage>