### Install Project Dependencies with pnpm

Source: https://github.com/react18-tools/kosha/blob/main/TODO.md

Command to install all project dependencies using pnpm. Running this command will also automatically trigger the repository rebranding script.

```Shell
pnpm i
```

--------------------------------

### Install pnpm Globally

Source: https://github.com/react18-tools/kosha/blob/main/TODO.md

Instructions to install the pnpm package manager globally using npm, which is required for managing project dependencies.

```Shell
npm i -g pnpm
```

--------------------------------

### Start Monorepo Development Servers

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

Initiates the development environment for all apps and packages in the monorepo, enabling live reloading and easier debugging.

```bash
pnpm dev
```

--------------------------------

### Install Kosha using package managers

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Instructions for installing the Kosha library using popular package managers like pnpm, npm, or yarn. Choose the command that matches your project's setup.

```bash
pnpm add kosha
```

```bash
npm install kosha
```

```bash
yarn add kosha
```

--------------------------------

### Generate Library Components with Plop

Source: https://github.com/react18-tools/kosha/blob/main/TODO.md

Command to run Plop, a micro-generator, which provides prompts to generate new server or client components for your library.

```Shell
yarn plop
```

--------------------------------

### Kosha Modular Slice Composition Example

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Provides an example of how to structure a Kosha store using modular slices. This pattern promotes separation of concerns, reusability, and allows each slice to access the full store via `get()` for cross-slice coordination, enhancing organization for large applications.

```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),
}));
```

--------------------------------

### Install Kosha using package managers

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Instructions for installing the Kosha state management library using pnpm, npm, or yarn. Choose your preferred package manager to add Kosha to your project dependencies.

```bash
pnpm add kosha
```

```bash
npm install kosha
```

```bash
yarn add kosha
```

--------------------------------

### Execute Repository Rebranding Script

Source: https://github.com/react18-tools/kosha/blob/main/TODO.md

Command to manually run the rebranding script from the root directory. This script adjusts workflows and rebrands the repository based on configuration.

```Shell
node scripts/rebrand.js
```

--------------------------------

### Create a Kosha store with initial state and actions

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Demonstrates how to initialize a global state store using `create` from 'kosha'. This example defines an initial `count` state and an `increment` action that updates the count. The `set` function is used to modify the store's state.

```tsx
import { create } from "kosha";

const useKosha = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));
```

--------------------------------

### Zustand Slice Pattern Definition

Source: https://github.com/react18-tools/kosha/blob/main/tmp.md

This TypeScript snippet illustrates the typical definition of a slice creator in Zustand. It shows how the `StateCreator` type is used, where `set` and `get` are generally typed to the specific slice, limiting direct access to sibling slices without explicit casting.

```TypeScript
type Store = UserSlice & ThemeSlice;
const createUserSlice: StateCreator<Store, [], [], UserSlice> = (set, get) => ({ ... })
```

--------------------------------

### Kosha State Update with Immer Middleware

Source: https://github.com/react18-tools/kosha/blob/main/README.md

This TypeScript example showcases Kosha's built-in Immer middleware, which simplifies immutable state updates. By wrapping the store creation with `immer()`, developers can write direct mutable logic within the `set` callback, and the middleware automatically handles the immutable transformation using Immer's `produce` function.

```ts
import { create } from "kosha";
import { immer } from "kosha/middleware";

const useKosha = create(
  immer(set => ({
    todos: [],
    addTodo: (item: string) =>
      set(state => {
        state.todos.push(item); // safe mutable update with immer middleware
      }),
  })),
);
```

--------------------------------

### Kosha State Update with Direct Immer `produce`

Source: https://github.com/react18-tools/kosha/blob/main/README.md

This TypeScript snippet demonstrates how to perform immutable state updates in Kosha by directly wrapping the `set` function's callback with Immer's `produce`. This allows developers to write mutable-looking logic while ensuring the state remains immutable. It's noted that Immer needs to be installed separately.

```ts
import { produce } from "immer";

create(set => ({
  todos: [],
  addTodo: item =>
    set(
      produce(state => {
        state.todos.push(item);
      }),
    ),
}));
```

--------------------------------

### Update Kosha store state outside React components

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Explains how to dispatch actions and update the Kosha store's state from outside a React component, for example, in utility functions, event handlers, or non-React contexts. This is achieved by directly accessing the store's `getState()` method and calling an action.

```ts
useKosha.getState().increment();
```

--------------------------------

### Build All Monorepo Apps and Packages

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

Executes the build process for all applications and packages within the TurboRepo monorepo, preparing them for deployment or distribution.

```bash
pnpm build
```

--------------------------------

### Run Monorepo Unit Tests

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

Executes all configured unit tests across the monorepo to ensure code quality and functionality.

```bash
pnpm test
```

--------------------------------

### Import Kosha Test Utilities for Store Creation and Reset

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Illustrates the recommended way to import Kosha's built-in test utilities. These utilities provide specialized `create` and `resetAllStores` functions designed to facilitate isolated and repeatable testing of Kosha stores by allowing them to be reset to their initial state.

```TypeScript
import { create, resetAllStores } from "kosha/utils/test";
```

--------------------------------

### Kosha Test Utilities for Store Creation and Reset

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Provides utilities (`create`, `resetAllStores`) from `kosha/utils/test` to facilitate testing. The `create` function wraps the actual store creation to store a reset function, allowing all created test stores to be reset to their initial state via `resetAllStores`.

```ts
// utils/test.ts
import { create as actualCreate, BaseType, StoreCreator } from "kosha";

export const storeResetFns = new Set<() => void>();

export const create = <T extends BaseType>(creator: StoreCreator<T>) => {
  const useStore = actualCreate(creator);
  const initial = useStore.getState();
  storeResetFns.add(() => useStore.setState(initial!, true));
  return useStore;
};

export const resetAllStores = () => storeResetFns.forEach(fn => fn());
```

--------------------------------

### Internal Implementation of Kosha's Test Utility Module

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Presents the full source code for the `kosha/utils/test` module. This code reveals how the `create` function wraps the standard store creation to automatically track and register store reset functions, and how `resetAllStores` orchestrates the reset of all registered stores, enabling robust test isolation.

```TypeScript
// utils/test.ts
import { create as actualCreate, BaseType, StoreCreator } from "kosha";

export const storeResetFns = new Set<() => void>();

export const create = <T extends BaseType>(creator: StoreCreator<T>) => {
  const useStore = actualCreate(creator);
  const initial = useStore.getState();
  storeResetFns.add(() => useStore.setState(initial!, true));
  return useStore;
};

export const resetAllStores = () => storeResetFns.forEach(fn => fn());
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

Applies consistent code formatting across the entire codebase using Prettier, improving readability and maintaining a uniform style.

```bash
pnpm format
```

--------------------------------

### Create a Kosha store with initial state and actions

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Demonstrates how to initialize a global state store using the `create` function from 'kosha'. This snippet defines an initial 'count' state and an 'increment' action that updates the count.

```tsx
import { create } from "kosha";

const useKosha = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));
```

--------------------------------

### Run Code Linting Checks

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

Performs static code analysis to identify programmatic errors, bugs, stylistic errors, and suspicious constructs, ensuring code quality before pull requests.

```bash
pnpm lint
```

--------------------------------

### Kosha Modular Store Composition with Slices

Source: https://github.com/react18-tools/kosha/blob/main/README.md

This TypeScript snippet illustrates how to compose a large Kosha store from smaller, focused 'slices'. It defines separate interfaces and creator functions for different state domains (e.g., `CounterSlice`, `ThemeSlice`) and then combines them into a single `StoreType`. This pattern promotes separation of concerns, reusability, and allows full store access within each slice.

```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),
}));
```

--------------------------------

### Remove Merged Local Git Branches

Source: https://github.com/react18-tools/kosha/blob/main/contributing.md

A utility command to clean up local Git branches that have already been merged into the 'main' branch, excluding 'main' itself, helping to keep the local repository tidy.

```bash
git branch --merged main | grep -v '^[ *]*main$' | xargs git branch -d
```

--------------------------------

### Kosha State Update with Direct Immer Integration

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Demonstrates how to integrate Immer directly with Kosha's `create` function to enable mutable-looking state updates that are internally immutable. This approach requires manual application of Immer's `produce` function within the `set` callback.

```ts
import { produce } from "immer";

create(set => ({
  todos: [],
  addTodo: item =>
    set(
      produce(state => {
        state.todos.push(item);
      }),
    ),
}));
```

--------------------------------

### Integrate Kosha Store Reset into Test Framework's `afterEach` Hook

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Demonstrates how to set up a test environment to automatically reset all Kosha stores after each test. By calling `resetAllStores` within an `afterEach` hook (e.g., from Vitest or Jest), this pattern ensures that tests run in a clean state, preventing side effects from previous tests.

```TypeScript
import { act } from "react-dom/test-utils";
import { afterEach } from "vitest"; // or jest
import { resetAllStores } from "kosha/utils/test";

afterEach(() => {
  act(() => resetAllStores());
});
```

--------------------------------

### Define Async Functions in Kosha Store for Data Fetching

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Demonstrates how to define asynchronous functions directly within a Kosha store. This pattern allows for operations like fetching data from an API and then updating the store's state with the results, ensuring reactive updates in components.

```TypeScript
const useStore = create(set => ({
  fetchUser: async () => {
    const user = await fetch("/api/user").then(res => res.json());
    set({ user });
  }
}));
```

--------------------------------

### Kosha Immer Middleware Usage

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Illustrates the use of Kosha's built-in Immer middleware to simplify immutable state updates. The middleware automatically applies Immer's `produce` function, allowing developers to write direct mutable logic within the `set` function while maintaining immutability under the hood.

```ts
import { create } from "kosha";
import { immer } from "kosha/middleware";

const useKosha = create(
  immer(set => ({
    todos: [],
    addTodo: (item: string) =>
      set(state => {
        state.todos.push(item); // safe mutable update with immer middleware
      }),
  })),
);
```

--------------------------------

### Define Async Functions in Kosha Store

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Demonstrates how to define asynchronous functions within a Kosha store to handle operations like fetching data. The `set` function is used to update the state after the async operation completes.

```tsx
const useStore = create(set => ({
  fetchUser: async () => {
    const user = await fetch("/api/user").then(res => res.json());
    set({ user });
  },
}));
```

--------------------------------

### Correct state update in Kosha (return new object)

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Demonstrates the correct approach to updating state in Kosha by returning a new object reference. This ensures that listeners are triggered and the UI re-renders correctly when the state changes.

```ts
create(set => ({
  todos: [],
  addTodo: item =>
    set(state => ({
      ...state,
      todos: [...state.todos, item], // ✅ returns a new object
    })),
}));
```

--------------------------------

### Select specific state slices from Kosha store for optimized re-renders

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Illustrates how to optimize component re-renders by selecting only specific parts of the Kosha store's state or actions using a selector function. This ensures the component only re-renders when the selected values actually change, improving performance. Both individual and destructured selection methods are shown.

```tsx
const count = useKosha(state => state.count);
const increment = useKosha(state => state.increment);

// or use shorthand
const { count, increment } = useKosha(({ count, increment }) => ({ count, increment }));
```

--------------------------------

### Select specific state slices from Kosha store

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Illustrates how to optimize component re-renders by selecting only specific parts of the state or actions using a selector function with `useKosha`. This ensures the component only re-renders when the selected values change.

```tsx
const count = useKosha(state => state.count);
const increment = useKosha(state => state.increment);

// or use shorthand
const { count, increment } = useKosha(({ count, increment }) => ({ count, increment }));
```

--------------------------------

### Reset Kosha Stores After Each Test

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Illustrates how to integrate Kosha's `resetAllStores` utility into a test framework's `afterEach` hook (e.g., Vitest or Jest). This ensures that all Kosha stores are reset to their initial state before each test, providing clean test isolation.

```ts
import { act } from "react-dom/test-utils";
import { afterEach } from "vitest"; // or jest
import { resetAllStores } from "kosha/utils/test";

afterEach(() => {
  act(() => resetAllStores());
});
```

--------------------------------

### Consume entire Kosha store in React component

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Shows how to access the full store state and actions by calling `useKosha()` without a selector. Be aware that this approach will trigger a re-render for the component whenever any part of the store's state changes.

```tsx
const { count, increment } = useKosha();
```

--------------------------------

### Correct state mutation in Kosha: Returning a new object

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Shows the correct method for updating state in Kosha by returning a new object with the updated values, specifically for array modifications. This ensures that a new reference is created, which correctly triggers Kosha's change detection, causing listeners to update and the UI to re-render as expected.

```ts
create(set => ({
  todos: [],
  addTodo: item =>
    set(state => ({
      ...state,
      todos: [...state.todos, item], // ✅ returns a new object
    })),
}));
```

--------------------------------

### Consume entire Kosha store in React component

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Shows how to access all state properties and actions from a Kosha store directly using the `useKosha()` hook without a selector. Be aware that this approach will trigger a re-render of the component for any change within the store, even if the accessed properties themselves haven't changed.

```tsx
const { count, increment } = useKosha();
```

--------------------------------

### Update Kosha store state outside React components

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Explains how to trigger state updates directly from outside React components, such as in utility functions or event handlers, by accessing the store's state and actions via `useKosha.getState()`.

```ts
useKosha.getState().increment();
```

--------------------------------

### Incorrect state mutation in Kosha: In-place array modification

Source: https://github.com/react18-tools/kosha/blob/main/lib/README.md

Demonstrates an incorrect way to update state in Kosha where an in-place mutation is performed on an array. Because the `set` function returns the same object reference, Kosha's change detection (which uses shallow comparison) will not trigger listeners, preventing the UI from re-rendering despite the state technically changing.

```ts
create(set => ({
  todos: [],
  addTodo: item =>
    set(state => {
      state.todos.push(item); // ❌ in-place mutation
      return state; // same reference!
    }),
}));
```

--------------------------------

### Incorrect state mutation in Kosha (in-place)

Source: https://github.com/react18-tools/kosha/blob/main/README.md

Highlights an incorrect way to update state in Kosha by mutating an object in-place. Because Kosha detects changes by comparing object references, in-place mutations will not trigger listeners or UI re-renders.

```ts
create(set => ({
  todos: [],
  addTodo: item =>
    set(state => {
      state.todos.push(item); // ❌ in-place mutation
      return state; // same reference!
    }),
}));
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.