ember-ast-hot-load

ember-ast-hot-load

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-ast-hot-load implemented using compile-time templates ast transformations.

Point	ember-ast-hot-load	ember-cli-hot-loader
Tagless components	+	+/-
Classic route templates	+	-
MU 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	+	-

Installation

ember install ember-ast-hot-load

How to use this addon

It should just works after install. Without any config.

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')))
    .filter(name=>!name.includes('/-')).map(name=>{
        let path = name.split('/helpers/');
        return path.pop();
    }).filter(name=>!name.includes('/')).uniq();
	
copy(JSON.stringify(componentLikeHelpers))

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
  }
});

Public API?

service('hot-loader')

.registerWillHotReload(onHotReload) .unregisterWillHotReload(onHotReload)

.registerWillLiveReload(onLiveReload) .unregisterWillLiveReload(onLiveReload)

 // we need to prevent full app refresh if we can hande changed file.
function onLiveReload(event) {
   if (event.modulePath.includes('redusers')) {
     event.cancel = true;
     requirejs.unsee('some-module');
   }
}


function onHotReload(path) {
   if (path.includes('redusers')) {
     // do some hot-reload magic,
     // for example
     requirejs.resolve('some-module')
   }
}

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
    ENV.contentSecurityPolicy['script-src'].push("'unsafe-eval'");
  }

  if (environment === 'test') {
    // ...
    // Allow unsafe eval on test environment
    ENV.contentSecurityPolicy['script-src'].push("'unsafe-eval'");
  }

Cannot find module

Cannot find module ember-source\dist\ember-template-compiler.js in yarn workspaces.

root.package.json workspaces.nohoist: ["**/ember-ast-hot-load"]

Contributing

Installation

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

Linting

• 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

• ember serve
• Visit the dummy application at http://localhost:4200.

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

License

This project is licensed under the MIT License.