Readme
Straightforward Model View Controller
This is a simple-as-it-gets library for using a virtual DOM to separate the handling of state and view.
The entire API consists of 4 functions.
It uses simple JavaScript, has no dependencies, requires no transpilation, and has fewer than 300 lines of code.
Visit the demos page.
A complete example. See it in action here.
<html>
<body>
<div id="container"></div>
<script src="./smvc.js"></script>
<script>
const { init, h, text } = SMVC;
const root = document.querySelector("#container");
const initialState = 0;
const update = (state, msg, enqueue) => state + msg;
const view = (state) => [
h("div", { style: "color: red", onClick: () => 2 }, [
h("p", {}, [
text(`The count is ${state}. Click here to increment.`)
])
])
];
const { enqueue } = init(root, initialState, update, view);
enqueue(1);
</script>
</body>
</html>
After importing smvc.js start your application by calling smvc.init with the appropriate arguments.
You can use the library as follows:
// `SMVC` is the only identifier the library adds to the global
// scope. It is an object with a function to start the
// application and two functions to build html elements
const { init, h, text } = SMVC;
// Where the application will be rendered
const root = document.querySelector("#container");
// An initial state for the application.
const initialState = { ... };
// How to update that state
function update(state, msg, enqueue) { ... }
// A function to build the view using the `h` and `text`
// functions from in the SMVC object.
function view(state) { ... }
// Start the application. `init` returns an object with the
// enqueue function, which is is used to scheduled messages
// to be used to update the state.
const { enqueue } = init(root, initialState, update, view);
This library creates elements in the page based on a description of how the page should look like.
The user-defined view function should return this description in the form of an
array of element descriptions.
There are two functions to create HTML element descriptions.
text(str: string) : Element - Describe a text node.h(tag: string, properties: Object, children: Array<Element>) : Element - Describe an HTML element.The properties object should contain HTML properties and attributes as keys.
Keys that start with the on prefix in the properties object are treated as
event listeners and its values should be functions.
Event listener functions will be given the event they are handling as an argument.
If an event listener function returns a value different from undefined this
value will be used as a message and queued to be sent to the update function.
Examples:
function view(state) {
return [
// A `div` with a class.
h("div", { class: "container" }, [ ... ]),
// A disabled button.
h("button", { disabled: "true" }, [ ... ]),
// A button that will emit the string `"toggle"` as a message when clicked.
h("button", { onClick: () => "toggle" }, [ ... ]),
// A button that will emit a message containing the HTML event handled by the onClick listener.
h("button", { onClick: e => e }, [ ... ])
]
}
The state is updated by handling messages in the user-defined update function.
There are two ways to emit messages.
Returning from an event listener
Any value that is not undefined returned by an event listener will be emitted as a message.
// A button which when clicked will emit as a message
// the object { tag: "clicked, event: <event> }
// where <event> is the HTML event being handled.
h(
"button",
{
onClick : function (e) {
return { tag: "clicked", event: e }
}
},
[ text("click") ]
)
Using the enqueue function
This function is in the object returned by init and will schedule a message to be handled.
const { enqueue } = init(root, initialState, update, view);
// Emit a message.
enqueue({ tag: "setCounter", value: 2 });
It is safe to call enqueue inside the update function.
Messages are put in a queue and the update function is called for each of them in order.
The user-defined update function is the part of the program where the state
should be changed. It must return the new state.
It takes three arguments:
enqueue function.It is safe to call enqueue from inside update.
FAQs
Straightforward Model View Controller
The npm package smvc receives a total of 2 weekly downloads. As such, smvc popularity was classified as not popular.
We found that smvc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.