@webqit/observer 3.8.13 → 3.8.14
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 +13 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,26 +15,26 @@ Observe and intercept operations on arbitrary JavaScript objects and arrays usin
|
|
|
15
15
|
|
|
16
16
|
This API re-explores the unique design of the retired [Object.observe()](https://web.dev/es7-observe/) API and unifies that with the rest of JavaScript's metaprogramming APIs: `Proxies`, `Reflect`, `Object`!
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
Observer comes as one little API for all things _object observability_. (Only `~5.8KiB min|zip`)
|
|
19
19
|
|
|
20
20
|
```js
|
|
21
|
-
const
|
|
21
|
+
const obj = {};
|
|
22
22
|
|
|
23
23
|
// Observe all property changes
|
|
24
|
-
Observer.observe(
|
|
24
|
+
Observer.observe(obj, (mutations) => {
|
|
25
25
|
mutations.forEach(mutation => {
|
|
26
26
|
console.log(`${mutation.type}: ${mutation.key} = ${mutation.value}`);
|
|
27
27
|
});
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
-
Observer.set(
|
|
31
|
-
Observer.deleteProperty(
|
|
30
|
+
Observer.set(obj, 'count', 5);
|
|
31
|
+
Observer.deleteProperty(obj, 'oldProp');
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
> [!TIP]
|
|
35
|
-
> Reactivity is anchored on its programmtic APIs like `.set()`, `.deleteProperty()`, but you also get reactivity over literal JavaScript operations
|
|
35
|
+
> Reactivity is anchored on its programmtic APIs like `.set()`, `.deleteProperty()`, but you also get reactivity over literal JavaScript operations — `obj.prop = value`, `delete obj.prop`, etc. — by means of the `accessorize()` and `proxy()` methods covered just ahead.
|
|
36
36
|
>
|
|
37
|
-
> For full-fledged Imperative Reactive Programming, you
|
|
37
|
+
> For full-fledged Imperative Reactive Programming, you want to see the [Quantum JS](https://github.com/webqit/quantum-js) project.
|
|
38
38
|
|
|
39
39
|
---
|
|
40
40
|
|
|
@@ -88,16 +88,18 @@ This limitation in the language has long created a **blindspot** — and a **wea
|
|
|
88
88
|
state = { ...state, items: [...state.items, 'new item 3'] };
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
> Because this is generally hard to follow, frameworks typically enforce immutability
|
|
91
|
+
> Because this is generally hard to follow, frameworks typically enforce immutability by means of strong design constraints.
|
|
92
|
+
>
|
|
93
|
+
> Outside of a framework, you get standalone *immutability* libraries (like Immer, or Immutable.js back in the day) that as well try to simulate an immutable world, where data is never changed, only replaced.
|
|
92
94
|
|
|
93
95
|
+ mutation gets a bad rap
|
|
94
96
|
|
|
95
97
|
**Using the Observer API:**
|
|
96
98
|
|
|
97
|
-
By enabling observability at the object/array level, the Observer API effectively solves reactivity for a mutable world.
|
|
99
|
+
By enabling observability at the object/array level, the Observer API effectively solves reactivity for a **mutable** world. The Result is *mutation-based* reactivity as a first-class concept in JavaScript. Consequently:
|
|
98
100
|
|
|
99
|
-
+ you are able to weild *the full power of mutability
|
|
100
|
-
+ you are able to make sense of a mutable world — and integrate with it — rather than
|
|
101
|
+
+ you are able to weild *the full power* of mutability in programming to your advantage
|
|
102
|
+
+ you are able to make sense of a mutable world — and integrate with it — rather than struggle with it
|
|
101
103
|
|
|
102
104
|
## Quick Start
|
|
103
105
|
|