Inspiration and making it work with "wrapper" component

[SamyPesse]

Hi @ericvicenti ! Thank you for your work.

I'm currently writing react-electron-menu, and I'm trying an approach similar to yours.

But I'm blocked with the render, which is similar to your renderToFS if my application uses a component like:

class DefaultEditMenu extends React.Component {
    render() {
        const { children } = this.props;

        return (
            <MenuItem id="edit" label="Edit">
                <MenuItem
                    label="Undo"
                    accelerator="CmdOrCtrl+Z"
                    onClick={this.onUndo}
                    />
                <MenuItem
                    label="Redo"
                    accelerator="Shift+CmdOrCtrl+Z"
                    onClick={this.onRedo}
                    />
                {children}
              </MenuItem>
        );
    }
}

Basically the render doesn't handle wrapper components.

The same issue will exist with react-fs-renderer, if I do something like (not tested):

class ProjectTemplate extends React.Component {
    render() {
        const { name, children } = this.props;

        return (
            <folder>
                 <file name="name.txt" children={`name is ${name}`} />
                  <folder name="src">
                        {children}
                  </folder>
            </folder>
        );
    }
}

class MyProject extends React.Component {
    render() {
        return (
            <ProjectTemplate name="test" />
        );
    }
}

The current rendering logic stops at the children of MyProject, and never "render" the <ProjectTemplate /> to get its children.

What will be the best solution to fix this ? Or do you have nay advice on how I can implement react-electron-menu ?

[SamyPesse]

Update: I'm now using react-test-renderer to render as JSON (this is a very hacky solution but it works).