@joist/observable 2.0.0-next.3 → 2.0.0-next.4
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
CHANGED
|
@@ -16,12 +16,16 @@ import { observable, observer, OnChange, Changes } from '@joist/observable';
|
|
|
16
16
|
|
|
17
17
|
@observable()
|
|
18
18
|
class State implements OnChange {
|
|
19
|
+
// Changes to these will trigger callback
|
|
19
20
|
@observe() todos: string[] = [];
|
|
20
21
|
@observe() userName?: string;
|
|
21
22
|
|
|
23
|
+
// changes to this will not
|
|
24
|
+
someValue: boolean = false;
|
|
25
|
+
|
|
22
26
|
onChange(changes: Changes) {
|
|
23
27
|
console.log(changes);
|
|
24
|
-
// { todos: { value: ['Build Shit'] }, userName: { value: 'Danny Blue' } }
|
|
28
|
+
// { todos: { value: ['Build Shit'], previousValue: [] }, userName: { value: 'Danny Blue', previousValue: undefined } }
|
|
25
29
|
}
|
|
26
30
|
}
|
|
27
31
|
|
|
@@ -30,3 +34,40 @@ const state = new State();
|
|
|
30
34
|
state.todos = [...state.todos, 'Build Shit'];
|
|
31
35
|
state.userName = 'Danny Blue'
|
|
32
36
|
```
|
|
37
|
+
|
|
38
|
+
#### Event target example:
|
|
39
|
+
|
|
40
|
+
If you want to externally monitor your class for changes you can extend event target and dispatch events. (available in both node and the browser)
|
|
41
|
+
|
|
42
|
+
```TS
|
|
43
|
+
import { observable, observer, OnChange, Changes } from '@joist/observable';
|
|
44
|
+
|
|
45
|
+
class StateChangeEvent extends Event {
|
|
46
|
+
consetructor(public changes: Changes) {
|
|
47
|
+
super('statechange')
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@observable()
|
|
52
|
+
class State extends EventTarget implements OnChange {
|
|
53
|
+
// Changes to these will trigger callback
|
|
54
|
+
@observe() todos: string[] = [];
|
|
55
|
+
@observe() userName?: string;
|
|
56
|
+
|
|
57
|
+
// changes to this will not
|
|
58
|
+
someValue: boolean = false;
|
|
59
|
+
|
|
60
|
+
onChange(changes: Changes) {
|
|
61
|
+
this.dispatchEvent(new StateChangeEvent());
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const state = new State();
|
|
66
|
+
|
|
67
|
+
state.addEventListener('statechange', (e) => {
|
|
68
|
+
console.log(e.changes);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
state.todos = [...state.todos, 'Build Shit'];
|
|
72
|
+
state.userName = 'Danny Blue'
|
|
73
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joist/observable",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.4",
|
|
4
4
|
"main": "./target/build/lib.js",
|
|
5
5
|
"module": "./target/build/lib.js",
|
|
6
6
|
"exports": {
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
|
|
35
35
|
"build": "tsc -p tsconfig.build.json"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "23b7e4b628963b0cfdee34dba994541cec5fff38"
|
|
38
38
|
}
|
|
@@ -27,8 +27,8 @@ export function observable() {
|
|
|
27
27
|
super(...args);
|
|
28
28
|
for (let def in defs) {
|
|
29
29
|
Reflect.set(this, createPrivateKey(def), Reflect.get(this, def));
|
|
30
|
-
Object.defineProperties(this, props);
|
|
31
30
|
}
|
|
31
|
+
Object.defineProperties(this, props);
|
|
32
32
|
}
|
|
33
33
|
definePropChange(key, propChange) {
|
|
34
34
|
this.propChanges[key] = propChange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IACE;IAAiB;IAApC,YAAmB,KAAQ,EAAS,aAAiB;QAAlC,UAAK,GAAL,KAAK,CAAG;QAAS,kBAAa,GAAb,aAAa,CAAI;IAAG,CAAC;CAC1D;AAQD,MAAM,UAAU,gBAAgB,CAAC,CAAM;IACrC,OAAO,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,SAAS,CAAC,UAAU,IAAI,EAAE,CAAC;AACtD,CAAC;AAQD,MAAM,YAAY,GAAG,YAAY,CAAC;AAElC,MAAM,UAAU,OAAO;IACrB,OAAO,UAAU,MAAW,EAAE,GAAW;QACvC,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAClD,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,CAAwC,aAAgB,EAAE,EAAE;QACjE,MAAM,IAAI,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAE7C,OAAO,MAAM,iBAAkB,SAAQ,aAAa;YAClD,WAAW,GAAY,EAAE,CAAC;YAC1B,UAAU,GAAyB,IAAI,CAAC;YAExC,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,KAAK,IAAI,GAAG,IAAI,IAAI,EAAE;oBACpB,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"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"}
|