chore: updated Camunda Modeler plugin dependencies, ensured NodeJS 20…

….x compatibility
camunda-community-hub · Jan 29, 2024 · d148337 · d148337
1 parent 95ab91a
commit d148337
Show file tree

Hide file tree

Showing 6 changed files with 4,469 additions and 6,061 deletions.
diff --git a/camunda-modeler-plugin/.babelrc b/camunda-modeler-plugin/.babelrc
@@ -3,7 +3,7 @@
  ["@babel/preset-env"]
  ],
  "plugins": [
- ["@babel/plugin-proposal-class-properties"],
+ ["@babel/plugin-transform-class-properties"],
  ["@babel/plugin-transform-runtime"]
  ]
 }
diff --git a/camunda-modeler-plugin/README.md b/camunda-modeler-plugin/README.md
@@ -2,7 +2,7 @@
 
 ## Installation
 
-1. Ensure that Camunda Modeler 4.4.0+ or 5.7.0+ is installed
+1. Ensure that Camunda Modeler 5.9.0+ is installed
 2. [Download](https://github.com/camunda-community-hub/bpmn-driven-testing/releases/latest/download/bpmn-driven-testing-plugin.zip) latest Camunda Modeler plugin release
 3. Unpackage downloaded ZIP file to the `resources/plugins/` directory of the Camunda Modeler installation
 4. Start Camunda Modeler
@@ -11,33 +11,33 @@
 ## Development
 :warning: This and the subsequent sections are only important for plugin development!
 
-For the plugin development a [NodeJS 14.x](https://nodejs.org/download/release/latest-v14.x/) installation is required.
+For the plugin development a [NodeJS 20.x](https://nodejs.org/download/release/latest-v20.x/) installation is required.
 
 1. Link the `camunda-modeler-plugin/` directory as Camunda Modeler plugin
 
 Under Windows, run as administrator:
 
-```
+```bat
 mklink /d <camunda-modeler>\resources\plugins\bpmn-driven-testing <repository>\camunda-modeler-plugin
 ```
 
 (use `rmdir` to delete the directory link)
 
 Under Unix:
 
-```
+```sh
 ln -s <repository>/camunda-modeler-plugin <camunda-modeler>/resources/plugins/bpmn-driven-testing
 ```
 
 2. Install dependencies
 
-```
+```sh
 npm install
 ```
 
 3. Run webpack to build the plugin on the fly, when code changes are saved to file
 
-```
+```sh
 npm run dev
 ```
 
@@ -48,14 +48,14 @@ npm run dev
 ## Testing
 Tests are performed using [mocha](https://mochajs.org/) and [chai](https://www.chaijs.com/).
 
-```
+```sh
 npm run test-watch
 ```
 
 ## Releasing
 When creating a release, run:
 
-```
+```sh
 npm run build && npm run zip
 ```
 

diff --git a/camunda-modeler-plugin/main/bpmndt/Plugin.js b/camunda-modeler-plugin/main/bpmndt/Plugin.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import {
  MODE_EDIT,
@@ -43,6 +43,7 @@ export default class Plugin {
  this.styleElement = document.createElement("style");
  document.head.appendChild(this.styleElement);
 
+ this.root = null;
  this.rootElement = document.createElement("div");
  this.rootElement.className = "bpmndt";
 
@@ -65,12 +66,13 @@ export default class Plugin {
  hide() {
  const { pathMarker, rootElement, styleElement } = this;
 
- if (styleElement.childNodes.length !== 0) {
+ if (this.root !== null) {
  // show diagram elements
  styleElement.firstChild.remove();
 
  // unmount view
- ReactDOM.unmountComponentAtNode(rootElement);
+ this.root.unmount();
+ this.root = null;
  // remove root element
  rootElement.remove();
  }
@@ -125,7 +127,8 @@ export default class Plugin {
  // append root node
  parent.appendChild(rootElement);
  // render view
- ReactDOM.render(<PluginView plugin={this} />, rootElement);
+ this.root = createRoot(rootElement);
+ this.root.render(<PluginView plugin={this} />);
  }
 
  this.visible = true;