Skip to content

Commit ec708ad

Browse files
committed
Apply changesets and update CHANGELOG [skip ci]
1 parent e048b79 commit ec708ad

File tree

1 file changed

+75
-1
lines changed

1 file changed

+75
-1
lines changed

lib/README.md

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Live demo: [https://kosha-six.vercel.app](https://kosha-six.vercel.app)
6969
6. **Middleware Architecture (BYO Middleware)**
7070

7171
- Middleware support is built-in. While Kosha doesnt yet include a plugin ecosystem like Zustand, you can define and compose custom middlewares easily.
72-
- Includes working [persist middleware](https://github.com/mayank1513/kosha/blob/main/lib/src/middleware/persist.ts) example out-of-the-box
72+
- Includes working [persist middleware](https://github.com/mayank1513/kosha/blob/main/lib/src/middleware/persist.ts) and [immer middleware](https://github.com/mayank1513/kosha/blob/main/lib/src/middleware/immer.ts) example out-of-the-box
7373

7474
---
7575

@@ -210,6 +210,80 @@ You can combine `immer` middleware with other middlewares like `persist` for pow
210210

211211
---
212212

213+
### 🧩 Modular Slice Composition
214+
215+
Kosha supports Zustand-style **slice composition** via the `SliceCreator` utility type. This lets you create modular, typed slices and combine them cleanly.
216+
217+
```ts
218+
export type SliceCreator<TStore extends BaseType, TSlice = Partial<TStore>> = (
219+
set: StateSetter<TStore>,
220+
get: () => TStore | null,
221+
) => TSlice;
222+
```
223+
224+
#### Example
225+
226+
```ts
227+
interface CounterSlice {
228+
count: number;
229+
setCount: (count: number) => void;
230+
}
231+
232+
interface ThemeSlice {
233+
theme: string;
234+
setTheme: (theme: string) => void;
235+
}
236+
237+
type StoreType = CounterSlice & ThemeSlice;
238+
239+
const createCounterSlice: SliceCreator<StoreType, CounterSlice> = set => ({
240+
count: 0,
241+
setCount: count => set({ count }),
242+
});
243+
244+
const createThemeSlice: SliceCreator<StoreType, ThemeSlice> = set => ({
245+
theme: "light",
246+
setTheme: theme => set({ theme }),
247+
});
248+
249+
const useStore = create<StoreType>((...a) => ({
250+
...createCounterSlice(...a),
251+
...createThemeSlice(...a),
252+
}));
253+
```
254+
255+
#### 🔍 Notes
256+
257+
- You can use `get()` inside any slice to access the full store.
258+
- This gives more flexibility than Zustands default slice typing, where youre limited to accessing only fields from your own slice.
259+
260+
---
261+
262+
### Slicing Pattern Support
263+
264+
Kosha supports the **slicing pattern** commonly used in Zustand. You can compose your store by combining multiple slices:
265+
266+
```ts
267+
const createUserSlice = set => ({
268+
user: null,
269+
setUser: user => set({ user }),
270+
});
271+
272+
const createThemeSlice = set => ({
273+
theme: "light",
274+
toggleTheme: () => set(state => ({ theme: state.theme === "light" ? "dark" : "light" })),
275+
});
276+
277+
const useStore = create(set => ({
278+
...createUserSlice(set),
279+
...createThemeSlice(set),
280+
}));
281+
```
282+
283+
However, **Kosha does not yet provide strong TypeScript inference for slices** like Zustands `StoreApi`-based helpers. If you rely heavily on types for composing slices, you may need to manually define or merge slice types for better intellisense.
284+
285+
---
286+
213287
## ⚖️ Why Choose Kosha Over Zustand?
214288

215289
| Feature | Kosha | Zustand |

0 commit comments

Comments
 (0)