@joist/observable 2.0.0-next.3 → 2.0.0-next.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
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.7",
|
|
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": "48190a6eb436c5dcfd6f5b0b358e78d7722c577e"
|
|
38
38
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export declare class Change<T = any> {
|
|
2
2
|
value: T;
|
|
3
|
-
previousValue
|
|
4
|
-
|
|
3
|
+
previousValue: T | undefined;
|
|
4
|
+
firstChange: boolean;
|
|
5
|
+
constructor(value: T, previousValue: T | undefined, firstChange: boolean);
|
|
5
6
|
}
|
|
6
7
|
export declare type Changes = Record<string | symbol, Change>;
|
|
7
8
|
export interface OnChange {
|
|
@@ -11,14 +12,16 @@ export declare function readPropertyDefs(c: any): Record<string | symbol, {}>;
|
|
|
11
12
|
export interface ObservableBase {
|
|
12
13
|
propChanges: Changes;
|
|
13
14
|
propChange: Promise<void> | null;
|
|
15
|
+
initializedChanges: Set<string | symbol>;
|
|
14
16
|
definePropChange(key: string | symbol, propChange: Change): Promise<void>;
|
|
15
17
|
}
|
|
16
|
-
export declare function observe(
|
|
17
|
-
export declare function observable
|
|
18
|
+
export declare function observe(target: any, key: string): void;
|
|
19
|
+
export declare function observable<T extends new (...args: any[]) => any>(CustomElement: T): {
|
|
18
20
|
new (...args: any[]): {
|
|
19
21
|
[x: string]: any;
|
|
20
22
|
propChanges: Changes;
|
|
21
23
|
propChange: Promise<void> | null;
|
|
24
|
+
initializedChanges: Set<string | symbol>;
|
|
22
25
|
definePropChange(key: string | symbol, propChange: Change): Promise<void>;
|
|
23
26
|
};
|
|
24
27
|
} & T;
|
|
@@ -1,52 +1,59 @@
|
|
|
1
1
|
export class Change {
|
|
2
2
|
value;
|
|
3
3
|
previousValue;
|
|
4
|
-
|
|
4
|
+
firstChange;
|
|
5
|
+
constructor(value, previousValue, firstChange) {
|
|
5
6
|
this.value = value;
|
|
6
7
|
this.previousValue = previousValue;
|
|
8
|
+
this.firstChange = firstChange;
|
|
7
9
|
}
|
|
8
10
|
}
|
|
9
11
|
export function readPropertyDefs(c) {
|
|
10
12
|
return c.properties || c.prototype.properties || {};
|
|
11
13
|
}
|
|
12
14
|
const PROPERTY_KEY = 'properties';
|
|
13
|
-
export function observe() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
target[PROPERTY_KEY][key] = {};
|
|
17
|
-
};
|
|
15
|
+
export function observe(target, key) {
|
|
16
|
+
target[PROPERTY_KEY] = target[PROPERTY_KEY] || {};
|
|
17
|
+
target[PROPERTY_KEY][key] = {};
|
|
18
18
|
}
|
|
19
|
-
export function observable() {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Object.defineProperties(this, props);
|
|
31
|
-
}
|
|
19
|
+
export function observable(CustomElement) {
|
|
20
|
+
const defs = readPropertyDefs(CustomElement);
|
|
21
|
+
const props = createPropertyDescripors(defs);
|
|
22
|
+
return class ObservableElement extends CustomElement {
|
|
23
|
+
propChanges = {};
|
|
24
|
+
propChange = null;
|
|
25
|
+
initializedChanges = new Set();
|
|
26
|
+
constructor(...args) {
|
|
27
|
+
super(...args);
|
|
28
|
+
for (let def in defs) {
|
|
29
|
+
Reflect.set(this, createPrivateKey(def), Reflect.get(this, def));
|
|
32
30
|
}
|
|
33
|
-
|
|
31
|
+
Object.defineProperties(this, props);
|
|
32
|
+
}
|
|
33
|
+
definePropChange(key, propChange) {
|
|
34
|
+
if (!this.propChanges[key]) {
|
|
34
35
|
this.propChanges[key] = propChange;
|
|
35
|
-
if (!this.propChange) {
|
|
36
|
-
// If there is no previous change defined set it up
|
|
37
|
-
this.propChange = Promise.resolve().then(() => {
|
|
38
|
-
// run onPropChanges here. This makes sure we capture all changes
|
|
39
|
-
if (this.onChange) {
|
|
40
|
-
this.onChange(this.propChanges);
|
|
41
|
-
}
|
|
42
|
-
// reset for next time
|
|
43
|
-
this.propChanges = {};
|
|
44
|
-
this.propChange = null;
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
return this.propChange;
|
|
48
36
|
}
|
|
49
|
-
|
|
37
|
+
this.propChanges[key].value = propChange.value;
|
|
38
|
+
if (!this.propChange) {
|
|
39
|
+
// If there is no previous change defined set it up
|
|
40
|
+
this.propChange = Promise.resolve().then(() => {
|
|
41
|
+
// run onPropChanges here. This makes sure we capture all changes
|
|
42
|
+
// keep track of whether or not this is the first time a given property has changes
|
|
43
|
+
for (let change in this.propChanges) {
|
|
44
|
+
this.propChanges[change].firstChange = !this.initializedChanges.has(change);
|
|
45
|
+
this.initializedChanges.add(change);
|
|
46
|
+
}
|
|
47
|
+
if (this.onChange) {
|
|
48
|
+
this.onChange(this.propChanges);
|
|
49
|
+
}
|
|
50
|
+
// reset for next time
|
|
51
|
+
this.propChanges = {};
|
|
52
|
+
this.propChange = null;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
return this.propChange;
|
|
56
|
+
}
|
|
50
57
|
};
|
|
51
58
|
}
|
|
52
59
|
function createPrivateKey(key) {
|
|
@@ -59,7 +66,7 @@ function createPropertyDescripors(defs) {
|
|
|
59
66
|
props[def] = {
|
|
60
67
|
set(val) {
|
|
61
68
|
const prevVal = Reflect.get(this, privateKey);
|
|
62
|
-
this.definePropChange(def, new Change(val, prevVal));
|
|
69
|
+
this.definePropChange(def, new Change(val, prevVal, true));
|
|
63
70
|
Reflect.set(this, privateKey, val);
|
|
64
71
|
},
|
|
65
72
|
get() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IACE;IAAiB;
|
|
1
|
+
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"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"}
|