# smallorange-reactive-store

> A lighweight set of reactive Models and Collections built on top of RxJS and Lodash.

Latest version **1.1.13** (published 2017-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install smallorange-reactive-store
pnpm add smallorange-reactive-store
yarn add smallorange-reactive-store
bun add smallorange-reactive-store
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.13 |
| Published | 2017-04-19 |
| First published | 2017-01-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Felipe Rohde |
| Maintainers | feliperohde |

## Links

- npm: https://www.npmjs.com/package/smallorange-reactive-store
- Repository: https://github.com/feliperohdee/smallorange-reactive-store
- Homepage: https://smallorange.co
- Issues: https://github.com/feliperohdee/smallorange-reactive-store/issues
- npm.io page: https://npm.io/package/smallorange-reactive-store

## Dependencies (3)

- [cuid](https://npm.io/package/cuid.md) ^1.3.8
- [rxjs](https://npm.io/package/rxjs.md) ^5.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4

## Recent versions

- 1.1.13 (latest) — 2017-04-19
- 1.1.12 — 2017-04-11
- 1.1.11 — 2017-04-11
- 1.1.10 — 2017-04-11
- 1.1.9 — 2017-04-11
- 1.1.8 — 2017-04-06
- 1.1.7 — 2017-03-31
- 1.1.6 — 2017-03-31
- 1.1.5 — 2017-03-31
- 1.1.4 — 2017-03-31
- 1.1.3 — 2017-03-31
- 1.1.2 — 2017-03-31
- 1.1.1 — 2017-03-31
- 1.1.0 — 2017-03-31
- 1.0.11 — 2017-02-22
- … 10 more at https://npm.io/package/smallorange-reactive-store/versions

## README

[![CircleCI](https://circleci.com/gh/feliperohdee/smallorange-reactive-store.svg?style=svg)](https://circleci.com/gh/feliperohdee/smallorange-reactive-store)

# 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>
				);
			}
		}

---
_Source: https://npm.io/package/smallorange-reactive-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._