mutableJS / Core

Mutable state, with reactive functions - automatic result recalculations on state changes

FAQ

Why was mutableJS created?

Inspired by Svelte and it's custom compiler and change triggering approach, research on variables mutability has started and developed into the current reactive execution mechanism.

Is it ready to use?

At the current stage mutableJS is in research stage and can (thought to) be used with the @mutablejs/dom package.

Accompanying packages?

Currently there is 1 more package: @mutablejs/dom and 1 more repo: mutableJS / Demo repo.

Installation

Install with npm:

    npm install @mutablejs/core

Install with yarn:

    yarn add @mutablejs/core

Features

Currently our mutables() initial values support:

Primitive values, like strings, booleans, numbers, nulls, undefined
Arrays
Objects

All the usual getters/ setters/ operations work, as they would work in VanillaJS:

import mutable from '@mutablejs/core';

const someMutableCounter = mutable(0);

someMutableCounter.value += 1; // someMutableCounter.value equals to 1
someMutableCounter.value += 1;

console.log(someMutableCounter.value); // Console output is `2`

mutableFn() accepts and reacts to named and unnamed parameters:

import { mutableFn } from '@mutablejs/core';

type NamedParams = { paramA: string; paramB: number };
const withNamedParams = mutableFn(({ paramA, paramB }: NamedParams) =>
    console.log(paramA, paramB),
);

const unNamedParams = mutableFn((a: number, b: boolean) => console.log(a, b));

Usage/Examples

Primitive values:

import mutable, { mutableFn } from '@mutablejs/core';

const logFn = mutableFn(({ input }: { input: any }) => {
    console.log('Value changed to: ', input);
});

const someMutableData = mutable('Hello');

logFn({ input: someMutableData });

someMutableData.value += ' World!'; // Console should print `Value changed to: Hello World!`

Arrays:

const someMutableArray = mutable(['Hello']);

logFn({ input: someMutableArray });

someMutableArray.value.push('World!'); // Console should print `Value changed to: ['Hello', 'World!']`
someMutableArray.value[0] = 'Hej'; // Console should print `Value changed to: ['Hej', 'World!']`
someMutableArray.value.splice(0, 1); // Console should print `Value changed to: ['World!']`

Objects:

const someMutableObject = mutable({ a: 'Something' });

logFn({ input: someMutableObject });

someMutableObject.value.b = 'Changed'; // Console should print `Value changed to: { a: 'Something', b: 'Changed' }`
someMutableObject.value.a = 'Data'; // Console should print `Value changed to: { a: 'Data', b: 'Changed' }`
delete someMutableObject.value.a; // Console should print `Value changed to: { b: 'Changed' }`

Authors

@donnikitos

Feedback

If you have any feedback, please reach out to us. We are open to suggestions, ideas and collaboration.