Tuxi
Tuxi automatically manages the state of asynchronous tasks, so you don't have to. No more setting isLoading after every api request!
Installing
NPM
npm install --save tuxiCDN
Tuxi can also be used directly in the browser through a babel-transpiled and minified build hosted on unpkg:
<script src="https://unpkg.com/tuxi">Examples
For complete documentation and more examples, see the docs folder.
Pure JavaScript
import tuxi from 'tuxi'
import api from './api'
const articlesTask = tuxi.task(api.fetchArticles)
// ⚡ Fire the api call
articlesTask.start()
// The task is immediately set to pending
console.log(articlesTask.pending) // true
// 🌀 The spinning property has a configurable delay
setTimeout(() => console.log(articlesTask.spinning), 1500) // true
// After a while...
console.log(articlesTask.hasValue) // true
console.log(articlesTask.value) // ['New Planet Discovered!', '17 Surprising Superfoods!', ...]Vue
import tuxi from 'tuxi'
import tuxiVue from 'tuxi/plugins/vue'
import api from './api'
tuxi.use(tuxiVue())
export default {
data() {
return {
articlesTask: tuxi.task(api.fetchArticles)
}
},
computed: {
articles() {
return this.articlesTask.value
}
}
}<div class="wrapper">
<div class="empty-message" v-if="articlesTask.empty">
No articles
</div>
<div class="spinner" v-if="articlesTask.spinning">
Loading articles...
</div>
<div class="error-message" v-if="articlesTask.error">
{{ articlesTask.error.message }}
</div>
<ul v-if="articlesTask.hasValue">
<li v-for="article in articles">
{{ article.title }}
</li>
</ul>
<button @click="articlesTask.start()">Load Articles</button>
</div>Contributing
Tuxi is still being actively developed, so any suggestions or contributions are appreciated. I'm still not 100% sure about the API, so comments on how to make it cleaner/simpler are welcome. That said though, I think it's definitely ready to be used for non mission critical applications.
Logo made by freepik from www.flaticon.com