mutable-store
Advanced tools
+1
-1
| { | ||
| "name": "mutable-store", | ||
| "version": "1.1.1", | ||
| "version": "1.2.0", | ||
| "description": "a mutable state management library for javascript", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+51
-1
| # Mutable Store | ||
| A lightweight, type-safe state management library for JavaScript/TypeScript applications that embraces mutability with a subscription pattern. | ||
| A lightweight, type-safe state management library for JavaScript/TypeScript applications that embraces mutability with a subscription pattern. | ||
| Instead of detecting state changes with proxies, it uses a subscription pattern to detect state changes. it subscribes to the set function calls and trigger subscriptions unlike other libraries. as a result, there is no performance overhead like other libraries. | ||
| Subscriptions are triggered asynchronously. they are called with setter name and arguments passed to it so the listener is aware of what setter is called and what arguments are passed to it. it helps to track the state changes correctly. | ||
| Immutable state management libraries are hard to work with for large sets of nested data. This library is an alternative to them. | ||
| ## Features | ||
@@ -21,2 +27,4 @@ | ||
| Here is an exmaple of store with data and set functions. | ||
| ```ts | ||
@@ -39,2 +47,44 @@ import { createMutableStore } from "mutable-store"; | ||
| Here is an example of a store with data, set and get functions. | ||
| ```typescript | ||
| const store = createMutableStore({ | ||
| count: 0, | ||
| increment() { | ||
| this.count++; | ||
| }, | ||
| _getDoubledCount() { | ||
| return this.count * 2; | ||
| }, | ||
| }); | ||
| ``` | ||
| You might have noticed that the get function has an underscore () prefix. | ||
| if a method's name start with "\_" then, that means it's a get function and will not trigger any subscriptions. | ||
| here is an exmple of store with data, set functions, get functions and actions. | ||
| ```typescript | ||
| const store = createMutableStore({ | ||
| count: 0, | ||
| increment() { | ||
| this.count++; | ||
| }, | ||
| _getDoubledCount() { | ||
| return this.count * 2; | ||
| }, | ||
| async action_increment() { | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)); | ||
| this.increment(); | ||
| }, | ||
| }); | ||
| ``` | ||
| action function's name start with "action\_" and they can async and sync. | ||
| they can't mutate state directly, they have to always use setter functions. | ||
| these rules are very important to trigger subscriptions correctly because we are not using any proxies or getters or setters to detect state changes. | ||
| ## API | ||
@@ -41,0 +91,0 @@ |
19968
9.76%130
62.5%