Newline Proliferating Maniac

    fatalist
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    npm version Build Status PRs Welcome

    Another one js state management library based on state machines.

    Simple example

    Let's say we have a button and we want to fetch some data, when clicking on it.

    Simple markup:

    <body>
        <button></button>
        <span></span>
     
        <script src="dist/main.js"></script> 
    </body>

    Find our button and span in DOM.

    import StateMachine, { bindMappings } from 'fatalist'
     
    const button = document.querySelector('button')
    const span = document.querySelector('span')

    Then create our state machine with some initial state

    const stater = new StateMachine('IDLE_STATE')

    Then we're going to describe our machine states and transitions between them.

    To do that we'll use addState and addTransition methods.

    addState takes just a name of addable state.

    addTransition takes three arguments: from, to and action. First two are pretty obvious. Third one is some king of action, which should be fired to perform a transition.

    Notice, that if we want to reload data, we will make a transition from LOADED_STATE to LOADING_STATE.

    stater.addState('IDLE_STATE')
    stater.addState('LOADING_STATE')
    stater.addState('LOADED_STATE')
    stater.addTransition('IDLE_STATE', 'LOADING_STATE', 'load')
    stater.addTransition('LOADING_STATE', 'LOADED_STATE', 'loaded')
    stater.addTransition('LOADED_STATE', 'LOADING_STATE', 'load')

    Of course we want to react on state changing in some way. So let's change the text inside button. We'll make it in a declarative way, by mapping texts to states.

    const buttonTextMappings = {
        IDLE_STATE: 'Load stuff',
        LOADING_STATE: 'Loading stuff...',
        LOADED_STATE: 'Here u go',
    }

    There's a helper, called bindMappings. We will use it to map current state to text, which we want to see inside button, and in case, when we did not describe some case inside our mappings object, we'll fallback to default value.

    const getButtonText = bindMappings(buttonTextMappings).withDefault('Load stuff')

    Subscribe on state changing.

    stater.subscribe(state => {
        button.textContent = getButtonText(state)
    })

    You may be wondering, how will we handle side effects? There's a trigger mechanism in Fatalist. It's kinda similar to commands in Elm. We are reacting on some event by putting a trigger on it. It will be fired on a state change.

    const onLoadTrigger = (currentState, dispatch) =>
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(data => span.textContent = data.title)
            .then(_ => stateMachine.dispatch('loaded'))
     
    stater.setTrigger('load', onLoadTrigger)

    Put click listener on our button.

    button.addEventListener('click', () => stater.dispatch('load'))

    Install

    npm i fatalist

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    105 MB

    Total Files

    27957

    Last publish

    Collaborators

    • slaviqueue