Skip to content
Kaiverse

signal

A lightweight, simple reactive system for your Javascript application. Zero dependencies, TypeScript fully supported.

Version

npm

JSR

Installation

Via NPM

Terminal window
pnpm add @kaiverse/signal

Via JSR

Terminal window
deno add @kaiverse/signal

Via CDN

unpkg.com/@kaiverse/signal

Compatibility

Signal is a Proxy object at its core, please check compatibility section.

Documentation

Functions & Types

Example

Playground source code

🔗Signal Proxy

/**
 * HTML setup:
 * ```html
 * <p id="fetch-result"></p>
 * <button type="button" onclick="fetchNextUser()">Get next user</button>
 * ```
 */


import {signalProxy} from '@kaiverse/signal'


const resultElement = document.getElementById('fetch-result')


const userSignal = signalProxy({userId: 123, reqCount: 0}, async (key, newValue) => {
  // Do something when any userSignal's prop value changes
  console.log(`[userSignal updated] key: ${key}, value: ${newValue}`)


  if (key === 'userId') {
    // Do something on `userId` changes only
    const userId = newValue
    const response = await fetch(`${basePath}/user/${userId}`)
    const userData = await response.json()
    const totalReqCount = userSignal.reqCount + 1
    userSignal.reqCount = totalReqCount


    if (resultElement)
      resultElement.innerHTML = `Name: ${userData.name}<br/>Total requests: ${totalReqCount}`
  }
})


function fetchNextUser() {
  userSignal.userId++
}

🚦Signal utilities

If you have experience with SolidJS or ReactJS, you’ll find these utility functions very familiar.

import {createComputed, createEffect, createSignal} from '@kaiverse/signal'


const [count, setCount] = createSignal(0)


setInterval(() => {
  setCount((c) => c + 1) // or setCount(count() + 1)
}, 1000)


createEffect(() => {
  // log the count signal's value to the console every 1 second
  console.log('count =', count())
})


const doubled = createComputed(() => count() * 2)


createEffect(() => {
  // log the doubled signal's value to the console every 1 second
  console.log('[computed] doubled =', doubled())
})

Framework ports?

This package is built for vanilla JS/TS applications.

However, below are implementations to adapt with some frameworks’s reactive systems.

React

React signal hooks implementation. Lack of testing. DO NOT use in production.

Those hooks work, but its lack of testing. An alternative approach may be better. Please feel free to open PRs. Your contributions are welcomed and appreciated.

React playground (codesandbox) - source code

React Server Components/Functions

Compatible.

Astro

Compatible. No additional setup required.

You can use it in the component script section for server signals, and/or the <script> tag for client signals.

SolidJS, VueJS

… Just use their “signal” APIs.