Add template helper for loading a bundle.

[rwjblue]

A template helper like this would allow folks to use lazy routeless engines with a nice(ish) syntax:

{{mount (load-engine 'engine-name-here')}}

Example implementation (thanks to @mike183):

import Ember from 'ember';

const { Helper, inject, getOwner } = Ember;

export default Helper.extend({

  assetLoader: inject.service("asset-loader"),

  compute: function([ engineName ]) {
    // Return engineName if engine is loaded
    if (this._engineName !== undefined && this._engineName === engineName) { 
      this._engineName = engineName; 
      return this._engineName;
    }

    // need to expose the ability to introspect a bundle's state (loaded, unloaded, etc)
    if (this.get('assetLoader').isLoaded(engineName)) {
      this._engineName = engineName;
      return this._engineName;
    }

    // Load unloaded engine
    this.get("assetLoader").loadBundle(engineName).then(() => {
      // Update this._engineName
      this._engineName = engineName;

      // Trigger recompution of helper
      this.recompute();
    });

    // Returning null ensures nothing is rendered
    return null;
  }
});

[rwjblue]

/cc @mike183 @trentmwillis

[mike183]

I had always figured that this helper would live in the ember-engines repo itself, and ember-asset-loader would simply provide some helper methods (i.e. isLoaded()) in order to simplify its implementation.

I can't imagine the helper being very useful outside of ember-engines, though maybe someone else can think of a use case in which it would be?

[rwjblue]

I think my thought was that this addon and its main service is what is responsible for loading bundles, so it is the thing that should provide the helper. Though it's helper should likely be load-asset-bundle or something, because it's not 100% engine focused...

Am I on the wrong track?

[mike183]

Wouldn't the helper also need to actually register the engine after it had finished downloading the bundle?

[rwjblue]

Hmm. What do you mean? Loading the bundle would mean that the modules that the {{mount keyword looks for would be present, right?

Note: I haven't ran the code I pasted above in the description. So perhaps I'm missing something obvious...

[mike183]

Its entirely possible that I am actually missing something obvious, but I would have thought that the helper would need to register the engine with the application after successfully downloading its bundle.

So essentially, the call to loadBundle() would look something like:

// Load un-registered engine
this.get("assetLoader").loadBundle(engineName).then(() => {
  // Get engine
  const engine = window.require(`${engineName}/engine`).default;
  // Register engine with application
  owner.register(`engine:${engineName}`, engine);
  // Update this._engineName
  this._engineName = engineName;
  // Trigger recompution of helper
  this.recompute();
});

[rwjblue]

Ya, I just think that manual registration shouldn't be needed. Once the bundle is loaded, the engine-name/engine module will be present in the module registry so that when the owner.lookup('engine:engine-name-here') happens, this code in the resolver would return the proper value.

[mike183]

Ah I see, if thats the case and it works then keeping the helper in the asset-loader repo sounds good to me.

[trentmwillis]

Overall, this seems like a reasonable addition to this addon.

Though it's helper should likely be load-asset-bundle or something, because it's not 100% engine focused...

Agreed. Either load-bundle or load-asset-bundle seems good for consistency with the terminology used elsewhere by this addon.

Once the bundle is loaded, the engine-name/engine module will be present in the module registry so that when the owner.lookup('engine:engine-name-here') happens, this code in the resolver would return the proper value.

This is correct, and essentially what we do for routable engines.

[scalvert]

Yep, this sounds good.

[buschtoens]

The most recent Ember.js times newsletter had a reference to this, that reminded me about this addon I once wrote: ember-lazy-mount

I guess this is not really relevant, since it uses a component instead of a template helper, but maybe you still find it useful. ✌️

[GCheung55]

@buschtoens your addon covers an important usecase - loading state. Probably should also cover error state?

How would that be handled in the load-bundle or load-asset-bundle helper?