Update rendering to use non depricated react-dom calls.

Updated node version, react version and react dependant dependencies.
Merge pull request #8 from The-Low-Code-Foundation/revert-6-patch-1
2026-01-12 07:12:54 +01:00 · 2025-09-09 16:16:49 +02:00 · 2025-08-25 18:21:52 +02:00 · 2024-12-29 10:03:12 +01:00 · 2024-12-29 10:01:32 +01:00 · 2024-12-28 22:05:46 +01:00
23 changed files with 17439 additions and 71146 deletions
--- a/README.md
+++ b/README.md
@@ -8,9 +8,33 @@ OpenNoodl will aim to stay entirely in sync with the original repository, includ

 ## One-click install

-* [Code Crusher 1.0.1 for MacOS Intel](https://drive.google.com/file/d/11XPs0GjmNdQ4NxQLrtW5hlDqo21Fj_bs/view?usp=sharing)
-* [Code Crusher 1.0.1 for MacOS Silicon](https://drive.google.com/file/d/1sGhGTTMTSS-1LBnFPfyg_eWxDPLaUexy/view?usp=sharing)
-* [Code Crusher 1.0.1 for Windows](https://drive.google.com/file/d/10N8lZ-NlAO_Cr6Wi1o0CJHVepuVTpEtj/view?usp=drive_link)
+* [OpenNoodl 1.1.0 for MacOS Intel](https://github.com/The-Low-Code-Foundation/OpenNoodl/releases/download/release/OpenNoodl.1.1.0.Apple.Intel.dmg)
+* [OpenNoodl 1.1.0 for MacOS Silicon](https://github.com/The-Low-Code-Foundation/OpenNoodl/releases/download/release/OpenNoodl.1.1.0.Apple.Silicon.dmg)
+* [OpenNoodl 1.1.0 for Windows](https://github.com/The-Low-Code-Foundation/OpenNoodl/releases/download/release/OpenNoodl.1.1.0.Windows.exe)
+
+## Arch Linux
+
+On Arch Linux, OpenNoodl can be installed [from the AUR](https://aur.archlinux.org/packages/opennoodl):
+```
+yay -S opennoodl
+```
+
+# Getting started
+
+## Beginner resources
+
+* [Tutorials and basic info](https://learn-noodl.com)
+* [Resources and community components](https://the-low-code-foundation.fibery.io/invite/5NtlTThnCPh2vaAk)
+
+## Integrated back-end
+
+### Cloud hosted
+
+OpenNoodl has native CRUD nodes that work with Parse Server backends. [OpenNoodl Hosting](https://opennoodl-hosting.com) provides free and paid Parse Server backends to help you get started.
+
+### Self hosted
+
+If you prefer self-hosting or a local backend, while still taking advantage of the native OpenNoodl CRUD nodes, check out the repositories of the original [Noodl Cloud Services backend](https://github.com/The-Low-Code-Foundation/opennoodl-cloudservice) (Parse and cloud functions), as well as the new [OpenNoodl Better Backend](https://github.com/The-Low-Code-Foundation/opennoodl-better-backend) (Parse and n8n).

 ## Building from source

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -27,24 +27,24 @@
    "test:platform": "lerna exec --scope @noodl/platform-node -- npm test"
  },
  "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
    "@types/keyv": "3.1.4",
-    "@types/node": "^18.8.3",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.33.0",
-    "eslint-plugin-react": "^7.32.2",
-    "fs-extra": "^10.0.0",
+    "@types/node": "^18.19.123",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.5",
+    "fs-extra": "^10.1.0",
+    "lerna": "^7.4.2",
    "rimraf": "^3.0.2",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
    "typescript": "^4.9.5",
-    "webpack": "^5.84.1",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
-    "lerna": "^7.4.2"
+    "webpack": "^5.101.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2"
  },
  "engines": {
    "npm": ">=6.0.0",
-    "node": ">=16.0.0 <=18"
+    "node": ">=16.0.0"
  }
 }
--- a/packages/noodl-core-ui/package.json
+++ b/packages/noodl-core-ui/package.json
@@ -34,37 +34,25 @@
    ]
  },
  "dependencies": {
-    "classnames": "^2.3.1"
+    "classnames": "^2.5.1"
  },
  "peerDependencies": {
    "@noodl/platform": "file:../noodl-platform",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "6.5.12",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-interactions": "6.5.12",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/addon-measure": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/node-logger": "6.5.9",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "6.5.9",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.42",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "prop-types": "^15.8.1",
-    "sass": "^1.53.0",
-    "typescript": "^4.7.4",
-    "web-vitals": "^3.0.3",
-    "webpack": "^5.74.0",
-    "ts-loader": "^9.3.1"
+    "sass": "^1.90.0",
+    "storybook": "^9.1.3",
+    "ts-loader": "^9.5.4",
+    "typescript": "^4.9.5",
+    "web-vitals": "^3.5.2",
+    "webpack": "^5.101.3"
  }
 }
--- a/packages/noodl-editor/package.json
+++ b/packages/noodl-editor/package.json
@@ -58,81 +58,81 @@
    ]
  },
  "dependencies": {
-    "@electron/remote": "^2.1.2",
+    "@electron/remote": "^2.1.3",
    "@jaames/iro": "^5.5.2",
+    "@microlink/react-json-view": "^1.27.0",
    "@microsoft/fetch-event-source": "^2.0.1",
    "@noodl/git": "file:../noodl-git",
    "@noodl/noodl-parse-dashboard": "file:../noodl-parse-dashboard",
    "@noodl/platform": "file:../noodl-platform",
    "@noodl/platform-electron": "file:../noodl-platform-electron",
    "about-window": "^1.15.2",
-    "algoliasearch": "^4.14.2",
-    "archiver": "^5.3.0",
-    "async": "^3.2.4",
-    "classnames": "^2.3.2",
+    "algoliasearch": "^5.35.0",
+    "archiver": "^5.3.2",
+    "async": "^3.2.6",
+    "classnames": "^2.5.1",
    "diff3": "0.0.4",
-    "electron-store": "^8.1.0",
-    "electron-updater": "^6.1.7",
-    "express": "^4.17.3",
-    "highlight.js": "^11.5.1",
-    "isbinaryfile": "^5.0.0",
+    "electron-store": "^8.2.0",
+    "electron-updater": "^6.6.2",
+    "express": "^4.21.2",
+    "highlight.js": "^11.11.1",
+    "isbinaryfile": "^5.0.4",
    "md5": "^2.3.0",
    "md5-file": "^5.0.0",
-    "mixpanel-browser": "^2.45.0",
+    "mixpanel-browser": "^2.69.1",
    "mkdirp": "0.5.1",
    "mkdirp-sync": "0.0.2",
-    "monaco-editor": "^0.34.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.0",
-    "react-hot-toast": "^2.4.0",
-    "react-instantsearch-hooks-web": "^6.38.0",
-    "react-json-view": "^1.21.3",
-    "react-rnd": "^10.3.7",
+    "monaco-editor": "^0.34.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-hot-toast": "^2.6.0",
+    "react-instantsearch": "^7.16.2",
+    "react-rnd": "^10.5.2",
    "remarkable": "^2.0.1",
-    "s3": "git+https://github.com/noodlapp/node-s3-client.git",
-    "string.prototype.matchall": "^4.0.7",
-    "underscore": "^1.13.6",
-    "webpack": "^5.74.0",
+    "s3": "github:noodlapp/node-s3-client",
+    "string.prototype.matchall": "^4.0.12",
+    "underscore": "^1.13.7",
+    "webpack": "^5.101.3",
    "websocket-stream": "^5.5.2",
-    "ws": "^8.9.0"
+    "ws": "^8.18.3"
  },
  "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/preset-react": "^7.18.6",
-    "@svgr/webpack": "^6.4.0",
-    "@types/checksum": "^0.1.33",
-    "@types/jasmine": "^4.3.0",
-    "@types/jquery": "^3.5.14",
-    "@types/react": "^17.0.50",
-    "@types/react-dom": "^18.0.0",
-    "@types/remarkable": "^2.0.3",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@svgr/webpack": "^6.5.1",
+    "@types/checksum": "^0.1.35",
+    "@types/jasmine": "^4.6.5",
+    "@types/jquery": "^3.5.33",
+    "@types/react": "^19.0.00",
+    "@types/react-dom": "^19.0.0",
+    "@types/remarkable": "^2.0.8",
    "@types/rimraf": "^3.0.2",
    "@types/split2": "^3.2.1",
-    "@types/string.prototype.matchall": "^4.0.1",
-    "@types/underscore": "^1.11.4",
-    "@types/webpack-env": "^1.18.0",
-    "babel-loader": "^8.2.4",
-    "concurrently": "^7.4.0",
-    "css-loader": "^6.7.1",
+    "@types/string.prototype.matchall": "^4.0.4",
+    "@types/underscore": "^1.13.0",
+    "@types/webpack-env": "^1.18.8",
+    "babel-loader": "^8.4.1",
+    "concurrently": "^7.6.0",
+    "css-loader": "^6.11.0",
    "electron": "31.3.1",
-    "electron-builder": "^24.9.1",
+    "electron-builder": "^24.13.3",
    "file-loader": "^6.2.0",
-    "html-loader": "^3.1.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
+    "html-loader": "^3.1.2",
+    "monaco-editor-webpack-plugin": "^7.1.0",
    "ncp": "^2.0.0",
    "rimraf": "^3.0.2",
-    "sass": "^1.55.0",
+    "sass": "^1.90.0",
    "sass-loader": "^12.6.0",
    "stringify": "^5.2.0",
-    "style-loader": "^3.3.1",
-    "ts-loader": "^9.4.1",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.8.3",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.5",
    "url-loader": "^4.1.1",
-    "webpack": "^5.74.0",
+    "webpack": "^5.101.3",
    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-dev-server": "^4.15.2",
+    "webpack-merge": "^5.10.0"
  },
  "engines": {
    "npm": ">=6.0.0",
--- a/packages/noodl-editor/src/editor/index.ts
+++ b/packages/noodl-editor/src/editor/index.ts
@@ -1,7 +1,7 @@
 import * as remote from '@electron/remote';
 import { ipcRenderer } from 'electron';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';

 import './process-setup';

@@ -83,5 +83,5 @@ window.addEventListener('DOMContentLoaded', () => {

  // Create the main element
  const rootElement = document.getElementById('root');
-  ReactDOM.render(React.createElement(Router, { uri: remote.process.env.noodlURI }), rootElement);
+  createRoot(rootElement).render(React.createElement(Router, { uri: remote.process.env.noodlURI }));
 });
--- a/packages/noodl-editor/src/editor/src/hooks/useInterval.ts
+++ b/packages/noodl-editor/src/editor/src/hooks/useInterval.ts
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 type IntervalCallback = () => Promise<void>;

 export function useInterval(callback: IntervalCallback, delay: number) {
-  const savedCallback = useRef<IntervalCallback>();
+  const savedCallback = useRef<IntervalCallback>(callback);

  // Remember the latest callback.
  useEffect(() => {
--- a/packages/noodl-editor/src/editor/src/router.tsx
+++ b/packages/noodl-editor/src/editor/src/router.tsx
@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';

 import { EventDispatcher } from '../../shared/utils/EventDispatcher';
 import LessonTemplatesModel from './models/lessontemplatesmodel';
@@ -24,11 +24,11 @@ function createToastLayer() {
  toastLayer.classList.add('toast-layer');
  $('body').append(toastLayer);

-  ReactDOM.render(React.createElement(ToastLayerContainer), toastLayer);
+  createRoot(toastLayer).render(React.createElement(ToastLayerContainer));

  if (import.meta.webpackHot) {
    import.meta.webpackHot.accept('./views/ToastLayer', () => {
-      ReactDOM.render(React.createElement(ToastLayerContainer), toastLayer);
+      createRoot(toastLayer).render(React.createElement(ToastLayerContainer));
    });
  }
 }
@@ -47,11 +47,11 @@ function createDialogLayer() {
  dialogLayer.classList.add('dialog-layer');
  $('body').append(dialogLayer);

-  ReactDOM.render(React.createElement(DialogLayerContainer), dialogLayer);
+  createRoot(dialogLayer).render(React.createElement(DialogLayerContainer));

  if (import.meta.webpackHot) {
    import.meta.webpackHot.accept('./views/DialogLayer', () => {
-      ReactDOM.render(React.createElement(DialogLayerContainer), dialogLayer);
+      createRoot(dialogLayer).render(React.createElement(DialogLayerContainer));
    });
  }
 }
--- a/packages/noodl-editor/src/editor/src/views/Clippy/Clippy.tsx
+++ b/packages/noodl-editor/src/editor/src/views/Clippy/Clippy.tsx
@@ -51,7 +51,7 @@ export default function Clippy() {
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);
  const secondTextAreaRef = useRef(null);
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(undefined);
  const [hasApiKey, setHasApiKey] = useState(false);
  const aiAssistantModel = useModernModel(AiAssistantModel.instance);
  const nodeGraphContext = useNodeGraphContext();
--- a/packages/noodl-editor/src/editor/src/views/HelpCenter/HelpCenter.tsx
+++ b/packages/noodl-editor/src/editor/src/views/HelpCenter/HelpCenter.tsx
@@ -1,6 +1,6 @@
 import algoliasearch from 'algoliasearch/lite';
 import React, { useRef, useState } from 'react';
-import { InstantSearch, Hits, Highlight, useSearchBox, Configure } from 'react-instantsearch-hooks-web';
+import { InstantSearch, Hits, Highlight, useSearchBox, Configure } from 'react-instantsearch';
 import { platform } from '@noodl/platform';

 import { IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
--- a/packages/noodl-editor/src/editor/src/views/ShowContextMenuInPopup.tsx
+++ b/packages/noodl-editor/src/editor/src/views/ShowContextMenuInPopup.tsx
@@ -1,6 +1,6 @@
 import { getCurrentWindow, screen } from '@electron/remote';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';

 import { DialogRenderDirection } from '@noodl-core-ui/components/layout/BaseDialog';
 import { MenuDialog, MenuDialogItem, MenuDialogWidth } from '@noodl-core-ui/components/popups/MenuDialog';
@@ -23,6 +23,7 @@ export function showContextMenuInPopup({
  const container = document.createElement('div');
  const screenPoint = screen.getCursorScreenPoint();
  const [winX, winY] = getCurrentWindow().getPosition();
+  const root = createRoot(container)

  const popout = PopupLayer.instance.showPopout({
    content: { el: $(container) },
@@ -33,11 +34,11 @@ export function showContextMenuInPopup({
    },
    position: 'top',
    onClose: () => {
-      ReactDOM.unmountComponentAtNode(container);
+      root.unmount();
    }
  });

-  ReactDOM.render(
+  root.render(
    <MenuDialog
      title={title}
      width={width || MenuDialogWidth.Large}
@@ -48,7 +49,5 @@ export function showContextMenuInPopup({
        PopupLayer.instance.hidePopout(popout);
      }}
      items={items}
-    />,
-    container
-  );
+    />);
 }
--- a/packages/noodl-editor/src/editor/src/views/commentlayer.ts
+++ b/packages/noodl-editor/src/editor/src/views/commentlayer.ts
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';

 import { Comment, CommentsModel } from '@noodl-models/commentsmodel';
 import KeyboardHandler from '@noodl-utils/keyboardhandler';
@@ -36,6 +36,8 @@ export default class CommentLayer {
  backgroundDiv: HTMLDivElement;
  activeCommentId: string;
  foregroundDiv: HTMLDivElement;
+  backgroundRoot: Root;
+  foregroundRoot: Root;

  constructor(nodegraphEditor) {
    this.nodegraphEditor = nodegraphEditor;
@@ -140,14 +142,16 @@ export default class CommentLayer {
      return;
    }

-    ReactDOM.render(React.createElement(CommentLayerView.Background, this.props), this.backgroundDiv);
-    ReactDOM.render(React.createElement(CommentLayerView.Foreground, this.props), this.foregroundDiv);
+    this.backgroundRoot = createRoot(this.backgroundDiv);
+    this.backgroundRoot.render(React.createElement(CommentLayerView.Background, this.props));
+    this.foregroundRoot = createRoot(this.foregroundDiv);
+    this.foregroundRoot.render(React.createElement(CommentLayerView.Foreground, this.props));
  }

  renderTo(backgroundDiv, foregroundDiv) {
    if (this.backgroundDiv) {
-      ReactDOM.unmountComponentAtNode(this.backgroundDiv);
-      ReactDOM.unmountComponentAtNode(this.foregroundDiv);
+      this.backgroundRoot.unmount();
+      this.foregroundRoot.unmount();
    }

    this.backgroundDiv = backgroundDiv;
@@ -297,8 +301,8 @@ export default class CommentLayer {
  }

  dispose() {
-    ReactDOM.unmountComponentAtNode(this.foregroundDiv);
-    ReactDOM.unmountComponentAtNode(this.backgroundDiv);
+    this.foregroundRoot.unmount();
+    this.backgroundRoot.unmount();

    //hack to remove all event listeners without having to keep track of them
    const newForegroundDiv = this.foregroundDiv.cloneNode(true);
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
@@ -1,7 +1,7 @@
 import { clipboard, ipcRenderer } from 'electron';
 import _ from 'underscore';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';

 import { NodeGraphColors } from '@noodl-constants/NodeGraphColors';
 import { AiAssistantEvent, AiAssistantModel } from '@noodl-models/AiAssistant/AiAssistantModel';
@@ -227,6 +227,8 @@ export class NodeGraphEditor extends View {
  nodesIdsAnimating: string[];
  isPlayingNodeAnimations: boolean;

+  toolbarRoots: Root[];
+
  constructor(args) {
    super();

@@ -1418,8 +1420,8 @@ export class NodeGraphEditor extends View {
  }

  updateTitle() {
-    const root = this.el[0].querySelector('.nodegraph-component-trail-root');
-
+    const rootElem = this.el[0].querySelector('.nodegraph-component-trail-root');
+    const root = createRoot(rootElem);
    if (this.activeComponent) {
      const fullName = this.activeComponent.fullName;
      const nameParts = fullName.split('/');
@@ -1464,9 +1466,9 @@ export class NodeGraphEditor extends View {
        canNavigateForward: this.navigationHistory.canNavigateForward
      };

-      ReactDOM.render(React.createElement(NodeGraphComponentTrail, props), root);
+      root.render(React.createElement(NodeGraphComponentTrail, props));
    } else {
-      ReactDOM.unmountComponentAtNode(root);
+      root.unmount();
    }
  }

@@ -1761,10 +1763,10 @@ export class NodeGraphEditor extends View {
          // @ts-expect-error
          toProps.sourcePort = fromPort;
          toProps.disabled = false;
-          ReactDOM.render(React.createElement(ConnectionPopup, toProps), toDiv);
+          createRoot(toDiv).render(React.createElement(ConnectionPopup, toProps));

          fromProps.disabled = true;
-          ReactDOM.render(React.createElement(ConnectionPopup, fromProps), fromDiv);
+          createRoot(fromDiv).render(React.createElement(ConnectionPopup, fromProps));

          fromNode.borderHighlighted = false;
          toNode.borderHighlighted = true;
@@ -1772,7 +1774,8 @@ export class NodeGraphEditor extends View {
        }
      };
      const fromDiv = document.createElement('div');
-      ReactDOM.render(React.createElement(ConnectionPopup, fromProps), fromDiv);
+      const root = createRoot(fromDiv);
+      root.render(React.createElement(ConnectionPopup, fromProps));

      const fromPosition = toNode.global.x > fromNodeXPos ? 'left' : 'right';

@@ -1790,7 +1793,7 @@ export class NodeGraphEditor extends View {
          y: (fromNode.global.y + panAndScale.y) * panAndScale.scale + tl[1] + 20 * panAndScale.scale
        },
        onClose: () => {
-          ReactDOM.unmountComponentAtNode(fromDiv);
+          root.unmount();
          ipcRenderer.send('viewer-show');
        }
      });
@@ -1824,10 +1827,10 @@ export class NodeGraphEditor extends View {
            // @ts-expect-error
            toProps.sourcePort = undefined;
            toProps.disabled = true;
-            ReactDOM.render(React.createElement(ConnectionPopup, toProps), toDiv);
+            createRoot(toDiv).render(React.createElement(ConnectionPopup, toProps));

            fromProps.disabled = false;
-            ReactDOM.render(React.createElement(ConnectionPopup, fromProps), fromDiv);
+            createRoot(fromDiv).render(React.createElement(ConnectionPopup, fromProps));

            fromNode.borderHighlighted = true;
            toNode.borderHighlighted = false;
@@ -1836,7 +1839,7 @@ export class NodeGraphEditor extends View {
        }
      };
      const toDiv = document.createElement('div');
-      ReactDOM.render(React.createElement(ConnectionPopup, toProps), toDiv);
+      createRoot(toDiv).render(React.createElement(ConnectionPopup, toProps));

      const toPosition = fromNodeXPos >= toNode.global.x ? 'left' : 'right';
      const toPopout = PopupLayer.instance.showPopout({
@@ -1851,7 +1854,7 @@ export class NodeGraphEditor extends View {
          y: (toNode.global.y + panAndScale.y) * panAndScale.scale + tl[1] + 20 * panAndScale.scale
        },
        onClose: () => {
-          ReactDOM.unmountComponentAtNode(toDiv);
+          root.unmount();
          this.clearSelection();
          this.repaint();
        }
@@ -2203,20 +2206,23 @@ export class NodeGraphEditor extends View {
    div.style.position = 'absolute';
    div.style.left = pos.x + 'px';
    div.style.top = pos.y + 'px';
-
-    ReactDOM.render(
+    const root = createRoot(div);
+    this.toolbarRoots.push(root);
+    root.render(
      React.createElement(PopupToolbar, {
        menuItems,
        contextMenuItems: this.getContextMenuActions()
-      } as PopupToolbarProps),
-      div
+      } as PopupToolbarProps)
    );
  }

  hideNodeToolbar() {
+    for (const root of this.toolbarRoots) {
+      root.unmount();
+    }
+    this.toolbarRoots = [];
    const toolbars = this.domElementContainer.querySelectorAll('.nodegraph-node-toolbar');
    for (const toolbar of toolbars) {
-      ReactDOM.unmountComponentAtNode(toolbar);
      this.domElementContainer.removeChild(toolbar);
    }
  }
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor/InspectJSONView/InspectPopup.tsx
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor/InspectJSONView/InspectPopup.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import ReactJson from 'react-json-view';
+import ReactJson from '@microlink/react-json-view';

 import { ProjectModel } from '@noodl-models/projectmodel';

--- a/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/VersionControlPanel/VersionControlPanel.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Git } from '@noodl/git';
 import { platform } from '@noodl/platform';

@@ -126,8 +126,8 @@ function BaseVersionControlPanel() {

  function openGitSettingsPopout() {
    const popoutDiv = document.createElement('div');
-
-    ReactDOM.render(React.createElement(GitProviderPopout, { git }), popoutDiv);
+    const root = createRoot(popoutDiv);
+    root.render(React.createElement(GitProviderPopout, { git }));

    //the timeout is needed to solve a bug when the popout us opened from the git status button
    //it causes timing issues between native events and react where the popout is instantly closed
@@ -138,7 +138,7 @@ function BaseVersionControlPanel() {
        position: 'right',
        disableDynamicPositioning: true,
        onClose: () => {
-          ReactDOM.unmountComponentAtNode(popoutDiv);
+          root.unmount();
          fetch.fetchRemote();
        }
      });
--- a/packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/AiChat/AiChat.tsx
+++ b/packages/noodl-editor/src/editor/src/views/panels/propertyeditor/components/AiChat/AiChat.tsx
@@ -1,7 +1,7 @@
 import { useModernModel } from '@noodl-hooks/useModel';
 import { OpenAiStore } from '@noodl-store/AiAssistantStore';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';

 import { AiAssistantModel } from '@noodl-models/AiAssistant/AiAssistantModel';
 import { AiCopilotContext } from '@noodl-models/AiAssistant/AiCopilotContext';
@@ -332,7 +332,8 @@ function AiMessageFunctionNodeAffix({ context, onUpdated }: AiMessageFunctionNod
    };

    const popoutDiv = document.createElement('div');
-    ReactDOM.render(React.createElement(CodeEditor, props), popoutDiv);
+    const root = createRoot(popoutDiv);
+    root.render(React.createElement(CodeEditor, props));

    const popout = PopupLayer.instance.showPopout({
      content: { el: [popoutDiv] },
--- a/packages/noodl-editor/src/editor/src/whats-new.ts
+++ b/packages/noodl-editor/src/editor/src/whats-new.ts
@@ -1,11 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { ipcRenderer } from 'electron';
+import React from 'react';
+import { createRoot } from 'react-dom/client';

 import { LocalStorageKey } from '@noodl-constants/LocalStorageKey';
 import getDocsEndpoint from '@noodl-utils/getDocsEndpoint';
-import PopupLayer from './views/popuplayer';
+
 import { NewsModal } from './views/NewsModal';
+import PopupLayer from './views/popuplayer';

 /**
 * Display latest whats-new-post if the user hasn't seen one after it was last published
@@ -34,12 +35,11 @@ export async function whatsnewRender() {
  modalContainer.classList.add('popup-layer-react-modal');
  PopupLayer.instance.el.find('.popup-layer-modal').before(modalContainer);

-  ReactDOM.render(
+  createRoot(modalContainer).render(
    React.createElement(NewsModal, {
      content: latestChangelogPost.content_html,
      onFinished: () => ipcRenderer.send('viewer-show')
-    }),
-    modalContainer
+    })
  );

  localStorage.setItem(LocalStorageKey.lastSeenChangelogDate, latestChangelogDate.toString());
--- a/packages/noodl-git/package.json
+++ b/packages/noodl-git/package.json
@@ -7,8 +7,8 @@
  "homepage": "https://noodl.net",
  "dependencies": {
    "desktop-trampoline": "https://github.com/desktop/desktop-trampoline/archive/refs/tags/v0.9.8.tar.gz",
-    "dugite": "^1.106.0",
    "double-ended-queue": "^2.1.0-0",
+    "dugite": "^1.110.0",
    "split2": "^4.1.0"
  }
 }
--- a/packages/noodl-parse-dashboard/package.json
+++ b/packages/noodl-parse-dashboard/package.json
@@ -5,7 +5,7 @@
    "bcryptjs": "2.4.3",
    "connect-flash": "0.1.1",
    "cookie-session": "2.0.0",
-    "express": "^4.18.1",
+    "express": "^4.21.2",
    "lodash": "^4.17.21",
    "otpauth": "^7.1.3",
    "package-json": "7.0.0",
@@ -30,6 +30,6 @@
  ],
  "main": "Parse-Dashboard/app.js",
  "devDependencies": {
-    "keyv": "^4.5.1"
+    "keyv": "^4.5.4"
  }
 }
--- a/packages/noodl-platform-electron/package.json
+++ b/packages/noodl-platform-electron/package.json
@@ -10,7 +10,7 @@
    "@noodl/platform-node": "file:../noodl-platform-node"
  },
  "peerDependencies": {
-    "@electron/remote": ">=2.0.8",
+    "@electron/remote": "^2.1.3",
    "electron": ">=20.1.0"
  }
 }
--- a/packages/noodl-platform-node/package.json
+++ b/packages/noodl-platform-node/package.json
@@ -11,14 +11,14 @@
  },
  "dependencies": {
    "@noodl/platform": "file:../noodl-platform",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
    "jszip": "^3.10.1",
    "mkdirp-sync": "0.0.2",
    "rimraf": "^3.0.2"
  },
  "devDependencies": {
    "@types/jest": "^29.0.1",
-    "ts-jest": "^29.0.0",
-    "jest": "^29.0.3"
+    "jest": "^29.7.0",
+    "ts-jest": "^29.4.1"
  }
 }
--- a/packages/noodl-viewer-cloud/package.json
+++ b/packages/noodl-viewer-cloud/package.json
@@ -14,9 +14,9 @@
    "@noodl/runtime": "file:../noodl-runtime"
  },
  "devDependencies": {
+    "copy-webpack-plugin": "^4.6.0",
    "generate-json-webpack-plugin": "^2.0.0",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "copy-webpack-plugin": "^4.6.0"
+    "ts-loader": "^9.5.4",
+    "typescript": "^4.9.5"
  }
 }
--- a/packages/noodl-viewer-react/package.json
+++ b/packages/noodl-viewer-react/package.json
@@ -8,42 +8,42 @@
    "test": "jest"
  },
  "dependencies": {
-    "@better-scroll/core": "^2.0.0-beta.6",
-    "@better-scroll/mouse-wheel": "^2.0.0-beta.6",
-    "@better-scroll/nested-scroll": "^2.4.2",
-    "@better-scroll/scroll-bar": "^2.0.0-beta.6",
+    "@better-scroll/core": "^2.5.1",
+    "@better-scroll/mouse-wheel": "^2.5.1",
+    "@better-scroll/nested-scroll": "^2.5.1",
+    "@better-scroll/scroll-bar": "^2.5.1",
    "@noodl/runtime": "file:../noodl-runtime",
    "bezier-easing": "^1.1.1",
    "buffer": "^6.0.3",
-    "core-js": "^3.12.1",
+    "core-js": "^3.45.1",
    "events": "^3.3.0",
    "lodash.difference": "^4.5.0",
    "lodash.isequal": "^4.5.0",
-    "react-draggable": "^4.4.5",
-    "react-rnd": "^10.3.7",
+    "react-draggable": "^4.5.0",
+    "react-rnd": "^10.5.2",
    "stream-browserify": "^3.0.0",
    "timers-browserify": "^2.0.12",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-    "@babel/preset-env": "^7.14.1",
-    "@babel/preset-react": "^7.18.6",
-    "@types/jest": "^27.5.1",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^1.0.0",
+    "@babel/core": "^7.28.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@types/jest": "^27.5.2",
+    "babel-loader": "^8.4.1",
+    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^5.0.0",
    "jest": "^28.1.0",
    "style-loader": "^2.0.0",
    "ts-jest": "^28.0.3",
-    "ts-loader": "^9.4.3",
+    "ts-loader": "^9.5.4",
    "typescript": "^5.1.3",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack": "^5.101.3",
+    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "webpack-merge": "^5.10.0"
  }
 }
Author	SHA1	Message	Date
Axel Wretman	5bed0a3c17	Update rendering to use non depricated react-dom calls.	2025-09-09 16:16:49 +02:00
Axel Wretman	162eb5f6cb	Updated node version, react version and react dependant dependencies.	2025-08-25 18:21:52 +02:00
Richard Osborne	70acc528ac	Merge pull request #8 from The-Low-Code-Foundation/revert-6-patch-1 Revert "Fix linux builds"	2024-12-29 10:03:12 +01:00
Richard Osborne	c6460b235a	Revert "Fix linux builds"	2024-12-29 10:01:32 +01:00
Richard Osborne	3f5addb251	Merge pull request #6 from dzervas/patch-1 Fix linux builds	2024-12-28 22:05:46 +01:00
Richard Osborne	a87a7fd624	Merge pull request #7 from nicholas-mn/main docs(README): add arch linux install instructions and fix name	2024-12-28 21:44:48 +01:00
Nicholas	73b6ba85ef	docs(README): add arch linux install instructions and fix name	2024-12-27 21:11:07 +01:00
Dimitris Zervas	0471a19ccf	Fix package.json	2024-12-19 21:37:42 +02:00
Dimitris Zervas	f69b5ad250	Fix app categories	2024-12-19 21:08:37 +02:00
Dimitris Zervas	0f319f4d17	Show the BUILD_AS_DIR state	2024-12-19 20:45:50 +02:00
Dimitris Zervas	cd483e2cd1	Add the ability to build the app as a dir	2024-12-19 20:45:45 +02:00
Dimitris Zervas	8b4b4b8417	Take appimages into account during packing	2024-12-19 20:35:17 +02:00
Dimitris Zervas	42f6aedbc0	Build appimage instead of deb for linux	2024-12-19 20:17:33 +02:00
Richard Osborne	07a284cf2d	Update README.md	2024-11-12 15:03:10 +01:00
Richard Osborne	ac7aa2d069	Updated README with new installers and backend info	2024-09-25 22:21:47 +02:00
Richard Osborne	3d30bb9280	Updated README with new installers and backend info	2024-09-25 22:19:00 +02:00