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:

importmutablefrom'@mutablejs/core';constsomeMutableCounter=mutable(0);someMutableCounter.value+=1;// someMutableCounter.value equals to 1someMutableCounter.value+=1;console.log(someMutableCounter.value);// Console output is `2`

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

import{mutableFn}from'@mutablejs/core';typeNamedParams={paramA: string;paramB: number};constwithNamedParams=mutableFn(({ paramA, paramB }: NamedParams)=>console.log(paramA,paramB),);constunNamedParams=mutableFn((a: number,b: boolean)=>console.log(a,b));

Usage/Examples

Primitive values:

importmutable,{mutableFn}from'@mutablejs/core';constlogFn=mutableFn(({ input }: {input: any})=>{console.log('Value changed to: ',input);});constsomeMutableData=mutable('Hello');logFn({input: someMutableData});someMutableData.value+=' World!';// Console should print `Value changed to: Hello World!`

Arrays:

constsomeMutableArray=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:

constsomeMutableObject=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' }`deletesomeMutableObject.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