emattias / ember-ast-hot-load

Universal hot-load addon for Ember applications. Support classic/pods/mu layouts and route templates reloading.

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.

• ember-cli >= 2.15.1
• ember-source >= 2.16

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	+	+/-
Glimmer 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 work without any config.

After the installing, 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, or controller ember-cli will do a full page reload.

Hot-reloading Ember helpers is not supported.

Because helpers look like components (in the AST) they will be unnecessarily wrapped, e.g. helper -> dynamic component -> helper

To prevent this from happening, you can exclude helpers from the hot-loader pipeline by specifying a list of helper names in the add-on config.

// ember-cli-build.js
new EmberApp(defaults, {
  'ember-ast-hot-load': {
    helpers: ["foo-bar", "liquid-if", ... ],
    enabled: true
  }
});

If you don't specify helpers in the config the addon will continue to work, but with it will also wrap all your helpers (you can see this in the ember-inspector components tab, e.g. helper "you-app-helper-name").

To get a list of all the helpers in your app that hot-reload might think are components, run this script in a debug console in your browner. You can then use this list to configure the add-on.

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

console.log(JSON.stringify(componentLikeHelpers))

You should also exclude ember-ast-hot-load from production builds (to avoid unnecessary calculations)

// ember-cli-build.js
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

Serving your Ember app from a different backend (e.g. Rails)

In most development environments, Ember applications are served directly from Ember's development server, e.g. http://localhost:4200. If you are using a different way of service your Ember app, you may need to override the URL that we use to reload your changes.

  // config/enironment.js

  if (environment === 'development') {
    ENV['ember-ast-hot-load'] = {
      baseUrl: 'http://app.mydomain.test:4200'
    }
  }

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.