arash-es/simplestate

simpleState

javascript state management that is:

• minimal ~ there is only 3 properties
• tiny ~ only 1.8kb
• reactive ~ fully reactive to state changes with help of 'subscribe' method
• performant ~ you can subscribe to a part of the state and intercept its changes

class SimpleState<T extends object>{
    get data(): T;
    unsubscribe(callbackFn: Subscriber): void;
    subscribe<G = T>(selectorString: string & NestedKeyOf<T>, callbackFn: Subscriber<G>): Subscriber<G>;
}

import { SimpleState } from "@arashes/simplestate";

const store = new SimpleState({
    personalInfo: {
        name: "",
    },
});

input.addEventListener("input", (evt) => {
    const name = (evt.target as HTMLInputElement).value as string;
    store.data.personalInfo.name = name;
});


store.subscribe<string>("personalInfo.name", (name) => {
            inputShow.innerHTML = name;
            // runs on every input changes
});