RELEASING: Releasing 2 package(s)

Releases:
  kosha@1.2.1
  @repo/shared@0.0.13

Author: mayank1513

.changeset/beige-regions-relate.md

@@ -69,7 +69,7 @@ Live demo: [https://kosha-six.vercel.app](https://kosha-six.vercel.app)
 6. **Middleware Architecture (BYO Middleware)**
 
    - Middleware support is built-in. While Kosha doesn’t yet include a plugin ecosystem like Zustand, you can define and compose custom middlewares easily.
-   - Includes working [persist middleware](https://github.com/mayank1513/kosha/blob/main/lib/src/middleware/persist.ts) example out-of-the-box
+   - 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
 
 ---
 
@@ -210,6 +210,80 @@ You can combine `immer` middleware with other middlewares like `persist` for pow
 
 ---
 
+### 🧩 Modular Slice Composition
+
+Kosha supports Zustand-style **slice composition** via the `SliceCreator` utility type. This lets you create modular, typed slices and combine them cleanly.
+
+```ts
+export type SliceCreator<TStore extends BaseType, TSlice = Partial<TStore>> = (
+  set: StateSetter<TStore>,
+  get: () => TStore | null,
+) => TSlice;
+```
+
+#### Example
+
+```ts
+interface CounterSlice {
+  count: number;
+  setCount: (count: number) => void;
+}
+
+interface ThemeSlice {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+type StoreType = CounterSlice & ThemeSlice;
+
+const createCounterSlice: SliceCreator<StoreType, CounterSlice> = set => ({
+  count: 0,
+  setCount: count => set({ count }),
+});
+
+const createThemeSlice: SliceCreator<StoreType, ThemeSlice> = set => ({
+  theme: "light",
+  setTheme: theme => set({ theme }),
+});
+
+const useStore = create<StoreType>((...a) => ({
+  ...createCounterSlice(...a),
+  ...createThemeSlice(...a),
+}));
+```
+
+#### 🔍 Notes
+
+- You can use `get()` inside any slice to access the full store.
+- This gives more flexibility than Zustand’s default slice typing, where you’re limited to accessing only fields from your own slice.
+
+---
+
+### Slicing Pattern Support
+
+Kosha supports the **slicing pattern** commonly used in Zustand. You can compose your store by combining multiple slices:
+
+```ts
+const createUserSlice = set => ({
+  user: null,
+  setUser: user => set({ user }),
+});
+
+const createThemeSlice = set => ({
+  theme: "light",
+  toggleTheme: () => set(state => ({ theme: state.theme === "light" ? "dark" : "light" })),
+});
+
+const useStore = create(set => ({
+  ...createUserSlice(set),
+  ...createThemeSlice(set),
+}));
+```
+
+However, **Kosha does not yet provide strong TypeScript inference for slices** like Zustand’s `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.
+
+---
+
 ## ⚖️ Why Choose Kosha Over Zustand?
 
 | Feature             | Kosha                     | Zustand                           |

README.md

@@ -12,7 +12,6 @@ export default function Page(): ReactNode {
   return (
     <LandingPage title="Next.js Example">
       <Demo />
-      <MyButton />
     </LandingPage>
   );
 }

examples/nextjs/src/app/page.tsx

@@ -1,5 +1,29 @@
 # kosha
 
+## 1.2.1
+
+### Patch Changes
+
+- fab33c4: - ✨ Support for Zustand-style **slice composition** via `SliceCreator` utility type.
+
+  - Now you can structure your store in a modular, scalable way by composing smaller slices and combining them into a single store.
+
+  ```ts
+  export type SliceCreator<TStore extends BaseType, TSlice = Partial<TStore>> = (
+    set: StateSetter<TStore>,
+    get: () => TStore | null,
+  ) => TSlice;
+  ```
+
+  **Usage**
+
+  ```
+  const useKosha = create<StoreType>((...a) => ({
+    ...createThemeSlice(...a),
+    ...counterSlice(...a),
+  }));
+  ```
+
 ## 1.2.0
 
 ### Minor Changes

lib/CHANGELOG.md

@@ -2,7 +2,7 @@
   "name": "kosha",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A modern, lightweight, fast, and powerful global state management library for modern React.js projects. ",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/package.json

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [fab33c4]
+  - kosha@1.2.1
+
 ## 0.0.12
 
 ### Patch Changes

packages/shared/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",

packages/shared/package.json

@@ -1,10 +1,12 @@
 .codeDisplay {
   padding: 10px;
+  margin: 0 -10px;
   .hide {
     display: none;
   }
   summary {
     cursor: pointer;
+    padding: 0 15px;
   }
   &[open] {
     .show {
@@ -86,8 +88,10 @@
 }
 
 .preview {
-  padding: 0 30px;
-  padding-bottom: 30px;
+  padding: 0 15px;
+  .flex h2 {
+    margin-top: 0;
+  }
 }
 
 .center {

packages/shared/src/client/demo/demo.module.scss

@@ -19,6 +19,8 @@ import compareCode from "./compare?raw";
 import compareStoreCode from "./compare/store?raw";
 import { CounterWithImmer } from "./immer";
 import CounterWithImmerCode from "./immer?raw";
+import { SlicingTheStore } from "./slice";
+import SlicingTheStoreCode from "./slice?raw";
 
 const compareExCode = [
   { filename: "compare.tsx", code: compareCode },
@@ -51,14 +53,6 @@ export function Demo() {
         <Compare />
         <CodeDisplay code={compareExCode} />
       </div>
-      <div className={styles.demo}>
-        <BasicExample />
-        <CodeDisplay code={basicExCode} />
-      </div>
-      <div className={styles.demo}>
-        <WithSelector />
-        <CodeDisplay code={withSelectorExCode} />
-      </div>
       <div className={styles.demo}>
         <PersistedCounter />
         <CodeDisplay code={[{ filename: "index.tsx", code: PersistedCounterCode }]} />
@@ -67,6 +61,18 @@ export function Demo() {
         <CounterWithImmer />
         <CodeDisplay code={[{ filename: "index.tsx", code: CounterWithImmerCode }]} />
       </div>
+      <div className={styles.demo}>
+        <SlicingTheStore />
+        <CodeDisplay code={[{ filename: "index.tsx", code: SlicingTheStoreCode }]} />
+      </div>
+      <div className={styles.demo}>
+        <BasicExample />
+        <CodeDisplay code={basicExCode} />
+      </div>
+      <div className={styles.demo}>
+        <WithSelector />
+        <CodeDisplay code={withSelectorExCode} />
+      </div>
     </>
   );
 }

packages/shared/src/client/demo/demo.tsx

@@ -1,5 +1,6 @@
 import { create } from "kosha";
 import { immer } from "kosha/middleware";
+import styles from "../demo.module.scss";
 
 interface CounterStore {
   count: number;
@@ -19,10 +20,12 @@ const useKoshaWithImmer = create(
 export const CounterWithImmer = () => {
   const { count, setCount } = useKoshaWithImmer();
   return (
-    <div>
+    <div className={styles.preview}>
       <h2>Example using immer middleware</h2>
-      <div>Count: {count}</div>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <div>
+        Count: {count}
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
     </div>
   );
 };