ember-angle-brackets-codemod
ember-angle-brackets-codemod copied to clipboard
ember-codemods
Trouble getting codemod to run on my project
I tried to run this codemod on one of EmberMap's templates and I'm having trouble getting it to work. It's strange because I just used this on a different project the other day.
Here's the command I ran:
npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs
And the template seems pretty standard:
View template
{{page-info
title='About EmberMap'
replaceTitle=true
description='Meet Sam and Ryan, the creators of EmberMap'}}
<div class="bg-black text-white">
<div
class='bg-cover lgg:bg-auto bg-center bg-no-repeat'
style={{html-safe (concat
"background-image: url("
(img-url '/assets/images/about/hero.jpg')
")"
)
}}
>
{{#ui-container}}
<div class="py-5">
<div class='py-3'>
{{#ui-p style='large narrow'}}
We wanted a fast, easy and beautiful way to share conventional Ember.js techniques with our team.
{{/ui-p}}
{{#ui-p style='large narrow'}}
So we made EmberMap.
{{/ui-p}}
</div>
</div>
{{/ui-container}}
</div>
</div>
{{#ui-container}}
<div class="py-5">
<div class="mb-4">
{{ui-title text='We love Ember'}}
<div class="xs:flex">
<div>
{{#ui-p}}
We’re strong believers in the power of conventions, and think a team that’s on board with the larger Ember community will be able to build products faster without accruing technical debt.
{{/ui-p}}
</div>
<div class="xs:ml-5 mt-5 xs:mt-0 flex-grow lg:block">
<img src="/assets/images/about/video-player.png"
class="h-auto"
width="320"
height="202" />
</div>
</div>
</div>
<div class="mt-5 xs:mt-0">
{{ui-title text="What we're making"}}
{{#ui-p}}
We’re creating high-quality, focused videos and articles that teams can use to onboard
new developers, refine their process, and serve as a springboard for
discussion on how to solve unique problems facing their own organization.
{{/ui-p}}
</div>
</div>
{{/ui-container}}
<hr class="my-4 max-w-512 text-grey-light border border-t-1"/>
<div class="py-5 py-3 px-4 lg:px-0">
<div class="text-center mb-5">
{{#ui-title style='headline'}}
Meet the team
{{/ui-title}}
</div>
<div class="mx-auto max-w-768">
<div class="flex items-center justify-center flex-col md:flex-row mb-6">
<div class="p-4 mb-3 max-w-256">
<img src="/assets/images/sam.jpg" class="rounded-full" />
</div>
<div class="md:ml-3">
{{#ui-title}}
Sam Selikoff
{{/ui-title}}
{{#ui-p}}
Sam is the creator of Ember CLI Mirage, a top Ember addon. He loves teaching and helping teams effectively use Ember.
{{/ui-p}}
<div class="text-center md:text-left">
<a href="https://github.com/samselikoff"
class="inline-block pr-3 text-2 text-grey-darkest">{{fa-icon 'github' prefix="fab"}}</a>
<a href="https://twitter.com/samselikoff"
class="inline-block text-2 text-grey-darkest">{{fa-icon 'twitter' prefix="fab"}}</a>
</div>
</div>
</div>
<div class="flex items-center justify-center flex-col md:flex-row mb-4">
<div class="p-4 mb-3 max-w-256">
<img src="/assets/images/ryan.jpg" class="rounded-full" />
</div>
<div class="md:ml-3">
{{#ui-title}}
Ryan Toronto
{{/ui-title}}
{{#ui-p}}
Since 2012 Ryan has shipped dozens of production Ember applications for
both web and mobile devices, in addition to contributing code back to
Ember.js.
{{/ui-p}}
<div class="text-center xs:text-left">
<a href="https://github.com/ryanto"
class="inline-block pr-3 text-2 text-grey-darkest">{{fa-icon 'github' prefix="fab"}}</a>
<a href="https://twitter.com/ryantotweets"
class="inline-block text-2 text-grey-darkest">{{fa-icon 'twitter' prefix="fab"}}</a>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4 max-w-512 text-grey-light border border-t-1"/>
{{#ui-container}}
<div class="my-6 xs:flex">
<div class="xs:w-1/2 lg:w-auto">
{{ui-title text='Open source work'}}
{{#ui-p}}
We believe open source is at the heart of the
Ember community's success. This is why our videos focus on
open-source solutions, and why we support projects like
<a href="http://www.ember-cli-mirage.com/"
class="text-em-orange no-underline">Ember CLI Mirage</a>.
{{/ui-p}}
</div>
<div class="xs:w-1/2 lg:w-auto xs:pl-5 mt-5 xs:mt-0 text-center xs:text-left">
{{ui-title text='Follow us'}}
<div>
<a href="https://github.com/embermap"
class="inline-block w-64 mr-4">
<img src="/assets/images/social/github.png"/>
</a>
<a href="https://twitter.com/ember_map"
class="inline-block w-64 mr-4">
<img src="/assets/images/social/twitter.png"/>
</a>
<a href="https://medium.com/embermap"
class="inline-block w-64">
<img src="/assets/images/social/medium.png"/>
</a>
</div>
</div>
</div>
{{/ui-container}}
The codemod runs then says that there was 1 unmodified file. There were some errors.
View terminal output
npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs Downloading Chromium r686378 - 110.2 Mb [====================] 100% 0.0s
error evaluating `@fortawesome/free-brands-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `@fortawesome/free-solid-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `@fortawesome/pro-regular-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `ember-cli-mirage/db-collection`: Cannot set property default of #<Object> which has only a getter
error evaluating `ember-composable-helpers/-private/closure-action`: Cannot read property 'proto' of null
error evaluating `ember-map/components/code-snippet`: Could not find module `highlight.js` imported from `(require)`
error evaluating `ember-map/ember-focus-method/tests/app.lint-test`: QUnit is not defined
error evaluating `ember-map/pods/components/md-text/component`: Could not find module `ember-remarkable/components/md-text` imported from `ember-map/pods/components/md-text/
component`
error evaluating `ember-map/styles/tailwind`: module is not defined
error evaluating `ember-map/tests/mirage/mirage.lint-test`: QUnit is not defined
Processing 1 files...
Spawning 1 workers...
Sending 1 files to free worker...
All done.
Results:
0 errors
1 unmodified
0 skipped
0 ok
Time elapsed: 9.506seconds
Would appreciate any tips on how to go about debugging this!
@samselikoff if I remember you use pods for EmberMap. The codemod does not support pods layout.
Oh wow that’s surprising. Even if I point at a specific file? Does it have to do with the resolver?
Is there a manual way to run it on a pods app?
@samselikoff Just throwing it from the top of my head, will this help
find ./app/pods -name "*.hbs" | xargs npx ember-angle-brackets-codemod http://localhost:4200
I haven't tried it.
The thing is I originally ran this
npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs
so I already pointed to an individual file, so I don't think that's it. Think it's something else in the code.
There is also the issue with telemetry. Some of the logic works only with non-pod structures to determine helpers and components. The good news however is I am working on reducing the need to rely on telemetry and file paths to more of a “type of invocation” to figure out what is component/helper.
In regards to single file, it should work, but again the telemetry will likely block you.
Oh wow that’s surprising. Even if I point at a specific file? Does it have to do with the resolver?
Is there a manual way to run it on a pods app?
@samselikoff In order to use it with pods you'll have to use 1.4.12 version
You can install it locally like:
npm install --save https://github.com/ember-codemods/ember-angle-brackets-codemod/archive/v1.4.12.tar.gz
After that you can run it like:
npx ember-angle-brackets-codemod angle-brackets ./app/pods/about/template.hbs
And if you set config file correctly you'll be able to update some folder with templates at once
I ran into the problem as well, after Installing 1.4.12 I combined everything above into the following command, which worked for me:
yarn add https://github.com/ember-codemods/ember-angle-brackets-codemod/archive/v1.4.12.tar.gz
and
find ./app/pods -name "*.hbs" | xargs npx ember-angle-brackets-codemod angle-brackets.
Edit: I needed to remove the codemod from package.json afterwards, as running the server failed with an error: The "id" argument must be of type string. Received type undefined
I'm just curious, b/c I see both of the above examples mention ./app/pods, does that mean this codemod won't work only if you are using podModulePrefix, or will it not work are using pods at all (i.e. usePods: true).
I believe that the codemod cannot infer anything from telemetry when pods structure is in use.
Thank you.
So if #287 lands podModulePrefix users should be able to run:
npx ember-angle-brackets-codemod --no-telemetry ./app/pods/**/*.hbs
or non podModulePrefix users like myself should be able to run:
npx ember-angle-brackets-codemod --no-telemetry ./app/**/*.hbs
right?
@rwjblue is there anything fundamentally preventing this codemod from being used with pods with telemetry or is it just a matter of someone putting in the work?
@runspired I know I'm not @rwjblue 😂 but the transform "should work" now since we infer as much as possible without using telemetry. I believe you can use the --no-telemetry on pods to get this to work. There are some caveats. Some helpers may need to be put in a skip config if it is too ambiguous to determine if they are a component. Additionally there is some limitation on converting some block parameters ( @Turbo87 has better detection code in ember-template-lint ) that would be awesome to port here.
I ran this on a 700+ file codebase with minimal interaction. I hope this helps.
npx ember-angle-brackets-codemod --no-telemetry ./app/pods/**/*.hbs
thanks, @tomwayson! worked for my app with pods structure like a charm 👍
For those who land on this issue, I wrote a codemod to un-pod Ember projects. Feel free to give it a try.
