refactoring: a pure TS proj that simply organizes the loading state, using a reactive model, promises and callbacks

[melanke]

It should be a library usable not only by vue, but something any library could use as a comunication pattern

[melanke]

import {AwaitC, AwaitState} from '@simpli/await-controller'

// any axios GET request with the endpoint ending with 'user/principal' 
// will trigger this controller
AwaitC.axios('loadingPrincipal', 'GET:user/principal')

// you can get the state of this request at any time, using the same name,
// possible states: ACTIVE, INITIAL, SUCCESS, ERROR, <customs>
const loadingPrincipalState: AwaitState = AwaitC.get('loadingPrincipal')

// or simply check if it's active
const isActive: boolean = AwaitC.isActive('loadingPrincipal')

// you can manually change a controller state, you can put any value 
AwaitC.set('loadingPrincipal', AwaitState.ACTIVE)

// you can create any process with a promise and associate it with a controller
const process = AwaitC.process('loadingPrincipal', async () => {

})

// then you can start the process
const result = await process.start()

// debounce with the state active even when not actually processing,
// but just waiting in the debounce
const process = AwaitC.debounce('loadingPrincipal', 500, 
{/*lodash debounce options, not mandatory*/}, 
async () => {

})

// there is a shortcut for process/start
const result = await AwaitC.run('loadingPrincipal', async () => {

})

using with vue-await

oh and by the way, I think we should use directives

<div v-await.noError="loadingPrincipal" v-await.class="loading-circle">
    <div v-await.success v-await.class="placeholder-text">{{ principal.title }}</div>
</div>
<div v-await.error="loadingPrincipal">Error on request</div>

Directives:

• v-await.active, v-await.initial, v-await.success, v-await.error, v-await.notActive, v-await.notInitial, v-await.noSuccess, v-await.noError - you can put the await controller name on it or on it's parent or grandparent, and then, it will render it's content only when the controller is on choosen state
• v-await.class - the class the component will have when it's controller is ACTIVE or it's parent or grandparent is ACTIVE

We don't need vue spinner integration anymore because we can have a vue-spinner with the v-await.active directive on it.

And with this kind of configuration we can have unobstrusive loading indicators and placeholders

[melanke]

The only problem is to know if the AwaitState will be reactive, we will find out testing, but if it doesn't work we can provide listener functions:

AwaitC.on("loadingPrincipal", (state) => {

})