FluixJS

FluixJS is a lightweight reactive JavaScript library for building reactive state, computed values, and DOM bindings, inspired by modern reactive frameworks. It works in both browser and Node.js environments.

Features

• Reactive state: signal/ref for simple reactive variables.
• Computed values: computed and asyncComputed.
• Effects & watchers: effect and watch for automatic reactions to state changes.
• Reactive collections: reactive, reactiveArray, reactiveMap, reactiveFilter.
• DOM bindings: bind inputs and mount templates with {{ }} syntax.
• Utilities: update, sleep, task, nextTick, debounce.

Installation

Browser:

<script src="fluix.js"></script>
<script>
  console.log(fluix.signal(0));
</script>

Node.js / ESM:

npm install fluixjs

import fluix from 'fluixjs';

// or
const fluix = require('fluixjs');

Usage

Signals

const { signal, effect, update } = fluix;

const count = signal(0);

effect(() => {
  console.log('Count changed:', count.value);
});

count.value = 5;
update(count, v => v + 1); // count.value === 6

Computed

const double = fluix.computed(() => count.value * 2);
console.log(double.value); // reactive

Async Computed

const asyncDouble = fluix.asyncComputed(async () => {
  await fluix.sleep(100);
  return count.value * 2;
});

Watch

fluix.watch(count, (val) => {
  console.log('Count updated to', val);
});

Reactive Objects

const state = fluix.reactive({ name: 'Alice', age: 25 });

fluix.effect(() => {
  console.log(state.name.value);
});

state.name.value = 'Bob';

Reactive Arrays

const arr = fluix.reactiveArray([1, 2, 3]);

arr.push(4); // triggers reactivity

DOM Binding

<input id="name">
<p>Hello, {{ name }}</p>

const state = { name: fluix.signal('Alice') };
fluix.bind('#name', state, 'name');
fluix.mount('body', state);

Debounce

const debouncedFn = fluix.debounce(() => console.log('Called!'), 300);

API Reference

| Function | Description | | ---------------------------- | --------------------------------------------------------- | | signal(value) | Creates a reactive variable. Alias: ref. | | effect(fn) | Runs a function reactively when its dependencies change. | | watch(signal, fn) | Watches a signal and calls a function on changes. | | computed(fn) | Returns a reactive computed signal. | | asyncComputed(fn) | Returns a reactive computed signal from async function. | | update(signal, fn) | Updates a signal's value with a function. | | sleep(ms) | Returns a promise that resolves after ms milliseconds. | | task(fn) | Schedules a function asynchronously. | | nextTick(fn) | Schedules a function for the next microtask. | | reactive(obj) | Makes an object fully reactive. | | reactiveArray(arr) | Makes an array reactive. | | reactiveMap(arrSig, fn) | Maps over a reactive array and returns a reactive result. | | reactiveFilter(arrSig, fn) | Filters a reactive array and returns a reactive result. | | bind(selector, obj, key) | Binds an input element to a reactive signal. | | mount(selector, state) | Mounts a template with {{ key }} bindings. | | debounce(fn, delay) | Returns a debounced version of a function. |

For licensing info see LICENSE.txt