Description

This HOWTO explains how to convert sync components into async components in Ractive.

How

1. Create a simple component.
2. Use it anywhere you like in your app.
3. When you need to remove it from your main bundle and load asynchronously:

   1. Create a synchronizer proxy with your original component's name

      + Ractive.partials.foo = getSynchronizer();

   2. Add ASYNC postfix to your original component name

      - Ractive.components.foo = Ractive.extend(...)
      + Ractive.components.fooASYNC = Ractive.extend(...)

   3. Remove fooASYNC (and its dependencies) from your bundle and load it any time in the future with any method you like (XHR, websockets, etc...)

   4. After loading fooASYNC in runtime, send a signal to the synchronizer and your "component" foo will be replaced by fooASYNC.

Advantages

1. No modifications needed in your production app.
2. Convert any sync component into async component with only 2 lines of modification.
3. Control when, if and how you would load the component.

Live Demo

https://aktos.io/st/#/showcase/async-comp

Bare Example

1. Write a simple component

Write a simple (sync) component and use it in many places in your application:

Ractive.components.foo = Ractive.extend({
  template: `<button on-click="bar" class="red {{class}}">{{yield}}</button>`
});

new Ractive({
  el: 'body',
  template: `
    <ul>
      {{#each Array(3)}}
        <li>
          <foo class="blue" on-bar="@global.alert('hey' + @index)">num #{{@index}}</foo>
        </li>
      {{/each}}
    </ul>
  `
})

2. Make it async

Playground

// create foo synchronizer as a placeholder while we are loading fooASYNC component
Ractive.partials.foo = getSynchronizer();
var fooUrl = 'https://url/to/foo.ractive.js'

new Ractive({
  ...
  oncomplete: function(){
    getScript(fooUrl, () => {
      this.set('@shared.deps', {_all: true});
    })
  }
})

4. [OPTIONAL] Supply a "loading" time component

You may also want to supply a "loading state" version of the async component to provide a basic functionality to the user (eg. providing a textarea while waiting for ace-editor might be a good idea):

1. Create a component as usual:

        Ractive.components.fooLOADING = Ractive.extend(...)
   

2. Pass this component name to getSynchronizer():

        Ractive.partials.foo = getSynchronizer('fooLOADING');
   

In this case, fooLOADING component is rendered wherever foo is used at the beginning. When fooASYNC (the actual component) is ready, fooLOADING is replaced by fooASYNC.