ember-codemods / ember-angle-brackets-codemod

Codemod to convert curly braces syntax to angle brackets syntax

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

kategengler opened this issue · 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>

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

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.

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