@joist/observable 2.0.0-next.4 → 2.0.0-next.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
CHANGED
|
@@ -14,11 +14,11 @@ npm i @joist/observable
|
|
|
14
14
|
```TS
|
|
15
15
|
import { observable, observer, OnChange, Changes } from '@joist/observable';
|
|
16
16
|
|
|
17
|
-
@observable
|
|
17
|
+
@observable
|
|
18
18
|
class State implements OnChange {
|
|
19
19
|
// Changes to these will trigger callback
|
|
20
|
-
@observe
|
|
21
|
-
@observe
|
|
20
|
+
@observe todos: string[] = [];
|
|
21
|
+
@observe userName?: string;
|
|
22
22
|
|
|
23
23
|
// changes to this will not
|
|
24
24
|
someValue: boolean = false;
|
|
@@ -48,11 +48,11 @@ class StateChangeEvent extends Event {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
@observable
|
|
51
|
+
@observable
|
|
52
52
|
class State extends EventTarget implements OnChange {
|
|
53
53
|
// Changes to these will trigger callback
|
|
54
|
-
@observe
|
|
55
|
-
@observe
|
|
54
|
+
@observe todos: string[] = [];
|
|
55
|
+
@observe userName?: string;
|
|
56
56
|
|
|
57
57
|
// changes to this will not
|
|
58
58
|
someValue: boolean = false;
|
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.8",
|
|
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": "1212ee3fec6c88bed79dc5ff97076c088f91c852"
|
|
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
|
-
}
|
|
31
|
-
Object.defineProperties(this, props);
|
|
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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"}
|