@webqit/observer 3.8.6 → 3.8.8
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 +20 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,32 +7,34 @@
|
|
|
7
7
|
[![bundle][bundle-src]][bundle-href]
|
|
8
8
|
[![License][license-src]][license-href]
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
</div>
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
---
|
|
13
13
|
|
|
14
|
-
|
|
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 the rest of JavaScript's metaprogramming APIs like Proxy "traps" and the `Reflect` API!
|
|
15
|
+
|
|
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
|
-
> For full-fledged Imperative Reactive Programming, you may to see the [Quantum JS](https://github.com/webqit/quantum-js) project.
|
|
35
|
+
> For full-fledged Imperative Reactive Programming, you may want to see the [Quantum JS](https://github.com/webqit/quantum-js) project.
|
|
36
|
+
|
|
37
|
+
---
|
|
36
38
|
|
|
37
39
|
<details><summary>Looking for Observer@1.x?</summary>
|
|
38
40
|
|
|
@@ -40,6 +42,8 @@ This documentation is for Observer@2.x. For the previous version, see [Observer@
|
|
|
40
42
|
|
|
41
43
|
</details>
|
|
42
44
|
|
|
45
|
+
## Table of Contents
|
|
46
|
+
|
|
43
47
|
- [Why Observer](#why-observer)
|
|
44
48
|
- [Quick Start](#quick-start)
|
|
45
49
|
- [Key Features](#key-features)
|
|
@@ -90,16 +94,16 @@ This limitation in the language has long created a **blindspot** — and a **wea
|
|
|
90
94
|
|
|
91
95
|
By enabling observability at the object/array level, the Observer API effectively solves reactivity for a mutable world. Consequently:
|
|
92
96
|
|
|
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
|
|
97
|
+
+ you are able to weild *the sheer power of mutability* in programming to your advantage — and unappologetically
|
|
98
|
+
+ you are able to make sense of a mutable world — and integrate with it — rather than stand at odds with it.
|
|
95
99
|
|
|
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—
|
|
100
|
+
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—and this time, with full observability.
|
|
97
101
|
|
|
98
|
-
**The Result
|
|
102
|
+
**The Result** is *mutation-based reactivity* as a first-class concept in JavaScript.
|
|
99
103
|
|
|
100
104
|
## Quick Start
|
|
101
105
|
|
|
102
|
-
|
|
106
|
+
Install from NPM or include from a CDN.
|
|
103
107
|
|
|
104
108
|
### Installation
|
|
105
109
|
|
|
@@ -234,12 +238,13 @@ Uses Observer API to underpin **Live Objects** as a first-class concept. Live Ob
|
|
|
234
238
|
|
|
235
239
|
### `Observer.observe(target, callback, options?)`
|
|
236
240
|
|
|
237
|
-
|
|
238
|
-
Returns an AbortController for lifecycle management.
|
|
241
|
+
Observe changes on an object or array.
|
|
242
|
+
Returns an `AbortController` instance for lifecycle management.
|
|
239
243
|
|
|
240
244
|
**Basic Usage:**
|
|
241
245
|
```js
|
|
242
246
|
const obj = {};
|
|
247
|
+
|
|
243
248
|
const controller = Observer.observe(obj, (mutations) => {
|
|
244
249
|
mutations.forEach(mutation => {
|
|
245
250
|
console.log(`${mutation.type}: ${mutation.key} = ${mutation.value}`);
|