immu-js 0.2.0 → 0.3.0
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 +23 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
# immu-js
|
|
2
2
|
|
|
3
|
-
A tiny (~2 KB), zero-dependency, framework-independent reactive state library for JavaScript
|
|
3
|
+
A tiny (~2 KB), zero-dependency, framework-independent, store based, reactive state library for JavaScript applications. It's very similar to redux in terms of functionality, but it's much simpler to work with immutable objects.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
It lets you create stores from classes, run effects with automatic dependency tracking with memoisation support.
|
|
6
|
+
|
|
7
|
+
It does whatever signals do but little bit better as they are store based and have more options for effects and memos.
|
|
8
|
+
|
|
9
|
+
use `create` function to create a store from a class, use `run` to run effects (similar to effect in signals), use `memo` to create a computed getter that lets you pass arguments to it and caches the computed result based on stores used in the function and also arguments passed to that function. Use `computed` to create a signals like computed object with value property that has auto computed property. You can also save the store as a version so you can roll back along with `reset` function to reset your stores. That's it.
|
|
10
|
+
|
|
11
|
+
**note** you have to assign new values to the properties in the class to detect the change. Library creates a getter and setter for each and every property in the class, so by setting the value through function or from outside, library will know that this value has changed. It treats your store values as immutable. so you will need to reacreate the references for the values at the root level when anything inside the object or array changes. values can be of any type.
|
|
6
12
|
|
|
7
13
|
```typescript
|
|
8
14
|
import { create, memo, computed, run } from "immu-js";
|
|
@@ -10,8 +16,23 @@ import { create, memo, computed, run } from "immu-js";
|
|
|
10
16
|
// 1. Define state as a plain class
|
|
11
17
|
class Counter {
|
|
12
18
|
count = 0;
|
|
19
|
+
address = {
|
|
20
|
+
street: "test",
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// setter functions
|
|
13
24
|
incr() { this.count++; }
|
|
14
25
|
decr() { this.count--; }
|
|
26
|
+
setStreet(street: string){
|
|
27
|
+
// need to reassign the object to trigger the change
|
|
28
|
+
this.address = { ...this.address, street };
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// getter functions
|
|
32
|
+
getStreet(){
|
|
33
|
+
// you can use functions to get values from the store
|
|
34
|
+
return this.address.street;
|
|
35
|
+
}
|
|
15
36
|
}
|
|
16
37
|
|
|
17
38
|
// 2. Create a reactive store
|