# tuxi

> Automatically manage state of asynchronous tasks.

Latest version **0.3.0** (published 2018-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install tuxi
pnpm add tuxi
yarn add tuxi
bun add tuxi
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2018-10-12 |
| First published | 2018-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 44.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Matthew Dangerfield |
| Maintainers | supermdguy |
| Keywords | vuex, async, state, vue |

## Links

- npm: https://www.npmjs.com/package/tuxi
- Repository: https://github.com/superMDguy/tuxi
- Homepage: https://github.com/superMDguy/tuxi#readme
- Issues: https://github.com/superMDguy/tuxi/issues
- npm.io page: https://npm.io/package/tuxi

## Dependencies (1)

- [is-promise](https://npm.io/package/is-promise.md) ^2.1.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.3.0 (latest) — 2018-10-12
- 0.3.0-0 (next) — 2018-10-12
- 0.2.4-1 — 2018-10-12
- 0.2.4-0 — 2018-10-12
- 0.2.3 — 2018-10-11
- 0.2.2 — 2018-10-10
- 0.2.1 — 2018-08-11

## README

<p align="center"><img src="https://raw.githubusercontent.com/superMDguy/tuxi/HEAD/tuxedo.svg?sanitize=true" height="200" /></p>

<p align="center">
  <a href="https://circleci.com/gh/superMDguy/tuxi/tree/master" target="_blank"><img src="https://circleci.com/gh/superMDguy/tuxi.svg?style=svg" alt="CircleCI"></a>
  <a href="https://codecov.io/github/superMDguy/tuxi?branch=master" target="_blank"><img src="https://img.shields.io/codecov/c/github/superMDguy/tuxi/master.svg?style=flat-square" alt="CodeCov"></a>
  <a href="https://www.npmjs.com/package/tuxi" target="_blank"><img src="https://img.shields.io/npm/v/tuxi.svg?style=flat-square" alt="NPM Version"></a>
  <a href="https://github.com/superMDguy/tuxi/blob/HEAD/LICENSE" target="_blank"><img src="https://img.shields.io/npm/l/all-contributors.svg?style=flat-square" alt="License"></a>
  <a href="http://makeapullrequest.com" target="_blank"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"></a>
</p>

# Tuxi

_:sparkles: 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! :relieved:. For more details about the motivation for tuxi, check out this [article](https://hackernoon.com/a-solution-to-async-boilerplate-in-javascript-2fa717801c3b) I wrote.

## Installing

### NPM

```bash
npm install --save tuxi
```

### CDN

Tuxi can also be used directly in the browser through a babel-transpiled and minified build hosted on unpkg:

```html
<script src="https://unpkg.com/tuxi">
```

## Examples

For complete documentation and more examples, see the [docs](docs/readme.md) folder.

### Pure JavaScript

```js
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

```js
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
    }
  }
}
```

```html
<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](https://www.flaticon.com/authors/freepik) from www.flaticon.com_

---
_Source: https://npm.io/package/tuxi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._