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?

[buschtoens]

Glad that you like it :)

In fact it does cover error states as well. I've updated the docs to reflect that.

{{#lazy-mount engineName model=optionalDataForTheEngine as |engine|}}
  {{#if engine.isLoading}}
    🕑 The engine is loading...
  {{else if engine.error}}
    😨 There was an error loading the engine:
    <code>{{engine.error}}</code>
  {{/if}}
{{/lazy-mount}}

[villander]

@rwjblue @dgeb @stefanpenner what you think about make ember-lazy-mount as our solution to lazy loading route-less engines?

makes sense when looking at engines RFC

[buschtoens]

I know this might come up, so I'll address it right away: I have no problem with stripping out ember-concurrency(-decorators) and ember-decorators to reduce the bundle size for consumers that don't use these addons.

[villander]

yup @buschtoens and as asset-loader was written in ES6, we would have to remove the typescript as well.

[buschtoens]

I've defactored ember-lazy-mount in https://github.com/buschtoens/ember-lazy-mount/pull/4 to not use any dependencies except babel and htmlbars in order to decrease bundle size and also reverted back to the Ember Object Model, to make it possible to merge this code into ember-asset-loader and / or ember-engines.

[villander]

Now that we know that Lazy Loading on ember-engines will work more friendly replacing ember-asset-loader with embroider. I think that we can make ember-asset-loader complete, following the RFC and Roadmap 1.0 and add ember-lazy-mount solution here.

what you think guys?

cc: @rwjblue @dgeb @stefanpenner

[lifeart]

(: >>> [🥇 UP 🥇] <<< :)

[rwjblue]

Someone just needs to do the work 🤷‍♂️

[villander]

thanks @rwjblue

@buschtoens can you open a pull request on ember-engines adding your solution in lazy-mount please?

It's your merit buddy!