Now that Ember 3.0 is officially out, it is time to start playing more with the new things coming in 3.1+ versions of Ember. As I work through updating my apps and addons, I wanted to capture, step by step, what I am doing, so others can hopefully benefit from this and update their apps.
Updating Ember/Ember CLI with ember-cli-update
First, we’ll want to update our project to Ember 3.1. For me, and at the time of writing this, that will be updating
my app from 2.18 to 3.1-beta.1. I chose to use ember-cli-update to update my app, but you can also use ember init
.
npm install -g ember-cli-update
ember-cli-update
Default Ember App Features
Ember 3.1 brings in several new features, some of which are enabled by default like named args, and native ES5 getters.
Native ES5 Getters
We’ll start with ES5 getters. Since this is enabled by default, we can jump right into using the codemod to update our code. For the sake of completeness, I will also copy over the steps here.
npm install -g jscodeshift
jscodeshift -t https://rawgit.com/rondale-sc/ecma5-getter-ember-codemod/master/es5-getter-ember-codemod.js ./app
This should automatically change most of your usages of things like this.get('foo')
to just this.foo
. It does not handle all cases, but should do most of the work for you.
Named Args
Named args is also enabled by default, and is best explained from the summary straight from the RFC.
It says “Introduce {{@foo}}
in as a dedicated syntax for a component’s template to refer to named arguments passed in by the caller. This just means that if foo
is passed to your component, not a property on the component itself, you should try to
access it via {{@foo}}
. This is not required right now, but will get you setup
for the future.
Optional Ember App Features
Ember 3.1 also gives us access to a few more features, but these have to be opted into via ember-optional-features. They are not the same as the normal feature flags you are used to, where they will be enabled by default in the near future, these will remain optional for an indeterminate amount of time.
First, we’ll want to install ember-optional-features
like so:
ember install @ember/optional-features
We can then, list, enable, or disable features.
ember feature:list
ember feature:enable some-feature
ember feature:disable some-feature
Application Template Wrapper
This adds/removes the <div class="ember-view"></div>
wrapper from your Ember app and tests. If you do not need the extra wrapper you can remove it by running:
ember feature:disable application-template-wrapper
It will prompt you to add the wrapper back into your application.hbs
. Unless you
are really sure you don’t want it, you may want to just go ahead and say yes, to be safe.
Template Only Glimmer Components
Similar to the application-template-wrapper
flag, you can enable
template-only-glimmer-components
to remove the wrapper <div>
from
components that have only a template, and no JS file. You can enable this by running:
ember feature:enable template-only-glimmer-components
Ember Qunit Testing Tweaks
ember-qunit-codemod
ember-qunit-codemod is a quick and easy way to update all your old style qunit tests to the new syntax from this rfc. It has been around and usable for awhile now, but if you have not yet made the switch, I highly recommend going ahead and making the jump. @rwjblue also wrote a nice writeup about this testing syntax update on his site. Again, for the sake of not having to leave here to accomplish this, I have copied over what you need to run.
npm install -g jscodeshift
jscodeshift -t https://rawgit.com/rwjblue/ember-qunit-codemod/master/ember-qunit-codemod.js ./tests/
ember-test-helpers-codemod
ember-test-helpers-codemod is an awesome codemod by @simonihmig that allows us to quickly bring in the new test helpers syntax and remove old ember-native-dom-helpers usage, in favor of the new helpers. I ran this on most of my Ember apps and addons and it worked perfectly, for almost all cases. To run it, you can do:
npm install -g ember-test-helpers-codemod
cd my-ember-app-or-addon
ember-test-helpers-codemod --type=integration tests/integration
ember-test-helpers-codemod --type=acceptance tests/acceptance
ember-test-helpers-codemod --type=native-dom tests
Hopefully this helps everyone get their Ember apps and Ember addons working on the latest, shiniest Ember releases, and makes the process painless. If this helped you please let me know and please share!