https://github.com/jsheaven/reactive

Nano library for functional, opt-in reactive programming
https://github.com/jsheaven/reactive

functional-programming javasript opt-in reactive-programming typescript

Last synced: 5 days ago
JSON representation

Nano library for functional, opt-in reactive programming

• Host: GitHub
• URL: https://github.com/jsheaven/reactive
• Owner: jsheaven
• License: mit
• Created: 2023-02-12T02:40:51.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-12T03:19:24.000Z (almost 2 years ago)
• Last Synced: 2024-11-03T14:36:27.822Z (11 days ago)
• Topics: functional-programming, javasript, opt-in, reactive-programming, typescript
• Language: TypeScript
• Homepage:
• Size: 41 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
@jsheaven/reactive


> Nano library for functional, opt-in reactive programming

User Stories


1. As a developer, I (sometimes) want a function to re-run when the data that it depends on, changes

Features


- ✅ Makes `Function`s reactive so that they re-run when data in reactive objects they use, changes

- ✅ Makes `Object`s reactive so that when values in them are changed, reactive `Functions` re-run

- ✅ Available as a simple API

- ✅ Just `397 byte` nano sized (ESM, gizpped)

- ✅ Tree-shakable and side-effect free

- ✅ One `@jsheaeven` dependency: `@jsheaven/observed`

- ✅ First class TypeScript support

- ✅ 100% Unit Test coverage

Example usage


Setup


- yarn: `yarn add @jsheaven/reactive`

- npm: `npm install @jsheaven/reactive`

ESM


```ts

import { reactive, on } from '@jsheaven/reactive'

const state = reactive({ rand: 0 })

const otherState = reactive({ rand: 0 })

reactive(() => {

  // using state.rand makes this function re-run when setInterval changes it

  console.log('Next random value', on(state.rand))

  // but using a state like otherState.rand, that isn't maked for reactivity, will never trigger

  console.log('Prev random value (lags behind)', otherState.rand)

})

let i = 0

const interval = setInterval(() => {

  state.rand = otherState.rand // this mutation causes the reactive function to re-run

  otherState.rand = Math.random() // this however, is numb

  if (i === 9) {

    clearInterval(interval) // stops re-running the reactive function

  }

}, 1000)

```

CommonJS


```ts

const { reactive, on } = require('@jsheaven/reactive')

// same API like ESM variant

```