watch-state 3.4.1 → 3.4.2
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/Cache/Cache.d.ts +25 -1
- package/Cache/Cache.es6.js +23 -0
- package/Cache/Cache.js +23 -0
- package/Event/Event.d.ts +14 -1
- package/Event/Event.es6.js +18 -5
- package/Event/Event.js +28 -16
- package/Event/index.es6.js +1 -1
- package/Event/index.js +0 -1
- package/README.md +32 -17
- package/State/State.es6.js +1 -1
- package/State/State.js +3 -3
- package/Watch/Watch.d.ts +36 -6
- package/Watch/Watch.es6.js +42 -4
- package/Watch/Watch.js +47 -9
- package/constants.d.ts +4 -0
- package/constants.es6.js +10 -0
- package/{scope/scope.js → constants.js} +4 -0
- package/index.d.ts +3 -1
- package/index.es6.js +4 -2
- package/index.js +7 -3
- package/package.json +1 -1
- package/types.d.ts +13 -0
- package/utils/createEvent/createEvent.d.ts +14 -0
- package/utils/createEvent/createEvent.es6.js +25 -0
- package/utils/createEvent/createEvent.js +29 -0
- package/utils/createEvent/index.d.ts +1 -0
- package/utils/createEvent/index.es6.js +1 -0
- package/utils/createEvent/index.js +9 -0
- package/utils/index.d.ts +2 -0
- package/utils/index.es6.js +2 -0
- package/utils/index.js +11 -0
- package/utils/onDestroy/index.d.ts +1 -0
- package/utils/onDestroy/index.es6.js +1 -0
- package/utils/onDestroy/index.js +9 -0
- package/utils/onDestroy/onDestroy.d.ts +25 -0
- package/utils/onDestroy/onDestroy.es6.js +32 -0
- package/utils/onDestroy/onDestroy.js +36 -0
- package/watch-state.min.js +1 -1
- package/scope/index.d.ts +0 -1
- package/scope/index.es6.js +0 -1
- package/scope/index.js +0 -9
- package/scope/scope.d.ts +0 -7
- package/scope/scope.es6.js +0 -7
package/Cache/Cache.d.ts
CHANGED
|
@@ -1,4 +1,28 @@
|
|
|
1
|
-
import { Watch
|
|
1
|
+
import { Watch } from '../Watch';
|
|
2
|
+
import { Watcher } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* You can cache computed state.
|
|
5
|
+
* The watcher will not be triggered while new result is the same.
|
|
6
|
+
* ```javascript
|
|
7
|
+
* const name = new State('Foo')
|
|
8
|
+
* const surname = new State('Bar')
|
|
9
|
+
*
|
|
10
|
+
* const fullName = new Cache(() => (
|
|
11
|
+
* `${name.value} ${surname.value[0]}`
|
|
12
|
+
* ))
|
|
13
|
+
*
|
|
14
|
+
* new Watch(() => {
|
|
15
|
+
* console.log(fullName.value)
|
|
16
|
+
* })
|
|
17
|
+
* // console.log('Foo B')
|
|
18
|
+
*
|
|
19
|
+
* surname.value = 'Baz'
|
|
20
|
+
* // nothing happens
|
|
21
|
+
*
|
|
22
|
+
* surname.value = 'Quux'
|
|
23
|
+
* // console.log('Foo Q')
|
|
24
|
+
* ```
|
|
25
|
+
* */
|
|
2
26
|
export declare class Cache<V = any> extends Watch {
|
|
3
27
|
protected updated: boolean;
|
|
4
28
|
private _state;
|
package/Cache/Cache.es6.js
CHANGED
|
@@ -1,6 +1,29 @@
|
|
|
1
1
|
import { Watch } from '../Watch/Watch.es6.js';
|
|
2
2
|
import { State } from '../State/State.es6.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* You can cache computed state.
|
|
6
|
+
* The watcher will not be triggered while new result is the same.
|
|
7
|
+
* ```javascript
|
|
8
|
+
* const name = new State('Foo')
|
|
9
|
+
* const surname = new State('Bar')
|
|
10
|
+
*
|
|
11
|
+
* const fullName = new Cache(() => (
|
|
12
|
+
* `${name.value} ${surname.value[0]}`
|
|
13
|
+
* ))
|
|
14
|
+
*
|
|
15
|
+
* new Watch(() => {
|
|
16
|
+
* console.log(fullName.value)
|
|
17
|
+
* })
|
|
18
|
+
* // console.log('Foo B')
|
|
19
|
+
*
|
|
20
|
+
* surname.value = 'Baz'
|
|
21
|
+
* // nothing happens
|
|
22
|
+
*
|
|
23
|
+
* surname.value = 'Quux'
|
|
24
|
+
* // console.log('Foo Q')
|
|
25
|
+
* ```
|
|
26
|
+
* */
|
|
4
27
|
class Cache extends Watch {
|
|
5
28
|
constructor(watcher, freeParent, fireImmediately) {
|
|
6
29
|
super(watcher, freeParent, !fireImmediately);
|
package/Cache/Cache.js
CHANGED
|
@@ -5,6 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var Watch = require('../Watch/Watch.js');
|
|
6
6
|
var State = require('../State/State.js');
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* You can cache computed state.
|
|
10
|
+
* The watcher will not be triggered while new result is the same.
|
|
11
|
+
* ```javascript
|
|
12
|
+
* const name = new State('Foo')
|
|
13
|
+
* const surname = new State('Bar')
|
|
14
|
+
*
|
|
15
|
+
* const fullName = new Cache(() => (
|
|
16
|
+
* `${name.value} ${surname.value[0]}`
|
|
17
|
+
* ))
|
|
18
|
+
*
|
|
19
|
+
* new Watch(() => {
|
|
20
|
+
* console.log(fullName.value)
|
|
21
|
+
* })
|
|
22
|
+
* // console.log('Foo B')
|
|
23
|
+
*
|
|
24
|
+
* surname.value = 'Baz'
|
|
25
|
+
* // nothing happens
|
|
26
|
+
*
|
|
27
|
+
* surname.value = 'Quux'
|
|
28
|
+
* // console.log('Foo Q')
|
|
29
|
+
* ```
|
|
30
|
+
* */
|
|
8
31
|
class Cache extends Watch.Watch {
|
|
9
32
|
constructor(watcher, freeParent, fireImmediately) {
|
|
10
33
|
super(watcher, freeParent, !fireImmediately);
|
package/Event/Event.d.ts
CHANGED
|
@@ -7,6 +7,19 @@ export declare class Event {
|
|
|
7
7
|
start(): void;
|
|
8
8
|
end(): void;
|
|
9
9
|
private forceUpdate;
|
|
10
|
+
/**
|
|
11
|
+
* You can run watchers of a state with `update` method.
|
|
12
|
+
* ```typescript
|
|
13
|
+
* const count = new State(0)
|
|
14
|
+
*
|
|
15
|
+
* new Watch(() => {
|
|
16
|
+
* console.log(count.value)
|
|
17
|
+
* })
|
|
18
|
+
* // console.log(0)
|
|
19
|
+
*
|
|
20
|
+
* count.update()
|
|
21
|
+
* // console.log(0)
|
|
22
|
+
* ```
|
|
23
|
+
* */
|
|
10
24
|
update(): void;
|
|
11
25
|
}
|
|
12
|
-
export declare const globalEvent: Event;
|
package/Event/Event.es6.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { scope } from '../
|
|
1
|
+
import { scope, globalEvent } from '../constants.es6.js';
|
|
2
2
|
|
|
3
3
|
class Event {
|
|
4
4
|
add(target) {
|
|
@@ -12,7 +12,7 @@ class Event {
|
|
|
12
12
|
else {
|
|
13
13
|
watchers = this.watchers = new Set([target]);
|
|
14
14
|
}
|
|
15
|
-
target.
|
|
15
|
+
target.onClear(() => watchers.delete(target));
|
|
16
16
|
}
|
|
17
17
|
start() {
|
|
18
18
|
if (!scope.activeEvent) {
|
|
@@ -36,6 +36,20 @@ class Event {
|
|
|
36
36
|
watcher.update();
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* You can run watchers of a state with `update` method.
|
|
41
|
+
* ```typescript
|
|
42
|
+
* const count = new State(0)
|
|
43
|
+
*
|
|
44
|
+
* new Watch(() => {
|
|
45
|
+
* console.log(count.value)
|
|
46
|
+
* })
|
|
47
|
+
* // console.log(0)
|
|
48
|
+
*
|
|
49
|
+
* count.update()
|
|
50
|
+
* // console.log(0)
|
|
51
|
+
* ```
|
|
52
|
+
* */
|
|
39
53
|
update() {
|
|
40
54
|
var _a;
|
|
41
55
|
if ((_a = this.watchers) === null || _a === void 0 ? void 0 : _a.size) {
|
|
@@ -49,7 +63,6 @@ class Event {
|
|
|
49
63
|
}
|
|
50
64
|
}
|
|
51
65
|
}
|
|
52
|
-
}
|
|
53
|
-
const globalEvent = new Event();
|
|
66
|
+
}
|
|
54
67
|
|
|
55
|
-
export { Event
|
|
68
|
+
export { Event };
|
package/Event/Event.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var constants = require('../constants.js');
|
|
6
6
|
|
|
7
7
|
class Event {
|
|
8
8
|
add(target) {
|
|
@@ -16,21 +16,21 @@ class Event {
|
|
|
16
16
|
else {
|
|
17
17
|
watchers = this.watchers = new Set([target]);
|
|
18
18
|
}
|
|
19
|
-
target.
|
|
19
|
+
target.onClear(() => watchers.delete(target));
|
|
20
20
|
}
|
|
21
21
|
start() {
|
|
22
|
-
if (!
|
|
23
|
-
this.activeWatcher =
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
if (!constants.scope.activeEvent) {
|
|
23
|
+
this.activeWatcher = constants.scope.activeWatcher;
|
|
24
|
+
constants.scope.activeWatcher = undefined;
|
|
25
|
+
constants.scope.activeEvent = this;
|
|
26
26
|
}
|
|
27
|
-
|
|
27
|
+
constants.scope.activeEventDeep++;
|
|
28
28
|
}
|
|
29
29
|
end() {
|
|
30
|
-
if (!--
|
|
31
|
-
|
|
30
|
+
if (!--constants.scope.activeEventDeep && constants.scope.activeEvent === this) {
|
|
31
|
+
constants.scope.activeEvent = undefined;
|
|
32
32
|
this.update();
|
|
33
|
-
|
|
33
|
+
constants.scope.activeWatcher = this.activeWatcher;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
forceUpdate() {
|
|
@@ -40,21 +40,33 @@ class Event {
|
|
|
40
40
|
watcher.update();
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* You can run watchers of a state with `update` method.
|
|
45
|
+
* ```typescript
|
|
46
|
+
* const count = new State(0)
|
|
47
|
+
*
|
|
48
|
+
* new Watch(() => {
|
|
49
|
+
* console.log(count.value)
|
|
50
|
+
* })
|
|
51
|
+
* // console.log(0)
|
|
52
|
+
*
|
|
53
|
+
* count.update()
|
|
54
|
+
* // console.log(0)
|
|
55
|
+
* ```
|
|
56
|
+
* */
|
|
43
57
|
update() {
|
|
44
58
|
var _a;
|
|
45
59
|
if ((_a = this.watchers) === null || _a === void 0 ? void 0 : _a.size) {
|
|
46
|
-
if (this === globalEvent) {
|
|
60
|
+
if (this === constants.globalEvent) {
|
|
47
61
|
this.forceUpdate();
|
|
48
62
|
}
|
|
49
63
|
else {
|
|
50
|
-
globalEvent.start();
|
|
64
|
+
constants.globalEvent.start();
|
|
51
65
|
this.forceUpdate();
|
|
52
|
-
globalEvent.end();
|
|
66
|
+
constants.globalEvent.end();
|
|
53
67
|
}
|
|
54
68
|
}
|
|
55
69
|
}
|
|
56
|
-
}
|
|
57
|
-
const globalEvent = new Event();
|
|
70
|
+
}
|
|
58
71
|
|
|
59
72
|
exports.Event = Event;
|
|
60
|
-
exports.globalEvent = globalEvent;
|
package/Event/index.es6.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Event
|
|
1
|
+
export { Event } from './Event.es6.js';
|
package/Event/index.js
CHANGED
package/README.md
CHANGED
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
<img src="https://img.shields.io/npm/l/watch-state" alt="watch-state license">
|
|
64
64
|
</a>
|
|
65
65
|
<a href="https://changelogs.xyz/watch-state" target="_blank">
|
|
66
|
-
<img src="https://img.shields.io/badge/Changelog-⋮-brightgreen" alt="watch-state
|
|
66
|
+
<img src="https://img.shields.io/badge/Changelog-⋮-brightgreen" alt="watch-state changelog">
|
|
67
67
|
</a>
|
|
68
68
|
<a href="https://d8corp.github.io/watch-state/coverage/lcov-report" target="_blank">
|
|
69
|
-
<img src="https://github.com/d8corp/watch-state/workflows/tests/badge.svg" alt="watch-state
|
|
69
|
+
<img src="https://github.com/d8corp/watch-state/workflows/tests/badge.svg" alt="watch-state tests">
|
|
70
70
|
</a>
|
|
71
71
|
</div>
|
|
72
72
|
<br>
|
|
@@ -131,7 +131,7 @@ const {
|
|
|
131
131
|
### Simple example:
|
|
132
132
|
You can create an instance of `State` and **watch** it's **value**.
|
|
133
133
|
```javascript
|
|
134
|
-
import {Watch, State} from 'watch-state'
|
|
134
|
+
import { Watch, State } from 'watch-state'
|
|
135
135
|
|
|
136
136
|
const count = new State(0)
|
|
137
137
|
|
|
@@ -216,7 +216,7 @@ watcher.update()
|
|
|
216
216
|
// console.log(0)
|
|
217
217
|
```
|
|
218
218
|
|
|
219
|
-
###
|
|
219
|
+
### destroy
|
|
220
220
|
You can stop watching by `destroy` method of `Watch`.
|
|
221
221
|
```javascript
|
|
222
222
|
const count = new State(0)
|
|
@@ -235,25 +235,27 @@ count.value++
|
|
|
235
235
|
// nothing happens
|
|
236
236
|
```
|
|
237
237
|
|
|
238
|
-
###
|
|
239
|
-
You can
|
|
238
|
+
### onDestroy()
|
|
239
|
+
You can subscribe on destroy or update of watcher
|
|
240
240
|
```javascript
|
|
241
|
-
const
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
241
|
+
const count = new State(0)
|
|
242
|
+
const watcher = new Watch(() => {
|
|
243
|
+
console.log('count', count.value)
|
|
244
|
+
// the order does not matter
|
|
245
|
+
onDestroy(() => console.log('destructor'))
|
|
245
246
|
})
|
|
247
|
+
// console.log('count', 0)
|
|
246
248
|
|
|
247
|
-
|
|
249
|
+
count.value++
|
|
248
250
|
// console.log('destructor')
|
|
249
|
-
|
|
250
|
-
`onDestructor` returns `this` so you can use **fluent interface**.
|
|
251
|
-
```javascript
|
|
252
|
-
const watcher = new Watch(() => {})
|
|
253
|
-
.onDestroy(() => console.log('destructor'))
|
|
251
|
+
// console.log('count', 1)
|
|
254
252
|
|
|
255
253
|
watcher.destroy()
|
|
256
254
|
// console.log('destructor')
|
|
255
|
+
|
|
256
|
+
watcher.destroy()
|
|
257
|
+
count.value++
|
|
258
|
+
// nothing happens
|
|
257
259
|
```
|
|
258
260
|
|
|
259
261
|
### Deep watch:
|
|
@@ -377,7 +379,7 @@ new Watch(() => {
|
|
|
377
379
|
|
|
378
380
|
You can use `globalEvent` every time if you do not want to extend the Event functionality.
|
|
379
381
|
```typescript
|
|
380
|
-
import {State, globalEvent} from 'watch-state'
|
|
382
|
+
import { State, globalEvent } from 'watch-state'
|
|
381
383
|
const count = new State(0)
|
|
382
384
|
|
|
383
385
|
new Watch(() => {
|
|
@@ -387,6 +389,19 @@ new Watch(() => {
|
|
|
387
389
|
})
|
|
388
390
|
```
|
|
389
391
|
|
|
392
|
+
### createEvent
|
|
393
|
+
You can create event function with createEvent
|
|
394
|
+
```typescript
|
|
395
|
+
import { State, createEvent } from 'watch-state'
|
|
396
|
+
|
|
397
|
+
const count = new State(0)
|
|
398
|
+
const increase = createEvent(() => {
|
|
399
|
+
console.log(count.value++)
|
|
400
|
+
})
|
|
401
|
+
|
|
402
|
+
new Watch(increase)
|
|
403
|
+
```
|
|
404
|
+
|
|
390
405
|
### Typescript:
|
|
391
406
|
Generic of `State`
|
|
392
407
|
```typescript
|
package/State/State.es6.js
CHANGED
package/State/State.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var Event = require('../Event/Event.js');
|
|
6
|
-
var
|
|
6
|
+
var constants = require('../constants.js');
|
|
7
7
|
|
|
8
8
|
class State extends Event.Event {
|
|
9
9
|
constructor(state) {
|
|
@@ -18,8 +18,8 @@ class State extends Event.Event {
|
|
|
18
18
|
* ```
|
|
19
19
|
* */
|
|
20
20
|
get value() {
|
|
21
|
-
if (
|
|
22
|
-
this.add(
|
|
21
|
+
if (constants.scope.activeWatcher) {
|
|
22
|
+
this.add(constants.scope.activeWatcher);
|
|
23
23
|
}
|
|
24
24
|
return this.state;
|
|
25
25
|
}
|
package/Watch/Watch.d.ts
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
(update?: boolean): R;
|
|
3
|
-
}
|
|
4
|
-
export interface Destructor<R = any> {
|
|
5
|
-
(): R;
|
|
6
|
-
}
|
|
1
|
+
import { Destructor, Watcher } from '../types';
|
|
7
2
|
export declare class Watch {
|
|
8
3
|
private readonly watcher;
|
|
9
4
|
destructors: Destructor[];
|
|
@@ -12,7 +7,42 @@ export declare class Watch {
|
|
|
12
7
|
protected run(): any;
|
|
13
8
|
protected watchRun(): void;
|
|
14
9
|
protected forceUpdate(): void;
|
|
10
|
+
/**
|
|
11
|
+
* You can run a watcher even when it's states are not updated.
|
|
12
|
+
* ```typescript
|
|
13
|
+
* const count = new State(0)
|
|
14
|
+
*
|
|
15
|
+
* const watcher = new Watch(() => {
|
|
16
|
+
* console.log(count.value)
|
|
17
|
+
* })
|
|
18
|
+
* // console.log(0)
|
|
19
|
+
*
|
|
20
|
+
* watcher.update()
|
|
21
|
+
* // console.log(0)
|
|
22
|
+
* ```
|
|
23
|
+
* */
|
|
15
24
|
update(): void;
|
|
25
|
+
/**
|
|
26
|
+
* You can stop watching by `destroy` method of `Watch`.
|
|
27
|
+
* ```javascript
|
|
28
|
+
* const count = new State(0)
|
|
29
|
+
*
|
|
30
|
+
* const watcher = new Watch(() => {
|
|
31
|
+
* console.log(count.value)
|
|
32
|
+
* })
|
|
33
|
+
* // console.log(0)
|
|
34
|
+
*
|
|
35
|
+
* count.value++
|
|
36
|
+
* // console.log(1)
|
|
37
|
+
*
|
|
38
|
+
* watcher.destroy()
|
|
39
|
+
*
|
|
40
|
+
* count.value++
|
|
41
|
+
* // nothing happens
|
|
42
|
+
* ```
|
|
43
|
+
* */
|
|
16
44
|
destroy(): void;
|
|
45
|
+
onClear(callback: Destructor): this;
|
|
46
|
+
/** @deprecated use onClear */
|
|
17
47
|
onDestroy(callback: Destructor): this;
|
|
18
48
|
}
|
package/Watch/Watch.es6.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { scope } from '../
|
|
1
|
+
import { scope } from '../constants.es6.js';
|
|
2
|
+
import { onDestroy } from '../utils/onDestroy/onDestroy.es6.js';
|
|
2
3
|
|
|
3
4
|
class Watch {
|
|
4
5
|
constructor(watcher, freeParent, freeUpdate) {
|
|
5
6
|
this.watcher = watcher;
|
|
6
7
|
this.ran = false;
|
|
7
|
-
if (!freeParent
|
|
8
|
-
|
|
8
|
+
if (!freeParent) {
|
|
9
|
+
onDestroy(() => this.destroy());
|
|
9
10
|
}
|
|
10
11
|
if (!freeUpdate) {
|
|
11
12
|
this.watchRun();
|
|
@@ -26,6 +27,20 @@ class Watch {
|
|
|
26
27
|
this.destroy();
|
|
27
28
|
this.watchRun();
|
|
28
29
|
}
|
|
30
|
+
/**
|
|
31
|
+
* You can run a watcher even when it's states are not updated.
|
|
32
|
+
* ```typescript
|
|
33
|
+
* const count = new State(0)
|
|
34
|
+
*
|
|
35
|
+
* const watcher = new Watch(() => {
|
|
36
|
+
* console.log(count.value)
|
|
37
|
+
* })
|
|
38
|
+
* // console.log(0)
|
|
39
|
+
*
|
|
40
|
+
* watcher.update()
|
|
41
|
+
* // console.log(0)
|
|
42
|
+
* ```
|
|
43
|
+
* */
|
|
29
44
|
update() {
|
|
30
45
|
this.destroy();
|
|
31
46
|
if (scope.activeEvent) {
|
|
@@ -35,6 +50,25 @@ class Watch {
|
|
|
35
50
|
this.watchRun();
|
|
36
51
|
}
|
|
37
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* You can stop watching by `destroy` method of `Watch`.
|
|
55
|
+
* ```javascript
|
|
56
|
+
* const count = new State(0)
|
|
57
|
+
*
|
|
58
|
+
* const watcher = new Watch(() => {
|
|
59
|
+
* console.log(count.value)
|
|
60
|
+
* })
|
|
61
|
+
* // console.log(0)
|
|
62
|
+
*
|
|
63
|
+
* count.value++
|
|
64
|
+
* // console.log(1)
|
|
65
|
+
*
|
|
66
|
+
* watcher.destroy()
|
|
67
|
+
*
|
|
68
|
+
* count.value++
|
|
69
|
+
* // nothing happens
|
|
70
|
+
* ```
|
|
71
|
+
* */
|
|
38
72
|
destroy() {
|
|
39
73
|
const { destructors } = this;
|
|
40
74
|
if (destructors) {
|
|
@@ -42,7 +76,7 @@ class Watch {
|
|
|
42
76
|
destructors.forEach(e => e());
|
|
43
77
|
}
|
|
44
78
|
}
|
|
45
|
-
|
|
79
|
+
onClear(callback) {
|
|
46
80
|
if (this.destructors) {
|
|
47
81
|
this.destructors.push(callback);
|
|
48
82
|
}
|
|
@@ -51,6 +85,10 @@ class Watch {
|
|
|
51
85
|
}
|
|
52
86
|
return this;
|
|
53
87
|
}
|
|
88
|
+
/** @deprecated use onClear */
|
|
89
|
+
onDestroy(callback) {
|
|
90
|
+
return this.onClear(callback);
|
|
91
|
+
}
|
|
54
92
|
}
|
|
55
93
|
|
|
56
94
|
export { Watch };
|
package/Watch/Watch.js
CHANGED
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var constants = require('../constants.js');
|
|
6
|
+
var onDestroy = require('../utils/onDestroy/onDestroy.js');
|
|
6
7
|
|
|
7
8
|
class Watch {
|
|
8
9
|
constructor(watcher, freeParent, freeUpdate) {
|
|
9
10
|
this.watcher = watcher;
|
|
10
11
|
this.ran = false;
|
|
11
|
-
if (!freeParent
|
|
12
|
-
|
|
12
|
+
if (!freeParent) {
|
|
13
|
+
onDestroy.onDestroy(() => this.destroy());
|
|
13
14
|
}
|
|
14
15
|
if (!freeUpdate) {
|
|
15
16
|
this.watchRun();
|
|
@@ -21,24 +22,57 @@ class Watch {
|
|
|
21
22
|
return this.watcher(ran);
|
|
22
23
|
}
|
|
23
24
|
watchRun() {
|
|
24
|
-
const prevWatcher =
|
|
25
|
-
|
|
25
|
+
const prevWatcher = constants.scope.activeWatcher;
|
|
26
|
+
constants.scope.activeWatcher = this;
|
|
26
27
|
this.run();
|
|
27
|
-
|
|
28
|
+
constants.scope.activeWatcher = prevWatcher;
|
|
28
29
|
}
|
|
29
30
|
forceUpdate() {
|
|
30
31
|
this.destroy();
|
|
31
32
|
this.watchRun();
|
|
32
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* You can run a watcher even when it's states are not updated.
|
|
36
|
+
* ```typescript
|
|
37
|
+
* const count = new State(0)
|
|
38
|
+
*
|
|
39
|
+
* const watcher = new Watch(() => {
|
|
40
|
+
* console.log(count.value)
|
|
41
|
+
* })
|
|
42
|
+
* // console.log(0)
|
|
43
|
+
*
|
|
44
|
+
* watcher.update()
|
|
45
|
+
* // console.log(0)
|
|
46
|
+
* ```
|
|
47
|
+
* */
|
|
33
48
|
update() {
|
|
34
49
|
this.destroy();
|
|
35
|
-
if (
|
|
36
|
-
|
|
50
|
+
if (constants.scope.activeEvent) {
|
|
51
|
+
constants.scope.activeEvent.add(this);
|
|
37
52
|
}
|
|
38
53
|
else {
|
|
39
54
|
this.watchRun();
|
|
40
55
|
}
|
|
41
56
|
}
|
|
57
|
+
/**
|
|
58
|
+
* You can stop watching by `destroy` method of `Watch`.
|
|
59
|
+
* ```javascript
|
|
60
|
+
* const count = new State(0)
|
|
61
|
+
*
|
|
62
|
+
* const watcher = new Watch(() => {
|
|
63
|
+
* console.log(count.value)
|
|
64
|
+
* })
|
|
65
|
+
* // console.log(0)
|
|
66
|
+
*
|
|
67
|
+
* count.value++
|
|
68
|
+
* // console.log(1)
|
|
69
|
+
*
|
|
70
|
+
* watcher.destroy()
|
|
71
|
+
*
|
|
72
|
+
* count.value++
|
|
73
|
+
* // nothing happens
|
|
74
|
+
* ```
|
|
75
|
+
* */
|
|
42
76
|
destroy() {
|
|
43
77
|
const { destructors } = this;
|
|
44
78
|
if (destructors) {
|
|
@@ -46,7 +80,7 @@ class Watch {
|
|
|
46
80
|
destructors.forEach(e => e());
|
|
47
81
|
}
|
|
48
82
|
}
|
|
49
|
-
|
|
83
|
+
onClear(callback) {
|
|
50
84
|
if (this.destructors) {
|
|
51
85
|
this.destructors.push(callback);
|
|
52
86
|
}
|
|
@@ -55,6 +89,10 @@ class Watch {
|
|
|
55
89
|
}
|
|
56
90
|
return this;
|
|
57
91
|
}
|
|
92
|
+
/** @deprecated use onClear */
|
|
93
|
+
onDestroy(callback) {
|
|
94
|
+
return this.onClear(callback);
|
|
95
|
+
}
|
|
58
96
|
}
|
|
59
97
|
|
|
60
98
|
exports.Watch = Watch;
|
package/constants.d.ts
ADDED
package/constants.es6.js
ADDED
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var Event = require('./Event/Event.js');
|
|
6
|
+
|
|
7
|
+
const globalEvent = new Event.Event();
|
|
5
8
|
const scope = {
|
|
6
9
|
activeWatcher: undefined,
|
|
7
10
|
activeEvent: undefined,
|
|
8
11
|
activeEventDeep: 0,
|
|
9
12
|
};
|
|
10
13
|
|
|
14
|
+
exports.globalEvent = globalEvent;
|
|
11
15
|
exports.scope = scope;
|
package/index.d.ts
CHANGED
package/index.es6.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { Watch } from './Watch/Watch.es6.js';
|
|
2
2
|
export { State } from './State/State.es6.js';
|
|
3
3
|
export { Cache } from './Cache/Cache.es6.js';
|
|
4
|
-
export { Event
|
|
5
|
-
export {
|
|
4
|
+
export { Event } from './Event/Event.es6.js';
|
|
5
|
+
export { onDestroy } from './utils/onDestroy/onDestroy.es6.js';
|
|
6
|
+
export { createEvent } from './utils/createEvent/createEvent.es6.js';
|
|
7
|
+
export { globalEvent, scope } from './constants.es6.js';
|
package/index.js
CHANGED
|
@@ -6,7 +6,9 @@ var Watch = require('./Watch/Watch.js');
|
|
|
6
6
|
var State = require('./State/State.js');
|
|
7
7
|
var Cache = require('./Cache/Cache.js');
|
|
8
8
|
var Event = require('./Event/Event.js');
|
|
9
|
-
var
|
|
9
|
+
var onDestroy = require('./utils/onDestroy/onDestroy.js');
|
|
10
|
+
var createEvent = require('./utils/createEvent/createEvent.js');
|
|
11
|
+
var constants = require('./constants.js');
|
|
10
12
|
|
|
11
13
|
|
|
12
14
|
|
|
@@ -14,5 +16,7 @@ exports.Watch = Watch.Watch;
|
|
|
14
16
|
exports.State = State.State;
|
|
15
17
|
exports.Cache = Cache.Cache;
|
|
16
18
|
exports.Event = Event.Event;
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
+
exports.onDestroy = onDestroy.onDestroy;
|
|
20
|
+
exports.createEvent = createEvent.createEvent;
|
|
21
|
+
exports.globalEvent = constants.globalEvent;
|
|
22
|
+
exports.scope = constants.scope;
|
package/package.json
CHANGED
package/types.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Watch } from './Watch';
|
|
2
|
+
import { Event } from './Event';
|
|
3
|
+
export interface Watcher<R = any> {
|
|
4
|
+
(update?: boolean): R;
|
|
5
|
+
}
|
|
6
|
+
export interface Destructor<R = any> {
|
|
7
|
+
(): R;
|
|
8
|
+
}
|
|
9
|
+
export interface Scope {
|
|
10
|
+
activeWatcher?: Watch;
|
|
11
|
+
activeEvent?: Event;
|
|
12
|
+
activeEventDeep: number;
|
|
13
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* You can create event function with createEvent
|
|
3
|
+
* ```typescript
|
|
4
|
+
* import { State, createEvent } from 'watch-state'
|
|
5
|
+
*
|
|
6
|
+
* const count = new State(0)
|
|
7
|
+
* const increase = createEvent(() => {
|
|
8
|
+
* console.log(count.value++)
|
|
9
|
+
* })
|
|
10
|
+
*
|
|
11
|
+
* new Watch(increase)
|
|
12
|
+
* ```
|
|
13
|
+
* */
|
|
14
|
+
export declare function createEvent<F extends Function>(fn: F): F;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { globalEvent } from '../../constants.es6.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* You can create event function with createEvent
|
|
5
|
+
* ```typescript
|
|
6
|
+
* import { State, createEvent } from 'watch-state'
|
|
7
|
+
*
|
|
8
|
+
* const count = new State(0)
|
|
9
|
+
* const increase = createEvent(() => {
|
|
10
|
+
* console.log(count.value++)
|
|
11
|
+
* })
|
|
12
|
+
*
|
|
13
|
+
* new Watch(increase)
|
|
14
|
+
* ```
|
|
15
|
+
* */
|
|
16
|
+
function createEvent(fn) {
|
|
17
|
+
return function () {
|
|
18
|
+
globalEvent.start();
|
|
19
|
+
const result = fn.apply(this, arguments);
|
|
20
|
+
globalEvent.end();
|
|
21
|
+
return result;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { createEvent };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var constants = require('../../constants.js');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* You can create event function with createEvent
|
|
9
|
+
* ```typescript
|
|
10
|
+
* import { State, createEvent } from 'watch-state'
|
|
11
|
+
*
|
|
12
|
+
* const count = new State(0)
|
|
13
|
+
* const increase = createEvent(() => {
|
|
14
|
+
* console.log(count.value++)
|
|
15
|
+
* })
|
|
16
|
+
*
|
|
17
|
+
* new Watch(increase)
|
|
18
|
+
* ```
|
|
19
|
+
* */
|
|
20
|
+
function createEvent(fn) {
|
|
21
|
+
return function () {
|
|
22
|
+
constants.globalEvent.start();
|
|
23
|
+
const result = fn.apply(this, arguments);
|
|
24
|
+
constants.globalEvent.end();
|
|
25
|
+
return result;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
exports.createEvent = createEvent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './createEvent';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createEvent } from './createEvent.es6.js';
|
package/utils/index.d.ts
ADDED
package/utils/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var onDestroy = require('./onDestroy/onDestroy.js');
|
|
6
|
+
var createEvent = require('./createEvent/createEvent.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.onDestroy = onDestroy.onDestroy;
|
|
11
|
+
exports.createEvent = createEvent.createEvent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './onDestroy';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { onDestroy } from './onDestroy.es6.js';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Destructor } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* You can subscribe on destroy or update of watcher
|
|
4
|
+
* ```javascript
|
|
5
|
+
* const count = new State(0)
|
|
6
|
+
* const watcher = new Watch(() => {
|
|
7
|
+
* console.log('count', count.value)
|
|
8
|
+
* // the order does not matter
|
|
9
|
+
* onDestroy(() => console.log('destructor'))
|
|
10
|
+
* })
|
|
11
|
+
* // console.log('count', 0)
|
|
12
|
+
*
|
|
13
|
+
* count.value++
|
|
14
|
+
* // console.log('destructor')
|
|
15
|
+
* // console.log('count', 1)
|
|
16
|
+
*
|
|
17
|
+
* watcher.destroy()
|
|
18
|
+
* // console.log('destructor')
|
|
19
|
+
*
|
|
20
|
+
* watcher.destroy()
|
|
21
|
+
* count.value++
|
|
22
|
+
* // nothing happens
|
|
23
|
+
* ```
|
|
24
|
+
* */
|
|
25
|
+
export declare function onDestroy(destructor: Destructor): void;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { scope } from '../../constants.es6.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* You can subscribe on destroy or update of watcher
|
|
5
|
+
* ```javascript
|
|
6
|
+
* const count = new State(0)
|
|
7
|
+
* const watcher = new Watch(() => {
|
|
8
|
+
* console.log('count', count.value)
|
|
9
|
+
* // the order does not matter
|
|
10
|
+
* onDestroy(() => console.log('destructor'))
|
|
11
|
+
* })
|
|
12
|
+
* // console.log('count', 0)
|
|
13
|
+
*
|
|
14
|
+
* count.value++
|
|
15
|
+
* // console.log('destructor')
|
|
16
|
+
* // console.log('count', 1)
|
|
17
|
+
*
|
|
18
|
+
* watcher.destroy()
|
|
19
|
+
* // console.log('destructor')
|
|
20
|
+
*
|
|
21
|
+
* watcher.destroy()
|
|
22
|
+
* count.value++
|
|
23
|
+
* // nothing happens
|
|
24
|
+
* ```
|
|
25
|
+
* */
|
|
26
|
+
function onDestroy(destructor) {
|
|
27
|
+
if (scope.activeWatcher) {
|
|
28
|
+
scope.activeWatcher.onClear(destructor);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { onDestroy };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var constants = require('../../constants.js');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* You can subscribe on destroy or update of watcher
|
|
9
|
+
* ```javascript
|
|
10
|
+
* const count = new State(0)
|
|
11
|
+
* const watcher = new Watch(() => {
|
|
12
|
+
* console.log('count', count.value)
|
|
13
|
+
* // the order does not matter
|
|
14
|
+
* onDestroy(() => console.log('destructor'))
|
|
15
|
+
* })
|
|
16
|
+
* // console.log('count', 0)
|
|
17
|
+
*
|
|
18
|
+
* count.value++
|
|
19
|
+
* // console.log('destructor')
|
|
20
|
+
* // console.log('count', 1)
|
|
21
|
+
*
|
|
22
|
+
* watcher.destroy()
|
|
23
|
+
* // console.log('destructor')
|
|
24
|
+
*
|
|
25
|
+
* watcher.destroy()
|
|
26
|
+
* count.value++
|
|
27
|
+
* // nothing happens
|
|
28
|
+
* ```
|
|
29
|
+
* */
|
|
30
|
+
function onDestroy(destructor) {
|
|
31
|
+
if (constants.scope.activeWatcher) {
|
|
32
|
+
constants.scope.activeWatcher.onClear(destructor);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
exports.onDestroy = onDestroy;
|
package/watch-state.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var watchState=function(t){"use strict";
|
|
1
|
+
var watchState=function(t){"use strict";class e{add(t){let{watchers:e}=this;if(e){if(e.has(t))return;e.add(t)}else e=this.watchers=new Set([t]);t.onClear((()=>e.delete(t)))}start(){a.activeEvent||(this.activeWatcher=a.activeWatcher,a.activeWatcher=void 0,a.activeEvent=this),a.activeEventDeep++}end(){--a.activeEventDeep||a.activeEvent!==this||(a.activeEvent=void 0,this.update(),a.activeWatcher=this.activeWatcher)}forceUpdate(){const{watchers:t}=this;this.watchers=void 0;for(const e of t)e.update()}update(){var t;(null===(t=this.watchers)||void 0===t?void 0:t.size)&&(this===s?this.forceUpdate():(s.start(),this.forceUpdate(),s.end()))}}const s=new e,a={activeWatcher:void 0,activeEvent:void 0,activeEventDeep:0};function i(t){a.activeWatcher&&a.activeWatcher.onClear(t)}class r{constructor(t,e,s){this.watcher=t,this.ran=!1,e||i((()=>this.destroy())),s||this.watchRun()}run(){const{ran:t}=this;return this.ran=!0,this.watcher(t)}watchRun(){const t=a.activeWatcher;a.activeWatcher=this,this.run(),a.activeWatcher=t}forceUpdate(){this.destroy(),this.watchRun()}update(){this.destroy(),a.activeEvent?a.activeEvent.add(this):this.watchRun()}destroy(){const{destructors:t}=this;t&&(this.destructors=void 0,t.forEach((t=>t())))}onClear(t){return this.destructors?this.destructors.push(t):this.destructors=[t],this}onDestroy(t){return this.onClear(t)}}class h extends e{constructor(t){super(),this.state=t}get value(){return a.activeWatcher&&this.add(a.activeWatcher),this.state}set value(t){t!==this.state&&(this.state=t,this.update())}}class c extends r{constructor(t,e,s){super(t,e,!s)}destroy(){return super.destroy()}run(){this.updated=!0,this.value=super.run()}get hasWatcher(){if(this.updated&&this.size)for(const t of this._state.watchers)if(!(t instanceof c)||t.hasWatcher)return!0}get size(){var t,e;return null===(e=null===(t=this._state)||void 0===t?void 0:t.watchers)||void 0===e?void 0:e.size}deepUpdate(){if(this.updated=!1,this.destroy(),this.size)for(const t of this._state.watchers)t.deepUpdate()}update(){this.updated&&(this.hasWatcher?this.forceUpdate():this.deepUpdate())}get state(){return this._state||(this._state=new h)}get value(){return this.updated||this.forceUpdate(),this.state.value}set value(t){this.state.value=t}}return t.Cache=c,t.Event=e,t.State=h,t.Watch=r,t.createEvent=function(t){return function(){s.start();const e=t.apply(this,arguments);return s.end(),e}},t.globalEvent=s,t.onDestroy=i,t.scope=a,Object.defineProperty(t,"__esModule",{value:!0}),t}({});
|
package/scope/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './scope';
|
package/scope/index.es6.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { scope } from './scope.es6.js';
|
package/scope/index.js
DELETED
package/scope/scope.d.ts
DELETED