From 1477a29ff73df7dbd1ad157d90fc737fd43c0d24 Mon Sep 17 00:00:00 2001 From: Richard Osborne Date: Sat, 13 Dec 2025 22:37:44 +0100 Subject: [PATCH] Started tasks to migrate runtime to React 19. Added phase 3 projects --- dev-docs/reference/LEARNINGS-RUNTIME.md | 472 + .../TASK-003-react-19-runtime/CHANGELOG.md | 139 + .../TASK-003-react-19-runtime/CHECKLIST.md | 86 + .../CLINE-REACT19-TASK-RULES.md | 132 + .../TASK-RUNTIME-REACT19.md | 420 + .../00-OVERVIEW.md | 205 + .../01-PROJECT-DETECTION.md | 533 + .../02-MIGRATION-WIZARD.md | 994 + .../03-AI-MIGRATION.md | 1022 + .../04-POST-MIGRATION-UX.md | 793 + .../05-NEW-PROJECT-NOTICE.md | 477 + .../CHANGELOG.md | 66 + .../CHECKLIST.md | 50 + .../CLINE-GUIDE.md | 0 .../DASH-001-tabbed-navigation.md | 220 + .../DASH-002-project-list-redesign.md | 292 + .../DASH-003-project-organisation.md | 357 + .../DASH-004-tutorial-section-redesign.md | 413 + .../DASH-overview.md | 150 + .../GIT-001-github-oauth.md | 335 + .../GIT-002-dashboard-git-status.md | 426 + .../GIT-003-repository-cloning.md | 346 + .../GIT-004-auto-init-commit-encouragement.md | 388 + .../GIT-005-enhanced-push-pull.md | 388 + .../GIT-OVERVIEW.md | 248 + .../COMP-001-prefab-system-refactoring.md | 408 + .../COMP-002-builtin-prefabs.md | 394 + .../COMP-003-component-export.md | 380 + .../COMP-004-organization-components.md | 396 + ...MP-005-component-import-version-control.md | 414 + .../COMP-006-forking-pr-workflow.md | 498 + .../COMP-overview.md | 339 + .../AI-001-ai-project-scaffolding.md | 481 + .../AI-002-ai-component-suggestions.md | 507 + .../AI-003-natural-language-editing.md | 565 + .../AI-004-ai-design-assistance.md | 681 + .../AI-overview.md | 425 + .../DEPLOY-001-one-click-deploy.md | 579 + .../DEPLOY-002-preview-deployments.md | 510 + .../DEPLOY-003-deploy-settings.md | 533 + .../DEPLOY-overview.md | 385 + package-lock 2.json | 30790 ++++++++++++++++ .../src/models/migration/MigrationSession.ts | 587 + .../src/models/migration/ProjectScanner.ts | 619 + .../src/editor/src/models/migration/index.ts | 35 + .../src/editor/src/models/migration/types.ts | 347 + .../noodl-viewer-react/noodl-viewer-react.js | 26 +- .../src/components/visual/Drag/Drag.tsx | 18 +- .../src/components/visual/Group/Group.tsx | 51 +- .../src/react-component-node.js | 43 +- .../static/shared/react-dom.production.min.js | 468 +- .../static/shared/react.production.min.js | 49 +- .../static/ssr/package.json | 4 +- .../template-project/project-truncated.json | 1 + .../template-project/project.json | 1 - 55 files changed, 49205 insertions(+), 281 deletions(-) create mode 100644 dev-docs/reference/LEARNINGS-RUNTIME.md create mode 100644 dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CHANGELOG.md create mode 100644 dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CHECKLIST.md create mode 100644 dev-docs/tasks/phase-2/TASK-003-react-19-runtime/CLINE-REACT19-TASK-RULES.md create mode 100644 dev-docs/tasks/phase-2/TASK-003-react-19-runtime/TASK-RUNTIME-REACT19.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/00-OVERVIEW.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/01-PROJECT-DETECTION.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/02-MIGRATION-WIZARD.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/03-AI-MIGRATION.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/04-POST-MIGRATION-UX.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/05-NEW-PROJECT-NOTICE.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CHANGELOG.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CHECKLIST.md create mode 100644 dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CLINE-GUIDE.md create mode 100644 dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-001-tabbed-navigation.md create mode 100644 dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-002-project-list-redesign.md create mode 100644 dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-003-project-organisation.md create mode 100644 dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-004-tutorial-section-redesign.md create mode 100644 dev-docs/tasks/phase-3/TASK-001-dashboard-ux-foundation/DASH-overview.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-001-github-oauth.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-002-dashboard-git-status.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-003-repository-cloning.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-004-auto-init-commit-encouragement.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-005-enhanced-push-pull.md create mode 100644 dev-docs/tasks/phase-3/TASK-002-github-integration/GIT-OVERVIEW.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-001-prefab-system-refactoring.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-002-builtin-prefabs.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-003-component-export.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-004-organization-components.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-005-component-import-version-control.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-006-forking-pr-workflow.md create mode 100644 dev-docs/tasks/phase-3/TASK-003-shared-component-system/COMP-overview.md create mode 100644 dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-001-ai-project-scaffolding.md create mode 100644 dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-002-ai-component-suggestions.md create mode 100644 dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-003-natural-language-editing.md create mode 100644 dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-004-ai-design-assistance.md create mode 100644 dev-docs/tasks/phase-3/TASK-004-ai-project-creation/AI-overview.md create mode 100644 dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-001-one-click-deploy.md create mode 100644 dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-002-preview-deployments.md create mode 100644 dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-003-deploy-settings.md create mode 100644 dev-docs/tasks/phase-3/TASK-005-deployment-automation/DEPLOY-overview.md create mode 100644 package-lock 2.json create mode 100644 packages/noodl-editor/src/editor/src/models/migration/MigrationSession.ts create mode 100644 packages/noodl-editor/src/editor/src/models/migration/ProjectScanner.ts create mode 100644 packages/noodl-editor/src/editor/src/models/migration/index.ts create mode 100644 packages/noodl-editor/src/editor/src/models/migration/types.ts create mode 100644 project-examples/version 1.1.0/template-project/project-truncated.json delete mode 100644 project-examples/version 1.1.0/template-project/project.json diff --git a/dev-docs/reference/LEARNINGS-RUNTIME.md b/dev-docs/reference/LEARNINGS-RUNTIME.md new file mode 100644 index 0000000..77c0bc7 --- /dev/null +++ b/dev-docs/reference/LEARNINGS-RUNTIME.md @@ -0,0 +1,472 @@ +# OpenNoodl Runtime Architecture - Deep Dive + +This document captures learnings about the Noodl runtime system, specifically how `noodl-runtime` and `noodl-viewer-react` work together to render Noodl projects. + +--- + +## Overview + +The Noodl runtime is split into two main packages: + +| Package | Purpose | +|---------|---------| +| `noodl-runtime` | Core node execution, data flow, graph processing | +| `noodl-viewer-react` | React-based rendering of visual nodes | + +The **editor** uses these packages to render the preview, and **deployed projects** use them directly in the browser. + +--- + +## How React is Loaded + +**Key Insight:** React is NOT an npm dependency of noodl-viewer-react. Instead, it's loaded as external UMD scripts. + +### Webpack Configuration +```javascript +// webpack-configs/webpack.common.js +module.exports = { + externals: { + react: 'React', + 'react-dom': 'ReactDOM' + } +}; +``` + +This means: +- `import React from 'react'` actually references `window.React` +- `import ReactDOM from 'react-dom'` references `window.ReactDOM` + +### Where React Bundles Live +``` +packages/noodl-viewer-react/static/shared/ +├── react.production.min.js # React UMD bundle +└── react-dom.production.min.js # ReactDOM UMD bundle +``` + +These are loaded via `