superMDguy / tuxi

✨ White glove service for your async needs

Tuxi

✨ White glove service for your async needs

Tuxi automatically manages the state of asynchronous tasks, so you don't have to. No more setting isLoading after every api request! 😌. For more details about the motivation for tuxi, check out this article I wrote.

Installing

NPM

npm install --save tuxi

CDN

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