Universal hot-load addon draft
Clone or download
Permalink
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
tests
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
.eslintrc.js
.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

README.md

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

Installation

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

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

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

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

License

This project is licensed under the MIT License.