{ setEl(el); }} />;
```
### In factory interfaces
Use the `onRef` return type in the interface:
```typescript
export interface MySignals {
setEl$: Command<(() => void) | undefined, [HTMLElement | null]>;
}
```
## Signal Factory Pattern
Refactored the signal handling to avoid global singletons when multiple signals exist within a single page.
In previous requirements, we only needed a single chat session per page, so we used global singleton signals. This was not an issue at the time.
However, as we refactor the code to support multiple chat sessions within a single page, we must implement the Signal Factory pattern to prevent global singleton conflicts.
Each factory call returns fresh `state()`/`computed()`/`command()` instances, so multiple instances can coexist without sharing state.
### Module-level singletons
```typescript
// chat-message.ts
const internalLocalMessages$ = state
([]);
export const resetLocalMessages$ = command(({ set }) => {
set(internalLocalMessages$, []);
});
export const messages$ = computed(async (get) => {
/* ... */
});
export const allFinished$ = computed(async (get) => {
/* ... */
});
export const sendMessage$ = command(async ({ get, set }, prompt, signal) => {
/* ... */
});
// chat-auto-scroll.ts
import { onRef } from "../utils.ts";
const chatScrollContainer$ = state(null);
export const setChatScrollContainer$ = onRef(
command(({ set }, el: HTMLElement, signal: AbortSignal) => {
signal.addEventListener("abort", () => {
set(chatScrollContainer$, null);
});
set(chatScrollContainer$, el);
}),
);
export const autoScroll$ = command(({ get }) => {
/* ... */
});
```
```typescript
// View imports singletons directly — can't have two threads on screen
import {
messages$,
sendMessage$,
} from "../../signals/chat-page/chat-message.ts";
import { setChatScrollContainer$ } from "../../signals/chat-page/chat-auto-scroll.ts";
export function ChatPage() {
const msgs = useLastLoadable(messages$);
// ...
}
```
### Factory function returning a signals interface
The Signals Factory allows a single page to contain multiple sets of Signals.
While this approach is more complex than using a singleton, it provides a viable solution for managing multiple distinct page instances within a single view.
**Step 1 — Define the interface and factory:**
```typescript
// create-chat-thread.ts
import { command, computed, state, type Command, type Computed } from "ccstate";
import { onRef } from "../utils.ts";
export interface ChatThreadSignals {
messages$: Computed>;
allFinished$: Computed>;
sendMessage$: Command, [string, AbortSignal]>;
setScrollContainer$: Command<(() => void) | undefined, [HTMLElement | null]>;
draft: DraftSignals;
}
```
**Step 2 — Break into sub-factories for each concern:**
```typescript
function createMessageState(threadData$: Computed>) {
const internalLocalMessages$ = state([]);
const messages$ = computed(async (get) => {
const serverMsgs = (await get(threadData$))?.chatMessages ?? [];
const localMsgs = get(internalLocalMessages$);
return [...transformServerMessages(serverMsgs), ...localMsgs];
});
const allFinished$ = computed(async (get) => {
/* ... */
});
return {
internalLocalMessages$,
messages$,
allFinished$,
};
}
function createScrollSignals() {
const container$ = state(null);
const setScrollContainer$ = onRef(
command(({ set }, el: HTMLElement, signal: AbortSignal) => {
signal.addEventListener("abort", () => {
set(container$, null);
});
set(container$, el);
}),
);
return { setScrollContainer$ };
}
```
**Step 3 — Compose sub-factories in the main factory:**
```typescript
export function createChatThreadSignals(
threadId: string,
existingDraft?: DraftSignals,
): ChatThreadSignals {
const { threadData$, reloadThread$ } = createThreadData(threadId);
const {
internalLocalMessages$,
messages$,
allFinished$,
} = createMessageState(threadData$);
const { setScrollContainer$ } = createScrollSignals();
const draft = existingDraft ?? createDraftSignals();
const { sendMessage$ } = createMessageCommands({
threadId,
threadData$,
reloadThread$,
internalLocalMessages$,
draft,
});
return {
messages$,
allFinished$,
sendMessage$,
setScrollContainer$,
draft,
};
}
```
**Step 4 — Derive from route via package-scope computed, pass as prop:**
```typescript
// create-chat-thread.ts
export const currentChatThreadSignals$ = computed(
(get): ChatThreadSignals | null => {
const threadId = get(currentChatThreadId$);
if (!threadId) return null;
return createChatThreadSignals(threadId);
},
);
// chat-page-setup.ts
export const setupChatPage$ = command(
async ({ get, set }, signal: AbortSignal) => {
const threadId = get(currentChatThreadId$);
const thread = get(currentChatThreadSignals$)!;
set(
updatePage$,
createElement(ZeroChatThreadPage, { key: threadId, thread }),
);
// ...
await set(thread.loadMessages$, signal);
},
);
```
No manual cache needed — ccstate `computed` memoizes the last result. As long as `currentChatThreadId$` hasn't changed, the same `ChatThreadSignals` object is returned without re-creation.
**Step 5 — Components consume via props:**
```typescript
export function ZeroChatThreadPage({ thread }: { thread: ChatThreadSignals }) {
const messagesLoadable = useLastLoadable(thread.messages$);
const setScrollContainer = useSet(thread.setScrollContainer$);
// ... pass thread down to children ...
}
```
### Key rules
1. **Interface first** — define a `Signals` interface listing only the public signals. Keep internal `state()` atoms private to the factory.
2. **Sub-factories for each concern** — split message state, scroll, draft, commands, etc. into separate functions. The main factory composes them.
3. **Dependencies via parameters** — sub-factories receive the signals they depend on as arguments, not module-level imports.
4. **Pass as React props** — the factory result is a plain object, so pass it as a prop. Use `useGet(thread.someSignal$)` / `useSet(thread.someCommand$)` in components.
5. **`key` prop for remount** — when creating the component element, use `key: threadId` so React remounts when the thread changes, avoiding stale hook state.
6. **Allow dependency injection** — accept optional existing signal groups (e.g., `existingDraft?: DraftSignals`) so the caller can share state across factories when needed.
7. **Helpers that were only used by singletons can be inlined** — if a hook or utility existed only to wrap singleton signals (e.g., `useFileUploadHandlers`), inline its logic directly into the component once signals are injected via props.