mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-11 23:02:56 +01:00
Finished component sidebar updates, with one small bug remaining and documented
This commit is contained in:
Richard Osborne
@@ -0,0 +1,211 @@
|
||||
# TASK-001B Changelog: React 19 Migration Completion
|
||||
|
||||
---
|
||||
|
||||
## [2025-07-12] - Session 4: Complete Source Code Fixes ✅
|
||||
|
||||
### Summary
|
||||
Completed all React 19 source code TypeScript errors. All errors now resolved from application source files.
|
||||
|
||||
**Result: 0 source file errors remaining** (only node_modules type conflicts remain - Jest/Jasmine and algolia-helper)
|
||||
|
||||
### Files Fixed This Session
|
||||
|
||||
#### noodl-core-ui - cloneElement and type fixes
|
||||
- [x] `src/components/property-panel/PropertyPanelSliderInput/PropertyPanelSliderInput.tsx` - Fixed linearMap call with Number() conversion for min/max
|
||||
- [x] `src/components/inputs/Checkbox/Checkbox.tsx` - Added isValidElement check and ReactElement type assertion for cloneElement
|
||||
- [x] `src/components/popups/MenuDialog/MenuDialog.tsx` - Added isValidElement check and ReactElement type assertion for cloneElement
|
||||
|
||||
#### noodl-editor - useRef() fixes (React 19 requires initial value argument)
|
||||
- [x] `src/editor/src/views/EditorTopbar/EditorTopbar.tsx` - Fixed 7 useRef calls with proper types and null initial values
|
||||
- [x] `src/editor/src/views/CommentLayer/CommentForeground.tsx` - Fixed colorPickerRef with HTMLDivElement type
|
||||
- [x] `src/editor/src/views/documents/ComponentDiffDocument/CodeDiffDialog.tsx` - Fixed codeEditorRef with HTMLDivElement type
|
||||
- [x] `src/editor/src/views/HelpCenter/HelpCenter.tsx` - Fixed rootRef with HTMLDivElement type + fixed algoliasearch import (liteClient named export)
|
||||
- [x] `src/editor/src/views/NodeGraphComponentTrail/NodeGraphComponentTrail.tsx` - Fixed itemRef with HTMLDivElement type
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditor.tsx` - Fixed rootRef and editorRef with HTMLDivElement type
|
||||
|
||||
#### noodl-editor - Ref callback return type fixes (React 19 requires void return)
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/components/VariantStates/PickVariantPopup.tsx` - Changed ref callback to use block syntax `{ if (ref) setTimeout(...); }`
|
||||
|
||||
#### noodl-editor - Unused @ts-expect-error removal
|
||||
- [x] `src/editor/src/views/DeployPopup/DeployPopup.tsx` - Replaced @ts-expect-error with proper type assertion for overflowY: 'overlay'
|
||||
|
||||
### Current Status
|
||||
|
||||
**TypeScript Error Count:**
|
||||
- Source files: **0 errors** ✅
|
||||
- node_modules (pre-existing conflicts): 33 errors (Jest/Jasmine type conflicts, algolia-helper types)
|
||||
|
||||
**Webpack Build:** ✅ Compiles successfully
|
||||
|
||||
---
|
||||
|
||||
## [2025-07-12] - Session 3: ReactChild Fixes and Partial ReactDOM Migration
|
||||
|
||||
### Summary
|
||||
Continued fixing React 19 migration issues. Fixed ReactChild import issues and made progress on remaining ReactDOM migrations.
|
||||
|
||||
### Files Fixed This Session
|
||||
|
||||
#### noodl-editor - ReactChild imports
|
||||
- [x] `src/editor/src/views/NodePicker/components/NodePickerCategory/NodePickerCategory.tsx` - Removed unused ReactChild import
|
||||
- [x] `src/editor/src/views/NodePicker/components/NodePickerSection/NodePickerSection.tsx` - Removed unused ReactChild import
|
||||
- [x] `src/editor/src/views/NodePicker/components/NodePickerSubCategory/NodePickerSubCategory.tsx` - Changed ReactChild to ReactNode
|
||||
- [x] `src/editor/src/views/SidePanel/SidePanel.tsx` - Changed React.ReactChild to React.ReactElement
|
||||
|
||||
#### noodl-editor - ref callbacks (partial)
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/components/QueryEditor/QueryGroup/QueryGroup.tsx` - Fixed via sed
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/components/QueryEditor/QuerySortingEditor/QuerySortingEditor.tsx` - Fixed via sed
|
||||
|
||||
#### noodl-editor - ReactDOM migrations (attempted)
|
||||
Several files were edited but may need re-verification:
|
||||
- `src/editor/src/views/panels/propertyeditor/DataTypes/TextStyleType.ts`
|
||||
- `src/editor/src/views/panels/propertyeditor/DataTypes/ColorPicker/ColorType.ts`
|
||||
- `src/editor/src/views/panels/propertyeditor/components/QueryEditor/utils.ts`
|
||||
- `src/editor/src/views/panels/propertyeditor/Pages/Pages.tsx`
|
||||
- `src/editor/src/views/panels/propertyeditor/Pages/PagesType.tsx`
|
||||
- `src/editor/src/views/panels/propertyeditor/components/VariantStates/variantseditor.tsx`
|
||||
- `src/editor/src/views/panels/propertyeditor/components/VisualStates/visualstates.tsx`
|
||||
|
||||
---
|
||||
|
||||
## [2025-07-12] - Session 2: Continued ReactDOM Migration
|
||||
|
||||
### Summary
|
||||
Continued fixing ReactDOM.render/unmountComponentAtNode migrations. Made significant progress on noodl-editor files.
|
||||
|
||||
### Files Fixed This Session
|
||||
|
||||
#### noodl-editor - ReactDOM.render → createRoot
|
||||
- [x] `src/editor/src/views/VisualCanvas/ShowInspectMenu.tsx`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/propertyeditor.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/componentpicker.ts`
|
||||
- [x] `src/editor/src/views/panels/componentspanel/ComponentTemplates.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/CodeEditor/CodeEditorType.ts`
|
||||
- [x] `src/editor/src/views/createnewnodepanel.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/DataTypes/IconType.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/DataTypes/QueryFilterType.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/DataTypes/QuerySortingType.ts`
|
||||
- [x] `src/editor/src/views/panels/propertyeditor/DataTypes/CurveEditor/CurveType.ts`
|
||||
- [x] `src/editor/src/views/lessonlayer2.ts`
|
||||
|
||||
---
|
||||
|
||||
## [2025-07-12] - Session 1: Initial Fixes
|
||||
|
||||
### Summary
|
||||
Started fixing the 90 TypeScript errors related to React 19 migration. Made significant progress on noodl-core-ui and started on noodl-editor.
|
||||
|
||||
### Files Fixed
|
||||
|
||||
#### noodl-core-ui
|
||||
- [x] `src/types/global.ts` - Removed ReactChild, ReactFragment, ReactText imports (replaced with React.ReactNode equivalents)
|
||||
- [x] `src/components/layout/Columns/Columns.tsx` - Added React.isValidElement check before cloneElement
|
||||
- [x] `src/components/layout/BaseDialog/BaseDialog.tsx` - Fixed useRef() to include null initial value
|
||||
- [x] `src/components/layout/Carousel/Carousel.tsx` - Fixed ref callback to return void
|
||||
- [x] `src/components/property-panel/PropertyPanelSelectInput/PropertyPanelSelectInput.tsx` - Fixed useRef()
|
||||
- [x] `src/components/popups/PopupSection/PopupSection.tsx` - Fixed useRef() and removed unused @ts-expect-error
|
||||
|
||||
#### noodl-editor
|
||||
- [x] `src/shared/ReactView.ts` - Migrated from ReactDOM.render to createRoot API
|
||||
- [x] `src/editor/src/views/VisualCanvas/CanvasView.ts` - Migrated from ReactDOM.render to createRoot API
|
||||
|
||||
---
|
||||
|
||||
## Migration Patterns Reference
|
||||
|
||||
### Pattern 1: ReactDOM.render → createRoot
|
||||
```typescript
|
||||
// OLD (React 17)
|
||||
import ReactDOM from 'react-dom';
|
||||
ReactDOM.render(<Component />, container);
|
||||
|
||||
// NEW (React 18+)
|
||||
import { createRoot, Root } from 'react-dom/client';
|
||||
private root: Root | null = null;
|
||||
|
||||
// In render method:
|
||||
if (!this.root) {
|
||||
this.root = createRoot(container);
|
||||
}
|
||||
this.root.render(<Component />);
|
||||
```
|
||||
|
||||
### Pattern 2: unmountComponentAtNode → root.unmount
|
||||
```typescript
|
||||
// OLD
|
||||
ReactDOM.unmountComponentAtNode(container);
|
||||
|
||||
// NEW
|
||||
if (this.root) {
|
||||
this.root.unmount();
|
||||
this.root = null;
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 3: useRef with type
|
||||
```typescript
|
||||
// OLD
|
||||
const ref = useRef();
|
||||
|
||||
// NEW
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
```
|
||||
|
||||
### Pattern 4: Ref callbacks must return void
|
||||
```typescript
|
||||
// OLD - returns Timeout or element
|
||||
ref={(el) => el && setTimeout(() => el.focus(), 10)}
|
||||
|
||||
// NEW - returns void
|
||||
ref={(el) => { if (el) setTimeout(() => el.focus(), 10); }}
|
||||
```
|
||||
|
||||
### Pattern 5: Removed types
|
||||
```typescript
|
||||
// ReactChild, ReactFragment, ReactText are removed
|
||||
// Use React.ReactNode instead for children
|
||||
// Use Iterable<React.ReactNode> for fragments
|
||||
// Use string | number for text
|
||||
```
|
||||
|
||||
### Pattern 6: cloneElement with type safety
|
||||
```typescript
|
||||
// OLD - could fail with non-element children
|
||||
{children && cloneElement(children, { prop })}
|
||||
|
||||
// NEW - validate and cast
|
||||
{children && isValidElement(children) && cloneElement(children as ReactElement<Props>, { prop })}
|
||||
```
|
||||
|
||||
### Pattern 7: algoliasearch import change
|
||||
```typescript
|
||||
// OLD
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
|
||||
// NEW
|
||||
import { liteClient as algoliasearch } from 'algoliasearch/lite';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Final Status Summary
|
||||
|
||||
**TASK-001B: COMPLETED** ✅
|
||||
|
||||
- **Starting errors:** ~90 TypeScript errors
|
||||
- **Source file errors fixed:** ~60+
|
||||
- **Source file errors remaining:** 0
|
||||
- **node_modules type conflicts:** 33 (pre-existing, unrelated to React 19)
|
||||
|
||||
### Remaining Items (Not React 19 Related)
|
||||
The 33 remaining TypeScript errors are in node_modules and are pre-existing type conflicts:
|
||||
1. Jest vs Jasmine type definitions conflicts (~30 errors)
|
||||
2. algoliasearch-helper type definitions (~3 errors)
|
||||
|
||||
These are **not blocking** for development or build - webpack compiles successfully.
|
||||
|
||||
### Verified Working
|
||||
- [x] Webpack build compiles successfully
|
||||
- [x] Editor can start (`npm run dev`)
|
||||
- [x] No source code TypeScript errors
|
||||
@@ -0,0 +1,122 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user