mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
212 lines
8.5 KiB
Markdown
212 lines
8.5 KiB
Markdown
# 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
|