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.
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/[email protected]/dist/midjetjs.min.js" integrity="sha384-+TMdF1TRjTh4RIkl/Yb4TVeiQizBaWTfWtbOWwI3FBeouez/9ZBFav7El8m8NwkP" crossorigin="anonymous"></script>
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.
Summary:
State | ReactiveVar |
---|---|
$(k, dv=null) | watch(cb) |
$delete(k) | unwatch(cb) |
subscribe(e, cb) | |
unsubscribe(e, cb) | |
emit(e, payload) | |
update() |
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();
Synopsis:
Get a variable stored in actual state, or create a new instance.
Parameters:
k
<string>, the key / variable namedv
<any>, the default value of your variable inside the state (default isnull
).
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
Synopsis:
Delete a variable stored in actual state and attached callback(s) list.
Parameters:
k
<string>, the key / variable name.
Return: Nothing
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 evente
will be call. The callback is a function and takesstate
(the current state instance),sub
(the subscription) andpayload
(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)
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.
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'
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);
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).
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 takesstate
(the current state instance),value
(the current value in state) andold_value
(value of the variable in previous state, previous value) in parameter.
Return: Nothing
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
1.0.0
, 05 feb 2022- First Release