@simplestack/store 0.5.2 → 0.6.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 +31 -19
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/react.js +1 -1
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
A simple, `select`-xcellent state management library with the power of Jotai and Zustand combined.
|
|
4
4
|
|
|
5
|
-
```
|
|
5
|
+
```tsx
|
|
6
6
|
import { store } from "@simplestack/store";
|
|
7
|
+
import { useStoreValue } from "@simplestack/store/react";
|
|
7
8
|
|
|
8
9
|
// Define your store with an initial state
|
|
9
10
|
const documentStore = store({
|
|
@@ -15,25 +16,34 @@ const documentStore = store({
|
|
|
15
16
|
},
|
|
16
17
|
});
|
|
17
18
|
|
|
18
|
-
//
|
|
19
|
-
documentStore.set((doc) => ({ ...doc, title: "Welcome to simple store!" }));
|
|
20
|
-
console.log(documentStore.get());
|
|
21
|
-
// { title: "Welcome to simple store!", authors: ["Ada", "Ben"], meta: { pages: 3, tags: ["draft", "internal"] } }
|
|
22
|
-
|
|
23
|
-
// Select parts of a store to listen and update individually
|
|
19
|
+
// Select parts of a store to listen to individually
|
|
24
20
|
const titleStore = documentStore.select("title");
|
|
25
21
|
const tagsStore = documentStore.select("meta").select("tags");
|
|
26
22
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
function Document() {
|
|
24
|
+
// Update your UI with the store's current state
|
|
25
|
+
const { title, tags } = useStoreValue(documentStore);
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
{title} {tags.join(", ")}
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function Title() {
|
|
34
|
+
// And scope updates with selected stores for fine-grained control
|
|
35
|
+
const title = useStoreValue(titleStore);
|
|
36
|
+
return (
|
|
37
|
+
<input value={title} onChange={(e) => titleStore.set(e.target.value)} />
|
|
38
|
+
);
|
|
39
|
+
}
|
|
30
40
|
```
|
|
31
41
|
|
|
32
42
|
## API
|
|
33
43
|
|
|
34
44
|
### store(initial)
|
|
35
45
|
|
|
36
|
-
Creates a store with `get`, `set`, `
|
|
46
|
+
Creates a store with `get`, `set`, `subscribe`, and (for objects and arrays) `select`.
|
|
37
47
|
|
|
38
48
|
- Parameters: `initial: number | string | boolean | null | undefined | object`
|
|
39
49
|
- Returns: `Store<T>` where `T` is inferred from `initial` or supplied via generics
|
|
@@ -45,7 +55,7 @@ const counter = store(0);
|
|
|
45
55
|
counter.set((n) => n + 1);
|
|
46
56
|
console.log(counter.get()); // 1
|
|
47
57
|
|
|
48
|
-
// Select
|
|
58
|
+
// Select parts of a store for objects and arrays
|
|
49
59
|
const doc = store({ title: "x" });
|
|
50
60
|
const title = doc.select("title");
|
|
51
61
|
```
|
|
@@ -59,15 +69,17 @@ React hook to subscribe to a store and get its current value.
|
|
|
59
69
|
- Parameters: `store: Store<T> | undefined`
|
|
60
70
|
- Returns: `T | undefined`
|
|
61
71
|
|
|
62
|
-
```
|
|
63
|
-
import { store } from "simplestack
|
|
64
|
-
import { useStoreValue } from "simplestack
|
|
72
|
+
```tsx
|
|
73
|
+
import { store } from "@simplestack/store";
|
|
74
|
+
import { useStoreValue } from "@simplestack/store/react";
|
|
65
75
|
|
|
66
|
-
const
|
|
76
|
+
const counterStore = store(0);
|
|
67
77
|
|
|
68
78
|
function Counter() {
|
|
69
|
-
const
|
|
70
|
-
return
|
|
79
|
+
const counter = useStoreValue(counterStore);
|
|
80
|
+
return (
|
|
81
|
+
<button onClick={() => counterStore.set((n) => n + 1)}>{counter}</button>
|
|
82
|
+
);
|
|
71
83
|
}
|
|
72
84
|
```
|
|
73
85
|
|
|
@@ -81,7 +93,7 @@ These types are exported for TypeScript users.
|
|
|
81
93
|
- Store<T>:
|
|
82
94
|
- `get(): T`
|
|
83
95
|
- `set(setter: Setter<T>): void`
|
|
84
|
-
- `
|
|
96
|
+
- `subscribe(callback: (state: T) => void): () => void`
|
|
85
97
|
- `select(key: K): Store<SelectValue<T, K>>`: present only when `T` is an object or array
|
|
86
98
|
|
|
87
99
|
## Contributing
|
package/dist/index.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export type Store<T extends StateObject | StatePrimitive> = {
|
|
|
34
34
|
* @returns A function to unsubscribe.
|
|
35
35
|
* @example
|
|
36
36
|
* const countStore = store(0);
|
|
37
|
-
* const unsubscribe = countStore.
|
|
37
|
+
* const unsubscribe = countStore.subscribe((count) => {
|
|
38
38
|
* console.log(count);
|
|
39
39
|
* });
|
|
40
40
|
*
|
|
@@ -42,7 +42,7 @@ export type Store<T extends StateObject | StatePrimitive> = {
|
|
|
42
42
|
* unsubscribe();
|
|
43
43
|
*
|
|
44
44
|
*/
|
|
45
|
-
|
|
45
|
+
subscribe: (callback: (state: T) => void) => () => void;
|
|
46
46
|
/**
|
|
47
47
|
* Select a key from the state of the store.
|
|
48
48
|
* This returns a new store with the selected key as the state.
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC;AAChE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAE1E;;;;GAIG;AACH,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IACtD,CAAC,GACD,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAIrB,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC3E,CAAC,GAAG,SAAS,GAEd,MAAM,SAAS,MAAM,CAAC,GACpB,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GAChB,MAAM,SAAS,MAAM,CAAC,GACrB,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GAChB,CAAC,CAAC,CAAC,CAAC,CAAC;AAGV,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAC1D,CAAC,SAAS,WAAW,GAClB,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GACvD,SAAS,CAAC;AAEd,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAAI;IAC3D;;;;;OAKG;IACH,GAAG,EAAE,MAAM,CAAC,CAAC;IACb;;;;;;;;OAQG;IACH,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC;AAChE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAE1E;;;;GAIG;AACH,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IACtD,CAAC,GACD,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAIrB,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAC3E,CAAC,GAAG,SAAS,GAEd,MAAM,SAAS,MAAM,CAAC,GACpB,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GAChB,MAAM,SAAS,MAAM,CAAC,GACrB,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GAChB,CAAC,CAAC,CAAC,CAAC,CAAC;AAGV,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAC1D,CAAC,SAAS,WAAW,GAClB,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GACvD,SAAS,CAAC;AAEd,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAAI;IAC3D;;;;;OAKG;IACH,GAAG,EAAE,MAAM,CAAC,CAAC;IACb;;;;;;;;OAQG;IACH,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IACxD;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AACtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AACtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AACxD,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAC3D,OAAO,EAAE,CAAC,GACR,KAAK,CAAC,CAAC,CAAC,CAAC;AAsFZ,wBAAgB,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,MAAM,IAAI,CAAC,cAmBjE"}
|
package/dist/index.js
CHANGED
|
@@ -6,13 +6,13 @@ export function store(initial) {
|
|
|
6
6
|
return createStoreApi(get, set);
|
|
7
7
|
}
|
|
8
8
|
const createStoreApi = (get, set) => {
|
|
9
|
-
const
|
|
9
|
+
const subscribe = (callback) => {
|
|
10
10
|
return effect(() => {
|
|
11
11
|
callback(get());
|
|
12
12
|
});
|
|
13
13
|
};
|
|
14
14
|
if (isStatePrimitive(get())) {
|
|
15
|
-
return { get, set,
|
|
15
|
+
return { get, set, subscribe, select: undefined };
|
|
16
16
|
}
|
|
17
17
|
function select(key) {
|
|
18
18
|
const getSelected = () => {
|
|
@@ -39,7 +39,7 @@ const createStoreApi = (get, set) => {
|
|
|
39
39
|
};
|
|
40
40
|
return createStoreApi(getSelected, setSelected);
|
|
41
41
|
}
|
|
42
|
-
return { get, set,
|
|
42
|
+
return { get, set, subscribe, select: select };
|
|
43
43
|
};
|
|
44
44
|
const UNEXPECTED_SELECT_ERROR = "Internal: select() was unexpectedly called on a state value that wasn't an object.";
|
|
45
45
|
function isStatePrimitive(state) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAmHzC,MAAM,UAAU,KAAK,CACpB,OAAU;IAEV,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,CAAI,OAAO,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;IAC9B,MAAM,GAAG,GAAG,CAAC,MAAiB,EAAE,EAAE,CACjC,KAAK,CAAC,GAAG,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACxE,OAAO,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACjC,CAAC;AAED,MAAM,cAAc,GAAG,CACtB,GAAY,EACZ,GAAgC,EACrB,EAAE;IACb,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/react.js
CHANGED
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmB5C,MAAM,UAAU,aAAa,CAC5B,KAA2B;IAE3B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IAChE,SAAS,CAAC,GAAG,EAAE;QACd,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAmB5C,MAAM,UAAU,aAAa,CAC5B,KAA2B;IAE3B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IAChE,SAAS,CAAC,GAAG,EAAE;QACd,OAAO,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,KAAK,CAAC;AACd,CAAC"}
|