About Small Orange Reactive Store

A lighweight set of reactive Models and Collections built on top of RxJS and Lodash. It gives structure to web applications by providing models and collections with a rich API.

Data is represented by models, which can optionally belongs to a collection, that can be created, destroyed. Models and collections are built on top of RxJS, and they can be subscribed as them. So, any changes is going to be reflected on view state, keeping data in sync.

Model

A model manages entity properties, and takes care to broadcast changes along other application entities.

Collections

Collections helps you to group models, and encapsulate actions for them, like create, destroy. Further, it can sort models.

Model API

Properties

	cuid: string = Model's unique identifier;
	id: string | number = Attribute used as id defined by idAttribute;
	idAttribute: string = Attribute to be used as id;
	destroyed: boolean = true after destroy;
	lastSet: number = Last set's timestamp;
	stream: Observable = Events' stream;
	replayStream: Observable = Last events' stream;
	isNew: boolean = When there is no id yet;
	resource: string = Resource identifier, prefixes model.id at url;
	url: string = model.resource/model.id or collection.resource/model.resource/model.id or collection.resource/model.id;
	defaults: {[attributeName: string]: any} = Define default attributes;
	validate: (attributtes: object) => object = Define validation rules;
	parse: (attributtes: object) => object = Define parse rules;
	collection: Collection = The collection the models belongs to, usually is settled automatically by collection;
	typedAttributes: {[attributeName: string]: typeof Model | typeof Collection} = Allows define attributes which will be converted into Models or Collections, but behaves like any other attribute, and also report changes to parent Model

Methods

	constructor(attributes: object, options: object = null, extend: object = null);
	on(...filter: string, [replay: boolean = false | debounce: number]): Observable<any>;
	once(...filter: string, [replay: boolean = false | debounce: number]): Observable<any>;
	trigger(key: string, data: any = null): void;
	set(attributes: object, options: object = {replace: false, merge: true, silent: false, validate: true, typedAttributes: object = {[attribute: string]: [Model.set options] | [Collection.set options]}}): Model;
	unset(attribute: string, options: object = {silent: false}): Model;
	reset(options: object = {silent: false}): Model;
	destroy(options: object = {silent: false}): Model;
	toJS(): object;
	get(attribute: string, defaultValue: any = null): Model;
	has(attribute: string): boolean;
	keys(): Array<string>;
	values(): Array<string>;
	pick(...values): any;
	omit(...values): any;
	equals(key: string, value: any): boolean;

Usage Sample

	import {
		Model,
		rxjs
	} from 'smallorange-reactive-store';

	export class Message extends Model {
		idAttribute = '_id';
	}

Collection API

Properties

	cuid: string = Collection's unique identifier;
	id: string | number = Attribute used as id defined by idAttribute;
	destroyed: boolean = true after destroy;
	lastSet: number = Last set's timestamp;
	stream: Observable = Events' stream;
	replayStream: Observable = Last events' stream;
	resource: string = Resource identifier, prefixes model.id at url;
	url: string = collection.resource/collection.id or collection.id;
	defaultOrder: {[attributeName: string]: 'asc' | 'desc'} = Default collection order;
	parse: (args: Array<Model | object> | Model | object) => Array<Model | object> = Define parse rules;

Methods

	constructor(model: Model, models: Array<Model> | Array<object> | Model | object, options: object = null, extend: object = null);
	on(...filter: string, [replay: boolean = false | debounce: number]): Observable<any>;
	once(...filter: string, [replay: boolean = false | debounce: number]): Observable<any>;
	trigger(key: string, data: any = null): void;
	toJS(): Array<object>;
	get(id?: string | number): Model | Array<Model>;
	getOne(id: string | number): Model;
	has(id: string | number): boolean;
	set(models: object | Array<object> | Model | Array<Model>, options: object = {replace: false, merge: true, reset: false, silent: false, validate: true}): Array<Model>;
	reset(options: object = {silent: false}): Collection;
	destroy(options: object = {silent: false}): Collection;
	orderBy(iteratees: Array<string>, orders: Array<string>): Array<Model>;
	map(iteratee: Function | string): Array<Model>;
	reduce(iteratee: Function): Array<Model>;
	each(iteratee: Function): void;
	invokeMap(path: string, ...args): Array<Model>;
	every(predicate: Function | string): boolean;
	some(predicate: Function | string): boolean;
	max(predicate: Function | string): number;
	min(predicate: Function | string): number;
	keyBy(predicate: Function | string): object;
	groupBy(predicate: Function | string): object;
	filter(predicate: Function | string): Array<Model>;
	reject(predicate: Function | string): Array<Model>;
	find(predicate: Function | string, last: boolean = false): Model;
	findInde	x(predicate: Function | string, last: boolean = false): number;
	first(): Model;
	last(): Model;
	initial(amount?: number): Array<Model>;
	tail(amount?: number): Array<Model>;
	size(): number;
	keep(length: number): void;
	keepLast(length: number): void;

Usage Sample with React

	// collection
	import _ from 'libs/lodash';
	import {
		Collection
	} from 'smallorange-reactive-store';
	import {
		Message
	} from 'models';
	import {
		transport
	} from 'libs';

	export class Messages extends Collection {
		static defaultNick = `sir-${Date.now()}`;

		constructor(thread) {
			super(Message);

			this.thread = thread;

			transport
				.fetch()
				.subscribe(::this.set);
		}

		set nick(name) {
			this._nick = name;
		}

		get nick() {
			return this._nick || Messages.defaultNick;
		}

		send(message) {
			const _message = {
				_thread: this.thread,
				_id: Date.now(),
				nick: this.nick,
				message
			};

			this.set(_message);

			return transport.post(_message);
		}
	}

	// component
	import _ from 'libs/lodash';
	import React from 'react';
	import {
		Component
	} from 'smallorange-reactive-store-react';
	import {
		Messages as MessagesCollection
	} from 'collections';

	export class Messages extends Component {
		constructor(props) {
			super(props);
			
			this.messages = new MessagesCollection();
			this.state = {
				lastSet: null
			};
		}

		componentDidMount() {
			this.messages.on('set')
				.takeUntil(this.once('destroy'))
				.map(() => ({
					lastSet: this.messages.lastSet
				}))
				.subscribe(::this.setState);
		}

		shouldComponentUpdate(nextProps, nextState){
			return nextState.lastSet !== this.state.lastSet;
		}

		render() {
			return (
				<div>
					<label>Messages</label>
					<ul>
						{this.messages
							.map(model => (
								<li key={model.cid}>
									{model.get('nick')} said: {model.get('message')}
								</li>
							)
						)}
					</ul>
				</div>
			);
		}
	}