Skip to content

Commit 2cae502

Browse files
stevesworksteveswork
authored
Merge pull request #84 from webKrafters/engine-upgrade
minor update
2 parents 4d2f723 + 0caae77 commit 2cae502

3 files changed

Lines changed: 6066 additions & 10536 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@
1111
<a href="https://coveralls.io/github/webKrafters/react-observable-context.js">
1212
<img alt="coverage" src="https://img.shields.io/coverallsCoverage/github/webKrafters/react-observable-context.js.svg">
1313
</a>
14-
<img alt="NPM" src="https://img.shields.io/npm/l/@webkrafters/react-observable-context.js">
14+
<img alt="NPM" src="https://img.shields.io/npm/l/@webkrafters/react-observable-context">
1515
<img alt="Maintenance" src="https://img.shields.io/maintenance/yes/2032">
16-
<img alt="build size" src="https://img.shields.io/bundlephobia/minzip/@webkrafters/react-observable-context.js?label=bundle%20size">
17-
<a href="https://www.npmjs.com/package/@webKrafters/react-observable-context.js">
18-
<img alt="Downloads" src="https://img.shields.io/npm/dt/@webkrafters/react-observable-context.js.svg">
16+
<img alt="build size" src="https://img.shields.io/bundlephobia/minzip/@webkrafters/react-observable-context?label=bundle%20size">
17+
<a href="https://www.npmjs.com/package/@webKrafters/react-observable-context">
18+
<img alt="Downloads" src="https://img.shields.io/npm/dt/@webkrafters/react-observable-context.svg">
1919
</a>
2020
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/webKrafters/react-observable-context.js">
2121
</p>
@@ -49,125 +49,11 @@
4949
If sandbox fails to load app, please refresh dependencies on its lower left.
5050

5151
**Install:**\
52-
npm install --save @webkrafters/react-observable-context\
53-
54-
## Usage:
55-
56-
```tsx
57-
import { FC } from 'react';
58-
import { createEagleEye } from '@webkrafters/react-observable-context';
59-
60-
const context = createEagleEye(
61-
T|AutoImmutable<T>?,
62-
Prehooks<T>?,
63-
IStorage<T>?
64-
);
65-
66-
// component consuming change stream manually
67-
const useStream = context.useStream;
68-
const Component1 : FC = () => {
69-
const {
70-
data,
71-
resetState,
72-
setState
73-
} = useStream( SelectorMap );
74-
...
75-
};
76-
77-
// components consuming change stream through a reusable adapter
78-
const connect = context.connect( SelectorMap? );
79-
const Component2 = connect(({ data, resetState, setState, ...ownProps }) => {...});
80-
const Component3 = connect(({ data, resetState, setState, ...ownProps }) => {...});
81-
82-
const App : FC = () => (
83-
<>
84-
<Component1 />
85-
<Component2 />
86-
<Component3 />
87-
</>
88-
);
89-
90-
```
91-
92-
### Releasing context resources.
93-
```tsx
94-
context.dispose();
95-
```
96-
Deactivates this context by:
97-
<ol>
98-
<li>unsubscribing all observers to it</li>
99-
<li>severing connections to data stores</li>
100-
<li>unsetting all resources</li>
101-
</ol>
102-
103-
### Accessing external store reference.
104-
```tsx
105-
const store = context.store;
106-
// https://react-observable-context.js.org/external-access#external-apis
107-
store.resetState( Array<string>? );
108-
// https://react-observable-context.js.org/external-access#external-apis
109-
store.setState( Changes<T> );
110-
// https://react-observable-context.js.org/external-access#external-apis
111-
const state = store.getState( Array<string> );
112-
// https://react-observable-context.js.org/external-access#external-apis
113-
const unsubscribeFn = store.subscribe( eventType, listener );
114-
```
115-
Any actions taken here is applied to all components streaming affected state slices.\
116-
Caveat 1: Parameterless <code>context.store.getState</code> returns the whole state.\
117-
Caveat 2: Parameterless <code>context.store.resetState</code> is a no-op.
118-
119-
### Joining the context stream.
120-
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.
121-
```tsx
122-
const useStream = context.stream;
123-
// joining the stream twice
124-
// for more on selectorMap - https://react-observable-context.js.org/concepts/selector-map/
125-
const store1 = useStream(SelectorMap?);
126-
const store2 = useStream(SelectorMap?);
127-
// access the current data value monitored by this store
128-
console.log( 'data', store1.data );
129-
// https://react-observable-context.js.org/concepts/store/resetstate/
130-
store1.resetState( Array<string>? ); // changes are context-wide
131-
// https://react-observable-context.js.org/concepts/store/setstate/
132-
store1.setState( Changes<T> ); // changes are context-wide
133-
```
134-
Any actions taken here is applied to all components streaming affected state slices.\
135-
Caveat 1: Parameterless <code>store.resetState</code> resets state slices consumed by this store.\
136-
Caveat 2: Parameterless <code>store.resetState</code> for stores not consuming state is a no-op.
137-
138-
### Accessing underlying cache.
139-
```tsx
140-
const cache = context.cache;
141-
```
142-
143-
### Accessing `close` status.
144-
```tsx
145-
const closed = context.closed;
146-
```
147-
148-
### Accessing current state update `prehooks`.
149-
```tsx
150-
const prehooks = context.prehooks;
151-
```
152-
153-
### Updating state update `prehooks`.
154-
```tsx
155-
context.prehooks = Prehooks<T>?;
156-
```
157-
158-
### Accessing context `storage`.
159-
```tsx
160-
const storage = context.storage;
161-
```
162-
163-
### Updating context `storage`.
164-
```tsx
165-
context.storage = IStorage<T>?;
166-
```
52+
npm install --save @webkrafters/react-observable-context]
16753

16854
May also see <b><a href="https://react-observable-context.js.org/history/features">What's Changed?</a></b>
16955

170-
**[react-observable-context.js.org](https://react-observable-context.js.org)**
56+
Full Documentation: **[react-observable-context.js.org](https://react-observable-context.js.org)**
17157

17258
# License
17359

0 commit comments

Comments
 (0)