@webkrafters/react-observable-context 7.0.0-rc.0 → 7.0.0
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 +25 -26
- package/logo.png +0 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -5,19 +5,19 @@
|
|
|
5
5
|
<a href="https://typescriptlang.org">
|
|
6
6
|
<img alt="TypeScript" src="https://badgen.net/badge/icon/typescript?icon=typescript&label">
|
|
7
7
|
</a>
|
|
8
|
-
<a href="https://github.com/webKrafters/react-observable-context/actions">
|
|
9
|
-
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/webKrafters/react-observable-context/test.yml">
|
|
8
|
+
<a href="https://github.com/webKrafters/react-observable-context.js/actions">
|
|
9
|
+
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/webKrafters/react-observable-context.js/test.yml">
|
|
10
10
|
</a>
|
|
11
|
-
<a href="https://coveralls.io/github/webKrafters/react-observable-context">
|
|
12
|
-
<img alt="coverage" src="https://img.shields.io/coverallsCoverage/github/webKrafters/react-observable-context.svg">
|
|
11
|
+
<a href="https://coveralls.io/github/webKrafters/react-observable-context.js">
|
|
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.js">
|
|
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?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">
|
|
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">
|
|
19
19
|
</a>
|
|
20
|
-
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/webKrafters/react-observable-context">
|
|
20
|
+
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/webKrafters/react-observable-context.js">
|
|
21
21
|
</p>
|
|
22
22
|
|
|
23
23
|
# React-Observable-Context [Eagle Eye]
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
|
|
33
33
|
<ul>
|
|
34
34
|
<li> Ready for use anywhere in the app. No Provider components needed.</li>
|
|
35
|
-
<li> Auto-immutable update-friendly context. See <a href="https://
|
|
36
|
-
<li> A context bearing an observable consumer <a href="https://
|
|
37
|
-
<li> Recognizes <b>negative array indexing</b>. Please see <a href="https://
|
|
38
|
-
<li> Only re-renders subscribing components (<a href="https://
|
|
35
|
+
<li> Auto-immutable update-friendly context. See <a href="https://react-observable-context.js.org/concepts/store/setstate"><code>store.setState</code></a>.</li>
|
|
36
|
+
<li> A context bearing an observable consumer <a href="https://react-observable-context.js.org/concepts/store">store</a>.</li>
|
|
37
|
+
<li> Recognizes <b>negative array indexing</b>. Please see <a href="https://react-observable-context.js.org/concepts/property-path">Property Path</a> and <code>store.setState</code> <a href="https://react-observable-context.js.org/concepts/store/setstate#indexing">Indexing</a>.</li>
|
|
38
|
+
<li> Only re-renders subscribing components (<a href="https://react-observable-context.js.org/concepts/client">clients</a>) on context state changes.</li>
|
|
39
39
|
<li> Subscribing component decides which context state properties' changes to trigger its update.</li>
|
|
40
40
|
</ul>
|
|
41
41
|
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
|
|
44
44
|
**Moniker:** Legacy Eagle Eye
|
|
45
45
|
|
|
46
|
-
**Usage:** Please see <b><a href="https://
|
|
46
|
+
**Usage:** Please see <b><a href="https://react-observable-context.js.org/getting-started">Getting Started</a></b>.
|
|
47
47
|
|
|
48
|
-
**Demo:** [Play with the app on codesandbox
|
|
48
|
+
**Demo:** [Play with the app on codesandbox](https://codesandbox.io/s/github/webKrafters/react-observable-context-app)\
|
|
49
49
|
If sandbox fails to load app, please refresh dependencies on its lower left.
|
|
50
50
|
|
|
51
51
|
**Install:**\
|
|
@@ -103,32 +103,32 @@ Deactivates this context by:
|
|
|
103
103
|
### Accessing external store reference.
|
|
104
104
|
```tsx
|
|
105
105
|
const store = context.store;
|
|
106
|
-
// https://
|
|
106
|
+
// https://react-observable-context.js.org/external-access#external-apis
|
|
107
107
|
store.resetState( Array<string>? );
|
|
108
|
-
// https://
|
|
108
|
+
// https://react-observable-context.js.org/external-access#external-apis
|
|
109
109
|
store.setState( Changes<T> );
|
|
110
|
-
// https://
|
|
110
|
+
// https://react-observable-context.js.org/external-access#external-apis
|
|
111
111
|
const state = store.getState( Array<string> );
|
|
112
|
-
// https://
|
|
112
|
+
// https://react-observable-context.js.org/external-access#external-apis
|
|
113
113
|
const unsubscribeFn = store.subscribe( eventType, listener );
|
|
114
114
|
```
|
|
115
115
|
Any actions taken here is applied to all components streaming affected state slices.\
|
|
116
116
|
Caveat 1: Parameterless <code>context.store.getState</code> returns the whole state.\
|
|
117
|
-
Caveat 2: Parameterless <code>context.store.resetState</code>
|
|
117
|
+
Caveat 2: Parameterless <code>context.store.resetState</code> is a no-op.
|
|
118
118
|
|
|
119
119
|
### Joining the context stream.
|
|
120
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
121
|
```tsx
|
|
122
122
|
const useStream = context.stream;
|
|
123
123
|
// joining the stream twice
|
|
124
|
-
// for more on selectorMap - https://
|
|
124
|
+
// for more on selectorMap - https://react-observable-context.js.org/concepts/selector-map/
|
|
125
125
|
const store1 = useStream(SelectorMap?);
|
|
126
126
|
const store2 = useStream(SelectorMap?);
|
|
127
127
|
// access the current data value monitored by this store
|
|
128
128
|
console.log( 'data', store1.data );
|
|
129
|
-
// https://
|
|
129
|
+
// https://react-observable-context.js.org/concepts/store/resetstate/
|
|
130
130
|
store1.resetState( Array<string>? ); // changes are context-wide
|
|
131
|
-
// https://
|
|
131
|
+
// https://react-observable-context.js.org/concepts/store/setstate/
|
|
132
132
|
store1.setState( Changes<T> ); // changes are context-wide
|
|
133
133
|
```
|
|
134
134
|
Any actions taken here is applied to all components streaming affected state slices.\
|
|
@@ -165,10 +165,9 @@ const storage = context.storage;
|
|
|
165
165
|
context.storage = IStorage<T>?;
|
|
166
166
|
```
|
|
167
167
|
|
|
168
|
-
May also see <b><a href="https://
|
|
168
|
+
May also see <b><a href="https://react-observable-context.js.org/history/features">What's Changed?</a></b>
|
|
169
169
|
|
|
170
|
-
|
|
171
|
-
**[eagleeye.js.org](https://eagleeye.js.org)** (currently out-of-date pending revision)
|
|
170
|
+
**[react-observable-context.js.org](https://react-observable-context.js.org)**
|
|
172
171
|
|
|
173
172
|
# License
|
|
174
173
|
|
package/logo.png
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
|
-
"alias": "react
|
|
2
|
+
"alias": "react observable context",
|
|
3
3
|
"author": "Stephen Isienyi <stephen.isienyi@webkrafting.com>",
|
|
4
4
|
"bugs": {
|
|
5
|
-
"url": "https://github.com/webKrafters/react-observable-context/issues"
|
|
5
|
+
"url": "https://github.com/webKrafters/react-observable-context.js/issues"
|
|
6
6
|
},
|
|
7
7
|
"contributors": [
|
|
8
8
|
"steveswork <stephen.isienyi@gmail.com> (https://github.com/steveswork)"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"logo.png",
|
|
64
64
|
"dist"
|
|
65
65
|
],
|
|
66
|
-
"homepage": "https://
|
|
66
|
+
"homepage": "https://react-observable-context.js.org",
|
|
67
67
|
"keywords": [
|
|
68
68
|
"connect",
|
|
69
69
|
"context",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
},
|
|
104
104
|
"repository": {
|
|
105
105
|
"type": "git",
|
|
106
|
-
"url": "git+https://github.com/webKrafters/react-observable-context.git"
|
|
106
|
+
"url": "git+https://github.com/webKrafters/react-observable-context.js.git"
|
|
107
107
|
},
|
|
108
108
|
"scripts": {
|
|
109
109
|
"build": "eslint --fix && rm -rf dist && tsc && babel dist -d dist",
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
|
|
114
114
|
},
|
|
115
115
|
"types": "dist/index.d.ts",
|
|
116
|
-
"version": "7.0.0
|
|
116
|
+
"version": "7.0.0",
|
|
117
117
|
"dependencies": {
|
|
118
118
|
"@webkrafters/eagleeye": "^1.0.0-beta.4"
|
|
119
119
|
}
|