Getting Started

Eagle Eye is a framework agnostic state manager for javascript/typescript applications. It serves as a single observable location to maintain, update and consume long-lived widely visible state.

Eagle Eye may serve as a basis for framework dependent state managers (e.g. the React Observable Context JS).

npm install --save @webkrafters/eagleeye

Creating the state manager

To obtain a fresh Eagle Eye instance, just call the createEagleEye(...) function.

import { createEagleEye } from '@webkrafters/eagleeye';
const MyContext = createEagleEye( undefined|{
    prehooks? : Prehooks<T>,
    storage? : IStorage<T>,
    value?: T|AutoImmutable<T>
});

// Alternate:
// ----------
// import { EagleEyeContext } from '@webkrafters/eagleeye';
//
// const MyContent = new EagleEyeContext<T>(
//     Prehooks<T>?,
//     IStorage<T>?,
//     T|AutoImmutable<T>?
// );

Providing the global store reference

Simply accessing the store property of the Eagle Eye from anywhere on an application makes available the internal store.

const { store } = MyContent;

store.setState({ some: { property: { of: T, ... }, ... }, ... });

store.getState([ 'some.property.of', ... ]);
// => { some: { property: { of : T, ... }, ... }, ... }

store.resetState([ 'some.property.of', ... ]);

store.subscribe( "closing"|"data-updated", callbackFn );
// => unsubscribeFn

Joining the change stream

why?

A change stream provides a way to attach a client to the store manager. Any changes occurring in any parts of the state observed by the attached client are furnished to the client in real time.

To join the Eagle Eye change stream, invoke this Eagle Eye instance's stream(...) function property to expose the change stream channel.

Through this channel, observations, communications and reactions could be made in real time.

Note: To react to stream changes to specific state proprties, supply an argument of a map of property paths to data to observe (see Selector Map)

const channel = MyContent.stream({
    year: 'some.property.of.year'
});

// streams externally changes
MyContext.store.setState({
    some: { property: { of: { year: T } } }
});
console.log( channel.data ); // => { year: T }

channel.setState({
    some: { property: { of: { year: TTT } } }
});
console.log( channel.data ); // => { year: TTT }

channel.resetState([ 'some.property.of.year' ]);
console.log( channel.data ); // => { year: undefined }

// streams externally changes
MyContext.store.setState({
    some: { property: { of: { year: TT } } }
});
console.log( channel.data ); // => { year: TT }

// streams externally changes
MyContext.store.resetState([ 'some.property.of.year' ]);
console.log( channel.data ); // => { year: undefined }