@t8/react-store 1.2.3 → 1.2.4
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 +1 -1
- package/dist/index.d.ts +38 -1
- package/package.json +6 -10
- package/dist/src/useStore.d.ts +0 -32
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@t8/react-store)   
|
|
6
6
|
|
|
7
|
-
**Why?** To have an easy-to-use state management lib for React apps requiring least effort to migrate from local state and to quickly set up shared state from scratch, whether with SSR or without. Other approaches,
|
|
7
|
+
**Why?** To have an easy-to-use state management lib for React apps requiring least effort to migrate from local state and to quickly set up shared state from scratch, whether with SSR or without. Other approaches, like Redux Toolkit, Zustand, Jotai, MobX, depart from this picture to varying degrees.
|
|
8
8
|
|
|
9
9
|
This picture is achieved here by (1) having a simple API introducing as few new entities as possible, (2) closely following the React's `useState()` pattern of initializing and manipulating the state to avoid boilerplate and sizable rewrites in the common task of migration from local state to shared state, (3) working smoothly with SSR with regular React Contexts without requiring a specifically designed setup and without internally making use of global stores or other global variables by default.
|
|
10
10
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,39 @@
|
|
|
1
|
+
import type { Store } from "@t8/store";
|
|
2
|
+
|
|
3
|
+
export type SetStoreState<T> = Store<T>["setState"];
|
|
4
|
+
export type ShouldUpdateCallback<T> = (nextState: T, prevState: T) => boolean;
|
|
5
|
+
export type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
|
|
6
|
+
/**
|
|
7
|
+
* Returns the state value of `store` passed as the parameter and
|
|
8
|
+
* a function to update the store state value.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```js
|
|
12
|
+
* let [value, setValue] = useStore(store);
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* The optional second parameter `shouldUpdate` controls whether
|
|
16
|
+
* the component using this hook should be updated in response to
|
|
17
|
+
* the store updates, which is set to `true` by default.
|
|
18
|
+
*
|
|
19
|
+
* `shouldUpdate` can be set to `false` to prevent subscription
|
|
20
|
+
* to the store updates. Use case: if the component only requires
|
|
21
|
+
* the store state setter but not the store state value, the
|
|
22
|
+
* component may not need to respond to the store updates at all:
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```js
|
|
26
|
+
* let [, setValue] = useStore(store, false);
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
|
|
30
|
+
* to make the component respond only to specific store state changes,
|
|
31
|
+
* when this function returns `true`.
|
|
32
|
+
*/
|
|
33
|
+
export declare function useStore<T>(store: Store<T>, shouldUpdate?: ShouldUpdate<T>): [
|
|
34
|
+
T,
|
|
35
|
+
SetStoreState<T>
|
|
36
|
+
];
|
|
1
37
|
export * from "@t8/store";
|
|
2
|
-
|
|
38
|
+
|
|
39
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t8/react-store",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"description": "Small React app state management lib aligned with React's state pattern, condensed to the essentials",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"build": "npx npm-run-all clean compile types",
|
|
10
9
|
"clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true });\"",
|
|
11
10
|
"compile": "npx esbuild index.ts --bundle --outdir=dist --platform=neutral --external:react",
|
|
12
11
|
"demo": "npx @t8/serve 3000 * tests/counter -b src/index.tsx",
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"shape": "npx codeshape --typecheck",
|
|
12
|
+
"preversion": "npx npm-run-all clean shape compile test",
|
|
13
|
+
"shape": "npx codeshape --typecheck --emit-types",
|
|
16
14
|
"test": "npx playwright test --project=chromium",
|
|
17
|
-
"tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx"
|
|
18
|
-
"types": "tsc -p tsconfig.build.json"
|
|
15
|
+
"tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx"
|
|
19
16
|
},
|
|
20
17
|
"repository": {
|
|
21
18
|
"type": "git",
|
|
@@ -41,10 +38,9 @@
|
|
|
41
38
|
"@types/react": "^19.2.7",
|
|
42
39
|
"@types/react-dom": "^19.2.3",
|
|
43
40
|
"immer": "^11.0.1",
|
|
44
|
-
"react-dom": "^19.2.1"
|
|
45
|
-
"typescript": "^5.9.3"
|
|
41
|
+
"react-dom": "^19.2.1"
|
|
46
42
|
},
|
|
47
43
|
"dependencies": {
|
|
48
|
-
"@t8/store": "^1.3.
|
|
44
|
+
"@t8/store": "^1.3.5"
|
|
49
45
|
}
|
|
50
46
|
}
|
package/dist/src/useStore.d.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { type Store } from "@t8/store";
|
|
2
|
-
export type SetStoreState<T> = Store<T>["setState"];
|
|
3
|
-
export type ShouldUpdateCallback<T> = (nextState: T, prevState: T) => boolean;
|
|
4
|
-
export type ShouldUpdate<T> = boolean | ShouldUpdateCallback<T>;
|
|
5
|
-
/**
|
|
6
|
-
* Returns the state value of `store` passed as the parameter and
|
|
7
|
-
* a function to update the store state value.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```js
|
|
11
|
-
* let [value, setValue] = useStore(store);
|
|
12
|
-
* ```
|
|
13
|
-
*
|
|
14
|
-
* The optional second parameter `shouldUpdate` controls whether
|
|
15
|
-
* the component using this hook should be updated in response to
|
|
16
|
-
* the store updates, which is set to `true` by default.
|
|
17
|
-
*
|
|
18
|
-
* `shouldUpdate` can be set to `false` to prevent subscription
|
|
19
|
-
* to the store updates. Use case: if the component only requires
|
|
20
|
-
* the store state setter but not the store state value, the
|
|
21
|
-
* component may not need to respond to the store updates at all:
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```js
|
|
25
|
-
* let [, setValue] = useStore(store, false);
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* `shouldUpdate` can also be a function `(nextState, prevState) => boolean`
|
|
29
|
-
* to make the component respond only to specific store state changes,
|
|
30
|
-
* when this function returns `true`.
|
|
31
|
-
*/
|
|
32
|
-
export declare function useStore<T>(store: Store<T>, shouldUpdate?: ShouldUpdate<T>): [T, SetStoreState<T>];
|