@webqit/observer 3.8.11 → 3.8.13
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 +21 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -82,26 +82,22 @@ This limitation in the language has long created a **blindspot** — and a **wea
|
|
|
82
82
|
state = { ...state, count: 8 };
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
```js
|
|
85
|
+
```js
|
|
86
86
|
state = { ...state, items: [...state.items, 'new item 1'] };
|
|
87
87
|
state = { ...state, items: [...state.items, 'new item 2'] };
|
|
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 using strong design constraints. 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
92
|
|
|
93
93
|
+ mutation gets a bad rap
|
|
94
94
|
|
|
95
95
|
**Using the Observer API:**
|
|
96
96
|
|
|
97
|
-
By enabling observability at the object/array level, the Observer API effectively solves reactivity for a mutable world. Consequently:
|
|
98
|
-
|
|
99
|
-
+ you are able to weild *the sheer power of mutability* in programming to your advantage — and unappologetically
|
|
100
|
-
+ you are able to make sense of a mutable world — and integrate with it — rather than stand at odds with it.
|
|
101
|
-
|
|
102
|
-
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
|
+
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:
|
|
103
98
|
|
|
104
|
-
|
|
99
|
+
+ you are able to weild *the full power of mutability* in programming to your advantage
|
|
100
|
+
+ you are able to make sense of a mutable world — and integrate with it — rather than stand at odds with it
|
|
105
101
|
|
|
106
102
|
## Quick Start
|
|
107
103
|
|
|
@@ -161,7 +157,8 @@ Observer.set(items, 0, 'grape');
|
|
|
161
157
|
Observer.set(items, 2, 'orange');
|
|
162
158
|
|
|
163
159
|
// Reactive method calls
|
|
164
|
-
Observer.apply(items.push, items, ['new item']);
|
|
160
|
+
Observer.apply(items.push, items, ['new item']);
|
|
161
|
+
Observer.proxy(state.items).push('new item')
|
|
165
162
|
```
|
|
166
163
|
|
|
167
164
|
### Intercepting Operations
|
|
@@ -328,7 +325,7 @@ parentController.abort();
|
|
|
328
325
|
#### Parity Table
|
|
329
326
|
|
|
330
327
|
| | Observer API | Object.observe() (Deprecated) |
|
|
331
|
-
|
|
328
|
+
|:-------------|:--------------|:-------------------------------|
|
|
332
329
|
| **Signature** | `.observe(target, callback, options?)` | `.observe(target, callback, acceptList?)` |
|
|
333
330
|
| **Return Value** | `AbortController` (lifecycle management) | `undefined` (no lifecycle management) |
|
|
334
331
|
| **Additional Features** | AbortSignal integration, path watching, batch/atomic operations, synchronous event model, etc. | Basic object observation, asynchronous event model (deprecated) |
|
|
@@ -428,7 +425,7 @@ Observer.intercept(obj, 'get', (operation, previous, next) => {
|
|
|
428
425
|
#### Parity Table
|
|
429
426
|
|
|
430
427
|
| | Observer API | Proxy Traps |
|
|
431
|
-
|
|
428
|
+
|:-------------|:--------------|:-------------|
|
|
432
429
|
| **Signature** | `.intercept(target, operation, handler, options?)`<br>`.intercept(target, { [operation]: handler[, ...]}, options?)` | `new Proxy(target, { [operation]: handler[, ...] })` |
|
|
433
430
|
| **Return Value** | `undefined` (registration) | `Proxy` (wrapped object) |
|
|
434
431
|
| **Additional Features** | Traps pipeline, composable interceptors | Single trap per operation, no composability |
|
|
@@ -479,7 +476,7 @@ Observer.set(obj, Observer.path('user', 'profile', 'name'), 'Alice');
|
|
|
479
476
|
#### Parity Table
|
|
480
477
|
|
|
481
478
|
| | Observer API | Reflect API |
|
|
482
|
-
|
|
479
|
+
|:-------------|:--------------|:-------------|
|
|
483
480
|
| **Signature** | `.set(target, key, value, options?)` | `.set(target, key, value)` |
|
|
484
481
|
| **Return Value** | `boolean` (success) | `boolean` (success) |
|
|
485
482
|
| **Additional Features** | Triggers observers, interceptable | Standard property setting |
|
|
@@ -513,7 +510,7 @@ Observer.get(obj, 'fullName'); // "John Doe" (computed on-the-fly)
|
|
|
513
510
|
#### Parity Table
|
|
514
511
|
|
|
515
512
|
| | Observer API | Reflect API |
|
|
516
|
-
|
|
513
|
+
|:-------------|:--------------|:-------------|
|
|
517
514
|
| **Signature** | `.get(target, key, options?)` | `.get(target, key)` |
|
|
518
515
|
| **Return Value** | `any` (property value) | `any` (property value) |
|
|
519
516
|
| **Additional Features** | Interceptable for computed values | Standard property access |
|
|
@@ -547,7 +544,7 @@ Observer.has(obj, 'password'); // false (hidden from checks)
|
|
|
547
544
|
#### Parity Table
|
|
548
545
|
|
|
549
546
|
| | Observer API | Reflect API |
|
|
550
|
-
|
|
547
|
+
|:-------------|:--------------|:-------------|
|
|
551
548
|
| **Signature** | `.has(target, key, options?)` | `.has(target, key)` |
|
|
552
549
|
| **Return Value** | `boolean` (exists) | `boolean` (exists) |
|
|
553
550
|
| **Additional Features** | Interceptable for property hiding | Standard property existence check |
|
|
@@ -578,7 +575,7 @@ Observer.ownKeys(obj); // ['name', 'email'] (password filtered out)
|
|
|
578
575
|
#### Parity Table
|
|
579
576
|
|
|
580
577
|
| | Observer API | Reflect API | Object API |
|
|
581
|
-
|
|
578
|
+
|:-------------|:--------------|:-------------|:-------------|
|
|
582
579
|
| **Signature** | `.ownKeys(target, options?)` | `.ownKeys(target)` | `.keys(obj)` |
|
|
583
580
|
| **Return Value** | `string[]` (keys) | `string[]` (keys) | `string[]` (keys) |
|
|
584
581
|
| **Additional Features** | Interceptable for key filtering | Standard key enumeration | Standard key enumeration |
|
|
@@ -596,7 +593,7 @@ Observer.deleteProperty(arr, 0);
|
|
|
596
593
|
#### Parity Table
|
|
597
594
|
|
|
598
595
|
| | Observer API | Reflect API |
|
|
599
|
-
|
|
596
|
+
|:-------------|:--------------|:-------------|
|
|
600
597
|
| **Signature** | `.deleteProperty(target, key, options?)` | `.deleteProperty(target, key)` |
|
|
601
598
|
| **Return Value** | `boolean` (success) | `boolean` (success) |
|
|
602
599
|
| **Additional Features** | Triggers observers, interceptable | Standard property deletion |
|
|
@@ -612,7 +609,7 @@ Observer.deleteProperties(obj, ['oldProp1', 'oldProp2', 'tempProp']);
|
|
|
612
609
|
#### Parity Table
|
|
613
610
|
|
|
614
611
|
| | Observer API | No Direct Equivalent |
|
|
615
|
-
|
|
612
|
+
|:-------------|:--------------|:---------------------|
|
|
616
613
|
| **Signature** | `.deleteProperties(target, keys, options?)` | No batch delete in standard APIs |
|
|
617
614
|
| **Return Value** | `boolean[]` (success array) | N/A |
|
|
618
615
|
| **Additional Features** | Triggers observers, interceptable | N/A |
|
|
@@ -632,7 +629,7 @@ Observer.defineProperty(obj, 'computed', {
|
|
|
632
629
|
#### Parity Table
|
|
633
630
|
|
|
634
631
|
| | Observer API | Reflect API | Object API |
|
|
635
|
-
|
|
632
|
+
|:-------------|:--------------|:-------------|:-------------|
|
|
636
633
|
| **Signature** | `.defineProperty(target, key, descriptor, options?)` | `.defineProperty(target, key, descriptor)` | `.defineProperty(obj, key, descriptor)` |
|
|
637
634
|
| **Return Value** | `boolean` (success) | `boolean` (success) | `object` (modified object) |
|
|
638
635
|
| **Additional Features** | Triggers observers, interceptable | Standard property definition | Standard property definition |
|
|
@@ -652,7 +649,7 @@ Observer.defineProperties(obj, {
|
|
|
652
649
|
#### Parity Table
|
|
653
650
|
|
|
654
651
|
| | Observer API | Object API |
|
|
655
|
-
|
|
652
|
+
|:-------------|:--------------|:-------------|
|
|
656
653
|
| **Signature** | `.defineProperties(target, descriptors, options?)` | `.defineProperties(obj, descriptors)` |
|
|
657
654
|
| **Return Value** | `boolean` (success) | `object` (modified object) |
|
|
658
655
|
| **Additional Features** | Triggers observers, interceptable | Standard property definition |
|
|
@@ -680,7 +677,7 @@ obj.email = 'alice@example.com';
|
|
|
680
677
|
#### Parity Table
|
|
681
678
|
|
|
682
679
|
| | Observer API | No Direct Equivalent |
|
|
683
|
-
|
|
680
|
+
|:-------------|:--------------|:---------------------|
|
|
684
681
|
| **Signature** | `.accessorize(target, properties?, options?)` | No direct equivalent in standard APIs |
|
|
685
682
|
| **Return Value** | `undefined` (modification) | N/A |
|
|
686
683
|
| **Additional Features** | Makes properties reactive for direct assignment | N/A |
|
|
@@ -700,7 +697,7 @@ Observer.unaccessorize(obj);
|
|
|
700
697
|
#### Parity Table
|
|
701
698
|
|
|
702
699
|
| | Observer API | No Direct Equivalent |
|
|
703
|
-
|
|
700
|
+
|:-------------|:--------------|:---------------------|
|
|
704
701
|
| **Signature** | `.unaccessorize(target, properties?, options?)` | No direct equivalent in standard APIs |
|
|
705
702
|
| **Return Value** | `undefined` (modification) | N/A |
|
|
706
703
|
| **Additional Features** | Restores accessorized properties to normal state | N/A |
|
|
@@ -870,7 +867,7 @@ const $obj = Observer.proxy(obj, {}, (traps) => {
|
|
|
870
867
|
#### Parity Table
|
|
871
868
|
|
|
872
869
|
| | Observer API | Proxy API |
|
|
873
|
-
|
|
870
|
+
|:-------------|:--------------|:-----------|
|
|
874
871
|
| **Signature** | `.proxy(target, options?)` | `new Proxy(target, handlers)` |
|
|
875
872
|
| **Return Value** | `Proxy` (reactive proxy) | `Proxy` (standard proxy) |
|
|
876
873
|
| **Additional Features** | Built-in reactivity, membrane, chainable | Manual trap implementation required |
|
|
@@ -887,7 +884,7 @@ const original = Observer.unproxy($obj); // Returns original obj
|
|
|
887
884
|
#### Parity Table
|
|
888
885
|
|
|
889
886
|
| | Observer API | No Direct Equivalent |
|
|
890
|
-
|
|
887
|
+
|:-------------|:--------------|:---------------------|
|
|
891
888
|
| **Signature** | `.unproxy(target)` | No direct equivalent in standard APIs |
|
|
892
889
|
| **Return Value** | `object` (original object) | N/A |
|
|
893
890
|
| **Additional Features** | Extracts original object from Observer proxy | N/A |
|