Super Weird Bug

[jherdman]

Bear with me on this, but if you want to jump to the fun bits, here's the sample app https://github.com/jherdman/angle-bracket-bug

The gist is this:

<select>
  {{#each availableOptions as |option|}}
    <option>{{option}}</option>
  {{else}}
    <option>I'm not listing options</option>
  {{/each}}
</select>

(Obviously I'm defining availableOptions as an array of values)

Results in this:

The problem goes away if I change the yielded param's name, e.g. option to opt.

[rwjblue]

👋 - I suspect that things are working appropriately here.

This situation is specifically discussed in this section of the RFC. Here is a small snippet:

Notably, based on the rules laied out above, the following is perfectly legal:

{{!-- DON'T DO THIS --}}

{{#let (component "my-div") as |div|}}
  {{!-- here, <div /> referes to the local variable, not the HTML tag! --}}
  <div id="my-div" class="lol" />
{{/let}}

From a programming language's perspective, the semantics here is quite clear. A local variable is allowed to override ("shadow") another varible on the outer scope (the "global" scope, in this case), similar to what is possible in JavaScript:

let console = {
  log() {
    alert("I win!");
  }
};
console.log("Hello!"); // shows alert dialog instead of logging to the console

While this is semantically unambigious, it is obviously very confusing to the human reader, and we don't recommend anyone actually doing this.

A previous version of this RFC recommended statically disallowing these cases. However, after giving it more thoughts, we realized it should not be the programming language's job to dictate what are considered "good" programming patterns. By statically disallowing arbitrary expressions, it actually makes it more difficult to learn and understand the underlying programming model.

[jherdman]

Oh that makes total sense.

I think this issue is safe to close. I have lots to learn about these new fangled components.

On Wed, Jun 13, 2018, 20:39 Robert Jackson notifications@github.com wrote:

👋 - I suspect that things are working appropriately here. This situation is specifically discussed in this section of the RFC https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#dynamic-invocations. Here is a small snippet:

Notably, based on the rules laied out above, the following is perfectly legal:

{{!-- DON'T DO THIS --}} {{#let (component "my-div") as |div|}} {{!-- here,

referes to the local variable, not the HTML tag! --}}

{{/let}}

From a programming language's perspective, the semantics here is quite clear. A local variable is allowed to override ("shadow") another varible on the outer scope (the "global" scope, in this case), similar to what is possible in JavaScript:

let console = { log() { alert("I win!"); } };console.log("Hello!"); // shows alert dialog instead of logging to the console

While this is semantically unambigious, it is obviously very confusing to the human reader, and we don't recommend anyone actually doing this.

A previous version of this RFC recommended statically disallowing these cases. However, after giving it more thoughts, we realized it should not be the programming language's job to dictate what are considered "good" programming patterns. By statically disallowing arbitrary expressions, it actually makes it more difficult to learn and understand the underlying programming model.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/17#issuecomment-397130893, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAM5KHsjyiuKuJuvExKz9SlvRXHYnKnks5t8bDegaJpZM4Um5g9 .

[rwjblue]

You and me both!