@webqit/observer 3.8.5 → 3.8.7
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 +15 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,31 +9,33 @@
|
|
|
9
9
|
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
Observe and intercept operations on arbitrary JavaScript objects and arrays using a utility-first, general-purpose reactivity API! This API re-explores the unique design of the [Object.observe()](https://web.dev/es7-observe/) API and unifies that with other JavaScript metaprogramming APIs like the `Reflect` API and Proxy "traps"!
|
|
13
15
|
|
|
14
16
|
The Observer API comes as one little API for all things _object observability_. (Only `~5.8KiB min|zip`)
|
|
15
17
|
|
|
16
18
|
```js
|
|
17
19
|
const state = {};
|
|
18
20
|
|
|
19
|
-
//
|
|
21
|
+
// Observe all property changes
|
|
20
22
|
Observer.observe(state, (mutations) => {
|
|
21
23
|
mutations.forEach(mutation => {
|
|
22
24
|
console.log(`${mutation.type}: ${mutation.key} = ${mutation.value}`);
|
|
23
|
-
// React to any mutation: set, delete, defineProperty, etc.
|
|
24
25
|
});
|
|
25
26
|
});
|
|
26
27
|
|
|
27
|
-
// Now these mutations are observable and reactive
|
|
28
28
|
Observer.set(state, 'count', 5);
|
|
29
29
|
Observer.deleteProperty(state, 'oldProp');
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
> [!TIP]
|
|
33
|
-
>
|
|
33
|
+
> Reactivity is anchored on the programmtic APIs — `.set()`, `.deleteProperty()`, etc. — but reactivity is also possible over literal JavaScript operations like `obj.prop = value`, `delete obj.prop` — by means of the `accessorize()` and `proxy()` methods covered just ahead.
|
|
34
34
|
>
|
|
35
35
|
> For full-fledged Imperative Reactive Programming, you may to see the [Quantum JS](https://github.com/webqit/quantum-js) project.
|
|
36
36
|
|
|
37
|
+
---
|
|
38
|
+
|
|
37
39
|
<details><summary>Looking for Observer@1.x?</summary>
|
|
38
40
|
|
|
39
41
|
This documentation is for Observer@2.x. For the previous version, see [Observer@1.x](https://github.com/webqit/observer/tree/v1.7.6).
|
|
@@ -90,16 +92,16 @@ This limitation in the language has long created a **blindspot** — and a **wea
|
|
|
90
92
|
|
|
91
93
|
By enabling observability at the object/array level, the Observer API effectively solves reactivity for a mutable world. Consequently:
|
|
92
94
|
|
|
93
|
-
+ you are able to weild *the sheer power of mutability* in programming unappologetically
|
|
94
|
-
+ you are able to make sense of a mutable world — and integrate with it — rather than
|
|
95
|
+
+ you are able to weild *the sheer power of mutability* in programming to your advantage — and unappologetically
|
|
96
|
+
+ you are able to make sense of a mutable world — and integrate with it — rather than stand at odds with it.
|
|
95
97
|
|
|
96
|
-
The Observer API collapses layers of complexity that reactive frameworks have built around immutability, bringing you back to the simplicity and power of direct mutation—but
|
|
98
|
+
The Observer API collapses layers of complexity that reactive frameworks have built around immutability, bringing you back to the simplicity and power of direct mutation—but this time, with full observability.
|
|
97
99
|
|
|
98
|
-
**The Result
|
|
100
|
+
**The Result** is *mutation-based reactivity* as a first-class concept in JavaScript.
|
|
99
101
|
|
|
100
102
|
## Quick Start
|
|
101
103
|
|
|
102
|
-
|
|
104
|
+
Install from NPM or include from a CDN.
|
|
103
105
|
|
|
104
106
|
### Installation
|
|
105
107
|
|
|
@@ -234,12 +236,13 @@ Uses Observer API to underpin **Live Objects** as a first-class concept. Live Ob
|
|
|
234
236
|
|
|
235
237
|
### `Observer.observe(target, callback, options?)`
|
|
236
238
|
|
|
237
|
-
|
|
238
|
-
Returns an AbortController for lifecycle management.
|
|
239
|
+
Observe changes on an object or array.
|
|
240
|
+
Returns an `AbortController` instance for lifecycle management.
|
|
239
241
|
|
|
240
242
|
**Basic Usage:**
|
|
241
243
|
```js
|
|
242
244
|
const obj = {};
|
|
245
|
+
|
|
243
246
|
const controller = Observer.observe(obj, (mutations) => {
|
|
244
247
|
mutations.forEach(mutation => {
|
|
245
248
|
console.log(`${mutation.type}: ${mutation.key} = ${mutation.value}`);
|