Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-12 07:12:54 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Started tasks to migrate runtime to React 19. Added phase 3 projects

Browse Source
This commit is contained in:
Richard Osborne
2025-12-13 22:37:44 +01:00
parent 8dd4f395c0
commit 1477a29ff7
55 changed files with 49205 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/noodl-viewer-react/noodl-viewer-react.js
View File

@@ -7,6 +7,9 @@ import Viewer, { ssrSetupRuntime } from './src/viewer.jsx';
registerPolyfills();
// React 19 root management
let currentRoot = null;
function createArgs() {
// Support SSR
if (typeof window === 'undefined') {
@@ -44,14 +47,31 @@ export default {
const noodlRuntime = new NoodlRuntime(runtimeArgs);
ReactDOM.render(React.createElement(Viewer, { noodlRuntime, noodlModules }, null), element);
// React 19: Use createRoot instead of ReactDOM.render
if (currentRoot) {
currentRoot.unmount();
}
currentRoot = ReactDOM.createRoot(element);
currentRoot.render(React.createElement(Viewer, { noodlRuntime, noodlModules }, null));
},
renderDeployed(element, noodlModules, projectData) {
// React 19: Use hydrateRoot for SSR, createRoot for client-side
// React SSR adds a 'data-reactroot' attribute on the root element to be able to hydrate the app.
if (element.children.length > 0 && !!element.children[0].hasAttribute('data-reactroot')) {
ReactDOM.hydrate(this.createElement(noodlModules, projectData), element);
currentRoot = ReactDOM.hydrateRoot(element, this.createElement(noodlModules, projectData));
} else {
ReactDOM.render(this.createElement(noodlModules, projectData), element);
if (currentRoot) {
currentRoot.unmount();
}
currentRoot = ReactDOM.createRoot(element);
currentRoot.render(this.createElement(noodlModules, projectData));
}
},
/** Unmount the current React root */
unmount() {
if (currentRoot) {
currentRoot.unmount();
currentRoot = null;
}
},
/** This can be called for server side rendering too. */