Managing extra markup

[stemey]

A ResourceComponent is rendered dependening on whether it is a root component.

1. root component

The wrapper element is rendered by AEM in standard fashion. another <div/>is rendered to add the props of the root component. The props are a json string inside a <textarea/>

<wrapper by aem>
    <div data-react-server>
        {{renderBody}}
    </div>
    <textarea/>
</wrapper by aem>

1. not a root component

If it is not a rot component, then the wrapper element is rendered by the ResourceComponent's render method:

<wrapper by react>
    {{renderBody}}
</wrapper by react>

TODO

1. make sure that the html is the same in both cases.
2. relax requirements on renderBody method, so that it allows multiple React.ReactElements to be returned.