mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# TASK-002: React 19 UI Fixes
|
|
|
|
## Overview
|
|
|
|
This task addresses critical React 19 API migration issues that were not fully completed during Phase 1. These issues are causing multiple UI bugs in the node graph editor.
|
|
|
|
## Problem Statement
|
|
|
|
After the React 19 migration in Phase 1, several legacy React 17 APIs are still being used in the codebase:
|
|
- `ReactDOM.render()` - Removed in React 18+
|
|
- `ReactDOM.unmountComponentAtNode()` - Removed in React 18+
|
|
- Incorrect `createRoot()` usage (creating new roots on every render)
|
|
|
|
These errors crash the node graph editor's mouse event handlers, causing:
|
|
- Right-click shows 'grab' hand instead of node picker
|
|
- Plus icon node picker appears at wrong position and overflows
|
|
- Node config panel doesn't appear when clicking nodes
|
|
- Wire connectors don't respond to clicks
|
|
|
|
## Error Messages
|
|
|
|
```
|
|
ReactDOM.render is not a function
|
|
at DebugInspectorPopup.render (nodegrapheditor.debuginspectors.js:60)
|
|
|
|
ReactDOM.unmountComponentAtNode is not a function
|
|
at DebugInspectorPopup.dispose (nodegrapheditor.debuginspectors.js:64)
|
|
|
|
You are calling ReactDOMClient.createRoot() on a container that has already
|
|
been passed to createRoot() before.
|
|
at _renderReact (commentlayer.ts:145)
|
|
```
|
|
|
|
## Affected Files
|
|
|
|
| File | Issue | Priority |
|
|
|------|-------|----------|
|
|
| `nodegrapheditor.debuginspectors.js` | Uses legacy `ReactDOM.render()` & `unmountComponentAtNode()` | **Critical** |
|
|
| `commentlayer.ts` | Creates new `createRoot()` on every render | **High** |
|
|
| `TextStylePicker.jsx` | Uses legacy `ReactDOM.render()` & `unmountComponentAtNode()` | **Medium** |
|
|
|
|
## Solution
|
|
|
|
### Pattern 1: Replace ReactDOM.render() / unmountComponentAtNode()
|
|
|
|
```javascript
|
|
// Before (React 17):
|
|
const ReactDOM = require('react-dom');
|
|
ReactDOM.render(<Component />, container);
|
|
ReactDOM.unmountComponentAtNode(container);
|
|
|
|
// After (React 18+):
|
|
import { createRoot } from 'react-dom/client';
|
|
const root = createRoot(container);
|
|
root.render(<Component />);
|
|
root.unmount();
|
|
```
|
|
|
|
### Pattern 2: Reuse Existing Roots
|
|
|
|
```typescript
|
|
// Before (Wrong):
|
|
_renderReact() {
|
|
this.root = createRoot(this.div);
|
|
this.root.render(<Component />);
|
|
}
|
|
|
|
// After (Correct):
|
|
_renderReact() {
|
|
if (!this.root) {
|
|
this.root = createRoot(this.div);
|
|
}
|
|
this.root.render(<Component />);
|
|
}
|
|
```
|
|
|
|
## Related Tasks
|
|
|
|
- TASK-001B-react19-migration (Phase 1) - Initial React 19 migration
|
|
- TASK-006-typescript5-upgrade (Phase 1) - TypeScript 5 upgrade
|
|
|
|
## References
|
|
|
|
- [React 18 Migration Guide](https://react.dev/blog/2022/03/08/react-18-upgrade-guide)
|
|
- [createRoot API](https://react.dev/reference/react-dom/client/createRoot)
|