snap-store 0.1.1 → 0.1.2
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 +18 -20
- package/dist/esm/store.js +1 -1
- package/dist/esm/store.js.map +1 -1
- package/dist/esm/types.d.ts +2 -3
- package/dist/esm/types.d.ts.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -37,8 +37,7 @@ const store = createStore({ count: 0});
|
|
|
37
37
|
|
|
38
38
|
const Counter = () => {
|
|
39
39
|
const { count } = store.useSnapshot();
|
|
40
|
-
|
|
41
|
-
return <button onClick={() => setCount(prev => prev + 1)}>
|
|
40
|
+
return <button onClick={() => store.setCount(prev => prev + 1)}>
|
|
42
41
|
{count}
|
|
43
42
|
</button>
|
|
44
43
|
}
|
|
@@ -61,8 +60,8 @@ const store = createStore({ count: 0});
|
|
|
61
60
|
|
|
62
61
|
function handleButton(){
|
|
63
62
|
const { count } = store.state; //read store state
|
|
64
|
-
store.
|
|
65
|
-
store.
|
|
63
|
+
store.setCount(count + 1); //mutate by value
|
|
64
|
+
store.setCount(prev => prev + 1); //mutate by function
|
|
66
65
|
}
|
|
67
66
|
|
|
68
67
|
const Component = () => {
|
|
@@ -75,16 +74,17 @@ In the component, `store.useSnapshot()` is used to refer to the store state as a
|
|
|
75
74
|
Since this is a global state library, you can also read and write store states outside components.
|
|
76
75
|
`store.state` is used to read the value in non-component functions.
|
|
77
76
|
|
|
78
|
-
|
|
77
|
+
Mutation methods have no difference in component or non-component context.
|
|
79
78
|
|
|
80
79
|
```ts
|
|
81
80
|
const store = createStore({ user: {name: "John", age: 20 }});
|
|
82
|
-
store.
|
|
83
|
-
store.
|
|
84
|
-
store.
|
|
85
|
-
store.
|
|
81
|
+
store.setUser({ name: "Mike", age: 20}); //value
|
|
82
|
+
store.setUser(prev => ({...prev, age: 21})); //by function
|
|
83
|
+
store.patchUser({ age: 22}); //partial update (merged)
|
|
84
|
+
store.produceUser(draft => { draft.age = 23 }) //update with immer
|
|
86
85
|
```
|
|
87
|
-
|
|
86
|
+
|
|
87
|
+
`store` object has a set of update methods for each field.
|
|
88
88
|
|
|
89
89
|
`set*` methods are similar to the setter function of `useState`. It takes a value or a function.
|
|
90
90
|
|
|
@@ -98,12 +98,12 @@ const store = createStore({
|
|
|
98
98
|
penColor: 'black',
|
|
99
99
|
penStyle: 'normal'
|
|
100
100
|
});
|
|
101
|
-
store.
|
|
101
|
+
store.assigns({ penWidth: 1, penStyle: 'dashed' });
|
|
102
102
|
//is equivalent to
|
|
103
|
-
store.
|
|
104
|
-
store.
|
|
103
|
+
store.setPenWidth(1);
|
|
104
|
+
store.setPenStyle('dashed');
|
|
105
105
|
```
|
|
106
|
-
In
|
|
106
|
+
In store, there is `assigns` method to set multiple fields at a time.
|
|
107
107
|
It is useful if you want to update multiple values.
|
|
108
108
|
|
|
109
109
|
There is no performance difference since reactive effects (i.e. rendering) are batched by React and executed in the next frame.
|
|
@@ -113,17 +113,16 @@ const store = createStore<{theme: "light" | "dark"}>({theme: "light" })
|
|
|
113
113
|
|
|
114
114
|
const ThemeSelector = () => {
|
|
115
115
|
const { theme } = store.useSnapshot();
|
|
116
|
-
const { setTheme } = store.mutations;
|
|
117
116
|
return <div>
|
|
118
117
|
<IconButton
|
|
119
118
|
icon="☀️"
|
|
120
119
|
active={theme === 'light'}
|
|
121
|
-
onClick={() => setTheme("light")}
|
|
120
|
+
onClick={() => store.setTheme("light")}
|
|
122
121
|
/>
|
|
123
122
|
<IconButton
|
|
124
123
|
icon="🌙"
|
|
125
124
|
active={theme === 'dark'}
|
|
126
|
-
onClick={() => setTheme("dark")}
|
|
125
|
+
onClick={() => store.setTheme("dark")}
|
|
127
126
|
/>
|
|
128
127
|
</div>
|
|
129
128
|
}
|
|
@@ -138,17 +137,16 @@ const store = createStore<{textSize: number, bgColor: string}>({
|
|
|
138
137
|
|
|
139
138
|
const BookReaderSettings = () => {
|
|
140
139
|
const snap = store.useSnapshot();;
|
|
141
|
-
const mut = store.mutations;
|
|
142
140
|
return <div>
|
|
143
141
|
<Slider
|
|
144
142
|
value={snap.textSize}
|
|
145
|
-
onChange={
|
|
143
|
+
onChange={store.setTextSize}
|
|
146
144
|
min={10}
|
|
147
145
|
max={20}
|
|
148
146
|
/>
|
|
149
147
|
<ColorInput
|
|
150
148
|
value={snap.bgColor}
|
|
151
|
-
onChange={
|
|
149
|
+
onChange={store.setBgColor}
|
|
152
150
|
/>
|
|
153
151
|
</div>
|
|
154
152
|
}
|
package/dist/esm/store.js
CHANGED
package/dist/esm/store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGjD,MAAM,UAAU,WAAW,CAAmB,YAAe;IAI3D,MAAM,GAAG,GAGL,EAAE,CAAC;IAEP,MAAM,KAAK,GAAG,YAAY,CAAC;IAC3B,MAAM,SAAS,GAAG,EAAkB,CAAC;IACrC,MAAM,UAAU,GAAG,SAAgB,CAAC;IAEpC,KAAK,MAAM,IAAI,IAAI,YAAY,EAAE,CAAC;QAChC,MAAM,GAAG,GAAG,IAAS,CAAC;QAEtB,MAAM,QAAQ,GAAG,CAAC,GAAyB,EAAE,EAAE;YAC7C,IAAI,KAAQ,CAAC;YACb,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,KAAK,GAAI,GAAsB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACN,KAAK,GAAG,GAAG,CAAC;YACd,CAAC;YAED,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACnB,KAAK,MAAM,MAAM,IAAI,GAAG,EAAE,CAAC;gBACzB,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;gBAC1B,IAAI,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtC,KAAK,CAAC,WAAW,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;QAC1C,UAAU,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC;QACtC,UAAU,CAAC,UAAU,MAAM,EAAE,CAAC,GAAG,CAAC,EAAsB,EAAE,EAAE;YAC1D,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,UAAU,CAAC,QAAQ,MAAM,EAAE,CAAC,GAAG,CAAC,KAAiB,EAAE,EAAE;YACnD,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9C,CAAC,CAAC;IACJ,CAAC;IACD,SAAS,CAAC,OAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;QACxC,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;YACxB,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC;YAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACzB,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,MAAM,EAAE,CAAC,CAAC;YAC5C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,MAAc,EAAE,WAAuB,EAAE,EAAE;QAClE,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,kBAAkB,EAAE,IAAI,GAAG,EAAE,EAAE,WAAW,EAAE,CAAC;QAC7D,MAAM,YAAY,GAAG,EAAO,CAAC;QAC7B,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;YAC/B,MAAM,CAAC,cAAc,CAAC,YAAY,EAAE,GAAG,EAAE;gBACvC,GAAG;oBACD,GAAG,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBACxC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC;gBACpB,CAAC;aACF,CAAC,CAAC;QACL,CAAC;QACD,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC;QACrB,CAAC,CAAC;QACF,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAM,EAAE;QAC1B,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;QACvB,MAAM,CAAC,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QACzC,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,EACxD,CAAC,MAAM,CAAC,CACT,CAAC;QACF,SAAS,CAAC,GAAG,EAAE;YACb,OAAO,SAAS,CAAC,OAAO,CAAC;QAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;QAChB,OAAO,SAAS,CAAC,YAAY,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,IAAI,QAAQ;YACV,OAAO,WAAW,EAAE,CAAC;QACvB,CAAC;QACD,GAAG,SAAS;KACb,CAAC;AACJ,CAAC"}
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export type Mutations<T> = {
|
|
|
3
3
|
} & {
|
|
4
4
|
[K in keyof T as `produce${Capitalize<K & string>}`]: (fn: (draft: T[K]) => void) => void;
|
|
5
5
|
} & {
|
|
6
|
-
[K in keyof T as `patch${Capitalize<K & string>}`]: (attrs: Partial<T[K]
|
|
6
|
+
[K in keyof T as `patch${Capitalize<K & string>}`]: (attrs: Partial<Extract<T[K], object>>) => void;
|
|
7
7
|
} & {
|
|
8
8
|
assigns: (attrs: Partial<T>) => void;
|
|
9
9
|
};
|
|
@@ -11,6 +11,5 @@ export type Store<T extends object> = {
|
|
|
11
11
|
state: T;
|
|
12
12
|
useSnapshot(): T;
|
|
13
13
|
snapshot: T;
|
|
14
|
-
|
|
15
|
-
};
|
|
14
|
+
} & Mutations<T>;
|
|
16
15
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAChD,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KACjC,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CACpD,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KACtB,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,QAAQ,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAClD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAChD,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KACjC,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CACpD,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,KACtB,IAAI;CACV,GAAG;KACD,CAAC,IAAI,MAAM,CAAC,IAAI,QAAQ,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,CAClD,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,KAClC,IAAI;CACV,GAAG;IACF,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,IAAI,CAAC,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC;CACb,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "snap-store",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "An easy-to-use global state management library for React.",
|
|
5
5
|
"author": "yahiro",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,4 +53,4 @@
|
|
|
53
53
|
"engines": {
|
|
54
54
|
"node": ">=16.0.0"
|
|
55
55
|
}
|
|
56
|
-
}
|
|
56
|
+
}
|