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

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v10 or above

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.