@joist/observable 2.0.0-alpha.0 → 2.0.0-alpha.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
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Observable
|
|
2
2
|
|
|
3
3
|
Observable in Joist means something slightly different then in something like RxJs.
|
|
4
|
-
|
|
4
|
+
Decorating a class with `@observable` means that instances of that class will BE observable. This means you can watch for changes on select properties.s
|
|
5
5
|
|
|
6
6
|
#### Installation:
|
|
7
7
|
|
|
8
8
|
```BASH
|
|
9
|
-
npm i @joist/observable
|
|
9
|
+
npm i @joist/observable@alpha
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
#### Example:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joist/observable",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.4",
|
|
4
4
|
"main": "./target/build/lib.js",
|
|
5
5
|
"module": "./target/build/lib.js",
|
|
6
6
|
"exports": {
|
|
@@ -12,19 +12,20 @@
|
|
|
12
12
|
"target/build"
|
|
13
13
|
],
|
|
14
14
|
"sideEffects": false,
|
|
15
|
-
"description": "
|
|
15
|
+
"description": "Dependency Injection in ~800 bytes",
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "git+https://github.com/
|
|
18
|
+
"url": "git+https://github.com/deebloo/joist.git"
|
|
19
19
|
},
|
|
20
20
|
"keywords": [
|
|
21
21
|
"TypeScript",
|
|
22
|
-
"
|
|
22
|
+
"DI",
|
|
23
|
+
"Dependency Injection"
|
|
23
24
|
],
|
|
24
25
|
"author": "deebloo",
|
|
25
26
|
"license": "MIT",
|
|
26
27
|
"bugs": {
|
|
27
|
-
"url": "https://github.com/
|
|
28
|
+
"url": "https://github.com/deebloo/joist/issues"
|
|
28
29
|
},
|
|
29
30
|
"publishConfig": {
|
|
30
31
|
"access": "public"
|
|
@@ -33,5 +34,5 @@
|
|
|
33
34
|
"test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
|
|
34
35
|
"build": "tsc -p tsconfig.build.json"
|
|
35
36
|
},
|
|
36
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "313ce28f4c1a4a634849ec271376e9c9589c045d"
|
|
37
38
|
}
|
|
@@ -8,20 +8,23 @@ export declare type Changes = Record<string | symbol, Change>;
|
|
|
8
8
|
export interface OnChange {
|
|
9
9
|
onChange(changes: Changes): void;
|
|
10
10
|
}
|
|
11
|
-
export declare function readPropertyDefs(c: any):
|
|
11
|
+
export declare function readPropertyDefs(c: any): Array<string | symbol>;
|
|
12
12
|
export interface ObservableBase {
|
|
13
13
|
propChanges: Changes;
|
|
14
14
|
propChange: Promise<void> | null;
|
|
15
15
|
initializedChanges: Set<string | symbol>;
|
|
16
|
+
onChange?: (changes: Changes) => void;
|
|
16
17
|
definePropChange(key: string | symbol, propChange: Change): Promise<void>;
|
|
17
18
|
}
|
|
18
19
|
export declare function observe(target: any, key: string): void;
|
|
19
|
-
export declare function observable<T extends new (...args: any[]) => any>(
|
|
20
|
+
export declare function observable<T extends new (...args: any[]) => any>(Base: T): {
|
|
20
21
|
new (...args: any[]): {
|
|
21
22
|
[x: string]: any;
|
|
22
23
|
propChanges: Changes;
|
|
23
24
|
propChange: Promise<void> | null;
|
|
24
25
|
initializedChanges: Set<string | symbol>;
|
|
25
|
-
definePropChange
|
|
26
|
+
definePropChange: typeof definePropChange;
|
|
26
27
|
};
|
|
27
28
|
} & T;
|
|
29
|
+
declare function definePropChange(this: ObservableBase, key: string | symbol, propChange: Change): Promise<void>;
|
|
30
|
+
export {};
|
|
@@ -1,79 +1,83 @@
|
|
|
1
1
|
export class Change {
|
|
2
|
-
value;
|
|
3
|
-
previousValue;
|
|
4
|
-
firstChange;
|
|
5
2
|
constructor(value, previousValue, firstChange) {
|
|
6
3
|
this.value = value;
|
|
7
4
|
this.previousValue = previousValue;
|
|
8
5
|
this.firstChange = firstChange;
|
|
9
6
|
}
|
|
10
7
|
}
|
|
8
|
+
const PROPERTY_KEY = 'props';
|
|
11
9
|
export function readPropertyDefs(c) {
|
|
12
|
-
return c
|
|
10
|
+
return c[PROPERTY_KEY] || {};
|
|
13
11
|
}
|
|
14
|
-
const PROPERTY_KEY = 'properties';
|
|
15
12
|
export function observe(target, key) {
|
|
16
|
-
target[PROPERTY_KEY] = target[PROPERTY_KEY] ||
|
|
17
|
-
target[PROPERTY_KEY]
|
|
13
|
+
target.constructor[PROPERTY_KEY] = target.constructor[PROPERTY_KEY] || [];
|
|
14
|
+
target.constructor[PROPERTY_KEY].push(key);
|
|
18
15
|
}
|
|
19
|
-
export function observable(
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
return class
|
|
23
|
-
propChanges = {};
|
|
24
|
-
propChange = null;
|
|
25
|
-
initializedChanges = new Set();
|
|
16
|
+
export function observable(Base) {
|
|
17
|
+
const props = readPropertyDefs(Base);
|
|
18
|
+
const descriptors = createPropertyDescripors(props);
|
|
19
|
+
return class Observable extends Base {
|
|
26
20
|
constructor(...args) {
|
|
27
21
|
super(...args);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
definePropChange(key, propChange) {
|
|
34
|
-
if (!this.propChanges[key]) {
|
|
35
|
-
this.propChanges[key] = propChange;
|
|
36
|
-
}
|
|
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;
|
|
22
|
+
this.propChanges = {};
|
|
23
|
+
this.propChange = null;
|
|
24
|
+
this.initializedChanges = new Set();
|
|
25
|
+
this.definePropChange = definePropChange;
|
|
26
|
+
initObservbale.call(this, descriptors);
|
|
56
27
|
}
|
|
57
28
|
};
|
|
58
29
|
}
|
|
30
|
+
function initObservbale(descriptors) {
|
|
31
|
+
for (let prop in descriptors) {
|
|
32
|
+
Reflect.set(this, createPrivateKey(prop), Reflect.get(this, prop));
|
|
33
|
+
}
|
|
34
|
+
Object.defineProperties(this, descriptors);
|
|
35
|
+
}
|
|
59
36
|
function createPrivateKey(key) {
|
|
60
|
-
return `__${key}`;
|
|
37
|
+
return `__${key.toString()}`;
|
|
61
38
|
}
|
|
62
|
-
function createPropertyDescripors(
|
|
63
|
-
const
|
|
64
|
-
for (let
|
|
65
|
-
const
|
|
66
|
-
|
|
39
|
+
function createPropertyDescripors(props) {
|
|
40
|
+
const descriptors = {};
|
|
41
|
+
for (let i = 0; i < props.length; i++) {
|
|
42
|
+
const prop = props[i];
|
|
43
|
+
const privateKey = createPrivateKey(prop);
|
|
44
|
+
descriptors[prop] = {
|
|
67
45
|
set(val) {
|
|
68
46
|
const prevVal = Reflect.get(this, privateKey);
|
|
69
|
-
|
|
70
|
-
|
|
47
|
+
if (prevVal !== val) {
|
|
48
|
+
this.definePropChange(prop, new Change(val, prevVal, true));
|
|
49
|
+
}
|
|
50
|
+
return Reflect.set(this, privateKey, val);
|
|
71
51
|
},
|
|
72
52
|
get() {
|
|
73
53
|
return Reflect.get(this, privateKey);
|
|
74
54
|
},
|
|
75
55
|
};
|
|
76
56
|
}
|
|
77
|
-
return
|
|
57
|
+
return descriptors;
|
|
58
|
+
}
|
|
59
|
+
function definePropChange(key, propChange) {
|
|
60
|
+
if (!this.propChanges[key]) {
|
|
61
|
+
this.propChanges[key] = propChange;
|
|
62
|
+
}
|
|
63
|
+
this.propChanges[key].value = propChange.value;
|
|
64
|
+
if (!this.propChange) {
|
|
65
|
+
// If there is no previous change defined set it up
|
|
66
|
+
this.propChange = Promise.resolve().then(() => {
|
|
67
|
+
// run onPropChanges here. This makes sure we capture all changes
|
|
68
|
+
// keep track of whether or not this is the first time a given property has changes
|
|
69
|
+
for (let change in this.propChanges) {
|
|
70
|
+
this.propChanges[change].firstChange = !this.initializedChanges.has(change);
|
|
71
|
+
this.initializedChanges.add(change);
|
|
72
|
+
}
|
|
73
|
+
if (this.onChange) {
|
|
74
|
+
this.onChange(this.propChanges);
|
|
75
|
+
}
|
|
76
|
+
// reset for next time
|
|
77
|
+
this.propChanges = {};
|
|
78
|
+
this.propChange = null;
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
return this.propChange;
|
|
78
82
|
}
|
|
79
83
|
//# sourceMappingURL=observable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;
|
|
1
|
+
{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"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"}
|