Updating to Ember 3.1 and Enabling Optional Features

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.

  1. Native ES5 getters
  2. Named Args
  1. Application Template Wrapper
  2. Template Only Glimmer Components
  1. ember-qunit-codemod
  2. ember-test-helpers-codemod

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

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 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 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!