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:
// 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>
–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>
–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.