(api.hyperion.users.v1.list, {
responseSchema: GetUsersResponseSchema,
});
}
export function useGetUsers() {
return useQuery({
queryKey: [getUsersKey],
queryFn: getUsers,
});
}
```
--------------------------------
### Component Supporting Types (TypeScript)
Source: https://github.com/codebelt/classy-store/blob/main/docs/code-style-guide.md
Defines the TypeScript types used within a component, such as the User type. This file separates type definitions from the main component logic.
```typescript
// UserCard.types.ts
export type User = {
id: string;
name: string;
status: 'active' | 'inactive';
};
```
--------------------------------
### Create a Reactive Store Instance
Source: https://github.com/codebelt/classy-store/blob/main/website/docs/index.md
Creates a reactive store instance from a defined class using the `createClassyStore` function. This function wraps the class instance in a reactive proxy.
```typescript
import {createClassyStore} from '@codebelt/classy-store';
const todoStore = createClassyStore(new TodoStore());
```
--------------------------------
### Component File Structure (TypeScript/JSX)
Source: https://github.com/codebelt/classy-store/blob/main/docs/code-style-guide.md
Illustrates the organization of a React component file, including its props type and JSX. It shows how to import types and utility functions from supporting files.
```typescript
// UserCard.tsx
import {formatUserName} from './UserCard.utils';
import type {User} from './UserCard.types';
type Props = {
user: User;
onSelect: (id: string) => void;
};
export function UserCard({user, onSelect}: Props) {
return onSelect(user.id)}>{formatUserName(user.name)}
;
}
```
--------------------------------
### Combining withHistory with devtools Utility
Source: https://github.com/codebelt/classy-store/blob/main/website/docs/HISTORY_TUTORIAL.md
Explains how to integrate `withHistory` with the `devtools` utility for a comprehensive debugging experience. This allows developers to inspect all mutations, including undo and redo actions, within the browser's Redux DevTools.
```typescript
import {devtools, withHistory} from '@codebelt/classy-store/utils';
const store = createClassyStore(new MyStore());
devtools(store, { name: 'MyStore' });
const history = withHistory(store);
// DevTools shows every mutation including undo/redo restores.
// Time-travel in DevTools is independent of withHistory's stack.
```
--------------------------------
### API: createClassyStore Function
Source: https://github.com/codebelt/classy-store/blob/main/website/static/llms-full.txt
Explains the 'createClassyStore' function, which takes a class instance and wraps it in a reactive Proxy. It highlights features like automatic method binding, memoized getters, and lazy deep-proxied nested objects.
```typescript
const myStore = createClassyStore(new MyClass());
// Methods are automatically bound so `this` mutations go through the proxy
// Getters are automatically memoized — they only recompute when a dependency changes (like MobX `@computed`)
// Nested objects/arrays are lazily deep-proxied on first access
```
--------------------------------
### Classy-Store Write Proxy Memoization
Source: https://github.com/codebelt/classy-store/blob/main/website/docs/ARCHITECTURE.md
Explains the write proxy memoization mechanism in Classy-Store's core. It uses `evaluateComputed` to run getters with dependency tracking, caching results and dependencies.
```mermaid
flowchart TD
GetterAccess["store.filtered accessed"]
CheckDeps{"Dependencies\nchanged?"}
ReturnCached["Return cached value"]
Recompute["Re-run getter with\ndependency tracking"]
CacheResult["Cache result + deps"]
GetterAccess --> CheckDeps
CheckDeps -->|No| ReturnCached
CheckDeps -->|Yes| Recompute
Recompute --> CacheResult
CacheResult --> ReturnCached
```
--------------------------------
### Create a Classy Store
Source: https://github.com/codebelt/classy-store/blob/main/website/docs/DEVTOOLS_TUTORIAL.md
Demonstrates how to create a new store using `createClassyStore` with a custom class definition. This sets up the initial state and methods for the store.
```typescript
import {createClassyStore} from '@codebelt/classy-store';
class CounterStore {
count = 0;
step = 1;
get doubled() {
return this.count * 2;
}
increment() {
this.count += this.step;
}
decrement() {
this.count -= this.step;
}
setStep(step: number) {
this.step = step;
}
}
export const counterStore = createClassyStore(new CounterStore());
```
--------------------------------
### Clearing Classy Store Persisted Data
Source: https://github.com/codebelt/classy-store/blob/main/website/docs/PERSIST_TUTORIAL.md
Removes the stored data associated with a store without altering its current in-memory state. Subsequent loads will start with the store's default values.
```typescript
// Remove the stored data without affecting in-memory state
await handle.clear();
// The store still has its current state in memory.
// Next page load starts with class defaults (nothing in storage).
```