State.js - state, made easy.

Many times, we don't want a whole framework/components. Just the reactivity to changes. And that's where state.js comes to help you.

How it works?

State.js is a small, effective engine that allows you to use interpolations from your data object, and after that, we will take care of rendering the changes.

Usage

All you need, is to import the State object from the package after installing it via npm.

Installation

npm i @dia-open/state.js

Usage

After that, create a .js file, and link it to an html file.

In the html file import the State class like so: import { State } from '/path/to/state.js';

After that, create a new State object.

const app = new State('#selector', {stateObject}, StrictMode?)

And then it will compile your interpolations.

Interpolations

In the linked HTML file, a you can use interpolations inside the element you specified in the new State('#this_selector') like so:

<div id="selector"> {{ x }} </div>

the x, will be taken from the data object. so if you instantiated like this:

const app = new State('#selector', {x: 'Hello world!'})

It should display: Hello world!

Reactiveness

Now, that was cool. But, what if x changed?

Then simply call: app.setState(prev => prev.x = 'New hello world!')

And then, you should see that our Hello world! changed to New hello world!

prev? what?

The prev parameter passed, is just the old snapshot of the data object. Then you see we are setting the x varaible to a new object! NOTE: This is a short arrow function, the bellow examples will help you understand it better if you are not an ES6 guy.

app.setState(function (prev) {
    prev.x = 'New value!'
})   

app.setState(prev => {
    prev.x = 'New value!';
})   

Now, this is all for the first version.

But, we will add a lot of other features, like change comparison, and a lot of others.

Stay tuned!