floppy-disk 3.9.0 → 3.9.1
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 -98
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,103 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Built on the patterns you know. Refined into something simpler.\
|
|
6
|
-
Inspired by [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query).
|
|
7
|
-
|
|
8
|
-
_Fine-grained reactivity, minimal boilerplate, zero dependencies._
|
|
9
|
-
|
|
10
|
-
Demo: https://afiiif.github.io/floppy-disk/
|
|
11
|
-
|
|
12
|
-
**Installation:**
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
npm install floppy-disk
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
**Read the docs → https://floppy-disk.vercel.app**
|
|
19
|
-
|
|
20
|
-
<br>
|
|
21
|
-
|
|
22
|
-
---
|
|
23
|
-
|
|
24
|
-
**Like Zustand, but has additional capabilities:**
|
|
25
|
-
- No selectors: automatically optimizes re-renders
|
|
26
|
-
- Store events: `onFirstSubscribe`, `onSubscribe`, `onUnsubscribe`, `onLastUnsubscribe`
|
|
27
|
-
- Easier to set initial state on SSR/SSG
|
|
28
|
-
- Smaller bundle
|
|
29
|
-
|
|
30
|
-
**Like TanStack Query, but:**
|
|
31
|
-
- DX is very similar to Zustand → One mental model for sync & async
|
|
32
|
-
- Much smaller bundle than TanStack Query → With nearly the same capabilities
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
<br>
|
|
37
|
-
|
|
38
|
-
## Store (Global State)
|
|
39
|
-
|
|
40
|
-
A store is a global state container that can be used both **inside and outside** React.\
|
|
41
|
-
With FloppyDisk, creating a store is simple:
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import { createStore } from "floppy-disk/react";
|
|
45
|
-
|
|
46
|
-
const useLawn = createStore({
|
|
47
|
-
plants: 3,
|
|
48
|
-
zombies: 1,
|
|
49
|
-
});
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
Use it inside a component:
|
|
53
|
-
|
|
54
|
-
```tsx
|
|
55
|
-
function MyPlants() {
|
|
56
|
-
const { plants } = useLawn(); // No selectors needed.
|
|
57
|
-
|
|
58
|
-
return <div>Plants: {plants}</div>; // Only re-render when plants state changes
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
Update the state **anywhere**:
|
|
63
|
-
|
|
64
|
-
```tsx
|
|
65
|
-
const addPlant = () => {
|
|
66
|
-
useLawn.setState(prev => ({ plants: prev.plants + 1 }));
|
|
67
|
-
};
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## Query Store for Async State
|
|
71
|
-
|
|
72
|
-
Create a query store for async data with `createQuery`:
|
|
73
|
-
|
|
74
|
-
```tsx
|
|
75
|
-
import { createQuery } from "floppy-disk/react";
|
|
76
|
-
|
|
77
|
-
const plantDetailQuery = createQuery(
|
|
78
|
-
async ({ id }) => {
|
|
79
|
-
const res = await fetch(`/api/plants/${id}`);
|
|
80
|
-
return res.json();
|
|
81
|
-
},
|
|
82
|
-
);
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Use it in your component:
|
|
86
|
-
|
|
87
|
-
```tsx
|
|
88
|
-
function PlantDetail({ id }) {
|
|
89
|
-
const usePlantDetailQuery = plantDetailQuery({ id });
|
|
90
|
-
const { data, error } = usePlantDetailQuery();
|
|
91
|
-
|
|
92
|
-
if (!data && !error) return <div>Loading...</div>;
|
|
93
|
-
if (error) return <div>Error: {error.message}</div>;
|
|
94
|
-
|
|
95
|
-
return <div>Name: {data.name}, damage: {data.damage}</div>;
|
|
96
|
-
}
|
|
97
|
-
```
|
|
1
|
+
**This library has been rebranded as [YuuState](https://www.npmjs.com/package/yuustate).**\
|
|
2
|
+
Existing functionality and APIs remain unchanged.\
|
|
3
|
+
Please use the new package name for all future installations and imports.
|
|
98
4
|
|
|
99
5
|
<br>
|
|
100
6
|
|
|
101
7
|
---
|
|
102
8
|
|
|
103
|
-
Read the docs → https://
|
|
9
|
+
**Read the docs → https://yuustate.vercel.app**
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "floppy-disk",
|
|
3
3
|
"description": "Lightweight unified state management for sync and async data.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.9.
|
|
5
|
+
"version": "3.9.1",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"utilities",
|
|
8
8
|
"store",
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "https://github.com/afiiif/
|
|
18
|
+
"url": "https://github.com/afiiif/yuustate"
|
|
19
19
|
},
|
|
20
20
|
"bugs": {
|
|
21
|
-
"url": "https://github.com/afiiif/
|
|
21
|
+
"url": "https://github.com/afiiif/yuustate/issues"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://github.com/afiiif/
|
|
23
|
+
"homepage": "https://github.com/afiiif/yuustate#readme",
|
|
24
24
|
"sideEffects": false,
|
|
25
25
|
"files": [
|
|
26
26
|
"**"
|