@t8/react-store 1.0.21 → 1.0.23
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 +4 -2
- package/dist/index.js +3 -5
- package/package.json +49 -50
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# @t8/react-store
|
|
4
4
|
|
|
5
|
-
*
|
|
5
|
+
*Concise shared state management for React apps*
|
|
6
6
|
|
|
7
7
|
- Similar to `useState()`
|
|
8
8
|
- No boilerplate
|
|
@@ -49,10 +49,12 @@ Moving the local state to the full-fledged shared state:
|
|
|
49
49
|
[Live counter demo](https://codesandbox.io/p/sandbox/rtng37?file=%2Fsrc%2FPlusButton.jsx)<br>
|
|
50
50
|
[Tic-tac-toe](https://codesandbox.io/p/sandbox/tq852v?file=%252Fsrc%252FApp.tsx)
|
|
51
51
|
|
|
52
|
-
🔹 The shared state setup
|
|
52
|
+
🔹 The shared state setup shown above is very similar to `useState()` allowing for quick migration from local state to shared state or the other way around.
|
|
53
53
|
|
|
54
54
|
🔹 The `false` parameter in `useStore(store, false)` (as in `<ResetButton>` above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when a component makes use of the store state setter without using the store state value.
|
|
55
55
|
|
|
56
|
+
🔹 Note that updating the store state doesn't change the store reference sitting in the React Context and therefore doesn't cause updates of the entire React Context. Only the components subscribed to store state updates by means of `useStore()` will be notified to re-render.
|
|
57
|
+
|
|
56
58
|
## Single store or multiple stores
|
|
57
59
|
|
|
58
60
|
An application can have as many stores as needed, whether on a single React Context or multiple Contexts.
|
package/dist/index.js
CHANGED
|
@@ -6,17 +6,15 @@ function isStore(x) {
|
|
|
6
6
|
// node_modules/@t8/store/src/Store.ts
|
|
7
7
|
var Store = class {
|
|
8
8
|
state;
|
|
9
|
-
callbacks =
|
|
9
|
+
callbacks = /* @__PURE__ */ new Set();
|
|
10
10
|
revision = -1;
|
|
11
11
|
constructor(data) {
|
|
12
12
|
this.state = data;
|
|
13
13
|
}
|
|
14
14
|
onUpdate(callback) {
|
|
15
|
-
this.callbacks.
|
|
15
|
+
this.callbacks.add(callback);
|
|
16
16
|
return () => {
|
|
17
|
-
|
|
18
|
-
if (this.callbacks[i] === callback) this.callbacks.splice(i, 1);
|
|
19
|
-
}
|
|
17
|
+
this.callbacks.delete(callback);
|
|
20
18
|
};
|
|
21
19
|
}
|
|
22
20
|
getState() {
|
package/package.json
CHANGED
|
@@ -1,50 +1,49 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@t8/react-store",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "npx npm-run-all clean compile",
|
|
9
|
-
"clean": "node -e \"require('node:fs').rmSync('dist', {force: true, recursive: true});\"",
|
|
10
|
-
"compile": "npx esbuild index.ts --bundle --outdir=dist --platform=neutral --external:react",
|
|
11
|
-
"demo": "npx @t8/serve 3000 * tests/counter -b src/index.tsx",
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
"state
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"@
|
|
39
|
-
"@
|
|
40
|
-
"@types/
|
|
41
|
-
"@types/react": "^19.1.
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@t8/react-store",
|
|
3
|
+
"version": "1.0.23",
|
|
4
|
+
"description": "Concise shared state management for React apps",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "npx npm-run-all clean compile",
|
|
9
|
+
"clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true });\"",
|
|
10
|
+
"compile": "npx esbuild index.ts --bundle --outdir=dist --platform=neutral --external:react",
|
|
11
|
+
"demo": "npx @t8/serve 3000 * tests/counter -b src/index.tsx",
|
|
12
|
+
"prepublishOnly": "npm run build",
|
|
13
|
+
"preversion": "npx npm-run-all typecheck shape build test",
|
|
14
|
+
"shape": "npx codeshape",
|
|
15
|
+
"test": "npx playwright test --project=chromium",
|
|
16
|
+
"tic-tac-toe": "npx @t8/serve 3000 * tests/tic-tac-toe -b src/index.tsx",
|
|
17
|
+
"typecheck": "tsc --noEmit"
|
|
18
|
+
},
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "git+https://github.com/t8js/react-store.git"
|
|
22
|
+
},
|
|
23
|
+
"homepage": "https://t8.js.org/react-store",
|
|
24
|
+
"keywords": [
|
|
25
|
+
"react",
|
|
26
|
+
"state management",
|
|
27
|
+
"shared state",
|
|
28
|
+
"global state",
|
|
29
|
+
"store"
|
|
30
|
+
],
|
|
31
|
+
"author": "axtk",
|
|
32
|
+
"license": "ISC",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": ">=16.8"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@playwright/test": "^1.55.1",
|
|
38
|
+
"@t8/serve": "^0.1.29",
|
|
39
|
+
"@types/node": "^24.5.2",
|
|
40
|
+
"@types/react": "^19.1.10",
|
|
41
|
+
"@types/react-dom": "^19.1.9",
|
|
42
|
+
"immer": "^10.1.3",
|
|
43
|
+
"react-dom": "^19.1.1",
|
|
44
|
+
"typescript": "^5.9.3"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@t8/store": "^1.1.4"
|
|
48
|
+
}
|
|
49
|
+
}
|