# @hux-js/hux

> Hyperfast data management to enable next-gen UX

Latest version **0.3.0** (published 2020-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hux-js/hux
pnpm add @hux-js/hux
yarn add @hux-js/hux
bun add @hux-js/hux
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-12-22 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 168.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Todd Runham |
| Maintainers | hux-js |
| Keywords | workers, data, api, hux |

## Links

- npm: https://www.npmjs.com/package/@hux-js/hux
- Repository: https://github.com/hux-js/hux
- Homepage: https://huxjs.org/
- Issues: https://github.com/hux-js/hux/issues
- npm.io page: https://npm.io/package/@hux-js/hux

## Dependencies (4)

- [ajv](https://npm.io/package/ajv.md) ^6.12.6
- [uuid](https://npm.io/package/uuid.md) ^8.3.1
- [comlink](https://npm.io/package/comlink.md) ^4.3.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.15

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2020-12-22
- 0.2.0 — 2020-12-13
- 0.1.0 — 2020-12-08

## README

<p align="center">
  <a href="https://huxjs.org" target="_blank" rel="noopener noreferrer">
    <img src="https://avatars1.githubusercontent.com/u/74376133?s=200&v=4" alt="Hux JS" width="120"/>
  </a>
</p>

<h1 align="center"><a href="https://huxjs.org" target="_blank" rel="noopener noreferrer">Hux</a></h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@hux-js/hux"><img src="https://img.shields.io/badge/npm-v0.1.0-blue" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@hux-js/hux"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
</p>

---

Hux is a data management tool that abstracts API interaction, data processing and data storage away from the UI layer, leaving it free to do jobs it’s designed to do such as DOM interaction.

It acts as a source of truth, preventing data being duplicated or having shared ownership in and across the UI state.

It has a large focus on performance. Data is automatically optimised and all processes are run in web workers. This means we can front load large amounts of data rather than constantly having to retrieve ‘snapshots’ from an API, leading to better UX and more valuable visualisations.

---

## Installation

### NPM

```
npm i @hux-js/hux
```

### Yarn

```
yarn add @hux-js/hux
```

---

## Basic usage

### Setting up your Buckets

This is the first step when using Hux. It allows you to define the APIs and schemas associated with the bucket, otherwise known as contracts. They may include what API you would call to fill the bucket with data, or what API you call when updating or POST'ing data.

Below you can see we are setting a unique name for the bucket, the `GET` API method and the `POST` API method. We also define the expected JSON schema.


```js
Bucket({
  name: 'Users',
  hydrate: {
    url: 'http://localhost:3456',
  },
  sync: {
    url: 'http://localhost:3456/create',
    options: {
      method: 'POST',
    }
  },
  schema: {
    type: 'object',
    properties: {
      meta: { type: 'object' },
      users: { type: 'array' },
      userCount: { type: 'number' },
    },
    required: ['users'],
  },
});
```

### Calling an API

After you've set up your bucket, you can use the [hydrate](https://huxjs.org/docs/api-reference#hydrate) function to fill it with data when required.

To immediately retrieve data from the bucket, you can add a query to the hydrate function. This will initially return cached data if available. When the latest API data returns from the server you can use the `onUpdate` property to push the fresh data to the UI.

<blockquote>Note: `onUpdate` only works if the `query` property is present</blockquote>

```js
const { users: cachedUsers } = await hydrate({
  name: 'Users',
  query: [
    'users',
  ],
  onUpdate: ({ users: freshUsers }) => updateUiWithFreshUsers(freshUsers)
});
```

---

## Contributing

If you'd like to contribute please read our [Code of Conduct](https://github.com/hux-js/hux/blob/develop/CODE_OF_CONDUCT.md) & [Contributing](https://github.com/hux-js/hux/blob/develop/CONTRIBUTING.md) guides before doing so

---

Full Documentation - https://huxjs.org

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