ember-codemods / ember-angle-brackets-codemod Goto Github PK

The following input:

{{#link-to "about"}}About Us{{/link-to}}
{{#link-to this.dynamicRoute}}About Us{{/link-to}}

is transformed to:

<LinkTo @route="about">
  About Us
</LinkTo>
<LinkTo @route="">
  About Us
</LinkTo>

it should be transformed to:

<LinkTo @route="about">
  About Us
</LinkTo>
<LinkTo @route={{this.dynamicRoute}}>
  About Us
</LinkTo>

Having a hard time tracking down what is causing this code mod to get stuck based on this stack trace 🤔

Error: Transformation angle-brackets-syntax.js errored on file ./app/templates/components/reporting/access-deprecated-reports-banner.hbs. Reason TypeError: param.original.startsWith is not a function. Please report this in https://github.com/rajasegar/ember-angle-brackets-codemod/issues

Stack trace:
TypeError: param.original.startsWith is not a function
    at startsWith (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:395:68)
    at Array.filter (<anonymous>)
    at filter (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:395:19)
    at getDataAttributesFromParams (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:328:26)
    at transformLinkToAttrs (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:443:22)
    at transformNode (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:478:16)
    at visitNode (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:97:14)
    at visitArray (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:187:18)
    at visitKey (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:168:5)
    at visitNode (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:117:7)

Source:
{{#if deprecatedReports}}
  {{#main-content-banner type="warning"}}
    You’re viewing a previous version of reports which we’re deactivating on January 31, 2019 · <a {{action 'transitionToCurrentQueries'}}>Back to new version</a>
  {{/main-content-banner}}
{{else}}
  {{#dismissable-component name="deprecated-reports" as |dismissable|}}
    {{#if (not dismissable.dismissed)}}
      {{#main-content-banner type="info" class="u__cf"}}
        We’ve improved how we calculate certain metrics |
        {{#link-to 'changes.change' 557}}What’s changed{{/link-to}} · 
        <a {{action 'transitionToDeprecatedReports'}}>See old version</a>
        <a class="u__right" role="button" onClick={{action dismissable.onDismiss}}>
          {{ic-interface-icon 'close' solo=true}}
        </a>
      {{/main-content-banner}}
    {{/if}}
  {{/dismissable-component}}
{{/if}}

    at fs.readdirSync.forEach.fileName (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/-preset.js:24:19)
    at Array.forEach (<anonymous>)
    at forEach (/Users/adam/.npm/_npx/64449/lib/node_modules/ember-angle-brackets-codemod/transforms/-preset.js:16:8)```

related PR: https://github.com/rajasegar/ember-angle-brackets-codemod/pull/59

With the following input

{{link-to data-test-foo 'Title' 'some.route' data-test-bar}}

This is the current, incorrect output:

<LinkTo @route="Title" @model={{some.route}} data-test-bar />

It should be:

<LinkTo @route="some.route" data-test-foo data-test-bar>
  Title
</LinkTo>

Since we have transferred the repo, we need replace all the author references with ember-codemods org so that it will be easy for people to raise issues in the appropriate place like here

https://github.com/ember-codemods/ember-angle-brackets-codemod/issues

I came across this scenario where codemodding a specific inline link-to doesn't convert to the correct output. It's possibly to do with the dynamic positional param.

Before

{{link-to 
  segment.name 
  'apps.app.companies.segments.segment' 
  segment 
  class="t__em-link"
}}

After

Drops the segment.name

<LinkTo
  @route="apps.app.companies.segments.segment"
  @model={{segment}}
  class="t__em-link"
/>

Expected

<LinkTo
  @route="apps.app.companies.segments.segment"
  @model={{segment}}
  class="t__em-link"
>
  {{segment.name}}
</LinkTo>

I can take on fixing this.

@rajasegar the output from Travis does not show all the new tests. Can you look into this, please?

The codemod is currently not aware of the default structure of Ember projects. It might make sense to teach it about that so that it can automatically discover helpers from the app/helpers/ folder.

This probably would not work reliably for helpers from addons, but should certainly be a step forward.

{{foo/bar name=""}}

is currently transformed to:

<Foo::Bar @name />

it should be transformed to:

<Foo::Bar @name="" />

Input:

{{#liquid-if (gt rows.length 0)}}{{/liquid-if}}

Error:

Transformation error (Transformation angle-brackets-syntax.js errored on file app/templates/components/some-component.hbs. Reason TypeError: Cannot read property 'startsWith' of undefined.
Please report this in https://github.com/rajasegar/ember-angle-brackets-codemod/issues 
Stack trace: TypeError: Cannot read property 'startsWith' of undefined
     at startsWith (/home/user/.npm/_npx/13031/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:155:69)
     at Array.filter (<anonymous>)
     at filter (/home/user/.npm/_npx/13031/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:155:38)
     at tranformValuelessDataParams (/home/user/.npm/_npx/13031/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:193:44)
     at visitNode (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:97:14)
     at visitArray (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:187:18)
     at visitKey (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:168:5)
     at visitNode (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:117:7)
     at Object.traverse (../../../../../packages/@glimmer/syntax/lib/traversal/traverse.ts:231:3)
     at traverse (/home/user/.npm/_npx/13031/lib/node_modules/ember-angle-brackets-codemod/transforms/angle-brackets/transforms/angle-brackets-syntax.js:161:11)
Source: {{#liquid-if (gt rows.length 0)}}{{/liquid-if}} )

Also, if the condition/argument is changed then it doesn't throw this error yet produces incorrect output (interprets helper name as component name):

Input 2:

{{#liquid-if foo}}{{/liquid-if}}

Output:

<LiquidIf />

This appears to be related to #12

After I ran, I get a bunch of lint errors for

https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/self-closing-void-elements.md

Both of these tools is provided by ember, so there should be some consensus right?

related to my comment here #57 (comment)

It seems that glimmer's printer might be doing this:

https://astexplorer.net/#/gist/bef864eb53e6e4666a34d9b8cc16dfa2/ae0aae9f2891948f24a7c34b9caa4456f882faf9

The AST is correct, the rendered output isn't:

After https://github.com/rajasegar/ember-angle-brackets-codemod/pull/17 lands, transforming data-test-accordion=true works:

{{#common/accordion-component data-test-accordion=true as |accordion|}}
  block
{{/common/accordion-component}}

<Common::AccordionComponent data-test-accordion={{true}} as |accordion|>
  block
</Common::AccordionComponent>

Transforming data-test-accordion on it's own doesn't however:

{{#common/accordion-component data-test-accordion as |accordion|}}
  block
{{/common/accordion-component}}

<Common::AccordionComponent as |accordion|>
  block
</Common::AccordionComponent>

<input type='text' value={{userValue}} oninput={{action 'change' value='target.value'}} class="{{if invalid 'invalid-input'}}">
transformed to
<input type="text" value={{userValue}} oninput=<Action @value="target.value"></Action> class="{{if invalid "invalid-input"}}"> with error SyntaxError: Closing tag `Action` (on line 1) without an open tag. (1:0)

We seem to be dropping helper named arguments:

input:

{{some-component person=(hash name="Sophie" age=1)}}
{{some-component
  people=(array
    (hash name="Alex" age=5)
    (hash name="Ben" age=4)
    (hash name="Sophie" age=1)
  )
}}

current output:

<SomeComponent @person={{hash}} />
<SomeComponent @people={{array (hash) (hash) (hash)}} />

TODO:

• better support named arguments: https://github.com/rajasegar/ember-angle-brackets-codemod/pull/25
• support mixed positional and names arguments: https://github.com/rajasegar/ember-angle-brackets-codemod/pull/26

Running the codemod on:

{{#link-to (query-params direction="desc" showArchived=false)}}
  Recent Posts
{{/link-to}}

outputs

<LinkTo @route="">
  Recent Posts
</LinkTo>

Should be

<LinkTo @query={{hash direction="desc" showArchived=false}}>
  Recent Posts
</LinkTo>

Will take a look at fixing this myself

Now the codemod transforms just convert the block params syntax as such with the dot notation which is not the right syntax proposed.

Original curly brace syntax:

{{site-header user=this.user class=(if this.user.isAdmin "admin")}}

{{#super-select selected=this.user.country as |s|}}
  {{#each this.availableCountries as |country|}}
    {{#s.option value=country}}{{country.name}}{{/s.option}}
  {{/each}}
{{/super-select}}

Expected output:

<SiteHeader @user={{this.user}} class={{if this.user.isAdmin "admin"}} />

<SuperSelect @selected={{this.user.country}} as |Option|>
  {{#each this.availableCountries as |country|}}
    <Option @value={{country}}>{{country.name}}</Option>
  {{/each}}
</SuperSelect>

Actual Output:

<SiteHeader @user={{this.user}} class={{if this.user.isAdmin admin}}></SiteHeader>

<SuperSelect @selected={{this.user.country}} as |s|>
{{#each this.availableCountries as |country|}}    
<S.option value={{country}}>{{country.name}}</S.option>
{{/each}}</SuperSelect>

Politely lift https://github.com/lifeart/ember-ast-hot-load/blob/master/lib/ast-transform.js#L26 to be a default set of helpers within the transform to work alongside @GavinJoyce helper blacklist

The codemod supports transforming only a limited set of HTML attributes. Need to add all the attributes in this list:

const HTML_ATTRIBUTES = [
  "class",
  "value",
  "title",
  "label",
  "placeholder",
  "required"
];

https://github.com/rajasegar/ember-angle-brackets-codemod/blob/52a6b8ba9d4038aa55b95ff288052e9834a7ae77/transforms/angle-brackets/transforms/angle-brackets-syntax.js#L146

1.) we can suggest - all items without - - helpers
2.) items, having - in name and not having @, . in name - components
3.) items, having / in name - components

Need to make the codemod work with ember-template-recast - A Non-destructive template transformer by @rwjblue
https://github.com/ember-template-lint/ember-template-recast

Input of < > × is resulting in output of < > ×

related issue: glimmerjs/glimmer-vm#833

There seems to be two directories where the test files live, __testFixtures__ and __testfixtures__:

When I run npm test on linux, only the tests in __testfixtures__ seem to run.

Weirdly, when I checkout this project on OSX I only see one directory:

We should detect attributes that begin with data-*, they are commonly used with https://github.com/simplabs/ember-test-selectors.

Input:

{{x-foo data-foo=true}}
{{x-foo data-test-selector=true}}
{{x-foo data-test-selector=post.id}}
{{x-foo label="hi" data-test-selector=true}}

{{#x-foo data-foo=true}}
  block
{{/x-foo}}

{{#x-foo data-test-selector=true}}
  block
{{/x-foo}}

{{#x-foo data-test-selector=post.id}}
  block
{{/x-foo}}

Current Output:

<XFoo @data-foo={{true}} />
<XFoo @data-test-selector={{true}} />
<XFoo @data-test-selector={{post.id}} />
<XFoo @label="hi" @data-test-selector={{true}} />
<XFoo @data-foo={{true}}>
  block
</XFoo>
<XFoo @data-test-selector={{true}}>
  block
</XFoo>
<XFoo @data-test-selector={{post.id}}>
  block
</XFoo>

Suggested Output:

<XFoo data-foo={{true}} />
<XFoo data-test-selector={{true}} />
<XFoo data-test-selector={{post.id}} />
<XFoo @label="hi" data-test-selector={{true}} />
<XFoo data-foo={{true}}>
  block
</XFoo>
<XFoo data-test-selector={{true}}>
  block
</XFoo>
<XFoo data-test-selector={{post.id}}>
  block
</XFoo>

With the following input (from a component which renders some example JavaScript for human consumption):

someFunction({
  {{#unless installationIsAnonymous}}
    console.log("hi");
  {{/unless}}
});

Prettier seems to reformat it into:

someFunction({
{#unless installationIsAnonymous}}    console.log("hi");
{{/unless}}});

Which then fails the idempotent test:

SyntaxError: Parse error on line 3:
    ...log("hi");{{/unless}}});
    ----------------------^
    Expecting 'CLOSE', got 'CLOSE_UNESCAPED' (3:0)
      1 | someFunction({
      2 | {{#unless installationIsAnonymous}}    console.log("hi");
    > 3 | {{/unless}}});. Please report this in https://github.com/rajasegar/ember-angle-brackets-codemod/issues

...attributes to ...attributes=""

It looks like we drop the positional param on components like vertical-collection. It looks like this is expected. See my comment below

This is a slightly simplified code sample from the vertical collection guides. Notice we lose the items positional param after the transform.

// BEFORE
{{#vertical-collection
    items
    tagName='ul'
    estimateHeight=50 as |item i|}}
    <li>
      {{item.number}} {{i}}
    </li>
{{/vertical-collection}}

// AFTER
<VerticalCollection @tagName="ul" @estimateHeight="50" as |item i|>
  <li>
    {{item.number}}
    {{i}}
  </li>
</VerticalCollection>

// EXPECTED - Edit: Not accurate. Angle bracket components don't support positional params
<VerticalCollection items @tagName="ul" @estimateHeight="50" as |item i|>
  <li>
    {{item.number}}
    {{i}}
  </li>
</VerticalCollection>

Also it appears estimateHeight=50 is being transformed to @estimateHeight="50" which means it's no longer a number. I might make another issue for this.

The following input:

{{#link-to data-test-foo "posts"}}
  Recent Posts
{{/link-to}}

results in:

<LinkTo @route={{data-test-foo}} @model={{posts}}>
  Recent Posts
</LinkTo>

it should be:

<LinkTo @route="posts" data-test-foo>
  Recent Posts
</LinkTo>

{{link-to
   'Segments'
   'apps.segments'
   class='tabs__discrete-tab'
   activeClass='o__selected'
   current-when='apps.segments'
   data-test-segment-link='segments'
 }}

currently transforms to:

<LinkTo
   class="tabs__discrete-tab"
   @activeClass="o__selected"
   @current-when="apps.app.account.visibility.user-segments"
   data-test-segment-link="user-segments"
/>

it should transform to:

<LinkTo
   @route="apps.segments"
   class="tabs__discrete-tab"
   @activeClass="o__selected"
   @current-when="apps.app.account.visibility.user-segments"
   data-test-segment-link="user-segments"
>
  Segments
</LinkTo>

see prettier/prettier#6184

Input:

<p>You username is @{{name}}</p>
<p>Hi {{firstName}} {{lastName}}</p>

Output:

<p>
  You username is @
  {{name}}
</p>
<p>
  Hi
  {{firstName}}
  {{lastName}}
</p>

Expected behavior:

I think this is the desired output:

<p>
  You username is @{{name}}
</p>
<p>
  Hi {{firstName}} {{lastName}}
</p>

The codemod is currently converting required arguments to required attributes, instead of @required arguments. This might be fine for <Input> (is it?), but certainly not for all components.

The same applies for placeholder vs. @placeholder.

The codemod also does something similar for class, but I suspect in that case it should be fine.

It will surely help all the contributors of the project to identify and troubleshoot a particular bug if we have setup some quick debugging documentation.

I just found out that it was really easy to debug the codemod with two things:

1. Node inspect and debugging with Chrome
2. Selectively running tests with Jest

Will create a PR for the same asap
@GavinJoyce @rwjblue @tylerturdenpants Please share your thoughts also

Currently, the codemod is not preserving the code format properly, there are some missing indentations and line breaks. Need to fix this.

Giving this a spin I'm getting an error on the first template I try to convert... Any obvious thoughts?

npx ember-angle-brackets-codemod angle-brackets packages/plhw-client/app/pods/style-guide/template.hbs --config ./config/anglebrackets-codemod-config.json

Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
/Users/bas/.config/yarn/global/node_modules/@babel/generator/lib/source-map.js:30
      const map = this._cachedMap = new (_sourceMap().default.SourceMapGenerator)({
                                    ^

TypeError: _sourceMap(...).default.SourceMapGenerator is not a constructor
    at SourceMap.get (/Users/bas/.config/yarn/global/node_modules/@babel/generator/lib/source-map.js:30:37)
    at Object.get (/Users/bas/.config/yarn/global/node_modules/@babel/generator/lib/buffer.js:58:33)
    at generateCode (/Users/bas/.config/yarn/global/node_modules/@babel/core/lib/transformation/file/generate.js:71:7)
    at runSync (/Users/bas/.config/yarn/global/node_modules/@babel/core/lib/transformation/index.js:50:51)
    at transformSync (/Users/bas/.config/yarn/global/node_modules/@babel/core/lib/transform.js:43:38)
    at Object.transform (/Users/bas/.config/yarn/global/node_modules/@babel/core/lib/transform.js:22:38)
    at compile (/Users/bas/.config/yarn/global/node_modules/@babel/register/lib/node.js:73:20)
    at compileHook (/Users/bas/.config/yarn/global/node_modules/@babel/register/lib/node.js:102:12)
    at Module._compile (/Users/bas/.config/yarn/global/node_modules/pirates/lib/index.js:93:29)
    at Module._extensions..js (module.js:664:10)
All done. 
Results: 
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 1.382seconds 

It seems that support for angle bracket invocation for built in components (RFC) is currently behind a ember-glimmer-angle-bracket-built-ins feature flag and isn't available to apps running the latest Ember version (3.9.1 at the time of opening this issue).

In order to make this codemod useful to people running existing Ember apps that want to incrementally move to angle brackets invocation, we should add a configuration option which allows them to disable conversion of {{link-to}}, {{input}} and {{text-area}}.

This issue is twofold.

Firstly, the codemod messes with templates too much. It modifies fragments that aren't related to curly/anglebracket components. It does so by adding extra whitespace and thus messing with PR diff and git blame more than it should.

I have to manually walk hundreds of templates and undo irrelevant changes by hand.

Some files contain no component invocations at all and were nevertheless heavily modified.

Secondly, it converted this:

#{{key}}: {{value}}

to this:

#
{{key}}
:
{{value}}

This is not an equivalent change, it messes with visual representation for the user.

Luckily, this one was caught by tests, but who knows how many more regressions like this the codemod caused.

Input:

{{! works }}
{{some-component
    class=(concat foo (some-helper bar))
}}

{{! attempts to rewrite nested helper arguments as delimited by commas instead of spaces }}
{{some-component
    class=(concat foo (some-helper bar quuz))
}}

Output:

Error: Transformation angle-brackets-syntax.js errored on file app/templates/components/some-component.hbs. Reason SyntaxError: Parse error on line 3:
...at foo (some-helper bar,quuz)}}></SomeCo
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', 'SEP', got 'INVALID' (3:0)
  1 | {{!-- works --}}<SomeComponent class={{concat foo (some-helper bar)}}></SomeComponent>
  2 | 
> 3 | {{!-- attempts to rewrite nested helper arguments as delimited by commas instead of spaces --}}<SomeComponent class={{concat foo (some-helper bar,quuz)}}></SomeComponent>
  4 | . Please report this in https://github.com/simonihmig/ember-test-helpers-codemod/issues

Given the following input:

{{link-to
  'Users'
  'apps.app.users.segments.segment'
  'all-users'
  (query-params searchTerm=searchTerm)
}}

This is the current incorrect output:

<LinkTo
  @route="apps.app.users.segments.segment"
  @models={{array "all-users" (query-params searchTerm=searchTerm)}}
>
  Users
</LinkTo>

It should be:

<LinkTo
  @route="apps.app.users.segments.segment"
  @model="all-users"
  @query={{hash searchTerm=searchTerm}}
>
  Users
</LinkTo>

After the codemod is moved to the ember-codemods org, the coveralls integration need to be set up properly, since the coverage information is not available for the repo at present.

The following input:

<div>
  {{~both~}}
</div>
<div>
  {{~left}}
</div>
<div>
  {{right~}}
</div>

results in the incorrect output:

<div>
  {{both}}
</div>
<div>
  {{left}}
</div>
<div>
  {{right}}
</div>

we should leave ~s in place

I’ve slowly been moving the general community codemods that I’ve made into the ember-codemods GitHub org. Mostly as a way to:

• increase visibility
• reduce bus factor

We’d make sure to preserve the current permissions (e.g. no reduction in control) if we did the transition.

Would this be something y’all would be open to?

Hi, it would be great to have an option to convert just one component at a time. In a large codebases, it's easier and safer to change one thing at a time rather whole codebase and then pray that it won't break.

Something like run-codemood <component-name>.

Given:

{{x-foo data-test-foo }}

Result:

<XFoo data-test-foo={{true}} />

Expected:

<XFoo data-test-foo />

Some of us use Emblem for templating in Ember projects. Emblem files are eventually converted to Handlebars during the build process.

Handlebars Syntax:

<SuperSelect @selected={{this.user.country}} as |s|>
  {{#each this.availableCountries as |country|}}
    <s.option @value={{country}}>
      {{country.name}}
    </s.option>
  {{/each}}
</SuperSelect>

Emblem Syntax without Angle Bracket syntax:

= super-select selected=this.user.country as |s|
  each this.availableCountries as |country|
    = s.option value=country
      = country.name

Emblem Syntax using Angle Bracket syntax:

% SuperSelect @selected=this.user.country as |s|
  each this.availableCountries as |country|
    = s.option @value=country
      = country.name

Multiline syntax without Angle Bracket syntax:

= my-component [
  show=true
  class='btn'
]

Multiline syntax with Angle Bracket syntax:

% MyComponent [
  @show=true
  class='btn'
]

The input:

{{#power-calendar as |calendar|}}
  {{calendar.days}}
{{/power-calendar}}

is currently converted to:

<PowerCalendar as |calendar|>
  {{calendar.days}}
</PowerCalendar>

ideally (as we know that it's a component) , it should be:

<PowerCalendar as |calendar|>
  <calendar.days />
</PowerCalendar>

I'm not sure that we can do more than warn here, {{calendar.days}} is ambiguous - it could be a component or it could be a property. Perhaps we should emit a warning?

Need to support other block helpers apart from each and if.

const ignoreBlocks = [
  "each",
  "if"
];

my application is localized and uses the t helper from ember-intl that I think should be ignored by this codemod, since it doesn't support angle bracket invocation.

{{! current input }}
{{t "some.string" param=1}}

{{! current output }}
<T 
  @param=1 
/>

I have some bandwidth to open a pull request, but just a couple items I could use some input on:

• should we assume t is ember-intl/ember-i18n across the board or make it something you opt in to?
• my initial thought on implementation was to add t to IGNORE_MUSTACHE_STATEMENTS - any objections or should it be its own thing? as in "third party" things vs. Ember things

When converting components you can sometimes get capitalization inconsistencies which causes issues in rendering. For example let's say I have this component:

{{my-card as |card|}}
	{{card.title title="My Card Title"}}
	{{#card.content}}
	...
	{{/card.content}}
{{/my-card}}

The codemod would turn it into this:

<MyCard as |card|>
	<Card.title
	  @title="My Card Title" 
	 />
	<card.content>
	...
	</card.content>
</MyCard>

The capitalization of Card in <Card.title creates issues after having MyCard references as |card|. It's not tricky to manually fix, but tracing the issue can be tricky if you don't know what you're looking for.

Given the following input:

{{some-component selected=(is-equal this.bar null)}}
{{some-component selected=(is-equal this.bar undefined)}}

This the current output:

<SomeComponent selected={{is-equal this.bar}} />
<SomeComponent selected={{is-equal this.bar}} />

It should be:

<SomeComponent selected={{is-equal this.bar null}} />
<SomeComponent selected={{is-equal this.bar undefined}} />

link-to helper transformed to LinkTo

...which results in

Uncaught TypeError: Cannot read property 'propertyKey' of undefined
    at action (glimmer.js:7407)

The worst part is that it's absolutely impossible to debug this issue from the dev tools, since Glimmer opcodes are incomprehensible to human.

And if you leave the tab open, it will keep rendering recursively until it freezes!

🙈