async.README.md

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:

---

--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:

import component AsyncComponent from '@/path/to/AsyncComponent.o3';

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

---

--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:

import component AsyncComponent from '@/path/to/AsyncComponent.o3';

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

---

--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:

import component AsyncComponent from '@/path/to/AsyncComponent.o3';

<proto type="async">
  case 'catch:caseName':
    console.log('promise error caught', ctx);
  break;
</proto>
<template>
  <AsyncComponent --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:

import component AsyncComponent from '@/path/to/AsyncComponent.o3';

<proto type="async">
  case 'finally:caseName':
    console.log('promise fulfilled', ctx);
  break;
</proto>
<template>
  <AsyncComponent --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.

import component AsyncComponent from '@/path/to/AsyncComponent.o3';

<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>
  <AsyncComponent --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.