Minimalist and functional javascript state manager.

Demo License: MIT GitHub Tag bundlejs

• ES6 module.
• Pure functional design.
• View layer agnostic.
• Tiny codebase, very understandable.
• Designed following the principles of UNIX philosophy.
• Very well tested.
• Ridiculously small API. After reading this file you will understand Ring better than me.

A counter that increments by one every time the user confirms.

Demo

import ring from "https://cdn.jsdelivr.net/gh/marcodpt/ring/index.js"
ring({
 init: 0,
 register: update => ({
 inc: () => update(count => count + 1)
 }),
 view: (count, {inc}) => {
 if (window.confirm(`Count is ${count}. Increment?`)) {
 inc()
 }
 }
})

• Counter: Demo Source
• Todo: Demo Source
• Clock: Demo Source
• Stopwatch: Demo Source
• Lazy DB: Demo Source

The initial state of the ring. It can be any type of data.

It is called before initializing the ring returning the registered events.

Receives a setter to update the state and call view with the newState.

Triggers a call to a registered event passing ...args to the event.

Events registered at ring initialization by the register function.

Special event called at startup.

The function signature of a user-defined event can have any name.

Special event triggered when stop is called.

Updates the view of the ring, it is always called after an update or when starting.

Returns a function that stops the ring.

If your project is not on the list, submit a pull request, it is a way to increase awareness of your project and this module.

• Merlin: A functional JS framework that values elegance, simplicity and minimalism.

It's a very simple project. Any contribution, any feedback is greatly appreciated.

If this project was useful to you, consider giving it a star on github, it's a way to increase evidence and attract more contributors.

This work is hugely influenced by these amazing projects:

• raj
• hyperapp
• elm
• vue

A huge thank you to all the people who contributed to these projects.

I was extremely delighted and impressed with Hyperapp and Raj when I started using them.

But some things started to bother me:

• view receives dispatch in Raj, which implies that actions are not static, and with each call to view new actions are generated.
• Hyperapp achieves static actions by placing them outside the app. Which in my opinion breaks the paradigm of a pure, internal execution environment.
• It's hard to know the state within dispatch calls when it involves concurrent asynchronous calls both in Raj and in Hyperapp.
• I can't understand Hyperapp's effects API to this day.
• It's very difficult to separate layout from javascript logic in Hyperapp's views.

What would I want from a state management library?

• The actions define static events within the app, and these could be called from each other, also functioning as a library.
• State updates must be explicit and always carry the current state value, regardless of the asynchronous sequence of execution.
• It will be isolated, tiny, easy to understand and there will be no reason for me to want to modify the API. Without integrating vDom, template engine, routing, and others.

So I decided to try to create my state management library, to serve as a solid foundation for more complex problems.

And I'm happy with the result!