mva

Usage

MVA uses a state to represent the model. Components are views that render the model. An action, mostly initiated by a view notifies every model that subscribed to it. The model then can trigger a state transition and inform the views.

An action is easy to create. Here we define some actions for our flow model in src/actions/flow.js:

import { Action } from 'mva';

export const SetDialog = new Action();
export const SetContext = new Action();

Next we can create the flow model in src/state/flow.js and subscribe to these actions:

import * as Actions from '../actions/flow';

export default ({ init, on }) => {
    init('dialog', {});

    on(Actions.SetDialog, ({ dialog }, state, update) => {
        state.dialog = dialog;
        update(state);
    });

    on(Actions.setContext, ({ context }, state, update) => {
        update({ dialog }); // update directly
    });

};

The handler just takes an object containing the new dialog / context to set on the state and triggers the notification via the update(state) function. The models in src/state should all be exported in one file, e.g. src/store.js:

import { Store } from 'mva';
import Flow from './flow';

export default Store([ Flow ]);

The Store function initializes the models and passes the object with the available methods. These are init, on, load and persist. While init and on only do transient changes, the load and persist functions have side effects that get / set the state in the localstorage.

Components do not need to subscribe directly to any models. The exported Store is passed to the root node of the application, commonly called App. From there on the state gets (partially) distributed to child nodes like usually in React. An entry point lets the App subscribe to the Store, which then in turn passes the state initially and on every state transition to the App.

The definition of the entry is always the same, here in src/entry.js:

import { Run } from 'mva';
import App from './components/app';
import Store from './state/store';

// May also import styles here
import './style/app.scss';

Run(Store, App);

A Component can trigger an action by simply calling it with an argument. Note that Actions only take one argument. However, it's easy to work with if you pass always an object with the required parameters. The model than can destruct the object in the function parameter definition. For example the use of SetContext in the src/components/app.js file:

import { React } from 'mva';
import { SetContext } from '../actions/flow';

export default state => {
    const context = state.context ? state.context : 'No Context';

    return <div className="app">
        {`Context enabled: ${context}`}
        <button onClick={() => SetContext({ context: 'Test' }) }>
            Set context to Test
        </button>
        <button onClick={() => SetContext({ context: null } )}>
            Clear context
        </button>
    </div>
};

Components

MVA also includes implementations of commonly used components:

• Accordion
• Canvas
• Checkbox
• Combobox
• Context
• DatePicker
• Dialog
• FileBrowser
• Form
• List
• Slide List
• Split Panel
• Tabs

TODO

• Describe Component interfaces
• Describe Store usage with load, persist and id
• Enhance and introduce utils