Reactivate NPM

Reactivate

Reactivate is a module that is a composition of many other useful modules:

Quick Links

General

Modules

Installation

npm install reactivate --save

Example Apps

Hello Reactivate!

Entry

Entry provides some convenience functions for working with entries. An entry is an array where the head is the key and the tail contains values (e.g.: '/some/key', value1, value2, ...).

import {Entry} from 'reactivate';

// Returns the array of values for an entry
var values = Entry.values(entry);

// Returns the key of an entry
var key = Entry.key(entry);

Key

Key provides convenience functions for parsing and stringify'ing keys.

import {Key} from 'reactivate';

// Converts string format into array format
var keys = Key.parse('/i/am/a/key');

// Converts array format into string format
var key = Key.stringify(['i','am','a','key']);

Route

Route is the core of Rille and provides support for routing entries (key + values) to appropriate subscribers.

import {Route} from 'reactivate';

// Create a route
const route = Route();

// Subscribe to receive updates to a route
route.subscribe((key, ...values) => {
    console.log('My key is ' + key + ' and my values are ' + JSON.stringify(values));
});

// Subscribe to receive updates on a child route
route('/child/1').subscribe((key, ...values) => {
    console.log('My key is ' + key + ' and my values are ' + JSON.stringify(values));
});

// Subscribe to receive updates for all child of a route (a wildcard route)
route('/child/*').subscribe((key, ...values) => {
    console.log('Wildcard Route: My key is ' + key + ' and my values are ' + JSON.stringify(values));
});
                 
// Push a value(s) to a route
route.push('Hi!');

// Push value(s) of any type to a route
route.push('Hi!', {user: 'Frank'}); 

// Push value(s) to a child route
route('/child/1').push('Hi child!');

Store

Store is a route that retains it's most recent entry.

import {Store} from 'reactivate';

// Create a store just like a route
const store = Store();

var child = store('/some/child');

// Subscribe to a store just like a route
child.subscribe((...entry) => {
    console.log('received ' + JSON.stringify(entry));
});

// Push to a store just like a route
child.push('Hello child!');

// Get the most recent entry
var entry = child.entry();
console.log('most recent entry ' + JSON.stringify(entry));

// Get the array of values for the most recent entry
var values = child.values();
console.log('most recent values ' + JSON.stringify(values));

// Get a particular value from the most recent entry
console.log('message is "' + child.values(0) + '".');

Component

Components are pre-wired to render whenever a Reactivate store receives data.
Components are React components and still support the React features you've come to love.

import {Component,Store} from 'reactivate';
import {render} from 'react-dom';

const HelloReactivate = Component({
    store: Store('/profile'),
    getInitialState() {
        this.store.push({name: 'Reactivate'});
    },
    onChange(event) {
        this.store.push({
            name: event.target.value
        });
    },
    render() {
        return (
            <div>
                <Greeting store={this.store}/>
                <div>
                    <hr/>
                    <input type="text" onChange={this.onChange} placeholder="Enter Name"/>
                </div>
            </div>
        )
    }
});

const Greeting = Component({
    render() {
        return <span>Hello {this.store.entry()[1].name}!</span>
    }
});

render(
    <HelloReactivate></HelloReactivate>,
    document.getElementById('app')
);

Change Log

2.0.0

Reactivate now uses "rille", "rille-react".
Reactivate is now an all in one solution for people who like all things Rille and React.

1.5.8

"History" is now more fittingly named "Log".
"Log" is exposed as future functionality will utilize it directly (e.g. time machine support).

1.5.4

Added "changeCount" to Store via history.
Added "size" to Store via history.
Added allowance for unlimited capacity when set to 0. Default to Store is still 1.