Finished component sidebar updates, with one small bug remaining and documented

This commit is contained in:
Richard Osborne
2025-12-28 22:07:29 +01:00
parent 5f8ce8d667
commit fad9f1006d
193 changed files with 22245 additions and 506 deletions

View File

@@ -0,0 +1,463 @@
# Detailed Dependency Analysis by Package
This document provides a comprehensive breakdown of dependencies for each package in the OpenNoodl monorepo.
---
## Table of Contents
1. [Root Package](#1-root-package)
2. [noodl-editor](#2-noodl-editor)
3. [noodl-core-ui](#3-noodl-core-ui)
4. [noodl-viewer-react](#4-noodl-viewer-react)
5. [noodl-viewer-cloud](#5-noodl-viewer-cloud)
6. [noodl-runtime](#6-noodl-runtime)
7. [noodl-git](#7-noodl-git)
8. [noodl-platform](#8-noodl-platform)
9. [noodl-platform-electron](#9-noodl-platform-electron)
10. [noodl-platform-node](#10-noodl-platform-node)
11. [noodl-parse-dashboard](#11-noodl-parse-dashboard)
12. [noodl-types](#12-noodl-types)
13. [Cross-Package Issues](#13-cross-package-issues)
---
## 1. Root Package
**Location:** `/package.json`
### Current State
```json
{
"name": "@thelowcodefoundation/repo",
"engines": {
"npm": ">=6.0.0",
"node": ">=16.0.0"
}
}
```
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @ianvs/prettier-plugin-sort-imports | 3.7.2 | 4.7.0 | 🟡 Major | Breaking changes in v4 |
| @types/keyv | 3.1.4 | 3.1.4 | ✅ OK | |
| @types/node | 18.19.123 | 24.10.1 | 🔴 Major | Node 24 types, significant jump |
| @typescript-eslint/eslint-plugin | 5.62.0 | 8.48.1 | 🔴 Major | 3 major versions behind |
| @typescript-eslint/parser | 5.62.0 | 8.48.1 | 🔴 Major | Must match plugin |
| eslint | 8.57.1 | 9.39.1 | 🔴 Major | ESLint 9 is flat config only |
| eslint-plugin-react | 7.37.5 | 7.37.5 | ✅ OK | |
| fs-extra | 10.1.0 | 11.3.2 | 🟡 Major | Minor breaking changes |
| lerna | 7.4.2 | 7.4.2 | ✅ OK | |
| rimraf | 3.0.2 | 3.0.2 | 🟡 Note | v5+ is ESM-only |
| ts-node | 10.9.2 | 10.9.2 | ✅ OK | |
| typescript | 4.9.5 | 5.8.3 | 🟡 Major | TS 5.x has minor breaking |
| webpack | 5.101.3 | 5.101.3 | ✅ OK | |
| webpack-cli | 5.1.4 | 5.1.4 | ✅ OK | |
| webpack-dev-server | 4.15.2 | 4.15.2 | ✅ OK | v5 available but major |
### Action Items
- [ ] Consider ESLint 9 migration (significant effort)
- [ ] Update @typescript-eslint/* when ESLint is updated
- [ ] TypeScript 5.x upgrade evaluate
---
## 2. noodl-editor
**Location:** `/packages/noodl-editor/package.json`
### Critical Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| react | 19.0.0 | 19.2.0 | ✅ OK | Updated by previous dev |
| react-dom | 19.0.0 | 19.2.0 | ✅ OK | Updated by previous dev |
| electron | 31.3.1 | 39.2.6 | 🔴 Major | 8 major versions behind |
| monaco-editor | 0.34.1 | 0.52.2 | 🟡 Outdated | Many features added |
### Production Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @electron/remote | 2.1.3 | 2.1.3 | ✅ OK | |
| @jaames/iro | 5.5.2 | 5.5.2 | ✅ OK | Color picker |
| @microlink/react-json-view | 1.27.0 | 1.27.0 | ✅ OK | Fork of react-json-view |
| @microsoft/fetch-event-source | 2.0.1 | 2.0.1 | ✅ OK | SSE client |
| about-window | 1.15.2 | 1.15.2 | ✅ OK | |
| algoliasearch | 5.35.0 | 5.46.0 | 🟢 Minor | |
| archiver | 5.3.2 | 7.0.1 | 🟡 Major | Breaking changes |
| async | 3.2.6 | 3.2.6 | ✅ OK | |
| classnames | 2.5.1 | 2.5.1 | ✅ OK | |
| electron-store | 8.2.0 | 11.0.2 | 🟡 Major | Breaking changes |
| electron-updater | 6.6.2 | 6.6.2 | ✅ OK | |
| express | 4.21.2 | 5.2.1 | 🔴 Major | Express 5 breaking |
| highlight.js | 11.11.1 | 11.11.1 | ✅ OK | |
| isbinaryfile | 5.0.4 | 5.0.7 | 🟢 Patch | |
| mixpanel-browser | 2.69.1 | 2.69.1 | ✅ OK | Analytics |
| react-hot-toast | 2.6.0 | 2.6.0 | ✅ OK | |
| react-instantsearch | 7.16.2 | 7.18.0 | 🟢 Minor | Renamed from hooks-web |
| react-rnd | 10.5.2 | 10.5.2 | ✅ OK | |
| remarkable | 2.0.1 | 2.0.1 | ✅ OK | Markdown |
| underscore | 1.13.7 | 1.13.7 | ✅ OK | |
| ws | 8.18.3 | 8.18.3 | ✅ OK | WebSocket |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @babel/core | 7.28.3 | 7.28.5 | 🟢 Patch | |
| @babel/preset-react | 7.27.1 | 7.28.5 | 🟢 Patch | |
| @svgr/webpack | 6.5.1 | 8.1.0 | 🟡 Major | |
| @types/react | 19.0.0 | 19.2.7 | 🟢 Minor | |
| @types/react-dom | 19.0.0 | 19.2.3 | 🟢 Minor | |
| babel-loader | 8.4.1 | 10.0.0 | 🟡 Major | |
| concurrently | 7.6.0 | 9.2.1 | 🟡 Major | |
| css-loader | 6.11.0 | 7.1.2 | 🟡 Major | |
| electron-builder | 24.13.3 | 26.0.12 | 🟡 Major | |
| html-loader | 3.1.2 | 5.1.0 | 🟡 Major | |
| monaco-editor-webpack-plugin | 7.1.0 | 7.1.0 | ✅ OK | |
| sass | 1.90.0 | 1.90.0 | ✅ OK | |
| style-loader | 3.3.4 | 3.3.4 | ✅ OK | v4 available |
| ts-loader | 9.5.4 | 9.5.4 | ✅ OK | |
| typescript | 4.9.5 | 5.8.3 | 🟡 Major | |
| webpack-merge | 5.10.0 | 5.10.0 | ✅ OK | |
### Action Items
- [ ] Update @types/react and @types/react-dom
- [ ] Evaluate electron upgrade path
- [ ] Update babel packages
- [ ] Consider css-loader 7.x
---
## 3. noodl-core-ui
**Location:** `/packages/noodl-core-ui/package.json`
### Critical Issue: Broken Storybook
```json
// CURRENT (BROKEN)
"scripts": {
"start": "start-storybook -p 6006 -s public",
"build": "build-storybook -s public"
}
// REQUIRED FIX
"scripts": {
"start": "storybook dev -p 6006",
"build": "storybook build"
}
```
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| classnames | 2.5.1 | 2.5.1 | ✅ OK | |
### Peer Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| react | 19.0.0 | 19.2.0 | ✅ OK | |
| react-dom | 19.0.0 | 19.2.0 | ✅ OK | |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @types/jest | 27.5.2 | 30.0.0 | 🔴 Major | |
| @types/node | 16.11.42 | 24.10.1 | 🔴 Major | Very outdated |
| @types/react | 19.0.0 | 19.2.7 | 🟢 Minor | |
| @types/react-dom | 19.0.0 | 19.2.3 | 🟢 Minor | |
| sass | 1.90.0 | 1.90.0 | ✅ OK | |
| storybook | 9.1.3 | 9.1.3 | ✅ OK | But scripts broken! |
| ts-loader | 9.5.4 | 9.5.4 | ✅ OK | |
| typescript | 4.9.5 | 5.8.3 | 🟡 Major | |
| web-vitals | 3.5.2 | 3.5.2 | ✅ OK | v4 available |
| webpack | 5.101.3 | 5.101.3 | ✅ OK | |
### Action Items
- [ ] **FIX STORYBOOK SCRIPTS** (Critical)
- [ ] Update @types/node
- [ ] Update @types/jest
- [ ] Align typescript version
---
## 4. noodl-viewer-react
**Location:** `/packages/noodl-viewer-react/package.json`
### Version Inconsistencies
This package has several dependencies that are different versions from other packages:
| Package | This Package | noodl-editor | Status |
|---------|-------------|--------------|--------|
| typescript | **5.1.3** | 4.9.5 | ⚠️ Inconsistent |
| css-loader | **5.0.0** | 6.11.0 | ⚠️ Inconsistent |
| style-loader | **2.0.0** | 3.3.4 | ⚠️ Inconsistent |
| webpack-dev-server | **3.11.2** | 4.15.2 | ⚠️ Inconsistent |
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @better-scroll/* | 2.5.1 | 2.5.1 | ✅ OK | Scroll library |
| bezier-easing | 1.1.1 | 2.1.0 | 🟡 Major | |
| buffer | 6.0.3 | 6.0.3 | ✅ OK | |
| core-js | 3.45.1 | 3.47.0 | 🟢 Minor | |
| events | 3.3.0 | 3.3.0 | ✅ OK | |
| lodash.difference | 4.5.0 | 4.5.0 | ✅ OK | |
| lodash.isequal | 4.5.0 | 4.5.0 | ✅ OK | |
| react-draggable | 4.5.0 | 4.5.0 | ✅ OK | |
| react-rnd | 10.5.2 | 10.5.2 | ✅ OK | |
| webfontloader | 1.6.28 | 1.6.28 | ✅ OK | |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @babel/core | 7.28.3 | 7.28.5 | 🟢 Patch | |
| @babel/preset-env | 7.28.3 | 7.28.5 | 🟢 Patch | |
| @babel/preset-react | 7.27.1 | 7.28.5 | 🟢 Patch | |
| @types/jest | 27.5.2 | 30.0.0 | 🔴 Major | |
| babel-loader | 8.4.1 | 10.0.0 | 🟡 Major | |
| clean-webpack-plugin | 1.0.1 | 4.0.0 | 🔴 Major | Very outdated |
| copy-webpack-plugin | 4.6.0 | 13.0.1 | 🔴 Major | Very outdated |
| css-loader | 5.0.0 | 7.1.2 | 🔴 Major | |
| jest | 28.1.0 | 29.7.0 | 🟡 Major | |
| style-loader | 2.0.0 | 3.3.4 | 🟡 Major | |
| ts-jest | 28.0.3 | 29.3.4 | 🟡 Major | Must match jest |
| ts-loader | 9.5.4 | 9.5.4 | ✅ OK | |
| typescript | 5.1.3 | 5.8.3 | 🟢 Minor | |
| webpack | 5.101.3 | 5.101.3 | ✅ OK | |
| webpack-bundle-analyzer | 4.10.2 | 4.10.2 | ✅ OK | |
| webpack-cli | 4.10.0 | 5.1.4 | 🟡 Major | |
| webpack-dev-server | 3.11.2 | 5.3.0 | 🔴 Major | 2 versions behind |
| webpack-merge | 5.10.0 | 5.10.0 | ✅ OK | |
### Action Items
- [ ] Align TypeScript version (decide 4.9.5 or 5.x)
- [ ] Update webpack-dev-server to 4.x
- [ ] Update clean-webpack-plugin to 4.x
- [ ] Update copy-webpack-plugin (significant API changes)
- [ ] Update css-loader and style-loader
- [ ] Update Jest to 29.x
---
## 5. noodl-viewer-cloud
**Location:** `/packages/noodl-viewer-cloud/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @noodl/runtime | file: | - | ✅ OK | Local |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| copy-webpack-plugin | 4.6.0 | 13.0.1 | 🔴 Major | Very outdated |
| generate-json-webpack-plugin | 2.0.0 | 2.0.0 | ✅ OK | |
| ts-loader | 9.5.4 | 9.5.4 | ✅ OK | |
| typescript | 4.9.5 | 5.8.3 | 🟡 Major | |
### Action Items
- [ ] Update copy-webpack-plugin
---
## 6. noodl-runtime
**Location:** `/packages/noodl-runtime/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| lodash.difference | 4.5.0 | 4.5.0 | ✅ OK | |
| lodash.isequal | 4.5.0 | 4.5.0 | ✅ OK | |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| jest | 28.1.0 | 29.7.0 | 🟡 Major | |
### Notes
- Very minimal dependencies
- Consider updating Jest to 29.x for consistency
---
## 7. noodl-git
**Location:** `/packages/noodl-git/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| desktop-trampoline | 0.9.8 | 0.9.8 | ✅ OK | Git auth helper |
| double-ended-queue | 2.1.0-0 | 2.1.0-0 | ✅ OK | |
| dugite | 1.110.0 | 3.0.0 | 🔴 Major | Breaking API changes |
| split2 | 4.1.0 | 4.2.0 | 🟢 Minor | |
### Notes
- **dugite 3.0** has significant breaking changes
- Affects git operations throughout the editor
- Upgrade should be carefully planned
---
## 8. noodl-platform
**Location:** `/packages/noodl-platform/package.json`
### Dependencies
None (interface definitions only)
### Notes
- This is primarily a TypeScript definitions package
- No external dependencies
---
## 9. noodl-platform-electron
**Location:** `/packages/noodl-platform-electron/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @noodl/platform-node | file: | - | ✅ OK | Local |
### Peer Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @electron/remote | >=2.1.3 | 2.1.3 | ✅ OK | |
| electron | >=20.1.0 | 39.2.6 | 🔴 Note | Peer constraint |
---
## 10. noodl-platform-node
**Location:** `/packages/noodl-platform-node/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @noodl/platform | file: | - | ✅ OK | Local |
| fs-extra | 10.0.1 | 11.3.2 | 🟡 Major | |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| @types/fs-extra | 9.0.13 | 11.0.4 | 🟡 Major | Should match fs-extra |
| @types/jest | 29.5.14 | 30.0.0 | 🟡 Major | |
| jest | 29.7.0 | 29.7.0 | ✅ OK | Latest jest here |
| ts-jest | 29.1.1 | 29.3.4 | 🟢 Patch | |
| typescript | 5.5.4 | 5.8.3 | 🟢 Minor | Different from others |
### Notes
- This package has Jest 29 (unlike others with 28)
- Consider aligning all packages to Jest 29
---
## 11. noodl-parse-dashboard
**Location:** `/packages/noodl-parse-dashboard/package.json`
### Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| bcryptjs | 2.4.3 | 3.0.3 | 🟡 Major | |
| connect-flash | 0.1.1 | 0.1.1 | ✅ OK | |
| cookie-session | 2.0.0 | 2.1.1 | 🟢 Minor | |
| express | 4.21.2 | 5.2.1 | 🔴 Major | Express 5 breaking |
| lodash | 4.17.21 | 4.17.21 | ✅ OK | |
| otpauth | 7.1.3 | 9.4.3 | 🟡 Major | |
| package-json | 7.0.0 | 10.0.2 | 🔴 Major | |
| parse-dashboard | 5.2.0 | 6.1.0 | 🟡 Major | |
| passport | 0.6.0 | 0.7.0 | 🟢 Minor | |
| passport-local | 1.0.0 | 1.0.0 | ✅ OK | |
### Dev Dependencies
| Package | Current | Latest | Status | Notes |
|---------|---------|--------|--------|-------|
| keyv | 4.5.4 | 5.5.5 | 🔴 Major | |
### Notes
- Parse Dashboard has many outdated dependencies
- Express 5.x migration is significant undertaking
- parse-dashboard 6.x may have breaking changes
---
## 12. noodl-types
**Location:** `/packages/noodl-types/package.json`
### Dependencies
None (type definitions only)
### Notes
- Purely TypeScript definition package
- No runtime dependencies
---
## 13. Cross-Package Issues
### TypeScript Version Matrix
| Package | Version | Notes |
|---------|---------|-------|
| Root | 4.9.5 | |
| noodl-editor | 4.9.5 | |
| noodl-core-ui | 4.9.5 | |
| noodl-viewer-react | **5.1.3** | ⚠️ Different |
| noodl-viewer-cloud | 4.9.5 | |
| noodl-platform-node | **5.5.4** | ⚠️ Different |
**Recommendation:** Standardize on either:
- 4.9.5 for stability (all packages)
- 5.x for latest features (requires testing)
### Jest Version Matrix
| Package | Version | Notes |
|---------|---------|-------|
| noodl-runtime | 28.1.0 | |
| noodl-viewer-react | 28.1.0 | |
| noodl-platform-node | **29.7.0** | ⚠️ Different |
**Recommendation:** Update all to Jest 29.7.0
### Webpack Ecosystem Matrix
| Package | webpack | dev-server | css-loader | style-loader |
|---------|---------|------------|------------|--------------|
| Root | 5.101.3 | 4.15.2 | - | - |
| noodl-editor | 5.101.3 | 4.15.2 | 6.11.0 | 3.3.4 |
| noodl-viewer-react | 5.101.3 | **3.11.2** | **5.0.0** | **2.0.0** |
**Issues:**
- noodl-viewer-react using webpack-dev-server 3.x (2 major behind)
- css-loader and style-loader versions mismatched

View File

@@ -0,0 +1,314 @@
# Breaking Changes Impact Matrix
This document assesses the impact of dependency updates on OpenNoodl functionality.
---
## Impact Assessment Scale
| Level | Description | Risk Mitigation |
|-------|-------------|-----------------|
| 🟢 Low | Minor changes, unlikely to cause issues | Normal testing |
| 🟡 Medium | Some code changes needed | Targeted testing of affected areas |
| 🔴 High | Significant refactoring required | Comprehensive testing, rollback plan |
| ⚫ Critical | May break production functionality | Extensive testing, staged rollout |
---
## Changes Already Applied (Previous Developer)
These changes are already in the codebase from branches 12 and 13:
### React 17 → 19 Migration
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| ReactDOM.render() → createRoot() | 🔴 High | ✅ Done | Previous dev updated all calls |
| Concurrent rendering behavior | 🟡 Medium | ⚠️ Needs Testing | May affect timing-sensitive code |
| Strict mode changes | 🟡 Medium | ⚠️ Needs Testing | Double-renders in dev mode |
| useEffect cleanup timing | 🟡 Medium | ⚠️ Needs Testing | Cleanup now synchronous |
| Automatic batching | 🟢 Low | ✅ Done | Generally beneficial |
| Suspense changes | 🟡 Medium | ⚠️ Needs Testing | If using Suspense anywhere |
**Affected Files:**
- `packages/noodl-editor/src/editor/index.ts`
- `packages/noodl-editor/src/editor/src/router.tsx`
- `packages/noodl-editor/src/editor/src/views/commentlayer.ts`
- `packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts`
- Various popup/dialog components
### react-instantsearch-hooks-web → react-instantsearch
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Package rename | 🟢 Low | ✅ Done | Import path changed |
| API compatibility | 🟢 Low | ⚠️ Needs Testing | Mostly compatible |
| Hook availability | 🟢 Low | ⚠️ Needs Testing | Verify all used hooks exist |
**Affected Files:**
- `packages/noodl-editor/src/editor/src/views/HelpCenter/HelpCenter.tsx`
### Algoliasearch 4.x → 5.x
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Client initialization | 🟡 Medium | ⚠️ Check | API may have changed |
| Search parameters | 🟢 Low | ⚠️ Check | Mostly compatible |
| Response format | 🟡 Medium | ⚠️ Check | May have minor changes |
---
## Pending Changes (TASK-001)
### Storybook 6.x → 9.x (Configuration Fix)
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| CLI commands | 🔴 High | 🔲 TODO | start-storybook → storybook dev |
| Configuration format | 🔴 High | 🔲 Check | main.js format changed |
| Addon compatibility | 🟡 Medium | 🔲 Check | Some addons may need updates |
| Story format | 🟢 Low | 🔲 Check | CSF 3 format supported |
**Configuration Changes Required:**
Old `.storybook/main.js`:
```javascript
module.exports = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
};
```
New `.storybook/main.js` (Storybook 9):
```javascript
export default {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-webpack5',
options: {},
},
};
```
### copy-webpack-plugin 4.x → 12.x
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Configuration API | 🔴 High | 🔲 TODO | Array → patterns object |
| Glob patterns | 🟡 Medium | 🔲 Check | Some patterns may differ |
| Options format | 🔴 High | 🔲 TODO | Many options renamed |
**Migration Example:**
```javascript
// Before (v4)
new CopyWebpackPlugin([
{ from: 'static', to: 'static' },
{ from: 'index.html', to: 'index.html' }
])
// After (v12)
new CopyWebpackPlugin({
patterns: [
{ from: 'static', to: 'static' },
{ from: 'index.html', to: 'index.html' }
]
})
```
### clean-webpack-plugin 1.x → 4.x
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Constructor signature | 🔴 High | 🔲 TODO | No longer takes paths |
| Default behavior | 🟡 Medium | 🔲 Check | Auto-cleans output.path |
| Options | 🟡 Medium | 🔲 Check | Different options available |
**Migration Example:**
```javascript
// Before (v1)
new CleanWebpackPlugin(['dist', 'build'])
// After (v4)
new CleanWebpackPlugin() // Automatically cleans output.path
// Or with options:
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],
})
```
### webpack-dev-server 3.x → 4.x
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Configuration location | 🔴 High | 🔲 TODO | Changes in config structure |
| Hot reload | 🟢 Low | 🔲 Check | Improved in v4 |
| Proxy config | 🟡 Medium | 🔲 Check | Minor changes |
**Key Configuration Changes:**
```javascript
// Before (v3)
devServer: {
contentBase: './dist',
hot: true,
inline: true
}
// After (v4)
devServer: {
static: './dist',
hot: true,
// inline removed (always true in v4)
}
```
### Jest 28 → 29
| Aspect | Impact | Status | Notes |
|--------|--------|--------|-------|
| Mock hoisting | 🟡 Medium | 🔲 Check | Stricter hoisting behavior |
| Snapshot format | 🟢 Low | 🔲 Check | Minor formatting changes |
| jsdom version | 🟢 Low | 🔲 Check | Updated internal jsdom |
---
## Future Considerations (Not in TASK-001)
### Electron 31 → 39
| Aspect | Impact | Risk | Notes |
|--------|--------|------|-------|
| Chromium version | 🟡 Medium | Security | Many Chromium updates |
| Node.js version | 🟡 Medium | Compatibility | May affect native modules |
| Remote module | 🔴 High | Breaking | @electron/remote changes |
| Security policies | 🔴 High | Testing | CSP and other policies |
| Native APIs | 🔴 High | Testing | Some APIs deprecated |
**Recommendation:** Plan incremental upgrade path (31 → 33 → 35 → 39)
### Express 4 → 5
| Aspect | Impact | Risk | Notes |
|--------|--------|------|-------|
| Async error handling | 🔴 High | Breaking | Errors now propagate |
| Path route matching | 🟡 Medium | Breaking | Stricter path matching |
| req.query | 🟡 Medium | Check | May return different types |
| app.router | 🔴 High | Breaking | Removed |
**Affected Packages:**
- noodl-editor (development server)
- noodl-parse-dashboard
### Dugite 1.x → 3.x
| Aspect | Impact | Risk | Notes |
|--------|--------|------|-------|
| API changes | ⚫ Critical | Breaking | Major API overhaul |
| Git operations | ⚫ Critical | Testing | Affects all git functionality |
| Authentication | 🔴 High | Testing | May affect auth flow |
**Recommendation:** Extensive research required before planning upgrade
### ESLint 8 → 9
| Aspect | Impact | Risk | Notes |
|--------|--------|------|-------|
| Config format | 🔴 High | Breaking | Must use flat config |
| Plugin loading | 🔴 High | Breaking | Different loading syntax |
| Rules | 🟡 Medium | Check | Some rules moved/renamed |
**Migration Required:**
```javascript
// Before (.eslintrc.js)
module.exports = {
extends: ['eslint:recommended'],
plugins: ['react'],
rules: { ... }
};
// After (eslint.config.js)
import react from 'eslint-plugin-react';
export default [
{ plugins: { react } },
{ rules: { ... } }
];
```
---
## Package Dependency Graph
Understanding how packages depend on each other is critical for impact assessment:
```
noodl-editor
├── @noodl/git (git operations)
├── @noodl/platform-electron (electron APIs)
│ └── @noodl/platform-node (file system)
│ └── @noodl/platform (interfaces)
├── @noodl/noodl-parse-dashboard (admin panel)
├── react 19.0.0
├── react-dom 19.0.0
└── electron 31.3.1
noodl-viewer-react
├── @noodl/runtime (node evaluation)
├── react (peer)
└── react-dom (peer)
noodl-core-ui
├── react 19.0.0 (peer)
├── react-dom 19.0.0 (peer)
└── storybook 9.1.3 (dev)
```
---
## Risk Mitigation Strategies
### For High-Impact Changes
1. **Create feature branch** for each major update
2. **Write regression tests** before making changes
3. **Test incrementally** - don't batch multiple breaking changes
4. **Document workarounds** if issues are found
5. **Have rollback plan** ready
### For Testing
| Area | Test Type | Priority |
|------|-----------|----------|
| React 19 behavior | Manual + Unit | 🔴 High |
| Build process | CI/CD | 🔴 High |
| Editor functionality | E2E | 🔴 High |
| Storybook components | Visual | 🟡 Medium |
| Git operations | Integration | 🟡 Medium |
| Help Center search | Manual | 🟢 Low |
### Rollback Procedures
1. **Git-based:** `git revert` the offending commit
2. **Package-based:** Pin to previous version in package.json
3. **Feature-flag-based:** Add runtime flag to disable new behavior
---
## Summary of Breaking Changes by Phase
### Phase 1 (TASK-001) - Low to Medium Risk
| Change | Impact | Complexity |
|--------|--------|------------|
| Storybook script fix | 🔴 Local | 🟢 Low |
| TypeScript alignment | 🟢 Low | 🟢 Low |
| Webpack plugins | 🟡 Medium | 🟡 Medium |
| Jest 29 | 🟢 Low | 🟢 Low |
### Future Phases - High Risk
| Change | Impact | Complexity |
|--------|--------|------------|
| Electron upgrade | ⚫ Critical | 🔴 High |
| Express 5 | 🔴 High | 🟡 Medium |
| Dugite 3 | ⚫ Critical | 🔴 High |
| ESLint 9 | 🟡 Medium | 🟡 Medium |

View File

@@ -0,0 +1,207 @@
# TASK-000: Dependency Analysis Report
## Metadata
| Field | Value |
|-------|-------|
| **ID** | TASK-000 |
| **Phase** | Phase 1 - Foundation |
| **Priority** | 📊 Research/Documentation |
| **Type** | Analysis Report |
| **Date Created** | July 12, 2025 |
| **Related Branches** | `12-upgrade-dependencies`, `13-remove-tsfixmes` |
| **Previous Developer** | Axel Wretman |
## Executive Summary
This report documents a comprehensive analysis of:
1. **Previous developer's dependency update attempts** (merged branches 12 and 13)
2. **Current state of all dependencies** across the OpenNoodl monorepo
3. **Recommendations** for completing the dependency modernization work
### Key Findings
| Category | Status | Action Required |
|----------|--------|-----------------|
| React 19 Migration | ✅ Done | Minor validation needed |
| Storybook 9 Migration | ⚠️ Broken | Scripts need fixing |
| Webpack Ecosystem | 🔶 Partial | Plugin updates needed |
| Electron | 🔴 Outdated | 31.3.1 → 39.x consideration |
| ESLint/TypeScript | 🔴 Outdated | Major version jump needed |
| Build Tools | 🔶 Mixed | Various version inconsistencies |
---
## Background: Previous Developer's Work
### Branch 12: `12-upgrade-dependencies`
**Developer:** Axel Wretman
**Key Commits:**
- `162eb5f` - "Updated node version, react version and react dependant dependencies"
- `5bed0a3` - "Update rendering to use non deprecated react-dom calls"
**What Was Changed:**
| Package | Before | After | Breaking? |
|---------|--------|-------|-----------|
| react | 17.0.2 | 19.0.0 | ✅ Yes |
| react-dom | 17.0.0 | 19.0.0 | ✅ Yes |
| react-instantsearch-hooks-web | 6.38.0 | react-instantsearch 7.16.2 | ✅ Yes (renamed) |
| webpack | 5.74.0 | 5.101.3 | No |
| typescript | 4.8.3 | 4.9.5 | No |
| @types/react | 17.0.50 | 19.0.0 | ✅ Yes |
| @types/react-dom | 18.0.0 | 19.0.0 | No |
| node engine | >=16 <=18 | >=16 | No (relaxed) |
| Storybook | @storybook/* 6.5.x | storybook 9.1.3 | ✅ Yes |
| electron-builder | 24.9.1 | 24.13.3 | No |
| electron-updater | 6.1.7 | 6.6.2 | No |
| algoliasearch | 4.14.2 | 5.35.0 | ✅ Yes |
| express | 4.17.3/4.18.1 | 4.21.2 | No |
| ws | 8.9.0 | 8.18.3 | No |
| sass | 1.53.0/1.55.0 | 1.90.0 | No |
| dugite | 1.106.0 | 1.110.0 | No |
**Code Changes (React 19 Migration):**
- Updated `ReactDOM.render()` calls to use `createRoot()` pattern
- Files modified:
- `packages/noodl-editor/src/editor/index.ts`
- `packages/noodl-editor/src/editor/src/router.tsx`
- `packages/noodl-editor/src/editor/src/views/commentlayer.ts`
- `packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts`
- Several popup/dialog components
### Branch 13: `13-remove-tsfixmes`
**Developer:** Axel Wretman
**Key Commit:** `960f38c` - "Remove TSFixme from property panel UI"
**What Was Changed:**
- Type safety improvements in `noodl-core-ui` property panel components
- No dependency changes
- Focused on removing `TSFixme` type escapes from:
- `Checkbox.tsx`
- `MenuDialog.tsx`
- `PropertyPanelInput.tsx`
- `PropertyPanelNumberInput.tsx`
- `PropertyPanelSliderInput.tsx`
- And other property panel components
---
## Current State: Critical Issues
### 1. 🔴 Storybook Scripts Broken
**Location:** `packages/noodl-core-ui/package.json`
**Problem:** The package uses Storybook 9.x but has Storybook 6.x commands:
```json
"scripts": {
"start": "start-storybook -p 6006 -s public", // WRONG
"build": "build-storybook -s public" // WRONG
}
```
**Required Fix:**
```json
"scripts": {
"start": "storybook dev -p 6006",
"build": "storybook build"
}
```
**Impact:** Storybook cannot run for component development/testing.
### 2. 🔴 Major Version Gaps
Several critical dependencies are multiple major versions behind:
| Package | Current | Latest | Gap |
|---------|---------|--------|-----|
| electron | 31.3.1 | 39.2.6 | 8 major |
| eslint | 8.57.1 | 9.39.1 | 1 major |
| @typescript-eslint/* | 5.62.0 | 8.48.1 | 3 major |
| dugite | 1.110.0 | 3.0.0 | 2 major |
| express | 4.21.2 | 5.2.1 | 1 major |
| jest | 28.1.3 | 29.7.0 | 1 major |
### 3. 🟡 Version Inconsistencies Across Packages
| Dependency | Root | noodl-editor | noodl-viewer-react | noodl-core-ui |
|------------|------|-------------|-------------------|---------------|
| typescript | 4.9.5 | 4.9.5 | **5.1.3** | 4.9.5 |
| css-loader | - | 6.11.0 | **5.0.0** | - |
| webpack-dev-server | 4.15.2 | 4.15.2 | **3.11.2** | - |
| @types/jest | - | - | 27.5.2 | 27.5.2 |
| style-loader | - | 3.3.4 | **2.0.0** | - |
### 4. 🟡 Outdated Webpack Plugins
| Plugin | Current | Latest | Status |
|--------|---------|--------|--------|
| copy-webpack-plugin | 4.6.0 | 13.0.1 | 🔴 Very outdated |
| clean-webpack-plugin | 1.0.1 | 4.0.0 | 🔴 Very outdated |
| html-loader | 3.1.2 | 5.1.0 | 🟡 Outdated |
| babel-loader | 8.4.1 | 10.0.0 | 🟡 Outdated |
| @svgr/webpack | 6.5.1 | 8.1.0 | 🟡 Outdated |
---
## Recommendations
See [RECOMMENDATIONS.md](./RECOMMENDATIONS.md) for detailed prioritized recommendations.
### Quick Summary
| Priority | Item | Effort |
|----------|------|--------|
| 🔴 P0 | Fix Storybook scripts | 5 min |
| 🔴 P0 | Standardize TypeScript version | 30 min |
| 🟡 P1 | Update webpack plugins | 2 hours |
| 🟡 P1 | Update Jest to v29 | 1 hour |
| 🟢 P2 | Consider Electron upgrade | TBD |
| 🟢 P2 | Consider ESLint 9 migration | 2-4 hours |
| 🔵 P3 | Express 5.x (future) | TBD |
| 🔵 P3 | Dugite 3.x (future) | TBD |
---
## Impact on Other Tasks
### Updates for TASK-001 (Dependency Updates)
The following items should be added to TASK-001's scope:
- [x] ~~React 19 migration~~ (Already done by previous dev)
- [ ] **FIX: Storybook scripts in noodl-core-ui**
- [ ] Webpack plugins update (copy-webpack-plugin, clean-webpack-plugin)
- [ ] TypeScript version alignment (standardize on 4.9.5 or upgrade to 5.x)
- [ ] css-loader/style-loader version alignment
- [ ] webpack-dev-server version alignment
### Updates for TASK-002 (Legacy Project Migration)
Additional considerations for backward compatibility:
- Express 5.x migration would break Parse Dashboard
- Electron 31→39 upgrade requires testing all native features
- Dugite 3.0 has breaking API changes affecting git operations
- Algoliasearch 5.x has different API patterns
---
## Related Files
- [DETAILED-ANALYSIS.md](./DETAILED-ANALYSIS.md) - Full package-by-package breakdown
- [RECOMMENDATIONS.md](./RECOMMENDATIONS.md) - Prioritized action items
- [IMPACT-MATRIX.md](./IMPACT-MATRIX.md) - Breaking changes impact assessment
---
## Methodology
This analysis was conducted by:
1. Examining git history for branches 12 and 13
2. Reading all `package.json` files across the monorepo
3. Running `npm outdated` to identify version gaps
4. Comparing the previous developer's intended changes with current state
5. Cross-referencing with existing TASK-001 and TASK-002 documentation

View File

@@ -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.