Skip to content
White glove service for your async needs
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs
lib
tests
.babelrc
.eslintrc.json
.gitignore
.npmignore
.prettierrc
LICENSE
package-lock.json
package.json
readme.md
rollup.config.js
tuxedo.svg

readme.md

CircleCI CodeCov NPM Version License PRs Welcome

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

You can’t perform that action at this time.