Universal hot-load addon draft
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon better possible mu route templates support Dec 10, 2018
app comopnent-property-values-resolution Nov 12, 2018
config Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
lib -lf-get-outlet-state helper ignore Dec 13, 2018
vendor Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.editorconfig Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.ember-cli Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.eslintignore Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.gitignore Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.npmignore Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.template-lintrc.js Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.travis.yml Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
.watchmanconfig Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
LICENSE.md Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
README.md Classic route templates reloading feature Dec 11, 2018
ast-examples.md documentation refactoring Nov 10, 2018
ember-cli-build.js ultimate helpers wrapping logic Nov 9, 2018
index.js default options Nov 17, 2018
jsconfig.json repo Nov 7, 2018
package.json chore(package): update ember-cli to version 3.6.0 Dec 12, 2018
testem.js Initial Commit from Ember CLI v3.5.0 Nov 7, 2018
yarn.lock chore(package): update lockfile yarn.lock Dec 12, 2018


ember-ast-hot-load Build Status Greenkeeper badge

Any ember components hot-reloading

Main Idea of this addon - ability to reload changed components without application reloading.

This addon is continuation of the project ember-cli-hot-loader and includes part of it's codebase.

Many thanks to Toran Billups / @toranb for this huge work, support and inspiration!

  • ember-cli-hot-loader implemented using middleware for ember-resolver and wrapping components.
  • ember-as-hot-load implemented using compile-time templates ast transformations.
Point ember-ast-hot-load ember-cli-hot-loader
Tagless components + +/-
Classic route templates + -
reducers reloading - +
performance impact low middle
typescript support + +
Nested components + +/-
code limitations - +
Ember 2.x ? +
Ember 3.4+ + -
Fastboot + -
Sparkles components + -
Hooked components + -
Custom components + -
Component wrappers - +
AST integration + -
Resolver 5 support + -
MU support + -
Addons hot-reload + -


ember install ember-ast-hot-load

How to use this addon

After the ember install simply run ember serve as you normally would. Any changes to component JS/HBS files will result in a hot reload (not a full page reload). If you alter a route, service, controller or controller template ember-cli will do a full page reload.

Helpers looks like components, but we don't support component-like helpers hot-reload. So, you need to exclude helpers from hot-loader pipeline.

If you don't specify helpers in config addon will continue to work, but with helper -> dynamic component -> helper wrapper (you can check it in ember-inspector components tab, wrapper will have name like helper "you-app-helper-name").

Let's copy all applications' hot-reload confusing helpers.

var componentLikeHelpers = Object.keys(require.entries)
    .filter(name=>(name.includes('/helpers/')|| name.includes('/helper')))
        let path = name.split('/helpers/');
        return path.pop();

in ember-cli-build.js you need to specify this helpers

new EmberApp(defaults, {
  'ember-ast-hot-load': {
    helpers: ["foo-bar", "liquid-if", ... ],
    enabled: true

also, we need to exclude ember-ast-hot-load from production builds (to avoid unnecessary calculations)

const environment = EmberApp.env();
// ...
const addonsToIgnoreInProdBuilds = [ 
  environment === 'production' ? 'ember-ast-hot-load' : null 
].filter(name => name !== null);

new EmberApp(defaults, {
  addons: {
    blacklist: addonsToIgnoreInProdBuilds

Known Compatibility Workarounds

Content Security Policy

There is a known issue when used in conjunction with ember-cli-content-security-policy or any strong Content Security Policy that blocks "unsafe-eval" (as it should).

When this plugin tries to execute the Ember.HTMLBars.compile function, a CSP (Content Security Policy) that does not allow "unsafe-eval" will block the JS execution with the following error:

Uncaught EvalError: Refused to evaluate a string as JavaScript
because 'unsafe-eval' is not an allowed source of script in the
following Content Security Policy directive: "script-src ...

To workaround this issue, in the config/environment.js file, add "unsafe-eval" to the Development and Test environment sections. Do NOT just add "unsafe-eval" to the CSP that goes to Production as this will defeat one of the main safeguards that comes from using a CSP. Here is sample code to add to the CSP in the proper environments only:

  // config/environment.js
  ENV.contentSecurityPolicy = {
    // normal CSP for Production here

  if (environment === 'development') {
    // ...
    // Allow unsafe eval on dev environment

  if (environment === 'test') {
    // ...
    // Allow unsafe eval on test environment



  • git clone <repository-url>
  • cd ember-ast-hot-load
  • yarn install


  • yarn lint:hbs
  • yarn lint:js
  • yarn lint:js --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.


This project is licensed under the MIT License.