Welcome to ManagementJS

Originally developer for Angular this is the ongoing port into Vanilla JS of a library allowing for easy event driven architecture

Installation

via npm

npm i @felixkletti/managementjs

Thats it :)

Getting started

Global Store

Want to share data globally and know when a variable is updated and which one ? The store is here for you.

To get started you want to create a Store first. Duh. A store is simply a class that extends the ManagementJS Store abstract class and then is transformed through the getStore function. Here an example :

class myStore extends Store{
        root_string_variable_undefined?: string;
        root_string_variable_defined: string = 'root_string_variable_defined';
        root_number_variable_undefined?: number;
        root_number_variable_defined: number = 5;

        root_string_array_undefined?: Array<string>;
        root_string_array_defined: Array<string> = ['root_string_array_defined'];

        root_object_undefined?: {
            object_string_variable_defined: 'object_string_variable_defined';
            object_string_variable_undefined: 'object_string_variable_undefined';
        }
        root_object_defined: {
            object_string_variable_defined: 'object_string_variable_defined';
            object_string_variable_undefined?: 'object_string_variable_undefined';
        } = {
            object_string_variable_defined: "object_string_variable_defined"
        }
        constructor() {
            super();
        }
    }
    const S= getStore( myStore);

Now that you have an instance of your store you can keep working on your myStore class(treat it like you would any other class) or use it somewhere else.

Maybe you just want to know when a variable is updated at any time.

const test_value = 'new value';
// currently S.root_string_variable_undefined = root_string_variable_defined
const terminate = S.onChange(
    S, // Here you are observing the whole store, you could also go deeper into a nested object and observe only a specific part of it.
    (val) => { // here we have our callback which will trigger anytime the object or any variable within the object is updated
    /// val = 'new value'
    }, 
    'root_string_variable_undefined' // here we have an optional discriminator specifying the primitive variable within the targeted object that we are interested in. This allowas us to only be notified when this specific value is updated
);
 S.root_string_variable_undefined = test_value; // we simply pass a new value onto our variable and the callback will be triggered as soon as the current page lifecycle ends.

Browser Events

Handle events throughout the frontend anywhere while retaining typesafety ?

Cloud Events

Connect any backend ( REST / WS / custom) to your Browser Events and make the whole infrastructure reactive