Neato Polyester Material

    evolveui

    1.0.0 • Public • Published

    EvolveUI

    Event Driven State Management

    by Alex Merced of AlexMercedCoder.com


    About

    EvolveUI is a library for state management that allows you to have your state stored in a single or multiple objects that trigger updates in your app based on events for individual property updates.

    Essentially you can store your state in one place without have to trigger a complete rebuilding of your UI as the state is updated.

    Installation

    CDN

    <script src="https://res.cloudinary.com/dithdroai/raw/upload/v1627836040/libraries/evolveui_v2auiq.js" charset="utf-8" defer></script>
    

    NPM

    npm i evolveui
    

    in your javascript file

    const State = require("evolveui")
    

    Setup - Create Your State Object

    The State class allows you to create a state object.

    const State = require("evolveui")
    const state = new State()

    Creating a new property in state

    const [getUser, setUser] = state.createState("user", {username: "", token: ""})

    The getUser function returns that particular data from state, the setUser function will take the new state and if the new state is different than the old state will emit an event by the name passed in this case "user". By default the event will be emitted by the window object, but setUser can take a second argument that is the desired node to trigger the event.

    The event can be used to trigger any ui or other changes you'd want that should depend on the state.

    Accessing all the state

    So while each property created will emit its own event, you can access the entire in several ways.

    • directly from the state object under its state property state.state.user
    • using the the state objects getState method which return the entire state method state.getState().user
    • the state will accessible in the event object under event.details so accessing one of your created properties could be as easy at event.details.user

    The events object

    You may want to dispatch the event during other times than updating the data so all the generated events live under its event property which is an object that stores the event under the same key as the data is stored in the state.

    div.dispatchEvent(state.events.user)

    Keywords

    none

    Install

    npm i evolveui

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    5.96 kB

    Total Files

    7

    Last publish

    Collaborators

    • alexmerced