mini-reactivity

really basic reactivity package

This package provides some basic reactivity functions that are modeled after the vue and vueuse functions of the same name. It was created for use in automated Node.js tests.

The following descriptions are partly taken from the corresponding original descriptions.

Usage

ref()

Takes an inner value and returns a reactive and mutable ref object, which has a single property .value that points to the inner value.

Example

import { ref } from '@uscreen.de/mini-reactivity'

const count = ref('initial value')

console.log(count.value) // -> "initial value"

count.value = 'changed value'
console.log(count.value) // -> "changed value"

computed()

Takes a getter function and returns a readonly reactive ref object for the returned value from the getter.

import { ref, computed } from '@uscreen.de/mini-reactivity'

const msg = ref('initial value')
const message = computed(() => `Message: ${msg.value}`)

console.log(message) // -> "Message: initial value"

msg.value = 'changed value'
console.log(message) // -> "Message: changed value"

watchEffect

Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.

import { ref, watchEffect } from '@uscreen.de/mini-reactivity'

const msg = ref('initial value')
watchEffect(() => { console.log(msg) }) // -> "initial value"

msg.value = 'changed value' // -> "changed value"

until

Returns a promised one-time watch for changes of reactive refs.

import { ref, until } from '@uscreen.de/mini-reactivity'

const myRef = ref('')

/**
 * Basic functionality:
 */
await until(myRef).changed() // wait until myRef is changed
await until(myRef).changedTimes(3) // wait until myRef is changed three times
await until(myRef).toBe('changed') // wait until myRef has given value
await until(myRef).toBeNull() // wait until myRef is null
await until(myRef).toBeTruthy() // wait until myRef has truthy value
await until(myRef).toMatch(r => r.value === 'changed') // wait until myRef matches given condition

/**
 * Promises are resolved with the then current value of the given ref:
 */
setTimeout(() => { myRef.value = 'changed' }, 1000)
const resolved = await until(myRef).changed()
console.log(resolved) // -> resolved === 'changed'

/**
 * Use timeout:
 */
await until(myRef).toBe(
  'changed',
  { timeout: 1000 }
) // wait until myRef has given value or 1000ms passed

await until(myRef).toBe(
  'changed',
  { timeout: 1000, throwOnTimeout: true }
) // wait until myRef has given value or throw error after 1000ms

License

Licensed under MIT.

Published, Supported and Sponsored by u|screen