ember-angle-brackets-codemod icon indicating copy to clipboard operation
ember-angle-brackets-codemod copied to clipboard

Incorrect transformation of use of contextual component variable into a component invocation

Open kategengler opened this issue 5 years ago • 3 comments

 {{#power-select search=(perform searchThings)
    selected=selectedResult
    placeholder="Enter the thing..."
    loadingMessage="Searching..."
    onchange=(perform selectThing) as |fooResult|}}
      <span class="select-description">{{fooResult.attributes.thing-desc}}</span>
    {{/power-select}}

transformed to:

<PowerSelect
      @search={{perform searchThings}}
      @selected={{selectedResult}}
      @placeholder="Enter the thing..."
      @loadingMessage="Searching..."
      @onchange={{perform selectThing}} as |fooResult|>
      <span class="select-description"><fooResult.attributes.thing-desc /></span>
    </PowerSelect>

kategengler avatar Dec 30 '19 02:12 kategengler

Quick question: Isn't it this will be allowed? looking at this ember doc https://guides.emberjs.com/release/upgrading/current-edition/templates/ "Yielded components can also be invoked with angle bracket syntax".

The problem I see is that the codemod doesn't do this consistently

sophiaonion avatar Jan 16 '20 02:01 sophiaonion

In my example, if the yielded thing were a component, it would be correct and would work. The problem here is that it was not and the result of the codemod was a cryptic error such as "Component Sparkling water from Italy could not be found" that was hard to find the source. Since if it were a component, curly invocation would continue to work, I think the correct thing to do for ambiguous cases would be to leave it alone, and maybe log it.

kategengler avatar Jan 16 '20 13:01 kategengler

Haha, ok got it! Yeah I agree with you on that approach

sophiaonion avatar Jan 16 '20 17:01 sophiaonion