rt-stateless w/ rt-scope - props is undefined

[steezeburger]

This works

<div class="inner" rt-stateless>
    <h4 class="fix position_bb w2060">You've been entered into the raffle:</h4>

    <h2 class="fix position_ccc">{ props.state.raffle.title }</h2>
    <h4 class="fix position_ddd w2060 hairline">{ props.state.raffle.description }</h4>
    <div class="button button_color btn_middle bold" onClick={props.onAckClick}>GREAT!</div>
</div>

but this does not:

<div class="inner" rt-stateless rt-scope="props.sate.raffle as raffle">
    <h4 class="fix position_bb w2060">You've been entered into the raffle:</h4>

    <h2 class="fix position_ccc">{ raffle.title }</h2>
    <h4 class="fix position_ddd w2060 hairline">{ raffle.description }</h4>
    <div class="button button_color btn_middle bold" onClick={props.onAckClick}>GREAT!</div>
</div>

it errors out and says props is not defined.

Not sure why this is happening. Even using an rt-virtual and not having rt-scope on the same element as rt-stateless didn't work.

[nippur72]

The playground gives a different error with this jsfiddle, but I think it's because of old react 0.13.

[nippur72]

This can be labeled as a bug.

The cause is that scope functions does not see arguments from render(). Previously that wasn't a problem because render() was argumentless, but now we have props and context.

I guess it can solved by putting scoped functions nested within the main render function.

From this:

function scope1() {
   ...
}
module.exports = function (props, context) {
    return scope1.apply(this, []);
};

to this:

module.exports = function (props, context) {
    function scope1() {
        ...
    }
    return scope1.apply(this, []);
};

[nippur72]

I wrote a PR that fixes this issue.

[steezeburger]

This popped up again today when trying to pass down props to another component inside an rt-stateless component.

<rt-require dependency="../../components/Reward/Reward.js" as="Reward" />

<div class="inner" rt-stateless>
    <h4 class="fix position_cc">Tap a reward to redeem:</h4>
    <div class="fix position_b pointer" id="rewards">
        <Reward rt-repeat="reward in props.state.providerRewards" rt-props="{onAction: props.onAction, reward: reward, key: rewardIndex, state: props.state}" />
    </div>
</div>

This will throw an error when creating the Reward component for this stateless component because props is not available. I'm not sure if your PR fixes this, just thought I'd mention it.

[nippur72]

@steezeburger it should fix it.

If you want to try it, you can install it directly from my fork:

npm uninstall react-templates --save
npm install git://github.com/nippur72/react-templates.git#gh-pages --save

Revert back to official release:

npm uninstall react-templates --save
npm install react-templates --save