Home

Awesome

ember-lazy-mount

CI npm version Download Total Ember Observer Score Ember Versions code style: prettier
Dependabot enabled Dependencies

{{mount}} lazy loading route-less engines.

Compatibility

Installation

ember install ember-lazy-mount

Usage

{{lazy-mount}} Component

The {{lazy-mount}} component works just like the {{mount}} helper. It accepts the name of the engine as a positional parameter and also an optional model parameter.

As soon as the helper is rendered, it will begin loading the specified engine. If the engine is already loaded, it will be mounted immediately.

The engineName and model parameters are dynamic and you can update them. Setting a new engineName will cause the new engine to be loaded and mounted.

Inline Usage

While the engine is loading, nothing is rendered. If there was an error loading the engine, nothing is rendered.

{{lazy-mount engineName model=optionalDataForTheEngine}}

You can also pass three optional hooks:

{{lazy-mount
  this.engineName
  onLoad=this.onLoad
  didLoad=this.didLoad
  onError=this.onError
}}

Block Usage

While the engine is loading or if there was an error loading the engine, the block that is passed to the component is rendered. The engine block parameter is an object with two properties:

When the engine was loaded successfully, the passed in block is replaced by the engine.

{{#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}}

You can also pass in the same hooks: onLoad, didLoad, onError

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.