mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Enable Zustand (proposal #5) + convert isCreatingRoom singleton
Phase 2 of the refactor plan in docs/ARCHITECTURE.md.
Install
- yarn add zustand (^5, matches React 19 peer requirement).
Wiring
- src/state/createNitroStore.ts: replaces the previous prototype
(which threw on call) with a re-export of zustand's `create` under
the project-local name `createNitroStore`. Comments document the
convention (one store per domain, subscribe to slices not the whole
store).
First migration target
- src/components/navigator/views/navigatorRoomCreatorStore.ts (new):
a Zustand store with `isCreating: boolean` and `beginCreate()` —
the latter latches the flag to true, dispatches an internal
setTimeout to auto-reset after 5s, and replaces any in-flight timer
on re-entry. The timer handle lives in the store's closure, so a
remount of the view doesn't reset the lockout and StrictMode's
double-mount no longer schedules two pending timers.
- src/components/navigator/views/NavigatorRoomCreatorView.tsx:
removes the two module-level `let` variables that the React Compiler
was flagging ("Writing to a variable defined outside a component is
not allowed"). The component now reads `isCreating` via a slice
subscription and calls `beginCreate()` from the click handler. The
imperative guard (`if (isCreating) return`) uses
`useRoomCreatorStore.getState()` so it reads the latest value
synchronously without being a stale closure.
- Also cleans up `FC<{}>` -> `FC` while touching the file.
Verification
- yarn eslint on the three touched files: 1 pre-existing error
(the `setCategory(categories[0].id)` set-state-in-effect on the
categories hook, deliberately left as-is in Phase C — it's the
"init from late-arriving async data" pattern; baseline matches).
- yarn tsc: clean.
Migration path (per docs/ARCHITECTURE.md)
- This is the smallest possible Zustand pilot (~30 lines), chosen
because the let-singleton anti-pattern was the most obvious quick
win and the React Compiler was already complaining about it.
- Next adoption targets (cross-feature UI state): the toolbar's
active-window state (currently inside scattered Contexts), the
notification center's open-state, the catalog's currentPage/selection
state (after the god-hook split).
https://claude.ai/code/session_01GrR87LAqnAEyKG2ZbmQt5Q
This commit is contained in:
@@ -1,42 +1,15 @@
|
||||
/**
|
||||
* Skeleton for proposal #5 (unified UI store).
|
||||
* Re-export of zustand's `create` under a project-local name.
|
||||
*
|
||||
* NOT YET ENABLED — `zustand` is not in package.json.
|
||||
* To activate:
|
||||
* Convention: each domain owns one store file. Either:
|
||||
* - `src/state/<domain>.ts` for cross-feature stores
|
||||
* - `src/components/<area>/<feature>Store.ts` for feature-local stores
|
||||
*
|
||||
* yarn add zustand
|
||||
* Components subscribe to specific slices only:
|
||||
*
|
||||
* Then this file becomes:
|
||||
* const isCreating = useNavigatorRoomCreatorStore(s => s.isCreating);
|
||||
*
|
||||
* import { create } from 'zustand';
|
||||
* export const createNitroStore = create;
|
||||
*
|
||||
* The naming convention below documents the intended structure: each
|
||||
* feature owns one slice file under `src/features/<feature>/state/`,
|
||||
* importing `createNitroStore` from here.
|
||||
*
|
||||
* Example slice (to be created when zustand is installed):
|
||||
*
|
||||
* // src/features/wired-tools/state/wiredToolsSlice.ts
|
||||
* import { createNitroStore } from '../../../state/createNitroStore';
|
||||
*
|
||||
* type WiredToolsState = {
|
||||
* activeTab: 'monitor' | 'variables' | 'inspection' | 'chests' | 'settings';
|
||||
* setActiveTab: (tab: WiredToolsState['activeTab']) => void;
|
||||
* };
|
||||
*
|
||||
* export const useWiredToolsStore = createNitroStore<WiredToolsState>()((set) => ({
|
||||
* activeTab: 'monitor',
|
||||
* setActiveTab: (tab) => set({ activeTab: tab }),
|
||||
* }));
|
||||
*
|
||||
* First migration target suggested in docs/ARCHITECTURE.md is the
|
||||
* `let isCreatingRoom = false` / `createRoomTimeout` singleton pair in
|
||||
* NavigatorRoomCreatorView.tsx — a ~5-line conversion that removes a
|
||||
* react-compiler/react-compiler "writing outside component" violation.
|
||||
* Do NOT pull the whole store (`const all = useStore()`) — that
|
||||
* subscribes to every change and defeats the point.
|
||||
*/
|
||||
|
||||
export const createNitroStore = (): never =>
|
||||
{
|
||||
throw new Error('createNitroStore is not enabled. See docs/ARCHITECTURE.md proposal #5.');
|
||||
};
|
||||
export { create as createNitroStore } from 'zustand';
|
||||
|
||||
Reference in New Issue
Block a user