# @reactivity-vue/when

> Promised one-time watch for @vue/reactivity

Latest version **0.0.1** (published 2023-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @reactivity-vue/when
pnpm add @reactivity-vue/when
yarn add @reactivity-vue/when
bun add @reactivity-vue/when
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-03-03 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Elone Hoo |
| Maintainers | elonehoo |

## Links

- npm: https://www.npmjs.com/package/@reactivity-vue/when
- npm.io page: https://npm.io/package/@reactivity-vue/when

## Dependencies (1)

- [@reactivity-vue/watch](https://npm.io/package/@reactivity-vue/watch.md) 0.0.1

## Recent versions

- 0.0.1 (latest) — 2023-03-03

## README

# @reactivity-vue/when

[![NPM version](https://img.shields.io/npm/v/@reactivity-vue/when?color=a1b858&label=)](https://www.npmjs.com/package/@reactivity-vue/when)

> Promised one time watch for [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity)

## Install

```bash
npm install --save-dev @reactivity-vue/when
```

## Usage

### Wait for some async data to be ready

```ts
import { when } from '@reactivity-vue/when'

const { state, ready } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
  {},
)

await when(ready).toBe(true)

console.log(state) // state is now ready!
```

### Wait for custom conditions

> You can use `invoke` to call the async function.

```ts
import { invoke, when } from '@reactivity-vue/when'

const { count } = useMyCounter()

invoke(async () => {
  await when(count).toMatch(v => v > 7)

  alert('Counter is now larger than 7!')
})
```

### Timeout

```ts
// will be resolve when ref.value === true or 1000ms passed
await when(ref).toBe(true, { timeout: 1000 })

// will throw if timeout
try {
  await when(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
  // ref.value === true
}
catch (e) {
  // timeout
}
```

### More Examples

```ts
await when(ref).toBe(true)
await when(ref).toMatch(v => v > 10 && v < 100)
await when(ref).changed()
await when(ref).changedTimes(10)
await when(ref).toBeTruthy()
await when(ref).toBeNull()
await when(ref).toBeNaN()
await when(ref).toContain(5)

await when(ref).not.toBeNull()
await when(ref).not.toBeTruthy()
```

## License

[MIT](../../LICENSE) License © 2023 [Elone Hoo](https://github.com/elonehoo)

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