# vouu

> Vovv (pronounced *vow*) is a design pattern for writing react components based on data from promises.

Latest version **0.0.2** (published 2023-05-23) · ISC license · 0 weekly downloads

## Install

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

## 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.0.2 |
| Published | 2023-05-23 |
| First published | 2023-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aaronjameslang |

## Links

- npm: https://www.npmjs.com/package/vouu
- npm.io page: https://npm.io/package/vouu

## Recent versions

- 0.0.2 (latest) — 2023-05-23

## README

# Vovv

Vovv (pronounced *vow*) is a design pattern for writing react components based on data from promises.

Promises are great for handling asynchronous code, but can't be directly rendered in to a react component, or read in a redux selector. We need to model the promise state with a synchronous counterpart which is easy to render and update when the promise progresses.

This is where Vovv is useful. A Vovv has five properties:

```ts
export interface Vovv<V = any, E = any> {
  readonly error?: E
  readonly fulfilled: boolean
  readonly pending: boolean
  readonly rejected: boolean
  readonly value?: V
}
```

These property names are based on terminology from the promise specification. To quote [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

> A Promise is in one of these states:
>
>   - *pending*: initial state, neither fulfilled nor rejected.
>   - *fulfilled*: meaning that the operation was completed successfully.
>   - *rejected*: meaning that the operation failed.
>
> A pending promise can either be *fulfilled* with a value or *rejected* with a reason (error).

To model a value which may or may not be available yet in your react or redux state, wrap it in a Vovv. Then it's simple to update, and simple to render.

```ts
import { vovv } from 'vovv'

function WelcomeSpan() {
  const [profile, setProfile] = useState()

  if (!profile) {
    vovv(fetch('/profile/me'), setProfile)
  }

  if (!profile || profile.pending) {
    return <span>Loading...</span>
  }
  if (profile.rejected) {
    return <span>Error: {profile.error.message}</span>
  }
  const { name } = profile.value
  return <span>Welcome {name}!</span>
}
```

## Design Goals & Decisions

- Pattern for handling promise data synchronously
- Standards compliant
    - Uses terminology from the promise specification
    - Is a POJO, as recommended by react and redux
- Intuitive
- Minimal boilerplate
    - Helper methods abstract away repeated code
- Type safe
- Do one thing, do it well

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