Update for yFiles for HTML 2.5

Author: fskpf

.env

@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- create-react-app v4.0.3
-- yFiles for HTML 2.4
+- create-react-app v5.0.1
+- yFiles for HTML 2.5
 
 ## Getting Started
 
@@ -43,7 +43,7 @@ This basic yFiles integration can be used as a starting point to test the capabi
 
 You can browse through the demos and look for features that you find interesting for your use case and integrate it in this basic component to build a more sophisticated application.
 
-There is also a slightly bigger [React integration demo](https://live.yworks.com/demos/toolkit/react/index.html) available in the package and on [GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit/react). This is also available with [TypeScript](https://live.yworks.com/demos/toolkit/react-typescript/index.html) (see [GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit/react-typescript)).
+The yFiles package also contains a more extensive [React integration demo](https://live.yworks.com/demos/toolkit/react/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit/react)). This is also available with [TypeScript](https://live.yworks.com/demos/toolkit/react-typescript/index.html) (see [GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit/react-typescript)).
 
 Furthermore, there is an extensive [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/introduction#top) that covers anything from graph creation and styling to automatic layouts and advanced customizations.
 

README.md

@@ -2,59 +2,63 @@
 
 This is a step-by-step description of how to add a yFiles graph component to a basic React application.
 
-TL;DR Add yFiles as a dependency in the `package.json` and start importing yFiles classes in your project.
+TL;DR Add `yfiles` as a dependency in the `package.json`,
+[include your license](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept),
+and start importing yFiles classes in your project.
 
 ## Running the CLI
 
-Run the create-react-app CLI with `> npx create-react-app yfiles-react-integration-basic` which scaffolds a basic React application.
+Run the create-react-app CLI with `> npx create-react-app yfiles-react-integration-basic` which
+scaffolds a basic React application.
 
 ## Add yFiles as a dependency
 
-Adding yFiles as a dependency is as easy as installing an external library from the npm registry:
+Adding yFiles as a dependency is almost as easy as installing an external library from the npm registry:
 
-1. Add yFiles for HTML as npm dependency to the created project:
+1. Add yFiles for HTML as npm dependency to the created project, for example like this:
 
-   - If you have a fresh yFiles for HTML package, you need to prepare the library package first by running `npm install` in the
-     package folder. This creates the development library and a tarball that can be installed as npm dependency in
-     other projects. See also [Working with the yFiles npm Module](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module#yfiles_npm_module).
+   ```
+   "dependencies": {
+     ...
+     "yfiles": "../yFiles-for-HTML-Complete-2.5-Evaluation/lib-dev/yfiles-25.0.0+eval-dev.tgz"
+   },
+   ```
 
-     Note: This sample project runs `npm install` as `preinstall` script in the `package.json`.
+2. Install the newly added dependency with `npm install`.
 
-   - Reference the packed library in the `package.json` of the project:
-     ```
-     "dependencies": {
-       ...
-       "yfiles": "../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib-dev/es-modules/yfiles-24.0.6-eval-dev.tgz"
-     },
-     ```
+3. Include your yFiles license by copying the `license.json` file into your project. For more options,
+   see the [developer's guide](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept)
 
-2. Now install the newly added dependency with `npm install`.
-
-After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out of the box to easily work with the library.
+After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles
+is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out
+of the box to easily work with the library.
 
 ## Integrate a basic yFiles graph component
 
 With the yFiles dependency, you can easily create a new React component that contains a yFiles GraphComponent.
 
-1. Create a new `ReactGraphComponent.js` file in `/src/` which instantiates a new yFiles GraphComponent with editing capabilities and a basic sample graph.
+1. Create a new `ReactGraphComponent.js` file in `/src/` which instantiates a new yFiles GraphComponent
+   with editing capabilities and a basic sample graph.
 
-   Note how the yFiles GraphComponent is added to the DOM by providing a reference to an empty `div` element in which it is supposed to be created.
+   Note how the yFiles GraphComponent is added to the DOM by providing a reference to an empty `div`
+   element in which it is supposed to be created.
 
    See the contents of `/src/ReactGraphComponent.js` in this repository for the full implementation.
 
-   There are two things to look out for:
-
-   - Make sure to configure your `license.json` for the library.
+   Make sure to configure your license data as described above.
 
 2. Afterwards, just add the new React component to the `App.js`.
 
 And that's it. Run `npm run start` to serve the application at [http://localhost:3000/](http://localhost:3000/) with a basic yFiles component.
 
 ## Development Mode
 
-This project uses the yFiles development library from the yFiles package. The development library adds additional
-type runtime checks to yFiles related method calls and
-yields readable exception messages to identify problems in JavaScript code more easily.
-For more details see [Development Mode](http://docs.yworks.com/yfileshtml/#/dguide/yfiles_development_mode).
+This project uses the yFiles development library from the yFiles package. The development library
+adds additional type runtime checks to yFiles related method calls and yields readable exception
+messages to identify problems in JavaScript code more easily.
+For more details, see the [Development Mode section](http://docs.yworks.com/yfileshtml/#/dguide/yfiles_development_mode).
 
-Please note that these additional checks degrade the performance of the application slightly, therefore it should only be used during development. See also [Preparing the Development Mode Library for Production](https://docs.yworks.com/yfileshtml/#/dguide/deployment#dev-deployment) in Webpack to learn how to switch between development and production mode.
+Please note that these additional checks slightly affect the performance of the application,
+therefore it should only be used during development.
+See also [Preparing the Development Mode Library for Production](https://docs.yworks.com/yfileshtml/#/dguide/deployment#dev-deployment)
+in Webpack to learn how to switch between development and production mode.

integration-howto.md

@@ -4,24 +4,28 @@
   "author": "yWorks GmbH <[email protected]>",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.1.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^2.0.1",
-    "yfiles": "../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib-dev/es-modules/yfiles-24.0.6-eval-dev.tgz"
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4",
+    "yfiles": "../yFiles-for-HTML-Complete-2.5-Evaluation/lib-dev/yfiles-25.0.0+eval-dev.tgz"
   },
   "scripts": {
-    "preinstall": "cd ../yFiles-for-HTML-Complete-2.4.0.6-Evaluation && npm run prepare-package",
-    "postinstall": " node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib/license.json','./src/license.json')\"",
-    "start": "react-scripts --expose-gc --max-old-space-size=8192 start",
-    "build": "react-scripts --expose-gc --max-old-space-size=8192 build",
-    "eject": "react-scripts eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "postinstall": "npm run copy-eval-license",
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.5-Evaluation/lib/license.json','./src/license.json')\""
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [

package.json

@@ -4,10 +4,21 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
     <title>React App</title>
   </head>
   <body>

public/index.html

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/manifest.json

@@ -5,25 +5,31 @@ import licenseData from './license'
 License.value = licenseData
 
 export default class ReactGraphComponent extends Component {
-  constructor(props) {
-    super(props)
-
-    // instantiate a new GraphComponent
-    this.graphComponent = new GraphComponent()
-
-    // configure an input mode for out of the box editing
-    this.graphComponent.inputMode = new GraphEditorInputMode()
-  }
-
   componentDidMount() {
+    if (!this.graphComponent) {
+      // instantiate a new GraphComponent once
+      this.graphComponent = this.initializeGraphComponent()
+    }
     // append the GraphComponent to the DOM
     this.div.appendChild(this.graphComponent.div)
+    // center the content of the GraphComponent after it was added to the DOM
+    this.graphComponent.fitGraphBounds()
+  }
 
-    // create some graph elements
-    this.createSampleGraph(this.graphComponent.graph)
+  componentWillUnmount() {
+    // Remove the GraphComponent on unmount.
+    // Depending on the use case, you may also clear the GraphComponent entirely and create a
+    // new one on each unmount / mount cycle.
+    this.div.removeChild(this.graphComponent.div)
+  }
 
-    // center the newly created graph
-    this.graphComponent.fitGraphBounds()
+  initializeGraphComponent() {
+    const graphComponent = new GraphComponent()
+    // configure an input mode for out of the box editing
+    graphComponent.inputMode = new GraphEditorInputMode()
+    // create some graph elements
+    this.createSampleGraph(graphComponent.graph)
+    return graphComponent
   }
 
   createSampleGraph(graph) {

src/ReactGraphComponent.js

@@ -1,6 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/index.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;