# mva

> A frontend and backend library

Latest version **4.4.0** (published 2016-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install mva
pnpm add mva
yarn add mva
bun add mva
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.4.0 |
| Published | 2016-12-15 |
| First published | 2016-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | justalex |
| Maintainers | justalex |
| Keywords | framework, react, client, server, websockets |

## Links

- npm: https://www.npmjs.com/package/mva
- npm.io page: https://npm.io/package/mva

## Dependencies (6)

- [clone](https://npm.io/package/clone.md) ^2.0.0
- [react](https://npm.io/package/react.md) ^15.0.1
- [express](https://npm.io/package/express.md) ^4.14.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.1
- [socket.io](https://npm.io/package/socket.io.md) ^1.7.1
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^1.7.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 4.4.0 (latest) — 2016-12-15
- 4.3.16 — 2016-12-15
- 4.3.15 — 2016-12-15
- 4.3.14 — 2016-12-14
- 4.3.13 — 2016-12-14
- 4.3.12 — 2016-12-14
- 4.3.11 — 2016-12-14
- 4.3.10 — 2016-12-14
- 4.3.9 — 2016-12-14
- 4.3.8 — 2016-12-14
- 4.3.7 — 2016-12-14
- 4.3.6 — 2016-12-13
- 4.3.5 — 2016-12-13
- 4.3.4 — 2016-12-13
- 4.3.3 — 2016-12-13
- … 72 more at https://npm.io/package/mva/versions

## README

## 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:

```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:

```js
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:

```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:

```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:

```js
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

---
_Source: https://npm.io/package/mva · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._