watch-state 3.3.3 → 3.4.2

package/Cache/Cache.d.ts

@@ -1,15 +1,39 @@
-import Watch, { Watcher } from '../Watch';
+import { Watch } from '../Watch';
+import { Watcher } from '../types';
+/**
+ * You can cache computed state.
+ * The watcher will not be triggered while new result is the same.
+ * ```javascript
+ * const name = new State('Foo')
+ * const surname = new State('Bar')
+ *
+ * const fullName = new Cache(() => (
+ *   `${name.value} ${surname.value[0]}`
+ * ))
+ *
+ * new Watch(() => {
+ *   console.log(fullName.value)
+ * })
+ * // console.log('Foo B')
+ *
+ * surname.value = 'Baz'
+ * // nothing happens
+ *
+ * surname.value = 'Quux'
+ * // console.log('Foo Q')
+ * ```
+ * */
 export declare class Cache<V = any> extends Watch {
-    private updated;
+    protected updated: boolean;
     private _state;
     constructor(watcher: Watcher, freeParent?: boolean, fireImmediately?: boolean);
     destroy(): void;
     run(): void;
     get hasWatcher(): boolean;
+    get size(): number;
     deepUpdate(): void;
     update(): void;
     private get state();
     get value(): V;
     set value(value: V);
 }
-export default Cache;

package/Cache/Cache.es6.js

@@ -1,6 +1,29 @@
 import { Watch } from '../Watch/Watch.es6.js';
 import { State } from '../State/State.es6.js';
 
+/**
+ * You can cache computed state.
+ * The watcher will not be triggered while new result is the same.
+ * ```javascript
+ * const name = new State('Foo')
+ * const surname = new State('Bar')
+ *
+ * const fullName = new Cache(() => (
+ *   `${name.value} ${surname.value[0]}`
+ * ))
+ *
+ * new Watch(() => {
+ *   console.log(fullName.value)
+ * })
+ * // console.log('Foo B')
+ *
+ * surname.value = 'Baz'
+ * // nothing happens
+ *
+ * surname.value = 'Quux'
+ * // console.log('Foo Q')
+ * ```
+ * */
 class Cache extends Watch {
     constructor(watcher, freeParent, fireImmediately) {
         super(watcher, freeParent, !fireImmediately);
@@ -13,8 +36,7 @@ class Cache extends Watch {
         this.value = super.run();
     }
     get hasWatcher() {
-        var _a, _b;
-        if (this.updated && ((_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size)) {
+        if (this.updated && this.size) {
             for (const watcher of this._state.watchers) {
                 if (!(watcher instanceof Cache) || watcher.hasWatcher) {
                     return true;
@@ -22,11 +44,14 @@ class Cache extends Watch {
             }
         }
     }
-    deepUpdate() {
+    get size() {
         var _a, _b;
+        return (_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size;
+    }
+    deepUpdate() {
         this.updated = false;
         this.destroy();
-        if ((_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size) {
+        if (this.size) {
             for (const watcher of this._state.watchers) {
                 watcher.deepUpdate();
             }
@@ -56,5 +81,4 @@ class Cache extends Watch {
     }
 }
 
-export default Cache;
 export { Cache };

package/Cache/Cache.js

@@ -5,6 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Watch = require('../Watch/Watch.js');
 var State = require('../State/State.js');
 
+/**
+ * You can cache computed state.
+ * The watcher will not be triggered while new result is the same.
+ * ```javascript
+ * const name = new State('Foo')
+ * const surname = new State('Bar')
+ *
+ * const fullName = new Cache(() => (
+ *   `${name.value} ${surname.value[0]}`
+ * ))
+ *
+ * new Watch(() => {
+ *   console.log(fullName.value)
+ * })
+ * // console.log('Foo B')
+ *
+ * surname.value = 'Baz'
+ * // nothing happens
+ *
+ * surname.value = 'Quux'
+ * // console.log('Foo Q')
+ * ```
+ * */
 class Cache extends Watch.Watch {
     constructor(watcher, freeParent, fireImmediately) {
         super(watcher, freeParent, !fireImmediately);
@@ -17,8 +40,7 @@ class Cache extends Watch.Watch {
         this.value = super.run();
     }
     get hasWatcher() {
-        var _a, _b;
-        if (this.updated && ((_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size)) {
+        if (this.updated && this.size) {
             for (const watcher of this._state.watchers) {
                 if (!(watcher instanceof Cache) || watcher.hasWatcher) {
                     return true;
@@ -26,11 +48,14 @@ class Cache extends Watch.Watch {
             }
         }
     }
-    deepUpdate() {
+    get size() {
         var _a, _b;
+        return (_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size;
+    }
+    deepUpdate() {
         this.updated = false;
         this.destroy();
-        if ((_b = (_a = this._state) === null || _a === void 0 ? void 0 : _a.watchers) === null || _b === void 0 ? void 0 : _b.size) {
+        if (this.size) {
             for (const watcher of this._state.watchers) {
                 watcher.deepUpdate();
             }
@@ -61,4 +86,3 @@ class Cache extends Watch.Watch {
 }
 
 exports.Cache = Cache;
-exports.default = Cache;

package/Cache/index.d.ts

@@ -1,2 +1 @@
-export { default } from './Cache';
 export * from './Cache';

package/Cache/index.es6.js

@@ -1 +1 @@
-export { Cache, Cache as default } from './Cache.es6.js';
+export { Cache } from './Cache.es6.js';

package/Cache/index.js

@@ -7,4 +7,3 @@ var Cache = require('./Cache.js');
 
 
 exports.Cache = Cache.Cache;
-exports.default = Cache.Cache;

package/Event/Event.d.ts

@@ -1,14 +1,25 @@
-import Watch from '../Watch';
-import Cache from '../Cache';
+import { Watch } from '../Watch';
+import { Cache } from '../Cache';
 export declare class Event {
     watchers: Set<Watch | Cache>;
-    activeWatchers: Set<Watch | Cache>;
     activeWatcher: Watch;
     add(target: Watch | Cache): void;
     start(): void;
     end(): void;
     private forceUpdate;
+    /**
+     * You can run watchers of a state with `update` method.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.update()
+     * // console.log(0)
+     * ```
+     * */
     update(): void;
 }
-export declare const globalEvent: Event;
-export default Event;

package/Event/Event.es6.js

@@ -1,4 +1,4 @@
-import scope from '../scope/scope.es6.js';
+import { scope, globalEvent } from '../constants.es6.js';
 
 class Event {
     add(target) {
@@ -12,7 +12,7 @@ class Event {
         else {
             watchers = this.watchers = new Set([target]);
         }
-        target.onDestroy(() => watchers.delete(target));
+        target.onClear(() => watchers.delete(target));
     }
     start() {
         if (!scope.activeEvent) {
@@ -30,13 +30,26 @@ class Event {
         }
     }
     forceUpdate() {
-        const { activeWatchers } = this;
-        this.activeWatchers = this.watchers;
-        this.watchers = activeWatchers;
-        for (const watcher of this.activeWatchers) {
+        const { watchers } = this;
+        this.watchers = undefined;
+        for (const watcher of watchers) {
             watcher.update();
         }
     }
+    /**
+     * You can run watchers of a state with `update` method.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.update()
+     * // console.log(0)
+     * ```
+     * */
     update() {
         var _a;
         if ((_a = this.watchers) === null || _a === void 0 ? void 0 : _a.size) {
@@ -50,8 +63,6 @@ class Event {
             }
         }
     }
-}
-const globalEvent = new Event();
+}
 
-export default Event;
-export { Event, globalEvent };
+export { Event };

package/Event/Event.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var scope = require('../scope/scope.js');
+var constants = require('../constants.js');
 
 class Event {
     add(target) {
@@ -16,47 +16,57 @@ class Event {
         else {
             watchers = this.watchers = new Set([target]);
         }
-        target.onDestroy(() => watchers.delete(target));
+        target.onClear(() => watchers.delete(target));
     }
     start() {
-        if (!scope.activeEvent) {
-            this.activeWatcher = scope.activeWatcher;
-            scope.activeWatcher = undefined;
-            scope.activeEvent = this;
+        if (!constants.scope.activeEvent) {
+            this.activeWatcher = constants.scope.activeWatcher;
+            constants.scope.activeWatcher = undefined;
+            constants.scope.activeEvent = this;
         }
-        scope.activeEventDeep++;
+        constants.scope.activeEventDeep++;
     }
     end() {
-        if (!--scope.activeEventDeep && scope.activeEvent === this) {
-            scope.activeEvent = undefined;
+        if (!--constants.scope.activeEventDeep && constants.scope.activeEvent === this) {
+            constants.scope.activeEvent = undefined;
             this.update();
-            scope.activeWatcher = this.activeWatcher;
+            constants.scope.activeWatcher = this.activeWatcher;
         }
     }
     forceUpdate() {
-        const { activeWatchers } = this;
-        this.activeWatchers = this.watchers;
-        this.watchers = activeWatchers;
-        for (const watcher of this.activeWatchers) {
+        const { watchers } = this;
+        this.watchers = undefined;
+        for (const watcher of watchers) {
             watcher.update();
         }
     }
+    /**
+     * You can run watchers of a state with `update` method.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.update()
+     * // console.log(0)
+     * ```
+     * */
     update() {
         var _a;
         if ((_a = this.watchers) === null || _a === void 0 ? void 0 : _a.size) {
-            if (this === globalEvent) {
+            if (this === constants.globalEvent) {
                 this.forceUpdate();
             }
             else {
-                globalEvent.start();
+                constants.globalEvent.start();
                 this.forceUpdate();
-                globalEvent.end();
+                constants.globalEvent.end();
             }
         }
     }
-}
-const globalEvent = new Event();
+}
 
 exports.Event = Event;
-exports.default = Event;
-exports.globalEvent = globalEvent;

package/Event/index.d.ts

@@ -1,2 +1 @@
-export { default } from './Event';
 export * from './Event';

package/Event/index.es6.js

@@ -1 +1 @@
-export { Event, Event as default, globalEvent } from './Event.es6.js';
+export { Event } from './Event.es6.js';

package/Event/index.js

@@ -7,5 +7,3 @@ var Event = require('./Event.js');
 
 
 exports.Event = Event.Event;
-exports.default = Event.Event;
-exports.globalEvent = Event.globalEvent;

package/README.md

@@ -54,16 +54,19 @@
     <img src="https://img.shields.io/bundlephobia/minzip/watch-state" alt="watch-state minzipped size">
   </a>
   <a href="https://www.npmtrends.com/watch-state" target="_blank">
-    <img src="https://img.shields.io/npm/dm/watch-state.svg" alt="watch-state minzipped size">
+    <img src="https://img.shields.io/npm/dm/watch-state.svg" alt="watch-state downloads">
+  </a>
+  <a href="https://packagequality.com/#?package=watch-state" target="_blank">
+    <img src="https://packagequality.com/shield/watch-state.svg" alt="watch-state quality">
   </a>
   <a href="https://github.com/d8corp/watch-state/blob/master/LICENSE" target="_blank">
     <img src="https://img.shields.io/npm/l/watch-state" alt="watch-state license">
   </a>
   <a href="https://changelogs.xyz/watch-state" target="_blank">
-    <img src="https://img.shields.io/badge/Changelog-⋮-brightgreen" alt="watch-state minzipped size">
+    <img src="https://img.shields.io/badge/Changelog-⋮-brightgreen" alt="watch-state changelog">
   </a>
   <a href="https://d8corp.github.io/watch-state/coverage/lcov-report" target="_blank">
-    <img src="https://github.com/d8corp/watch-state/workflows/tests/badge.svg" alt="watch-state minzipped size">
+    <img src="https://github.com/d8corp/watch-state/workflows/tests/badge.svg" alt="watch-state tests">
   </a>
 </div>
 <br>
@@ -123,11 +126,12 @@ const {
   Event
 } = watchState
 ```
+
 ## Usage
 ### Simple example:
 You can create an instance of `State` and **watch** it's **value**.
 ```javascript
-import {Watch, State} from 'watch-state'
+import { Watch, State } from 'watch-state'
 
 const count = new State(0)
 
@@ -140,6 +144,7 @@ count.value++
 count.value++
 // console.log(2)
 ```
+
 ### Update argument:
 You can check if the watching ran first by `update` argument.
 ```javascript
@@ -196,6 +201,7 @@ new Watch(() => {
 count.update()
 // console.log(0)
 ```
+
 ### Force update of Watch
 You can run a watcher even when it's states are not updated.
 ```typescript
@@ -209,7 +215,8 @@ const watcher = new Watch(() => {
 watcher.update()
 // console.log(0)
 ```
-### Destroy
+
+### destroy
 You can stop watching by `destroy` method of `Watch`.
 ```javascript
 const count = new State(0)
@@ -227,26 +234,30 @@ watcher.destroy()
 count.value++
 // nothing happens
 ```
-### Watch.onDestroy()
-You can react on destruction of `Watch` by `onDestroy` method.
-```javascript
-const watcher = new Watch(() => {})
 
-watcher.onDestroy(() => {
-  console.log('destructor')
+### onDestroy()
+You can subscribe on destroy or update of watcher
+```javascript
+const count = new State(0)
+const watcher = new Watch(() => {
+  console.log('count', count.value)
+  // the order does not matter
+  onDestroy(() => console.log('destructor'))
 })
+// console.log('count', 0)
 
-watcher.destroy()
+count.value++
 // console.log('destructor')
-```
-`onDestructor` returns `this` so you can use **fluent interface**.
-```javascript
-const watcher = new Watch(() => {})
-  .onDestroy(() => console.log('destructor'))
+// console.log('count', 1)
 
 watcher.destroy()
 // console.log('destructor')
+
+watcher.destroy()
+count.value++
+// nothing happens
 ```
+
 ### Deep watch:
 You can use `Watch` inside a watcher.
 Each watcher reacts on that states which used only inside it.
@@ -274,6 +285,7 @@ watching.value = false
 state.value++
 // nothing happens
 ```
+
 ### Cache:
 You can cache computed state.  
 The watcher will not be triggered while new result is the same.
@@ -333,6 +345,7 @@ console.log(sortedList.value)
 // console.log('computing')
 // console.log(['a', 'b', 'c'])
 ```
+
 ### Event:
 Use `Event` when you change several states to run their watchers after the event finished.
 ```javascript
@@ -366,7 +379,7 @@ new Watch(() => {
 
 You can use `globalEvent` every time if you do not want to extend the Event functionality.
 ```typescript
-import {State, globalEvent} from 'watch-state'
+import { State, globalEvent } from 'watch-state'
 const count = new State(0)
 
 new Watch(() => {
@@ -375,6 +388,20 @@ new Watch(() => {
   globalEvent.end()
 })
 ```
+
+### createEvent
+You can create event function with createEvent
+```typescript
+import { State, createEvent } from 'watch-state'
+
+const count = new State(0)
+const increase = createEvent(() => {
+  console.log(count.value++)
+})
+
+new Watch(increase)
+```
+
 ### Typescript:
 Generic of `State`
 ```typescript
@@ -388,16 +415,17 @@ Generic of `Cache`
 new Cache<string>(() => false)
 // error, target of cache should return string
 ```
+
 ## Performance
 You can check the performance test with **[MobX](https://www.npmjs.com/package/mobx)**, **[Effector](https://www.npmjs.com/package/effector)**, **[Storeon](https://www.npmjs.com/package/storeon)**, **[Mazzard](https://www.npmjs.com/package/mazzard)** and **[Redux](https://www.npmjs.com/package/redux)**.
 Clone the repo, install packages and run this command
 ```shell
 npm run speed
 ```
-I got this results with Node `v10.20.0`:  
-![test](https://raw.githubusercontent.com/d8corp/watch-state/v3.3.1/img/speed.test.png)
+
 ## Links
 You can find more tools [here](https://www.npmjs.com/search?q=%40watch-state)
+
 ## Issues
 If you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/watch-state/issues)
 

package/State/State.d.ts

@@ -1,4 +1,4 @@
-import Event from '../Event';
+import { Event } from '../Event';
 export declare class State<T = any> extends Event {
     state?: T;
     constructor(state?: T);
@@ -22,4 +22,3 @@ export declare class State<T = any> extends Event {
      * */
     set value(value: T);
 }
-export default State;

package/State/State.es6.js

@@ -1,5 +1,5 @@
 import { Event } from '../Event/Event.es6.js';
-import scope from '../scope/scope.es6.js';
+import { scope } from '../constants.es6.js';
 
 class State extends Event {
     constructor(state) {
@@ -37,5 +37,4 @@ class State extends Event {
     }
 }
 
-export default State;
 export { State };

package/State/State.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Event = require('../Event/Event.js');
-var scope = require('../scope/scope.js');
+var constants = require('../constants.js');
 
 class State extends Event.Event {
     constructor(state) {
@@ -18,8 +18,8 @@ class State extends Event.Event {
      * ```
      * */
     get value() {
-        if (scope.activeWatcher) {
-            this.add(scope.activeWatcher);
+        if (constants.scope.activeWatcher) {
+            this.add(constants.scope.activeWatcher);
         }
         return this.state;
     }
@@ -42,4 +42,3 @@ class State extends Event.Event {
 }
 
 exports.State = State;
-exports.default = State;

package/State/index.d.ts

@@ -1,2 +1 @@
-export { default } from './State';
 export * from './State';

package/State/index.es6.js

@@ -1 +1 @@
-export { State, State as default } from './State.es6.js';
+export { State } from './State.es6.js';

package/State/index.js

@@ -7,4 +7,3 @@ var State = require('./State.js');
 
 
 exports.State = State.State;
-exports.default = State.State;

package/Watch/Watch.d.ts

@@ -1,9 +1,4 @@
-export interface Watcher<R = any> {
-    (update?: boolean): R;
-}
-export interface Destructor<R = any> {
-    (): R;
-}
+import { Destructor, Watcher } from '../types';
 export declare class Watch {
     private readonly watcher;
     destructors: Destructor[];
@@ -12,8 +7,42 @@ export declare class Watch {
     protected run(): any;
     protected watchRun(): void;
     protected forceUpdate(): void;
+    /**
+     * You can run a watcher even when it's states are not updated.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * watcher.update()
+     * // console.log(0)
+     * ```
+     * */
     update(): void;
+    /**
+     * You can stop watching by `destroy` method of `Watch`.
+     * ```javascript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.value++
+     * // console.log(1)
+     *
+     * watcher.destroy()
+     *
+     * count.value++
+     * // nothing happens
+     * ```
+     * */
     destroy(): void;
+    onClear(callback: Destructor): this;
+    /** @deprecated use onClear */
     onDestroy(callback: Destructor): this;
 }
-export default Watch;

package/Watch/Watch.es6.js

@@ -1,11 +1,12 @@
-import scope from '../scope/scope.es6.js';
+import { scope } from '../constants.es6.js';
+import { onDestroy } from '../utils/onDestroy/onDestroy.es6.js';
 
 class Watch {
     constructor(watcher, freeParent, freeUpdate) {
         this.watcher = watcher;
         this.ran = false;
-        if (!freeParent && scope.activeWatcher) {
-            scope.activeWatcher.onDestroy(() => this.destroy());
+        if (!freeParent) {
+            onDestroy(() => this.destroy());
         }
         if (!freeUpdate) {
             this.watchRun();
@@ -26,6 +27,20 @@ class Watch {
         this.destroy();
         this.watchRun();
     }
+    /**
+     * You can run a watcher even when it's states are not updated.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * watcher.update()
+     * // console.log(0)
+     * ```
+     * */
     update() {
         this.destroy();
         if (scope.activeEvent) {
@@ -35,6 +50,25 @@ class Watch {
             this.watchRun();
         }
     }
+    /**
+     * You can stop watching by `destroy` method of `Watch`.
+     * ```javascript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.value++
+     * // console.log(1)
+     *
+     * watcher.destroy()
+     *
+     * count.value++
+     * // nothing happens
+     * ```
+     * */
     destroy() {
         const { destructors } = this;
         if (destructors) {
@@ -42,7 +76,7 @@ class Watch {
             destructors.forEach(e => e());
         }
     }
-    onDestroy(callback) {
+    onClear(callback) {
         if (this.destructors) {
             this.destructors.push(callback);
         }
@@ -51,7 +85,10 @@ class Watch {
         }
         return this;
     }
+    /** @deprecated use onClear */
+    onDestroy(callback) {
+        return this.onClear(callback);
+    }
 }
 
-export default Watch;
 export { Watch };

package/Watch/Watch.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var scope = require('../scope/scope.js');
+var constants = require('../constants.js');
+var onDestroy = require('../utils/onDestroy/onDestroy.js');
 
 class Watch {
     constructor(watcher, freeParent, freeUpdate) {
         this.watcher = watcher;
         this.ran = false;
-        if (!freeParent && scope.activeWatcher) {
-            scope.activeWatcher.onDestroy(() => this.destroy());
+        if (!freeParent) {
+            onDestroy.onDestroy(() => this.destroy());
         }
         if (!freeUpdate) {
             this.watchRun();
@@ -21,24 +22,57 @@ class Watch {
         return this.watcher(ran);
     }
     watchRun() {
-        const prevWatcher = scope.activeWatcher;
-        scope.activeWatcher = this;
+        const prevWatcher = constants.scope.activeWatcher;
+        constants.scope.activeWatcher = this;
         this.run();
-        scope.activeWatcher = prevWatcher;
+        constants.scope.activeWatcher = prevWatcher;
     }
     forceUpdate() {
         this.destroy();
         this.watchRun();
     }
+    /**
+     * You can run a watcher even when it's states are not updated.
+     * ```typescript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * watcher.update()
+     * // console.log(0)
+     * ```
+     * */
     update() {
         this.destroy();
-        if (scope.activeEvent) {
-            scope.activeEvent.add(this);
+        if (constants.scope.activeEvent) {
+            constants.scope.activeEvent.add(this);
         }
         else {
             this.watchRun();
         }
     }
+    /**
+     * You can stop watching by `destroy` method of `Watch`.
+     * ```javascript
+     * const count = new State(0)
+     *
+     * const watcher = new Watch(() => {
+     *   console.log(count.value)
+     * })
+     * // console.log(0)
+     *
+     * count.value++
+     * // console.log(1)
+     *
+     * watcher.destroy()
+     *
+     * count.value++
+     * // nothing happens
+     * ```
+     * */
     destroy() {
         const { destructors } = this;
         if (destructors) {
@@ -46,7 +80,7 @@ class Watch {
             destructors.forEach(e => e());
         }
     }
-    onDestroy(callback) {
+    onClear(callback) {
         if (this.destructors) {
             this.destructors.push(callback);
         }
@@ -55,7 +89,10 @@ class Watch {
         }
         return this;
     }
+    /** @deprecated use onClear */
+    onDestroy(callback) {
+        return this.onClear(callback);
+    }
 }
 
 exports.Watch = Watch;
-exports.default = Watch;

package/Watch/index.d.ts

@@ -1,2 +1 @@
-export { default } from './Watch';
 export * from './Watch';

package/Watch/index.es6.js

@@ -1 +1 @@
-export { Watch, Watch as default } from './Watch.es6.js';
+export { Watch } from './Watch.es6.js';

package/Watch/index.js

@@ -7,4 +7,3 @@ var Watch = require('./Watch.js');
 
 
 exports.Watch = Watch.Watch;
-exports.default = Watch.Watch;

package/constants.d.ts

@@ -0,0 +1,4 @@
+import { Event } from './Event';
+import { Scope } from './types';
+export declare const globalEvent: Event;
+export declare const scope: Scope;

package/constants.es6.js

@@ -0,0 +1,10 @@
+import { Event } from './Event/Event.es6.js';
+
+const globalEvent = new Event();
+const scope = {
+    activeWatcher: undefined,
+    activeEvent: undefined,
+    activeEventDeep: 0,
+};
+
+export { globalEvent, scope };

package/constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Event = require('./Event/Event.js');
+
+const globalEvent = new Event.Event();
+const scope = {
+    activeWatcher: undefined,
+    activeEvent: undefined,
+    activeEventDeep: 0,
+};
+
+exports.globalEvent = globalEvent;
+exports.scope = scope;

package/index.d.ts

@@ -2,4 +2,6 @@ export * from './Watch';
 export * from './State';
 export * from './Cache';
 export * from './Event';
-export { default as scope } from './scope';
+export * from './utils';
+export * from './types';
+export * from './constants';

package/index.es6.js

@@ -1,5 +1,7 @@
 export { Watch } from './Watch/Watch.es6.js';
 export { State } from './State/State.es6.js';
 export { Cache } from './Cache/Cache.es6.js';
-export { Event, globalEvent } from './Event/Event.es6.js';
-export { default as scope } from './scope/scope.es6.js';
+export { Event } from './Event/Event.es6.js';
+export { onDestroy } from './utils/onDestroy/onDestroy.es6.js';
+export { createEvent } from './utils/createEvent/createEvent.es6.js';
+export { globalEvent, scope } from './constants.es6.js';

package/index.js

@@ -6,7 +6,9 @@ var Watch = require('./Watch/Watch.js');
 var State = require('./State/State.js');
 var Cache = require('./Cache/Cache.js');
 var Event = require('./Event/Event.js');
-var scope = require('./scope/scope.js');
+var onDestroy = require('./utils/onDestroy/onDestroy.js');
+var createEvent = require('./utils/createEvent/createEvent.js');
+var constants = require('./constants.js');
 
 
 
@@ -14,5 +16,7 @@ exports.Watch = Watch.Watch;
 exports.State = State.State;
 exports.Cache = Cache.Cache;
 exports.Event = Event.Event;
-exports.globalEvent = Event.globalEvent;
-exports.scope = scope;
+exports.onDestroy = onDestroy.onDestroy;
+exports.createEvent = createEvent.createEvent;
+exports.globalEvent = constants.globalEvent;
+exports.scope = constants.scope;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-state",
-  "version": "3.3.3",
+  "version": "3.4.2",
   "description": "CANT inc. state management system.",
   "author": "Mikhail Lysikov <d8corp@mail.ru>",
   "license": "MIT",

package/types.d.ts

@@ -0,0 +1,13 @@
+import { Watch } from './Watch';
+import { Event } from './Event';
+export interface Watcher<R = any> {
+    (update?: boolean): R;
+}
+export interface Destructor<R = any> {
+    (): R;
+}
+export interface Scope {
+    activeWatcher?: Watch;
+    activeEvent?: Event;
+    activeEventDeep: number;
+}

package/utils/createEvent/createEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * You can create event function with createEvent
+ * ```typescript
+ * import { State, createEvent } from 'watch-state'
+ *
+ * const count = new State(0)
+ * const increase = createEvent(() => {
+ *   console.log(count.value++)
+ * })
+ *
+ * new Watch(increase)
+ * ```
+ * */
+export declare function createEvent<F extends Function>(fn: F): F;

package/utils/createEvent/createEvent.es6.js

@@ -0,0 +1,25 @@
+import { globalEvent } from '../../constants.es6.js';
+
+/**
+ * You can create event function with createEvent
+ * ```typescript
+ * import { State, createEvent } from 'watch-state'
+ *
+ * const count = new State(0)
+ * const increase = createEvent(() => {
+ *   console.log(count.value++)
+ * })
+ *
+ * new Watch(increase)
+ * ```
+ * */
+function createEvent(fn) {
+    return function () {
+        globalEvent.start();
+        const result = fn.apply(this, arguments);
+        globalEvent.end();
+        return result;
+    };
+}
+
+export { createEvent };

package/utils/createEvent/createEvent.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('../../constants.js');
+
+/**
+ * You can create event function with createEvent
+ * ```typescript
+ * import { State, createEvent } from 'watch-state'
+ *
+ * const count = new State(0)
+ * const increase = createEvent(() => {
+ *   console.log(count.value++)
+ * })
+ *
+ * new Watch(increase)
+ * ```
+ * */
+function createEvent(fn) {
+    return function () {
+        constants.globalEvent.start();
+        const result = fn.apply(this, arguments);
+        constants.globalEvent.end();
+        return result;
+    };
+}
+
+exports.createEvent = createEvent;

package/utils/createEvent/index.d.ts

@@ -0,0 +1 @@
+export * from './createEvent';

package/utils/createEvent/index.es6.js

@@ -0,0 +1 @@
+export { createEvent } from './createEvent.es6.js';

package/utils/createEvent/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createEvent = require('./createEvent.js');
+
+
+
+exports.createEvent = createEvent.createEvent;

package/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './onDestroy';
+export * from './createEvent';

package/utils/index.es6.js

@@ -0,0 +1,2 @@
+export { onDestroy } from './onDestroy/onDestroy.es6.js';
+export { createEvent } from './createEvent/createEvent.es6.js';

package/utils/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var onDestroy = require('./onDestroy/onDestroy.js');
+var createEvent = require('./createEvent/createEvent.js');
+
+
+
+exports.onDestroy = onDestroy.onDestroy;
+exports.createEvent = createEvent.createEvent;

package/utils/onDestroy/index.d.ts

@@ -0,0 +1 @@
+export * from './onDestroy';

package/utils/onDestroy/index.es6.js

@@ -0,0 +1 @@
+export { onDestroy } from './onDestroy.es6.js';

package/utils/onDestroy/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var onDestroy = require('./onDestroy.js');
+
+
+
+exports.onDestroy = onDestroy.onDestroy;

package/utils/onDestroy/onDestroy.d.ts

@@ -0,0 +1,25 @@
+import { Destructor } from '../../types';
+/**
+ * You can subscribe on destroy or update of watcher
+ * ```javascript
+ * const count = new State(0)
+ * const watcher = new Watch(() => {
+ *   console.log('count', count.value)
+ *   // the order does not matter
+ *   onDestroy(() => console.log('destructor'))
+ * })
+ * // console.log('count', 0)
+ *
+ * count.value++
+ * // console.log('destructor')
+ * // console.log('count', 1)
+ *
+ * watcher.destroy()
+ * // console.log('destructor')
+ *
+ * watcher.destroy()
+ * count.value++
+ * // nothing happens
+ * ```
+ * */
+export declare function onDestroy(destructor: Destructor): void;

package/utils/onDestroy/onDestroy.es6.js

@@ -0,0 +1,32 @@
+import { scope } from '../../constants.es6.js';
+
+/**
+ * You can subscribe on destroy or update of watcher
+ * ```javascript
+ * const count = new State(0)
+ * const watcher = new Watch(() => {
+ *   console.log('count', count.value)
+ *   // the order does not matter
+ *   onDestroy(() => console.log('destructor'))
+ * })
+ * // console.log('count', 0)
+ *
+ * count.value++
+ * // console.log('destructor')
+ * // console.log('count', 1)
+ *
+ * watcher.destroy()
+ * // console.log('destructor')
+ *
+ * watcher.destroy()
+ * count.value++
+ * // nothing happens
+ * ```
+ * */
+function onDestroy(destructor) {
+    if (scope.activeWatcher) {
+        scope.activeWatcher.onClear(destructor);
+    }
+}
+
+export { onDestroy };

package/utils/onDestroy/onDestroy.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('../../constants.js');
+
+/**
+ * You can subscribe on destroy or update of watcher
+ * ```javascript
+ * const count = new State(0)
+ * const watcher = new Watch(() => {
+ *   console.log('count', count.value)
+ *   // the order does not matter
+ *   onDestroy(() => console.log('destructor'))
+ * })
+ * // console.log('count', 0)
+ *
+ * count.value++
+ * // console.log('destructor')
+ * // console.log('count', 1)
+ *
+ * watcher.destroy()
+ * // console.log('destructor')
+ *
+ * watcher.destroy()
+ * count.value++
+ * // nothing happens
+ * ```
+ * */
+function onDestroy(destructor) {
+    if (constants.scope.activeWatcher) {
+        constants.scope.activeWatcher.onClear(destructor);
+    }
+}
+
+exports.onDestroy = onDestroy;

package/watch-state.min.js

@@ -1 +1 @@
-var watchState=function(t){"use strict";var e={activeWatcher:void 0,activeEvent:void 0,activeEventDeep:0};class s{constructor(t,s,a){this.watcher=t,this.ran=!1,!s&&e.activeWatcher&&e.activeWatcher.onDestroy((()=>this.destroy())),a||this.watchRun()}run(){const{ran:t}=this;return this.ran=!0,this.watcher(t)}watchRun(){const t=e.activeWatcher;e.activeWatcher=this,this.run(),e.activeWatcher=t}forceUpdate(){this.destroy(),this.watchRun()}update(){this.destroy(),e.activeEvent?e.activeEvent.add(this):this.watchRun()}destroy(){const{destructors:t}=this;t&&(this.destructors=void 0,t.forEach((t=>t())))}onDestroy(t){return this.destructors?this.destructors.push(t):this.destructors=[t],this}}class a{add(t){let{watchers:e}=this;if(e){if(e.has(t))return;e.add(t)}else e=this.watchers=new Set([t]);t.onDestroy((()=>e.delete(t)))}start(){e.activeEvent||(this.activeWatcher=e.activeWatcher,e.activeWatcher=void 0,e.activeEvent=this),e.activeEventDeep++}end(){--e.activeEventDeep||e.activeEvent!==this||(e.activeEvent=void 0,this.update(),e.activeWatcher=this.activeWatcher)}forceUpdate(){const{activeWatchers:t}=this;this.activeWatchers=this.watchers,this.watchers=t;for(const t of this.activeWatchers)t.update()}update(){var t;(null===(t=this.watchers)||void 0===t?void 0:t.size)&&(this===i?this.forceUpdate():(i.start(),this.forceUpdate(),i.end()))}}const i=new a;class r extends a{constructor(t){super(),this.state=t}get value(){return e.activeWatcher&&this.add(e.activeWatcher),this.state}set value(t){t!==this.state&&(this.state=t,this.update())}}class h extends s{constructor(t,e,s){super(t,e,!s)}destroy(){return super.destroy()}run(){this.updated=!0,this.value=super.run()}get hasWatcher(){var t,e;if(this.updated&&(null===(e=null===(t=this._state)||void 0===t?void 0:t.watchers)||void 0===e?void 0:e.size))for(const t of this._state.watchers)if(!(t instanceof h)||t.hasWatcher)return!0}deepUpdate(){var t,e;if(this.updated=!1,this.destroy(),null===(e=null===(t=this._state)||void 0===t?void 0:t.watchers)||void 0===e?void 0:e.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 r)}get value(){return this.updated||this.forceUpdate(),this.state.value}set value(t){this.state.value=t}}return t.Cache=h,t.Event=a,t.State=r,t.Watch=s,t.globalEvent=i,t.scope=e,Object.defineProperty(t,"__esModule",{value:!0}),t}({});
+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

@@ -1,2 +0,0 @@
-export { default } from './scope';
-export * from './scope';

package/scope/index.es6.js

@@ -1 +0,0 @@
-export { default } from './scope.es6.js';

package/scope/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var scope = require('./scope.js');
-
-
-
-module.exports = scope;

package/scope/scope.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    activeWatcher: any;
-    activeEvent: any;
-    activeEventDeep: number;
-};
-export default _default;

package/scope/scope.es6.js

@@ -1,7 +0,0 @@
-var scope = {
-    activeWatcher: undefined,
-    activeEvent: undefined,
-    activeEventDeep: 0,
-};
-
-export default scope;

package/scope/scope.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var scope = {
-    activeWatcher: undefined,
-    activeEvent: undefined,
-    activeEventDeep: 0,
-};
-
-module.exports = scope;