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.
Quick Start
npm i --save muve
or yarn add muve
; // The modelconst model = counter: 0; // interact creates helpers for checking & changing the model.const getModel setModel = ; { const counter = ; // Validate that the count can be changed if value < 0 && counter < 1 return; // update the model with the new counter ;} // The view function represents the model { return <h2>modelcounter</h2>;} // Finally give the view, model, and target element to muve; // for simplicity we will update the counter every second;
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