Introduction

This is a tiny state manager for javascript. This lightweight library (~3KB) can be useful in applications to manage states within a javascript application that require a high level of refreshment.

Usage

Get MidjetJS by dowloading a release and import in your html:

<script src="[...]/midjetjs.min.js"></script>

or directly from jsDelivr CDN :

<script src="https://cdn.jsdelivr.net/gh/rsz44/midjetjs@1.0.0/dist/midjetjs.min.js" integrity="sha384-+TMdF1TRjTh4RIkl/Yb4TVeiQizBaWTfWtbOWwI3FBeouez/9ZBFav7El8m8NwkP" crossorigin="anonymous"></script> 

Examples

MidjetJS provides a State class that contains all your supervised variables. Use the $() method to access your reactive variables within this state.

var state = new State();

state.$('myvar').watch((state, value, old_value) => {
	console.log('Value has updated from ', old_value, ' to ', value);
});

state.$('myvar').watch((s, v, o) => {
	console.log('Other subscriptor.');
});

state.$('myvar').value = 1; // Set value
console.log(state.$('myvar').value); // Get value

state.update(); // Update state

state.$delete('myvar'); // Delete your var and subscriptions.

Console output :

1
Other subscriptor.
Value has updated from  null  to  1

Example 2, Tiny events subscriptor :

const mysub = (state, sub, payload) => {
	console.log('tiny_event subscriptor 1', payload);
};
	
state.subscribe('tiny_event', mysub); // Subscribe callback
state.subscribe('tiny_event', (state, sub, payload) => {
	console.log('tiny_event subscriptor 2', payload);
});

state.emit('tiny_event', {'foo': 'bar'});
state.update();

state.unsubscribe('tiny_event', mysub); // Unsubscribe callback

Console output :

tiny_event subscriptor 2 {foo: 'bar'}
tiny_event subscriptor 1 {foo: 'bar'}

No more, no less.

---

Documentation

Summary:

State	ReactiveVar
$(k, dv=null)	watch(cb)
$delete(k)	unwatch(cb)
subscribe(e, cb)
unsubscribe(e, cb)
emit(e, payload)
update()

State class

Synopsis:

The State object is a collection of your futures reactive variables. Simply declare a new state via the constructor (no parameters) :

var state = new State();

State.$(k, dv=null)

Synopsis:

Get a variable stored in actual state, or create a new instance.

Parameters:

• k <string>, the key / variable name
• dv <any>, the default value of your variable inside the state (default is null).

Return:

This return a ReactiveVar object.

Example:

state.$('myvalue', 0);

console.log(state.$('myvalue').value); // 0

state.$('myvalue').value = 1;
console.log(state.$('myvalue').value); // 1

State.$delete(k)

Synopsis:

Delete a variable stored in actual state and attached callback(s) list.

Parameters:

• k <string>, the key / variable name.

Return: Nothing

State.subscribe(e, cb)

Synopsis:

This function subscribe a callback (cb) to an defined event (e).

Parameters:

• e <string>: The event name.
• cb <function(state, sub, old_value)>: The callback that will be called when the event e will be call. The callback is a function and takes state (the current state instance), sub (the subscription) and payload (the payload passed in argument of .emit methods) in parameter.

Return: Subscription object (This class is not documented as it is useless outside the built-in)

State.unsubscribe(e, cb)

Synopsis:

This will unsubscribe your callback (cb) to the defined event (e).

Parameters:

• e <string>: The event name.
• cb <function(state, value, old_value)>: the instance of the callback that should no longer be called.

State.emit(e, payload)

Synopsis:

Emitting an event (e) with a given payload (payload).

Parameters:

• e <string>: The event name.
• payload <any>: The events payload.

Return: Nothing

Example:

state.subscribe('say_hello', (st, sb, payload) => {
	console.log('Hello ' + payload.name);
});

state.emit('say_hello', {'name': 'Bob'});
state.update(); // Console output: 'Hello Bob'

State.update()

Synopsis:

This function MUST be integrated into your application logic to properly update your state.

On each call, it will call the necessary callbacks depending on the variables that have been changed in your state or the events that have been emitted.

Return: Nothing

Example:

var state = new State();

// will update your state every second.
const myLogical = setInterval(() => {
	state.update();
}), 1000);

ReactiveVar class

Synopsis:

The ReactiveVar object is one of your reactive variable stored in a State instance. You can get it directly via your State object. It represent one of your variable.

state.$('myvar'); // return a ReactiveVar object

To get access and modify its value simply use the .value propertie.

console.log(state.$('myvar').value); // Get the current value
state.$('myvar').value = 1; // Set the value to 1

Properties:

• value : Current value of the variable.
• hasChange : has changed in the current state (even is the value is the same).

ReactiveVar.watch(cb)

Synopsis:

Watch a state change.

Parameters:

• cb <function(state, value, old_value)>: The callback that will be called when the value of the variable changes. The callback is a function and takes state (the current state instance), value (the current value in state) and old_value (value of the variable in previous state, previous value) in parameter.

Return: Nothing

ReactiveVar.unwatch(cb)

Synopsis:

Unwatch a state change, remove a callback.

Parameters:

• cb <function(state, value, old_value)>: the instance of the callback that should no longer be called.

Return: Nothing

Changelog

• 1.0.0, 05 feb 2022
  • First Release