mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 15:22:55 +01:00
123 lines
4.3 KiB
Markdown
123 lines
4.3 KiB
Markdown
# TASK-001B: React 19 Migration Completion
|
|
|
|
## Status: ✅ COMPLETED
|
|
|
|
## Overview
|
|
Complete the React 19 TypeScript compatibility migration that was started in TASK-001. The editor currently has 90 TypeScript errors preventing it from running.
|
|
|
|
## Problem Statement
|
|
After the initial React 17→19 upgrade in TASK-001, only a subset of files were fixed. The editor build fails with 90 errors related to:
|
|
- Removed React 18/19 APIs (`render`, `unmountComponentAtNode`)
|
|
- Removed TypeScript types (`ReactChild`, `ReactFragment`, `ReactText`)
|
|
- Stricter `useRef()` typing
|
|
- Stricter ref callback signatures
|
|
- Other breaking type changes
|
|
|
|
## Error Categories
|
|
|
|
| Category | Count | Fix Pattern |
|
|
|----------|-------|-------------|
|
|
| `ReactDOM.render` removed | ~20 | Use `createRoot().render()` |
|
|
| `unmountComponentAtNode` removed | ~10 | Use `root.unmount()` |
|
|
| `useRef()` needs argument | ~15 | Add type param and `null` |
|
|
| `ReactChild` type removed | ~5 | Use `React.ReactNode` |
|
|
| `ReactFragment` type removed | 1 | Use `Iterable<React.ReactNode>` |
|
|
| `ReactText` type removed | 1 | Use `string \| number` |
|
|
| Ref callback return type | ~8 | Return `void` not element |
|
|
| Unused `@ts-expect-error` | 1 | Remove directive |
|
|
| `algoliasearch` API change | 1 | Use named export |
|
|
| Other type issues | ~28 | Case-by-case |
|
|
|
|
## Files to Fix
|
|
|
|
### noodl-core-ui (Critical)
|
|
- [ ] `src/types/global.ts` - Remove ReactChild, ReactFragment, ReactText
|
|
- [ ] `src/components/layout/BaseDialog/BaseDialog.tsx` - useRef
|
|
- [ ] `src/components/layout/Carousel/Carousel.tsx` - ref callback
|
|
- [ ] `src/components/property-panel/PropertyPanelSelectInput/PropertyPanelSelectInput.tsx` - useRef
|
|
- [ ] `src/components/property-panel/PropertyPanelSliderInput/PropertyPanelSliderInput.tsx` - type issue
|
|
- [ ] `src/components/popups/PopupSection/PopupSection.tsx` - useRef, @ts-expect-error
|
|
|
|
### noodl-editor (Critical)
|
|
- [ ] `src/shared/ReactView.ts` - render, unmountComponentAtNode
|
|
- [ ] `src/editor/src/views/VisualCanvas/CanvasView.ts` - render, unmountComponentAtNode
|
|
- [ ] `src/editor/src/views/VisualCanvas/ShowInspectMenu.tsx` - render, unmountComponentAtNode
|
|
- [ ] `src/editor/src/views/HelpCenter/HelpCenter.tsx` - useRef, algoliasearch
|
|
- [ ] `src/editor/src/views/EditorTopbar/EditorTopbar.tsx` - multiple useRef
|
|
- [ ] `src/editor/src/views/NodeGraphComponentTrail/NodeGraphComponentTrail.tsx` - useRef
|
|
- [ ] `src/editor/src/views/NodePicker/components/*` - ReactChild imports
|
|
- [ ] `src/editor/src/views/SidePanel/SidePanel.tsx` - ReactChild
|
|
- [ ] `src/editor/src/views/panels/propertyeditor/*.ts` - render, unmountComponentAtNode
|
|
- [ ] `src/editor/src/views/documents/ComponentDiffDocument/CodeDiffDialog.tsx` - useRef
|
|
- [ ] Many more in propertyeditor folder...
|
|
|
|
## Fix Patterns
|
|
|
|
### Pattern 1: ReactDOM.render → createRoot
|
|
```typescript
|
|
// OLD (React 17)
|
|
import ReactDOM from 'react-dom';
|
|
ReactDOM.render(<Component />, container);
|
|
|
|
// NEW (React 18+)
|
|
import { createRoot } from 'react-dom/client';
|
|
const root = createRoot(container);
|
|
root.render(<Component />);
|
|
```
|
|
|
|
### Pattern 2: unmountComponentAtNode → root.unmount
|
|
```typescript
|
|
// OLD (React 17)
|
|
ReactDOM.unmountComponentAtNode(container);
|
|
|
|
// NEW (React 18+)
|
|
// Store root when creating, then:
|
|
root.unmount();
|
|
```
|
|
|
|
### Pattern 3: useRef with type
|
|
```typescript
|
|
// OLD
|
|
const ref = useRef();
|
|
|
|
// NEW
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
```
|
|
|
|
### Pattern 4: Ref callbacks
|
|
```typescript
|
|
// OLD - returns element
|
|
ref={(el: HTMLDivElement) => this.el = el}
|
|
|
|
// NEW - returns void
|
|
ref={(el: HTMLDivElement) => { this.el = el; }}
|
|
```
|
|
|
|
### Pattern 5: Removed types
|
|
```typescript
|
|
// OLD
|
|
import { ReactChild, ReactFragment, ReactText } from 'react';
|
|
|
|
// NEW - use equivalent types
|
|
type ReactChild = React.ReactNode; // or just use ReactNode directly
|
|
type ReactText = string | number;
|
|
// ReactFragment → Iterable<React.ReactNode> or just ReactNode
|
|
```
|
|
|
|
## Success Criteria
|
|
- [ ] `npm run dev` compiles without errors
|
|
- [ ] Editor window opens and displays
|
|
- [ ] Basic editor functionality works
|
|
- [ ] No TypeScript errors: `npx tsc --noEmit`
|
|
|
|
## Estimated Time
|
|
4-6 hours (90 errors across ~40 files)
|
|
|
|
## Dependencies
|
|
- TASK-001 (completed partially)
|
|
|
|
## Notes
|
|
- Many files use the legacy `ReactDOM.render` pattern for dynamic rendering
|
|
- Consider creating a helper utility for the createRoot pattern
|
|
- Some files may need runtime root tracking for unmount
|