Async Components

v 0.3.0

Ogone supports Async Components. Async Components are those components that are waiting for all promises internals or externals to be resolved before rendering.

6 flags rules an Async Component

- type="async"
- --await
- --then:...
- --catch:...
- --finally:...
- --defer

by setting type=”async” to the component’s proto, you’re making it an Async Component:

// async-component.o3
<proto type="async"/>

note that root component can’t be async, we will follow this structure: ogone

–await

only in an Async Component

In this Async Component you will be allowed to use –await flag, this component will wait for the img tag to dispatch load event:

// async-component.o3
<proto type="async"/>
<template>
  <img --await src="public/ogone.svg">
</template>

or any event:

// async-component.o3
<proto type="async"/>
<template>
  <img --await="'waitingForThisEvent'" src="public/ogone.svg">
</template>

we can also wait for a component to resolve all it’s internal promises:

// async-parent-component.o3
// Ogone use this component as 'async-component'
use @/path/to/async-component.o3 as 'async-component';

<proto type="async"/>
<template>
  <async-component --await />
</template>

ogone

–then:…

in any Component

Waiting for the resolution of the Async Component. Then is a mixed flag/case, it means that it requires the name of case that you will use after the resolution of the component. Use --then like in JS:

// Ogone use this component as 'async-component'
use @/path/to/async-component.o3 as 'async-component';

<proto type="async">
  case 'then:caseName':
    console.log('promise resolved', ctx);
  break;
</proto>
<template>
  <async-component --await --then:caseName/>
</template>

ogone

–catch:…

in any Component

Any error inside an Async Component. catch is a mixed flag/case, it means that it requires the name of case that you will use after an error in Async Component. Use --catch like in JS:

// Ogone use this component as 'async-component'
use @/path/to/async-component.o3 as 'async-component';

<proto type="async">
  case 'catch:caseName':
    console.log('promise error caught', ctx);
  break;
</proto>
<template>
  <async-component --await --catch:caseName/>
</template>

–finally:…

in any Component

internal promises all fulfilled successfully or rejected. finally is a mixed flag/case, it means that it requires the name of case that you will use after resolution/error in Async Component. Use --finally like in JS:

// Ogone use this component as 'async-component'
use @/path/to/async-component.o3 as 'async-component';

<proto type="async">
  case 'finally:caseName':
    console.log('promise fulfilled', ctx);
  break;
</proto>
<template>
  <async-component --await --finally:caseName/>
</template>

–defer

in any Component

Inserts a promise or anything into an Async Component. the Async Component will includes this promise in it’s own promise group.

// Ogone use this component as 'async-component'
use @/path/to/async-component.o3 as 'async-component';

<proto type="async">
  def:
    promise: null
  default:
    this.promise = new Promise((resolve) => {
      setTimeout(() => {
        // aync-component will render only after this resolution
        resolve();
     }, 1500);
  })
</proto>
<template>
  <async-component --await --defer="promise"/>
</template>

case ‘async:update’:

in Async Component

triggered case when any props of the component changes.

Todo

define the shape of ctx object sent to –then flag.