@webqit/observer 2.1.15 → 2.1.17
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 +22 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ Observer API is an upcoming proposal!
|
|
|
16
16
|
|
|
17
17
|
Tracking mutations on JavaScript objects has historically relied on "object wrapping" techniques with [ES6 Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), and on "property mangling" techniques with [getters and setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). Besides how the first poses an *object identity* problem and the second, an *interoperability* problem, there is also much inflexibility in the programming model that each enables!
|
|
18
18
|
|
|
19
|
-
This is discussed extensively in [the introductory blog post](https://dev.to/oxharris
|
|
19
|
+
This is discussed extensively in [the introductory blog post](https://dev.to/oxharris/re-exploring-reactivity-and-introducing-the-observer-api-and-reflex-functions-4h70)
|
|
20
20
|
|
|
21
21
|
We find a design precedent to object observability in the [`Object.observe()`](https://web.dev/es7-observe/) API, which at one time checked all the boxes and touched the very pain points we have today! The idea with the new **Observer API** is to re-explore that unique design with a more wholistic approach that considers the broader subject of Reactive Programming in JavaScript!
|
|
22
22
|
|
|
@@ -96,9 +96,28 @@ const abortController = Observer.observe( obj, ( mutations, flags ) => {
|
|
|
96
96
|
|
|
97
97
|
└ *"Child" observers get automatically aborted at parent's "next turn", and at parent's own abortion!*
|
|
98
98
|
|
|
99
|
+
**-->** Use the `options.diff` parameter to ignore mutation events whose current value is same as previous value:
|
|
100
|
+
|
|
101
|
+
```js
|
|
102
|
+
// Parent -
|
|
103
|
+
const abortController = Observer.observe( obj, mutations => {
|
|
104
|
+
console.log( m.type, m.value, m.oldValue );
|
|
105
|
+
}, { diff: true } );
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```js
|
|
109
|
+
obj.property = 'Same value';
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
```js
|
|
113
|
+
obj.property = 'Same value';
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
└ *Observer is called only on the first update!*
|
|
117
|
+
|
|
99
118
|
#### Concept: *Mutation APIs*
|
|
100
119
|
|
|
101
|
-
|
|
120
|
+
In addition to making literal operations, you can also programmatically mutate properties of an object using the *[Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect#static_methods)-like* set of operators; each operation will be reported by observers:
|
|
102
121
|
|
|
103
122
|
```js
|
|
104
123
|
// A single "set" operation on an object
|
|
@@ -426,7 +445,7 @@ Observer.intercept( obj, {
|
|
|
426
445
|
|
|
427
446
|
## Documentation
|
|
428
447
|
|
|
429
|
-
Visit the [docs](https://github.com/webqit/observer/wiki) for full details - including [Reflect
|
|
448
|
+
Visit the [docs](https://github.com/webqit/observer/wiki) for full details - including [Reflect API Supersets](https://github.com/webqit/observer/wiki#featuring-reflect-api-supersets), [Timing and Batching](https://github.com/webqit/observer/wiki#timing-and-batching), [API Reference](https://github.com/webqit/observer/wiki#putting-it-all-together), etc.
|
|
430
449
|
|
|
431
450
|
## The Polyfill
|
|
432
451
|
|