Muve

Muve is a micro library for building interactive javascript applications. Muve is built around a basic concept, changes to the model update the view. There are three parts to an application built with Muve; A model to represent the state of your application, functions that serve as an api for updating your model, and a view to describe that model.

Demos

A progressive web app that features routing, code-splitting, and gives an idea of how to structure larger apps.

muve-forward

Quick Start

npm i --save muve   or   yarn add muve

import muve, {h, interact} from 'muve';
 
// The model
const model = {counter: 0};
 
// interact creates helpers for checking & changing the model.
const {getModel, setModel} = interact(model);
 
function updateCounter(value) {
    const {counter} = getModel();
 
    // Validate that the count can be changed
    if (value < 0 && counter < 1) return;
 
    // update the model with the new counter
    setModel({counter: counter + value});
}
 
// The view function represents the model
function view(model) {
    return <h2>{model.counter}</h2>;
}
 
// Finally give the view, model, and target element to muve
muve(view, model, document.getElementById('root'));
 
// for simplicity we will update the counter every second
setInterval(() => updateCounter(1), 1000);

For more in depth examples be sure to look at the demos.

API

In an attempt to keep things simple, muve exposes only three functions one of which is to enable the use of jsx.

muve(view, init, target, hydrate)

Initializes a muve application, this performs some setup and does the initial render of the view.

Parameters

Name	Type	Description
view	Function	The entry point of your application
init	Object	The initial model of your application
target	HTMLElement	The element muve should attach itself to
hydrate	Boolean	Set to true if the page was server rendered

Returns

• Void

h(type, attributes, children)

Used to convert jsx to js objects. Import this function in any file where you wish to use jsx.

interact(model, log?)

Given your initial model, interact returns two functions for interacting with your model.

Parameters

Name	Type	Description
model	Object	The initial model of your application
log	Function?	Executed each time setModel is called with a name

Returns

• Object
  • getModel
  • setModel

getModel()

Returns the current model.

Returns

• Object

setModel(update, name?)

When executed the update will be applied to your application's model, your view function will be executed, and the DOM will be patched.

Parameters

Name	Type	Description
update	Object	A part of your model you wish to change
name	String?	Name your updates to have them logged

Returns

• Void