mutableJS / Core

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

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' }`

FAQ

Why was mutableJS created?

Inspired by the other big front-end frameworks and libraries, like React, Vue.JS and friends, research on variables mutability has started and developed into the current reactive execution mechanism.

Is it ready to use?

The package is still pretty experimental, but is already used in some small usable web-apps.
@mutablejs/core is primarily used with the @mutablejs/dom package, see the Starter Repository.

Accompanying packages?

Currently there is 1 more package: @mutablejs/dom and 2 more repos: mutableJS / TypeScript Starter Template, mutableJS / Demo Repo.

Authors

• @donnikitos

Feedback

Any feedback? Join our Discord server and reach out to us.
We are open to suggestions, ideas and collaboration.

Support

Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.

via Ko-Fi	Buy me a coffee	via PayPal