minimal-reactive

Smallest possible implementation of reactive programming, effects and dependencies.

npm i minimal-reactive pnpm add minimal-reactive yarn add minimal-reactive

Examples

# basic

# view source

import { dep, effect } from 'minimal-reactive'

const a = dep(3)
const b = dep(4)

effect({ a, b }, ({ a, b }) => {
  // a + b are unboxed here
  const result = a + b

  console.log(result)

  return () => {
    // dispose
  }
}) // prints 7

// changing values
a.value = 2 // prints 6
b.value = 3 // prints 5

API

# Change

# key

string

# next

any

# prev

any

# IDep

# accessors

{

# get()

get() =>

null

# set(value)

# value

set(value) =>

boolean

}

# current

undefined | null | T

# stackErr

Error

# subs

Set<any>

# value

undefined | null | T

# trigger()

trigger() =>

void

# Boxs

[K in StringKeys<T> ]: Dep<T [K]>

# Dep

IDep<NonNullable<T>>

# Fx

# (deps, changes, prev)

# deps

Unboxs<T>

# changes

Change []

# prev

Unboxs<T>

(deps, changes, prev) =>

OffFx

# OffFx

# (reconnect, disconnect)

# reconnect

boolean

# disconnect

boolean

(reconnect, disconnect) =>

any

# Sub

# (prevValue, nextValue)

# prevValue

T | null | undefined

# nextValue

T | null | undefined

<T>(prevValue, nextValue) =>

void

# Unboxs

[K in keyof T ]-?: NonNullable<T [K] ["value"]>

# Vals

[K in keyof T ]: T [K] ["value"]

# dep(value)

# value

null | T

dep<T>(value) =>

Dep

# deps(obj)

# obj

deps<T>(obj) =>

Boxs

# effect(deps, fn)

# deps

# fn

Fx<T>

effect<T extends Boxs<any>>(deps, fn) =>

OffFx

Credits

everyday-types by stagas – Everyday utility types
everyday-utils by stagas – Everyday utilities

Contributing

Fork or edit and submit a PR.

All contributions are welcome!