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.
A model manages entity properties, and takes care to broadcast changes along other application entities.
Collections helps you to group models, and encapsulate actions for them, like create, destroy. Further, it can sort models.
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
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;
import {
Model,
rxjs
} from 'smallorange-reactive-store';
export class Message extends Model {
idAttribute = '_id';
}
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;
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;
// 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>
);
}
}