@webkrafters/react-observable-context 7.0.1-beta.0 → 7.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -120
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
<a href="https://coveralls.io/github/webKrafters/react-observable-context.js">
|
|
12
12
|
<img alt="coverage" src="https://img.shields.io/coverallsCoverage/github/webKrafters/react-observable-context.js.svg">
|
|
13
13
|
</a>
|
|
14
|
-
<img alt="NPM" src="https://img.shields.io/npm/l/@webkrafters/react-observable-context
|
|
14
|
+
<img alt="NPM" src="https://img.shields.io/npm/l/@webkrafters/react-observable-context">
|
|
15
15
|
<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
|
|
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.
|
|
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">
|
|
19
19
|
</a>
|
|
20
20
|
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/webKrafters/react-observable-context.js">
|
|
21
21
|
</p>
|
|
@@ -49,125 +49,11 @@
|
|
|
49
49
|
If sandbox fails to load app, please refresh dependencies on its lower left.
|
|
50
50
|
|
|
51
51
|
**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]
|
|
167
53
|
|
|
168
54
|
May also see <b><a href="https://react-observable-context.js.org/history/features">What's Changed?</a></b>
|
|
169
55
|
|
|
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)**
|
|
171
57
|
|
|
172
58
|
# License
|
|
173
59
|
|
package/package.json
CHANGED
|
@@ -113,8 +113,8 @@
|
|
|
113
113
|
"test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
|
|
114
114
|
},
|
|
115
115
|
"types": "dist/index.d.ts",
|
|
116
|
-
"version": "7.0.
|
|
116
|
+
"version": "7.0.2",
|
|
117
117
|
"dependencies": {
|
|
118
|
-
"@webkrafters/eagleeye": "^1.0.
|
|
118
|
+
"@webkrafters/eagleeye": "^1.0.1"
|
|
119
119
|
}
|
|
120
120
|
}
|