reactive-di-observable

Observable state data-plugins for reactive-di.

• Expand ideas of dependency injection to observable state.
• Based on zen-observable and promises.
• Transactional setter for asyncronous state updates.
• Observable model state handling

Setup

Include Observable flow type definitions.

bash npm i observable-helpers

.flowconfig

[libs]
node_modules/observable-helpers/flow-typed

Register plugins in reactive-di:

// @flow
// main.js
import type {
    Container,
    ConfigItem,
    ContainerManager,
    CreateContainerManager
} from 'reactive-di'

import {
    createManagerFactory,
    defaultPlugins,
    createHotRelationUpdater
} from 'reactive-di'

import {observablePlugins} from 'reactive-di-observable'

const createContainerManager: CreateContainerManager = createManagerFactory(
    defaultPlugins.concat(observablePlugins),
    createHotRelationUpdater
);
const config: Array<ConfigItem> = [
// ...
];
const cm: ContainerManager = createContainerManager(config);
const di: Container = cm.createContainer();

observable and computed

• observable - define observable data with initial state.
• computed - listen changes in observable dependencies.

// @flow
// interfaces.js

export interface IResolution {
    width: number;
    height: number;
}

// @flow
// main.js
import type {
    ConfigItem
} from 'reactive-di'
import type {IResolution} from './interfaces'
import type {
    ObservableResult
} from 'reactive-di-observable'

import _ from 'babel-plugin-transform-metadata'
import Observable from 'zen-observable'

import {
    computed,
    observable
} from 'reactive-di-observable/configurations'

class Resolution {
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width
        this.height = height
    }
}

let count: number = 0;

// Example observable changes resolution each 0.5 s.
const observable: Observable<IResolution, Error> = new Observable((observer: Observer) => {
    setInterval(() => {
        observer.next(new Resolution((count % 2) ? 1024 : 1368, 768))
    }, 500)
});

class MyComputed {
    resolution: IResolution;

    constructor(
        res: IResolution
    ) {
        this.resolution = res
    }
}

const config: Array<ConfigItem> = [
    observable((_: IResolution), {
        value: new Resolution(640, 480),
        observable,
        // is pending state by default ?
        pending: true
    }),
    computed(MyComputed)
];

// ...
// Without computed, observable works as regular value: returns current state.
const res: IResolution = di.get((_: IResolution));

// Computed converted to current value + observable
const {value, observable}: ObservableResult<MyComputed, Error> = di.get(MyComputed);

setter

Transactional set observable data. Function with injected deps, that returns operations: combination of objects, promises or observables.

// @flow
declare type SyncOperation<T> =
    {object: Object}
    | {key: DependencyKey, value: T};

declare interface ObservableOperation {
    observable(): Observable<Array<Operation>, Error>;
}

declare interface PromiseOperation {
    promise(): Promise<Array<Operation>>
}

declare type Operation<T> = SyncOperation<T> | PromiseOperation | ObservableOperation;

SyncOperation returns object, applied immediately to injected model via observable helper. PromiseOperation returns promise of Operation and will be enqueued to qeue of promises (one qeue per container) and applied sequentally.

// @flow
import type {Operation} from 'reactive-di-react'

function addWidth(
    currentRes: IResolution,
    /* @args */
    addValue: number
): Array<Operation> {
    const res = new Resolution(currentRes.width + addValue, currentRes.height)
    return [
        {key: (_: IResolution), value: res}
        { promise: () => fetch('/resolution', {
                method: 'POST',
                json: res
            })
        }
    ]
}

meta

Extract loading state from observable or setter.

// @flow

import type {Meta} from 'reactive-di-react'

type MyMeta = Meta

const config: Array<ConfigItem> = [
    observable((_: IResolution), {
        value: new Resolution(640, 480),
        observable,
        // is pending state by default ?
        pending: true
    }),
    computed(MyComputed),
    meta((_:MyMeta), (_: IResolution), addWidth)
];