watch-state 3.5.0 → 3.5.2

package/README.md

@@ -50,12 +50,12 @@
   <a href="https://www.npmjs.com/package/watch-state" target="_blank">
     <img src="https://img.shields.io/npm/v/watch-state.svg" alt="watch-state npm">
   </a>
-  <a href="https://bundlephobia.com/result?p=watch-state" target="_blank">
-    <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 downloads">
   </a>
+  <a href="https://www.typescriptlang.org" target="_blank">
+    <img src="https://img.shields.io/npm/types/watch-state" alt="TypeSctipt">
+  </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>
@@ -103,7 +103,7 @@ Was born during working on [@innet/dom](https://www.npmjs.com/package/@innet/dom
 <sup>**[ [Install](#install) ]**</sup>  
 <sup>**[ [Usage](#usage) ]** [Simple example](#simple-example) • [Example Vanilla JS](#example-vanilla-js) • [Example React](#example-react) • [Example @innet/dom](#example-innetdom)</sup>  
 <sup>**[ [Watch](#watch) ]** [Update argument](#update-argument) • [Force update of Watch](#force-update-of-watch) • [Destroy Watch](#destroy-watch) • [Deep/Nested watchers](#deepnested-watchers)</sup>  
-<sup>**[ [State](#state) ]** [Get or Set value](#get-or-set-value) • [Force update of State](#force-update-of-state) • [Raw value](#raw-value)</sup>  
+<sup>**[ [State](#state) ]** [Get or Set value](#get-or-set-value) • [Force update of State](#force-update-of-state) • [Raw value](#raw-value) • [State.set (experimental)](#stateset-experimental)</sup>  
 <sup>**[ [Compute](#compute) ]** [Lazy computation](#lazy-computation) • [Force update of Compute](#force-update-of-compute) • [Destroy Compute](#destroy-compute)</sup>  
 <sup>**[ [Utils](#utils) ]** [onDestroy](#ondestroy) • [callEvent](#callevent) • [createEvent](#createevent) • [unwatch](#unwatch)</sup>  
 <sup>**[ [Typescript](#typescript) ]**</sup>  
@@ -134,6 +134,19 @@ html
 
 <sup>[Simple example](#simple-example) • [Example Vanilla JS](#example-vanilla-js) • [Example React](#example-react) • [Example @innet/dom](#example-innetdom)</sup>
 
+The library is based on the core concepts of `Observable` (something that can be observed) and `Observer` (something that can observe). On top of these concepts, the core classes `State`, `Compute`, and `Watch` are built according to the following scheme:
+
+```
+   ┌────────────┐ ┌─────────────┐
+   │ Observable │ │  Observer   │
+   │ (abstract) │ │ (interface) │
+   └──────┬─────┘ └──────┬──────┘  
+     ┌────┴─────┐ ┌──────┴───┐
+┌────┴────┐ ┌───┴─┴───┐ ┌────┴────┐
+│  State  │ │ Compute │ │  Watch  │
+└─────────┘ └─────────┘ └─────────┘
+```
+
 ### Simple example
 ###### [🏠︎](#index) / [Usage](#usage) / Simple example [↓](#example-vanilla-js)
 
@@ -191,11 +204,11 @@ Simple reactive state without build tools or framework dependencies.
 ### Example React
 ###### [🏠︎](#index) / [Usage](#usage) / Example React [↑](#example-vanilla-js) [↓](#example-innetdom)
 
-`@watch-state/react` provides `useWatch()` hook that automatically subscribes React components to state changes and re-renders only when needed.
+[@watch-state/react](https://www.npmjs.com/package/@watch-state/react) provides `useObservable()` hook that automatically subscribes React components to state changes and re-renders only when needed.
 
 ```tsx
 import { State } from 'watch-state'
-import { useWatch } from '@watch-state/react'
+import { useObservable } from '@watch-state/react'
 
 const $count = new State(0)
 
@@ -204,7 +217,7 @@ const increase = () => {
 }
 
 export function CountButton () {
-  const count = useWatch($count)
+  const count = useObservable($count)
 
   return <button onClick={increase}>{count}</button>
 }
@@ -383,14 +396,16 @@ state.value++
 ## State
 ###### [🏠︎](#index) / State [↑](#watch) [↓](#compute)
 
-<sup>[Get or Set value](#get-or-set-value) • [Force update of State](#force-update-of-state) • [Raw value](#raw-value)</sup>
+<sup>[Get or Set value](#get-or-set-value) • [Force update of State](#force-update-of-state) • [Raw value](#raw-value) • [State.set (experimental)](#stateset-experimental)</sup>
 
 **Reactive primitive** that automatically notifies all subscribed watchers when `.value` changes.
 
 ### Get or Set value
 ###### [🏠︎](#index) / [State](#state) / Get or Set value [↓](#force-update-of-state)
 
-**Access or mutate the state value.** Reading `.value` inside `Watch` **auto-subscribes** to changes. Writing `.value` **triggers all watchers**.
+**Access or mutate the state value.**
+
+Reading `.value` inside `Observer` **auto-subscribes** to changes. Writing `.value` **triggers all watchers**.
 
 ```ts
 const count = new State(0)
@@ -420,9 +435,9 @@ log.update() // logs: [1]
 ```
 
 ### Raw value
-###### [🏠︎](#index) / [State](#state) / Raw value [↑](#force-update-of-state)
+###### [🏠︎](#index) / [State](#state) / Raw value [↑](#force-update-of-state) [↓](#stateset-experimental)
 
-`rawValue` returns the current value but **doesn't subscribe** to changes — unlike `value` which auto-subscribes in `Watch`.
+`rawValue` returns the current value but **doesn't subscribe** to changes — unlike `value`.
 
 ```ts
 const foo = new State(0)
@@ -436,6 +451,24 @@ bar.value++ // no logs
 foo.value++ // logs: 2, 1
 ```
 
+### State.set (experimental)
+###### [🏠︎](#index) / [State](#state) / State.set [↑](#raw-value)
+
+`State.set` mirrors the behavior of the value setter but returns `void`.
+It is useful as a shorthand in arrow functions: `() => state.set(nextValue)` instead of `() => { state.value = nextValue }`.
+
+Note: `state.set` cannot be used as a standalone function; `const set = state.set` is not supported.
+
+```ts
+const count = new State(0)
+
+// Subscribing
+new Watch(() => console.log(count.value))
+// log: 0
+
+count.set(1) // triggers: log: 1
+```
+
 ## Compute
 ###### [🏠︎](#index) / Compute [↑](#state) [↓](#utils)
 

package/State/State.d.ts

@@ -32,6 +32,14 @@ export declare class State<V = unknown> extends Observable<V> {
      */
     get value(): V;
     set value(value: V);
+    /**
+     * @experimental
+     * Sets the state value. Identical to the `value` setter but returns `void`.
+     * Useful as a shorthand in arrow functions: `() => state.set(value)` instead of `() => { state.value = value }`
+     *
+     * `state.set` cannot be used as a standalone function: `const set = state.set`
+     */
+    set(value: V): void;
     /**
      * Force triggers all watchers even if value didn't change.
      *

package/State/State.es6.js

@@ -46,6 +46,16 @@ class State extends Observable {
             this.update();
         }
     }
+    /**
+     * @experimental
+     * Sets the state value. Identical to the `value` setter but returns `void`.
+     * Useful as a shorthand in arrow functions: `() => state.set(value)` instead of `() => { state.value = value }`
+     *
+     * `state.set` cannot be used as a standalone function: `const set = state.set`
+     */
+    set(value) {
+        this.value = value;
+    }
     /**
      * Force triggers all watchers even if value didn't change.
      *

package/State/State.js

@@ -50,6 +50,16 @@ class State extends Observable.Observable {
             this.update();
         }
     }
+    /**
+     * @experimental
+     * Sets the state value. Identical to the `value` setter but returns `void`.
+     * Useful as a shorthand in arrow functions: `() => state.set(value)` instead of `() => { state.value = value }`
+     *
+     * `state.set` cannot be used as a standalone function: `const set = state.set`
+     */
+    set(value) {
+        this.value = value;
+    }
     /**
      * Force triggers all watchers even if value didn't change.
      *

package/index.min.js

@@ -1 +1 @@
-var WatchState=function(e){"use strict";const t={activeWatcher:void 0,eventDeep:0};function s(e){const{activeWatcher:s}=t;s&&(s.childrenObservers.add(e),s.destructors.add((()=>{s.childrenObservers.delete(e)})))}const r=[];let c;function n(e){const t=Boolean(r.length);if(r.push(e),!t)for(;c=r.shift();){c.childrenObservers.forEach((e=>{r.push(e)}));for(const e of c.destructors)c.destructors.delete(e),e();c.destroyed=!0}}const i=[];let a,o,h,u;function d(e){const t=Boolean(i.length);if(i.push(e),!t)for(;a=i.shift();){a.childrenObservers.forEach(n);for(const e of a.destructors)a.destructors.delete(e),e()}}function l(e,s){const r=t.activeWatcher;t.activeWatcher=e,s(),t.activeWatcher=r}class v{constructor(){this.observers=new Set}get value(){const{activeWatcher:e}=t;return e&&(this.observers.add(e),e.destructors.add((()=>{this.observers.delete(e)}))),this.rawValue}}function f(e){if(!e.size)return;const t=e.values().next().value;return e.delete(t),t}const p=new Set,b=new Set;function w(){if(!u){for(u=!0;(o=f(p))||(h=f(b));)o?o.invalid=!0:(d(h),h.update());u=!1}}function W(e){const s=!t.eventDeep&&!b.size&&!p.size,r=[...b];b.clear(),e.forEach((e=>{b.add(e),e instanceof D&&p.add(e)})),r.forEach((e=>b.add(e))),s&&w()}const y=[];let O;function S(e){const t=y.length;if(y.push(e),!t)for(;O=y.shift();)O instanceof D&&(y.push(...O.observers),O.invalid=!0)}class D extends v{get childWatchers(){return this.childrenObservers}constructor(e,t,r){super(),this.invalid=!0,this.updated=!1,this.destroyed=!1,this.isCache=!0,this.destructors=new Set,this.childrenObservers=new Set,this.watcher=e,t||s(this),r&&this.forceUpdate()}update(){S(this);const e=[...this.observers];let t;for(;t=e.pop();){if(!(t instanceof D))return this.forceUpdate();e.push(...t.observers)}}forceUpdate(){this.destroyed||(this.invalid=!1,l(this,(()=>{const e=this.watcher(!!this.updated&&(this.updated=!0));e!==this.rawValue&&(this.rawValue=e,W(this.observers))})))}get value(){return this.invalid&&this.forceUpdate(),this.destroyed?this.rawValue:super.value}destroy(){n(this)}}function g(e){const{activeWatcher:s}=t;t.activeWatcher=void 0;const r=e();return t.activeWatcher=s,r}return e.Cache=class extends D{},e.Compute=D,e.Observable=v,e.State=class extends v{constructor(e){super(),this.rawValue=e}get value(){return super.value}set value(e){this.rawValue!==e&&(this.rawValue=e,this.update())}update(){W(this.observers)}},e.Watch=class{get childWatchers(){return this.childrenObservers}constructor(e,t,r){this.watcher=e,this.destroyed=!1,this.destructors=new Set,this.childrenObservers=new Set,t||s(this),r||l(this,(()=>{e(!1)}))}destroy(){n(this)}update(){this.destroyed||l(this,(()=>{this.watcher(!0)}))}},e.bindObserver=s,e.callEvent=function(e){const s=g((()=>{t.eventDeep++;const s=e();return t.eventDeep--,s}));return t.eventDeep||w(),s},e.clearWatcher=d,e.createEvent=function(e){return function(...s){const r=g((()=>{t.eventDeep++;const r=e.apply(this,s);return t.eventDeep--,r}));return t.eventDeep||w(),r}},e.destroyWatchers=n,e.forceQueueWatchers=w,e.invalidateCache=function(e){S(e)},e.invalidateCompute=S,e.onDestroy=function(e){t.activeWatcher&&t.activeWatcher.destructors.add(e)},e.queueWatchers=W,e.scope=t,e.shiftSet=f,e.unwatch=g,e.watchWithScope=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
+var WatchState=function(e){"use strict";const t={activeWatcher:void 0,eventDeep:0};function s(e){const{activeWatcher:s}=t;s&&(s.childrenObservers.add(e),s.destructors.add((()=>{s.childrenObservers.delete(e)})))}const r=[];let c;function n(e){const t=Boolean(r.length);if(r.push(e),!t)for(;c=r.shift();){c.childrenObservers.forEach((e=>{r.push(e)}));for(const e of c.destructors)c.destructors.delete(e),e();c.destroyed=!0}}const i=[];let a,o,h,u;function d(e){const t=Boolean(i.length);if(i.push(e),!t)for(;a=i.shift();){a.childrenObservers.forEach(n);for(const e of a.destructors)a.destructors.delete(e),e()}}function l(e,s){const r=t.activeWatcher;t.activeWatcher=e,s(),t.activeWatcher=r}class v{constructor(){this.observers=new Set}get value(){const{activeWatcher:e}=t;return e&&(this.observers.add(e),e.destructors.add((()=>{this.observers.delete(e)}))),this.rawValue}}function f(e){if(!e.size)return;const t=e.values().next().value;return e.delete(t),t}const p=new Set,b=new Set;function w(){if(!u){for(u=!0;(o=f(p))||(h=f(b));)o?o.invalid=!0:(d(h),h.update());u=!1}}function W(e){const s=!t.eventDeep&&!b.size&&!p.size,r=[...b];b.clear(),e.forEach((e=>{b.add(e),e instanceof D&&p.add(e)})),r.forEach((e=>b.add(e))),s&&w()}const y=[];let O;function S(e){const t=y.length;if(y.push(e),!t)for(;O=y.shift();)O instanceof D&&(y.push(...O.observers),O.invalid=!0)}class D extends v{get childWatchers(){return this.childrenObservers}constructor(e,t,r){super(),this.invalid=!0,this.updated=!1,this.destroyed=!1,this.isCache=!0,this.destructors=new Set,this.childrenObservers=new Set,this.watcher=e,t||s(this),r&&this.forceUpdate()}update(){S(this);const e=[...this.observers];let t;for(;t=e.pop();){if(!(t instanceof D))return this.forceUpdate();e.push(...t.observers)}}forceUpdate(){this.destroyed||(this.invalid=!1,l(this,(()=>{const e=this.watcher(!!this.updated&&(this.updated=!0));e!==this.rawValue&&(this.rawValue=e,W(this.observers))})))}get value(){return this.invalid&&this.forceUpdate(),this.destroyed?this.rawValue:super.value}destroy(){n(this)}}function g(e){const{activeWatcher:s}=t;t.activeWatcher=void 0;const r=e();return t.activeWatcher=s,r}return e.Cache=class extends D{},e.Compute=D,e.Observable=v,e.State=class extends v{constructor(e){super(),this.rawValue=e}get value(){return super.value}set value(e){this.rawValue!==e&&(this.rawValue=e,this.update())}set(e){this.value=e}update(){W(this.observers)}},e.Watch=class{get childWatchers(){return this.childrenObservers}constructor(e,t,r){this.watcher=e,this.destroyed=!1,this.destructors=new Set,this.childrenObservers=new Set,t||s(this),r||l(this,(()=>{e(!1)}))}destroy(){n(this)}update(){this.destroyed||l(this,(()=>{this.watcher(!0)}))}},e.bindObserver=s,e.callEvent=function(e){const s=g((()=>{t.eventDeep++;const s=e();return t.eventDeep--,s}));return t.eventDeep||w(),s},e.clearWatcher=d,e.createEvent=function(e){return function(...s){const r=g((()=>{t.eventDeep++;const r=e.apply(this,s);return t.eventDeep--,r}));return t.eventDeep||w(),r}},e.destroyWatchers=n,e.forceQueueWatchers=w,e.invalidateCache=function(e){S(e)},e.invalidateCompute=S,e.onDestroy=function(e){t.activeWatcher&&t.activeWatcher.destructors.add(e)},e.queueWatchers=W,e.scope=t,e.shiftSet=f,e.unwatch=g,e.watchWithScope=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watch-state",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "description": "CANT inc. state management system.",
   "author": "Mikhail Lysikov <d8corp@mail.ru>",
   "license": "MIT",
@@ -10,7 +10,6 @@
   "types": "index.d.ts",
   "unpkg": "index.min.js",
   "jsdelivr": "index.min.js",
-  "browser": "index.min.js",
   "homepage": "https://github.com/d8corp/watch-state",
   "bugs": {
     "url": "https://github.com/d8corp/watch-state/issues"
@@ -52,7 +51,7 @@
       "import": {
         "./release/index.es6.js": "*"
       },
-      "limit": "1.06 kB"
+      "limit": "1.07 kB"
     },
     {
       "name": "Core",
@@ -60,7 +59,7 @@
       "import": {
         "./release/index.es6.js": "{ Watch, State, Compute, createEvent }"
       },
-      "limit": "843 B"
+      "limit": "850 B"
     }
   ]
 }