React-Observable-Context [Eagle Eye]

COMPATIBLE WITH REACT VERSIONS 16.8 to 18.x.x. A NEW EAGLEEYE BASED PRODUCT WILL BE DEVELOPED SPECIFICALLY FOR REACT 19+ PLEASE STAY TUNED.

• Ready for use anywhere in the app. No Provider components needed.
• Auto-immutable update-friendly context. See store.setState (docs under revision).
• A context bearing an observable consumer store (docs under revision).
• Recognizes negative array indexing. Please see Property Path (docs under revision) and store.setState Indexing (docs under revision).
• Only re-renders subscribing components (clients (docs under revision)) on context state changes.
• Subscribing component decides which context state properties' changes to trigger its update.

Name: React-Observable-Context

Moniker: Legacy Eagle Eye

Usage: Please see Getting Started (docs under revision).

Demo: Play with the app on codesandbox
If sandbox fails to load app, please refresh dependencies on its lower left.

Install:
npm install --save @webkrafters/react-observable-context\

Usage:

import { FC } from 'react';
import { createEagleEye } from '@webkrafters/react-observable-context';

const context = createEagleEye(
	T|AutoImmutable<T>?,
	Prehooks<T>?,
	IStorage<T>?
);

// component consuming change stream manually
const useStream = context.useStream;
const Component1 : FC = () => {
	const {
		data,
		resetState,
		setState
	} = useStream( SelectorMap );
	...
};

// components consuming change stream through a reusable adapter
const connect = context.connect( SelectorMap? );
const Component2 = connect(({ data, resetState, setState, ...ownProps }) => {...});
const Component3 = connect(({ data, resetState, setState, ...ownProps }) => {...});

const App : FC = () => (
	<>
		<Component1 />
		<Component2 />
		<Component3 />
	</>
);

Releasing context resources.

context.dispose();

Deactivates this context by:

1. unsubscribing all observers to it
2. severing connections to data stores
3. unsetting all resources

Accessing external store reference.

const store = context.store;
// https://eagleeye.js.org/concepts/store/resetstate/
store.resetState( Array<string>? );
// https://eagleeye.js.org/concepts/store/setstate/
store.setState( Changes<T> );
// https://eagleeye.js.org/concepts/store/getstate/
const state = store.getState( Array<string> );
// https://eagleeye.js.org/concepts/store/subscribe/
const unsubscribeFn = store.subscribe( eventType, listener );

Any actions taken here is applied to all components streaming affected state slices.
Caveat 1: Parameterless context.store.getState returns the whole state.
Caveat 2: Parameterless context.store.resetState is a no-op.

Joining the context stream.

A context stream allows a client to set up a dedicated channel through which it receives automatic updates whenever its selected slices of state change. It can also update the context through this channel.

const useStream = context.stream;
// joining the stream twice
// for more on selectorMap - https://eagleeye.js.org/concepts/selector-map/
const store1 = useStream(SelectorMap?);
const store2 = useStream(SelectorMap?);
// access the current data value monitored by this store
console.log( 'data', store1.data );
// https://eagleeye.js.org/concepts/store/resetstate/
store1.resetState( Array<string>? ); // changes are context-wide
// https://eagleeye.js.org/concepts/store/setstate/
store1.setState( Changes<T> ); // changes are context-wide

Any actions taken here is applied to all components streaming affected state slices.
Caveat 1: Parameterless store.resetState resets state slices consumed by this store.
Caveat 2: Parameterless store.resetState for stores not consuming state is a no-op.

Accessing underlying cache.

const cache = context.cache;

Accessing close status.

const closed = context.closed;

Accessing current state update prehooks.

const prehooks = context.prehooks;

Updating state update prehooks.

context.prehooks = Prehooks<T>?;

Accessing context storage.

const storage = context.storage;

Updating context storage.

context.storage = IStorage<T>?;

May also see What's Changed? (docs currently under revision)

Please see full documentation here:

eagleeye.js.org (currently out-of-date pending revision)

License

GPLv3