wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

Code generation bug with multiple rt-template siblings #163

Closed marcusrbrown closed 8 years ago

marcusrbrown commented 8 years ago

When multiple rt-template tags are siblings:

<div>
    <rt-template prop="onRenderList" arguments="className, style, isActive, listShown">
        <div class="lightbox-drop-down-menu"></div>
    </rt-template>
    <rt-template prop="onRenderOption" arguments="className, style, option">
        <div class="lightbox-drop-down-lir">{option}</div>
    </rt-template>
</div>

the following code is generated:

import * as React from 'react/addons';
import * as _ from 'lodash';
export default function () {
    function onRenderList1(className, style, isActive, listShown) {
        return React.createElement('div', { 'className': 'lightbox-drop-down-menu' });
    }
    function onRenderOption2(className, style, option) {
        return React.createElement('div', { 'className': 'lightbox-drop-down-lir' }, option);
    }
    return React.createElement('div', {
        'onRenderList': onRenderList1.bind(this),
        'onRenderOption': onRenderOption2.bind(this)
    }, React.createElement('rt-template', {
        'prop': 'onRenderOption',
        'arguments': 'className, style, option'
    }, React.createElement('div', { 'className': 'lightbox-drop-down-lir' }, option)));
}

The bug lies in the generateTemplateProps() function, where rt-template tags are generated into Component props and function bodies. After code is generated for a rt-template node, it's removed from its parent. The absolute child position is used to locate where the child is to be removed. This causes the following rt-template sibling to remove the wrong child as it also uses an absolute child position.

The fix is to adjust each rt-template child position based on how many rt-template siblings preceded it. I plan to submit a PR tonight that addresses this.