Simple and tiny (<1kb) helpers to select (compute), watch and manage values. Similar to signals but with explicit dependencies

Installation

npm i @vyke/val

Examples

import { createVal, pack } from '@vyke/val'

const nameVal = createVal('Joe')
const ageVal = createVal(15)

const fullNameVal = select((name, age) => {
	return `${name} ${age}`
}, nameVal, ageVal)

const userVal = pack({
	fullName: fullNameVal,
	username: createVal('joe15')
})

watch((user) => {
	console.log(user.fullName)
}, userVal)

API

createVal

Create a new val

import { createVal } from '@vyke/val'

const index = createVal(1)
//      ^? number
// Type inferred by default or manually
const counter = createVal<1 | 2 | 3 | 4>(1)

get

returns the value of a val

import { createVal, get } from '@vyke/val'

const index = createVal(1)
console.log(get(index))

set

sets the value of a val

import { createVal, get, set } from '@vyke/val'

const index = createVal(1)
console.log(get(index))

set(index, 2)

console.log(get(index))

getValues

Similar to the get function but for multiple vals at once

import { createVal, getValues } from '@vyke/val'

const nameVal = createVal('Jose')
const ageVal = createVal(15)
const [name, age] = getValues(nameVal, ageVal)

watch

To watch any changes for one or multiple vals at once

import { createVal, watch } from '@vyke/val'
const nameVal = createVal('Jose')
const ageVal = createVal(15)
watch((name, age) => {
	console.log(name, age)
}, nameVal, ageVal)

select

Create a new val using one or more val to base from, similar to a computed function

import { createVal, select } from '@vyke/val'

const val = createVal(1)
const plusOne = select((value) => {
	return value + 1
}, val)

pack

Create a new val using the given object where each key is a val

import { createVal, pack } from '@vyke/val'

const val1 = createVal(1)
const val2 = createVal(2)
const val12 = pack({
	val1,
	val2,
})

plusOne.watch((values) => {
	console.log(values.val1, values.val2)
})

Others vyke projects

• Flowmodoro app by vyke
• @vyke/results
• @vyke/dom
• @vyke/tsdocs