diff --git a/prd.json b/prd.json index d12839d..90f4662 100644 --- a/prd.json +++ b/prd.json @@ -181,7 +181,7 @@ "Typecheck passes" ], "priority": 10, - "passes": false, + "passes": true, "notes": "Dependencies: US-054, US-058, US-059" }, { diff --git a/progress.txt b/progress.txt index dea5ea5..52f252f 100644 --- a/progress.txt +++ b/progress.txt @@ -41,6 +41,8 @@ - `Condition.value` supports `number | string | boolean` — always check variable type before rendering value inputs for edge conditions. - `OptionConditionEditor` at `src/components/editor/OptionConditionEditor.tsx` handles choice option conditions. Same pattern as `ConditionEditor` but with simpler props (no edgeId). - `ChoiceOption` type includes optional `condition?: Condition`. When counting variable usage, check variable nodes + edge conditions + choice option conditions. +- React Compiler lint forbids `setState` in effects and reading `useRef().current` during render. Use `useState(() => computeValue())` lazy initializer pattern for one-time initialization logic. +- For detecting legacy data shape (pre-migration), pass a flag from the server component (page.tsx) to the client component, since only the server reads raw DB data. --- @@ -151,3 +153,18 @@ - The `getVariableUsageCount` in FlowchartEditor now counts three sources: variable nodes, edge conditions, and choice option conditions - No browser testing tools are available; manual verification is needed. --- + +## 2026-01-23 - US-062 +- What was implemented: Auto-migration of existing free-text speaker/variable values to character/variable definitions on project load +- Files changed: + - `src/app/editor/[projectId]/page.tsx` - Added `needsMigration` flag that detects whether raw DB data has characters/variables arrays + - `src/app/editor/[projectId]/FlowchartEditor.tsx` - Added `computeMigration()` helper function and `needsMigration` prop; migration result initializes state directly via lazy `useState` to avoid React Compiler lint issues + - `src/components/editor/nodes/DialogueNode.tsx` - Included pre-existing US-058 changes (speaker dropdown with Combobox) that were not previously committed +- **Learnings for future iterations:** + - React Compiler lint (`react-hooks/set-state-in-effect`) forbids calling `setState` synchronously within `useEffect`. For one-time initialization logic, compute the result and use it directly in state initializers instead. + - React Compiler lint (`react-hooks/refs`) forbids reading `useRef().current` during render. Use `useState(() => ...)` lazy initializer pattern instead of `useRef` for values computed once at mount. + - The migration detection relies on `rawData.characters` being `undefined` (old projects) vs `[]` (migrated projects). The `page.tsx` server component passes `needsMigration` flag to the client component since only the server has access to the raw DB shape. + - `computeMigration` is a pure function called outside the component render cycle (via lazy useState). It uses `nanoid()` for IDs, so it must only be called once — lazy `useState` ensures this. + - The toast message for migration is set as initial state, so it shows immediately on first render without needing an effect. + - No browser testing tools are available; manual verification is needed. +---