Megastores NPM

MEGASTORES

Store manager with realtime exchanges between client and server

Tests :

Dependances

redux https://github.com/reactjs/redux
engine.io https://github.com/socketio/engine.io

Requirement

nodejs >= 4.0 for server only

Installation

$ npm install --save megastores

How to use it

Server

const { Store, Megastores } = require('megastores');

var myStore = new Store('my-store');
var megastores = new Megastores();

megastores.attach(myStore).listen(8080);

myStore.subscribe(state => {
    console.log('new state :', state);
});

Client

<script src="node_modules/megastores/dist/megastores-client.js">
<script>
    var store = new Store('my-store');
    var megastores = new Megastores();

    megastores.attach(store).connect('ws://localhost:8080');

    store.put({ text: 'Hello world!' });
</script>

Features

Realtime exchanges between client and server, every action dispatched is synchronized between server and client.
Automatic reconnection and resynchronization if connection with server is lost
Offline mode with local storage persistence

Documentation

Server

Events

connection (client) Called every time when client opens connection with server
close Called every time when client loses connection with server
message (message) Called every time when client exchanges with server

// Exemple
var megastores = new Megastores();
megastores.listen(8080).on('open', () => {
    console.log('New connection openned.');
});

Methods

() Constructor, return an instance of Megastores
attach(store|[stores]) Attach a Store or a list of stores, also create redux store, so you need to attach all stores before starting server
listen(port) Start server and listen on port port
on(event|custom-event, callback) Listen event
send(custom-event, data, client = null) Send event to one client or all of them

// Exemple
var store1 = new Store('store1');
var store2 = new Store('store2');

var server = new Megastores();
server.attach([store1, store2]).listen(8080);

server.on('custom-event', message => {
    let client = message.client;
    let data = message.data;

    server.send('response-custom-event', 'hello world!', client);
});

Server - Store

Property

items Get data stored

Methods

(name, initialStore = []) Constructor, return an instance of Store
- initialStore can be an array or an Object
put(item|property) Put an item or a property of Object into Store
update(index, item|property) Update item or property at index
remove(index|property) Remove item or property
use(callback) Add middleware called every time when action is dispatching
- callback(action, oldState, newState, next)
subscribe(callback) Add listener called each time action is dispatched
- callback(items) With items is the current state of Store

// Exemple
var fruits = new Store('fruits', ['apple', 'lemon', 'cherry']);

var server = new Megastores();
server.attach(fruits).listen(8080);

fruits.subscribe((items) => {
    console.log(items); // display current state
});

fruits.use(() => console.log('juste say hello when state changes'));

fruits.put('raspberry');
fruits.update(1, 'strawberry'); // change lemon to strawberry
fruits.remove(0); // delete apple

Client

Events

open Called every time when connection with server is open
close Called every time when client loses connection with server
message (message) Called every time when server exchanges with client

// Exemple
var client = new Megastores();
client.connect('ws://localhost:8080').on('open', () => {
    console.log('Connected with server.');
});

Methods

() Constructor, return an instance of Megastores
attach(store|[stores]) Attach a Store or a list of stores, also create redux store, so you need to attach all stores before starting a connection with server
connect(url, port) Connect to server with url and port
on(event|custom-event, callback) Listen event
send(custom-event, data) Send event to server

Client - Store

Properties

items Get data stored

Methods

(name, initialStore = [], options = {}) Constructor, return an instance of Store
- initialStore can be an array or an Object
- options Object of options
  - offline Default false, enable offline mode, there are no exchanges with server, and data are stored into local storage
  - enableCache Default true, enable catching items when connection with server is lost
put(item|property) Put an item or a property of Object into Store
update(index, item|property) Update item or property at index
remove(index|property) Remove item or property
use(callback) Add middleware called every time when action is dispatching
- callback(action, oldState, newState, next)
subscribe(callback) Add listener called each time action is dispatched
- callback(items) With items is the current state of Store

// Exemple
var fruits = new Store('fruits', ['apple', 'lemon', 'cherry']);

var client = new Megastores();
client.attach(fruits).connect('ws://localhost:8080');

fruits.subscribe((items) => {
    console.log(items); // display current state
});

fruits.use(() => console.log('juste say hello when state changes'));

fruits.put('raspberry');
fruits.update(1, 'strawberry'); // change lemon to strawberry
fruits.remove(0); // delete apple

Example

Todolist client

<script src="node_modules/megastores/dist/megastores-client.js">

<ul id="list">
</ul>
<form id="todo-form">
    <input type="text"/>
    <button type="submit">Envoyer</button>
</form>

<script>
    const form = document.querySelector('#todo-form');
    const list = document.querySelector('#list');

    const todoStore = new Store('todo');
    const client = new Megastores();

    const render = function(items) {
        list.innerHTML = '';
        items.forEach(function(item) {
            var li = document.createElement('li');
            li.innerHTML = item.do;
            list.appendChild(li);
        });
    }

    client.attach(todoStore).connect('ws://localhost:8080').on('open', function() {
        render(todoStore.items);
    });

    todoStore.subscribe(function(items) {
        render(items);
    });

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        var input = form.querySelector('input');
        todoStore.put({ do: input.value });

        input.value = null;
    });
</script>

Todolist server

const { Store, Megastores } = require('megastores');

var items = [] // Get items from database

const todoStore = new Store('todo', items);
const server = new Megastores();

server.attach(todoStore).listen(8080);

todoStore.use((action, oldState, newState, next) => {
    // Persist data into database

    next();
});