[mixed-mode] [idea] More composability.

[trusktr]

Alright, so I've adopted react-famous into my latest project (finally!). It's working great out of the box composing things like Scene, Node, and DOMElement together (using those components directly).

But now what I'm trying to do is get more organized, so I've got something like this:

    React.render(
        <Scene style={{width: '100%', height: '100%'}}>
            <FeatureMapView boardId={board._id}>
                {_.map(cards, card =>
                   <Card context={card} />
                )}
            </FeatureMapView>
        </Scene>,
        this.$('.board-container')[0]
    )

where FeatureMapView extends Node,

import Node             from 'react-famous/Node'

class FeatureMapView extends Node {
    ...
}

and the Card component contains a Node and DOMElement instead of extending any of them:

class Card extends React.Component {

    render() {
        let card = this.props.context
        return (
            <Node>
                <DOMElement>
                    <BlazeCardWrapper context={card} />
                </DOMElement>
            </Node>
        )
    }
}

. The BlazeCardWrapper component just renders some normal HTML in the DOMElement.

The problem is, now that I've wrapped Node and DOMElement inside of my Card class, they don't become part of the scene graph as I was hoping. I was hoping to have the following hierarchy:

Scene
  FeatureMapView // (extends Node)
    Node // wrapped by Card, has DOMElement content

react-famous says

Error: Missing famous scene.

It would be great if we could allow for things to be wrapped/owned by other components in order to have more control of the scene graph composition.

Any ideas @pilwon?

[trusktr]

Aha, I found the immediate solution for my case, I just pass the _famousParent:

class Card extends React.Component {

    render() {
        let card = this.props.context
        return (
            <Node _famousParent={this.props._famousParent}> // <-- right here.
                <DOMElement>
                    <BlazeCardWrapper context={card} />
                </DOMElement>
            </Node>
        )
    }
}

[trusktr]

Maybe we can add some additional logic somewhere to do this automatically?

[trusktr]

If there is no immediate _famousParent, we can search up the tree for one.

I think that's what FamousUtil.getFamousParent(this) is supposed to do? If so, maybe I found a bug?

[jarrodpayne]

Any ideas here @pilwon?