mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
Updated project to React 19
This commit is contained in:
Richard Osborne
@@ -0,0 +1,348 @@
|
||||
# Dependency Update Recommendations
|
||||
|
||||
This document provides prioritized recommendations for updating dependencies in the OpenNoodl monorepo.
|
||||
|
||||
---
|
||||
|
||||
## Priority Levels
|
||||
|
||||
| Priority | Meaning | Timeline |
|
||||
|----------|---------|----------|
|
||||
| 🔴 P0 - Critical | Blocking issue, must fix immediately | Within TASK-001 |
|
||||
| 🟡 P1 - High | Important for stability/dev experience | Within TASK-001 |
|
||||
| 🟢 P2 - Medium | Should be done when convenient | Phase 1 or 2 |
|
||||
| 🔵 P3 - Low | Future consideration | Phase 2+ |
|
||||
|
||||
---
|
||||
|
||||
## 🔴 P0 - Critical (Must Fix Immediately)
|
||||
|
||||
### 1. Fix Storybook Scripts in noodl-core-ui
|
||||
|
||||
**Impact:** Storybook completely broken - can't run component development
|
||||
**Effort:** 5 minutes
|
||||
**Risk:** None
|
||||
|
||||
**Current (Broken):**
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "start-storybook -p 6006 -s public",
|
||||
"build": "build-storybook -s public"
|
||||
}
|
||||
```
|
||||
|
||||
**Fix:**
|
||||
```json
|
||||
"scripts": {
|
||||
"start": "storybook dev -p 6006",
|
||||
"build": "storybook build"
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** Also need to create `.storybook/main.js` configuration if not present. Storybook 9 uses a different config format than 6.x.
|
||||
|
||||
---
|
||||
|
||||
### 2. Standardize TypeScript Version
|
||||
|
||||
**Impact:** Type checking inconsistency, potential build issues
|
||||
**Effort:** 30 minutes
|
||||
**Risk:** Low (if staying on 4.9.5)
|
||||
|
||||
**Current State:**
|
||||
| Package | Version |
|
||||
|---------|---------|
|
||||
| Root | 4.9.5 |
|
||||
| noodl-editor | 4.9.5 |
|
||||
| noodl-core-ui | 4.9.5 |
|
||||
| noodl-viewer-react | **5.1.3** |
|
||||
| noodl-viewer-cloud | 4.9.5 |
|
||||
| noodl-platform-node | **5.5.4** |
|
||||
|
||||
**Recommendation:** Standardize on **4.9.5** for now:
|
||||
- Most packages already use it
|
||||
- TypeScript 5.x has some breaking changes
|
||||
- Can upgrade to 5.x as a separate effort later
|
||||
|
||||
**Changes Required:**
|
||||
```bash
|
||||
# In packages/noodl-viewer-react/package.json
|
||||
"typescript": "^4.9.5" # was 5.1.3
|
||||
|
||||
# In packages/noodl-platform-node/package.json
|
||||
"typescript": "^4.9.5" # was 5.5.4
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🟡 P1 - High Priority (Important for TASK-001)
|
||||
|
||||
### 3. Update Webpack Plugins in noodl-viewer-react
|
||||
|
||||
**Impact:** Build configuration fragility, missing features
|
||||
**Effort:** 1-2 hours
|
||||
**Risk:** Medium (API changes)
|
||||
|
||||
| Plugin | Current | Target | Notes |
|
||||
|--------|---------|--------|-------|
|
||||
| copy-webpack-plugin | 4.6.0 | 12.0.2 | [Migration Guide](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md) |
|
||||
| clean-webpack-plugin | 1.0.1 | 4.0.0 | API completely changed |
|
||||
| webpack-dev-server | 3.11.2 | 4.15.2 | Config format changed |
|
||||
|
||||
**Migration Notes:**
|
||||
|
||||
**copy-webpack-plugin:**
|
||||
```javascript
|
||||
// Old (v4)
|
||||
new CopyWebpackPlugin([{ from: 'src', to: 'dest' }])
|
||||
|
||||
// New (v12)
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{ from: 'src', to: 'dest' }]
|
||||
})
|
||||
```
|
||||
|
||||
**clean-webpack-plugin:**
|
||||
```javascript
|
||||
// Old (v1)
|
||||
new CleanWebpackPlugin(['dist'])
|
||||
|
||||
// New (v4)
|
||||
new CleanWebpackPlugin() // Auto-cleans output.path
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Align Webpack Dev Tooling Versions
|
||||
|
||||
**Impact:** Inconsistent development experience
|
||||
**Effort:** 1 hour
|
||||
**Risk:** Low
|
||||
|
||||
Update in `noodl-viewer-react`:
|
||||
```json
|
||||
{
|
||||
"css-loader": "^6.11.0", // was 5.0.0
|
||||
"style-loader": "^3.3.4", // was 2.0.0
|
||||
"webpack-dev-server": "^4.15.2" // was 3.11.2
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Update Jest to v29 Across All Packages
|
||||
|
||||
**Impact:** Test inconsistency, missing features
|
||||
**Effort:** 1-2 hours
|
||||
**Risk:** Low-Medium
|
||||
|
||||
**Current State:**
|
||||
| Package | Jest Version |
|
||||
|---------|-------------|
|
||||
| noodl-runtime | 28.1.0 |
|
||||
| noodl-viewer-react | 28.1.0 |
|
||||
| noodl-platform-node | 29.7.0 ✅ |
|
||||
|
||||
**Target:** Jest 29.7.0 everywhere
|
||||
|
||||
**Migration Notes:**
|
||||
- Jest 29 has minor breaking changes in mock behavior
|
||||
- ts-jest must be updated to match (29.x)
|
||||
- @types/jest should be updated to match
|
||||
|
||||
```json
|
||||
{
|
||||
"jest": "^29.7.0",
|
||||
"ts-jest": "^29.3.4",
|
||||
"@types/jest": "^29.5.14"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. Update copy-webpack-plugin in noodl-viewer-cloud
|
||||
|
||||
**Impact:** Same as #3 above
|
||||
**Effort:** 30 minutes
|
||||
**Risk:** Medium
|
||||
|
||||
Same migration as noodl-viewer-react.
|
||||
|
||||
---
|
||||
|
||||
## 🟢 P2 - Medium Priority (Phase 1 or 2)
|
||||
|
||||
### 7. Update @types/react and @types/react-dom
|
||||
|
||||
**Impact:** Better type inference, fewer type errors
|
||||
**Effort:** 15 minutes
|
||||
**Risk:** None
|
||||
|
||||
```json
|
||||
{
|
||||
"@types/react": "^19.2.7", // was 19.0.0
|
||||
"@types/react-dom": "^19.2.3" // was 19.0.0
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8. Update Babel Ecosystem
|
||||
|
||||
**Impact:** Better compilation, newer JS features
|
||||
**Effort:** 30 minutes
|
||||
**Risk:** Low
|
||||
|
||||
```json
|
||||
{
|
||||
"@babel/core": "^7.28.5",
|
||||
"@babel/preset-env": "^7.28.5",
|
||||
"@babel/preset-react": "^7.28.5",
|
||||
"babel-loader": "^9.2.1" // Note: 10.x exists but may have issues
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. Consider ESLint 9 Migration
|
||||
|
||||
**Impact:** Modern linting, flat config
|
||||
**Effort:** 2-4 hours
|
||||
**Risk:** Medium (significant config changes)
|
||||
|
||||
**Current:** ESLint 8.57.1 + @typescript-eslint 5.62.0
|
||||
**Target:** ESLint 9.x + @typescript-eslint 8.x
|
||||
|
||||
**Key Changes:**
|
||||
- ESLint 9 requires "flat config" format (eslint.config.js)
|
||||
- No more .eslintrc files
|
||||
- Different plugin loading syntax
|
||||
|
||||
**Recommendation:** Defer to Phase 2 unless blocking issues found.
|
||||
|
||||
---
|
||||
|
||||
### 10. Update @types/node
|
||||
|
||||
**Impact:** Better Node.js type support
|
||||
**Effort:** 10 minutes
|
||||
**Risk:** Low
|
||||
|
||||
```json
|
||||
{
|
||||
"@types/node": "^20.17.0" // Match LTS Node.js version
|
||||
}
|
||||
```
|
||||
|
||||
Note: Don't go to @types/node@24 unless using Node 24.
|
||||
|
||||
---
|
||||
|
||||
### 11. Consider Electron Upgrade Path
|
||||
|
||||
**Impact:** Security updates, new features, performance
|
||||
**Effort:** 2-4 hours (testing intensive)
|
||||
**Risk:** High (many potential breaking changes)
|
||||
|
||||
**Current:** 31.3.1
|
||||
**Latest:** 39.2.6
|
||||
|
||||
**Recommendation:**
|
||||
1. Evaluate if any security issues in Electron 31
|
||||
2. Plan incremental upgrade (31 → 33 → 35 → 39)
|
||||
3. Test thoroughly between each jump
|
||||
4. This is a separate task, not part of TASK-001
|
||||
|
||||
---
|
||||
|
||||
## 🔵 P3 - Low Priority (Future Consideration)
|
||||
|
||||
### 12. Express 5.x Migration
|
||||
|
||||
**Impact:** Modern Express, async error handling
|
||||
**Effort:** 4-8 hours
|
||||
**Risk:** High (breaking changes)
|
||||
|
||||
Affects:
|
||||
- noodl-editor
|
||||
- noodl-parse-dashboard
|
||||
|
||||
**Recommendation:** Defer to Phase 2 or later. Express 4.x is stable and secure.
|
||||
|
||||
---
|
||||
|
||||
### 13. Dugite 3.0 Upgrade
|
||||
|
||||
**Impact:** Git operations
|
||||
**Effort:** Unknown
|
||||
**Risk:** High (breaking API changes)
|
||||
|
||||
**Recommendation:** Research dugite 3.0 changes before planning upgrade.
|
||||
|
||||
---
|
||||
|
||||
### 14. Monaco Editor Upgrade
|
||||
|
||||
**Impact:** Code editing experience
|
||||
**Effort:** 2-4 hours
|
||||
**Risk:** Medium
|
||||
|
||||
**Current:** 0.34.1
|
||||
**Latest:** 0.52.2
|
||||
|
||||
Many new features, but check webpack plugin compatibility.
|
||||
|
||||
---
|
||||
|
||||
### 15. Parse Dashboard Modernization
|
||||
|
||||
**Impact:** Admin panel functionality
|
||||
**Effort:** High
|
||||
**Risk:** High
|
||||
|
||||
Many outdated dependencies in noodl-parse-dashboard. Consider:
|
||||
- Upgrading parse-dashboard 5.2.0 → 6.x
|
||||
- express 4.x → 5.x
|
||||
- Other dependencies
|
||||
|
||||
This should be a separate task.
|
||||
|
||||
---
|
||||
|
||||
## Summary: TASK-001 Scope Update
|
||||
|
||||
Based on this analysis, TASK-001 scope should include:
|
||||
|
||||
### Must Do (P0)
|
||||
- [ ] Fix Storybook scripts in noodl-core-ui
|
||||
- [ ] Standardize TypeScript version to 4.9.5
|
||||
|
||||
### Should Do (P1)
|
||||
- [ ] Update webpack plugins in noodl-viewer-react
|
||||
- [ ] Align css-loader, style-loader, webpack-dev-server versions
|
||||
- [ ] Update Jest to v29 across all packages
|
||||
- [ ] Update copy-webpack-plugin in noodl-viewer-cloud
|
||||
|
||||
### Nice to Have (P2)
|
||||
- [ ] Update @types/react and @types/react-dom
|
||||
- [ ] Update Babel packages
|
||||
|
||||
### Explicitly Out of Scope
|
||||
- ESLint 9 migration
|
||||
- Electron upgrade (separate task)
|
||||
- Express 5.x migration
|
||||
- Dugite 3.0 upgrade
|
||||
- Parse Dashboard modernization
|
||||
|
||||
---
|
||||
|
||||
## Estimated Time Impact
|
||||
|
||||
| Priority | Items | Time |
|
||||
|----------|-------|------|
|
||||
| P0 | 2 | 35 min |
|
||||
| P1 | 4 | 3-5 hours |
|
||||
| P2 (if included) | 2 | 45 min |
|
||||
| **Total** | **8** | **4-6 hours** |
|
||||
|
||||
This fits within the original TASK-001 estimate of 2-3 days.
|
||||
Reference in New Issue
Block a user