ember-cli-hot-loader

    1.4.3 • Public • Published

    Build Status

    Ember-cli-hot-loader

    An early look at what hot reloading might look like in the ember ecosystem

    Installation

    ember install ember-cli-hot-loader
    

    During installation Ember CLI will prompt you to update the resolver code. This is required for ember-cli-hot-loader to work. If you have never modified the resolver, you can simply accept the changes or do a diff and update it manually. The final code should look something like:

    import Resolver from 'ember-resolver';
    import HotReloadMixin from 'ember-cli-hot-loader/mixins/hot-reload-resolver';
     
    export default Resolver.extend(HotReloadMixin);

    note: The HotReloadMixin is replaced with an empty Mixin for production/test builds

    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.

    Excluding components

    If you want to exclude any component(s) from hot reloading simply configure them using excluded

    //my-app/config/environment.js
    if (environment === 'development') {
      ENV['ember-cli-hot-loader'] = {
        excluded: ['liquid-unless', 'liquid-child']
      }
    }

    Extended components exclusion

    If you want to get more control over any component(s) excluding from hot reloading you can implement custom logic in resolver mixin method, named shouldExcludeComponent.

    For example if we don't want to reload ember-bootstrap components - we need to exclude all components with names started with bs- prefix.

    Working example available at lifeart/ember-hot-reload-demo (bs + non-reloadable bs-button component)

    import Resolver from 'ember-resolver';
    import HotReloadMixin from 'ember-cli-hot-loader/mixins/hot-reload-resolver';
    import Mixin from '@ember/object/mixin';
     
    const CustomHotReloadMixin = Mixin.create(HotReloadMixin, {
      shouldExcludeComponent({name}) {
        const excludedFromConfig = this._super(...arguments);
        const isBootstrapComponent = name.startsWith('bs-');
        return excludedFromConfig || isBootstrapComponent;
      }
    });
     
    export default Resolver.extend(CustomHotReloadMixin);

    Tagless wrapper component

    If you prefer to avoid the extra div that wraps each hot reloaded component configure it with tagless. Note: the tagless configuration does not support components that receive controller actions.

    //my-app/config/environment.js
    if (environment === 'development') {
      ENV['ember-cli-hot-loader'] = {
        tagless: true
      }
    }

    Example application

    An example application that hot reloads styles/components/reducers

    https://github.com/toranb/ember-hot-reload-demo

    Supported Types

    • ember-cli will hot reload styles for you when using ember-cli 2.3+
    • ember-cli-hot-loader will hot reload component JS/HBS changes
    • to hot reload another file type, such as reducers you need to first enable it:
    //my-app/config/environment.js
    if (environment === 'development') {
      ENV['ember-cli-hot-loader'] = {
        supportedTypes: ['components', 'reducers']
      }
    }

    Next write a service that will respond to the events willLiveReload and willHotReload

    import Service from '@ember/service';
    import Evented from '@ember/object/evented';
     
    export default Service.extend(Evented, {
      init () {
        this._super(...arguments);
        this.on('willLiveReload', this, 'confirmLiveReload');
        this.on('willHotReload', this, 'attemptHotReload');
      },
      confirmLiveReload(event) {
        const module = getModulePath(event.modulePath);
        if (module) {
          event.cancel = true;
          window.requirejs.unsee(module);
        }
      },
      attemptHotReload(modulePath) {
        const module = getModulePath(modulePath);
        if (module) {
          // re-render, replace module, etc
        }
      }
    });

    Community Plugins

    https://github.com/ember-redux/ember-redux-hot-loader

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

    Keywords

    Install

    npm i ember-cli-hot-loader

    DownloadsWeekly Downloads

    4

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    252 kB

    Total Files

    22

    Last publish

    Collaborators

    • alexlafroscia
    • miguelmadero
    • toranb