Update for yFiles for HTML 2.6

Author: michabaur

.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

.gitignore

@@ -1,26 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-license.json
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 package-lock.json
 yarn.lock
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+license.json

README.md

@@ -1,15 +1,15 @@
-<img src="./src/yfiles-logo.svg" alt="yFiles logo" height="100"/>
+<img src="src/assets/yfiles-logo.svg" alt="yFiles logo" height="100"/>
 
 # yFiles integration for create-react-app
 
-This sample application serves as a basic scaffold of how to integrate [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) in a [React](https://reactjs.org/) application. It was scaffolded with [create-react-app](https://create-react-app.dev/).
+This sample application serves as a basic scaffold of how to integrate [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) in a [React](https://reactjs.org/) application. It was scaffolded with [create vite](https://vitejs.dev//).
 
 **To run this project, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is required. You can evaluate yFiles 60 days free of charge on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL).**
 
 ## Version Information
 
-- create-react-app v5.0.1
-- yFiles for HTML 2.5
+- create vite v9.5.1
+- yFiles for HTML 2.6
 
 ## Getting Started
 
@@ -25,15 +25,15 @@ Then, extract a yFiles Evaluation package beside it and run
 npm install
 ```
 
-You can serve the application on [http://localhost:3000/](http://localhost:3000/) with
+You can serve the application on [http://localhost:5173/](http://localhost:5173/) with
 
 ```
 npm run start
 ```
 
 ## Under the Hood
 
-This project is a default `create-react-app` application, where yFiles was added as an additional dependency to integrate a basic graph component.
+This project is a `create vite` application, where yFiles was added as an additional dependency to integrate a basic graph component.
 
 A step-by-step description of how to integrate yFiles in a React application can be found [here](integration-howto.md).
 
@@ -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.
 
-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)).
+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)).
 
 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.
 

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

integration-howto.md

@@ -6,10 +6,14 @@ 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
+## Create a `create vite` application
 
-Run the create-react-app CLI with `> npx create-react-app yfiles-react-integration-basic` which
-scaffolds a basic React application.
+At first, create a basic `create vite` app by running `> npm create vite@latest`, e.g., with
+the following options:
+
+- `Project name:` yfiles-react-integration-basic
+- `Select framework:` React
+- `Select variant:` TypeScript
 
 ## Add yFiles as a dependency
 
@@ -20,7 +24,7 @@ Adding yFiles as a dependency is almost as easy as installing an external librar
    ```
    "dependencies": {
      ...
-     "yfiles": "../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib-dev/yfiles-25.0.4+eval-dev.tgz"
+     "yfiles": "../yFiles-for-HTML-Complete-2.6-Evaluation/lib-dev/yfiles-26.0.0+eval-dev.tgz"
    },
    ```
 
@@ -37,19 +41,19 @@ of the box to easily work with the library.
 
 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
+1. Create a new `ReactGraphComponent.tsx` file in `/src/components` 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.
 
-   See the contents of `/src/ReactGraphComponent.js` in this repository for the full implementation.
+   See the contents of `/src/components/ReactGraphComponent.tsx` in this repository for the full implementation.
 
    Make sure to configure your license data as described above.
 
-2. Afterwards, just add the new React component to the `App.js`.
+2. Afterwards, just add the new React component to the `App.tsx`.
 
-And that's it. Run `npm run start` to serve the application at [http://localhost:3000/](http://localhost:3000/) with a basic yFiles component.
+And that's it. Run `npm run dev` to serve the application at [http://localhost:5173/](http://localhost:5173/) with a basic yFiles component.
 
 ## Development Mode
 

package.json

@@ -3,40 +3,30 @@
   "version": "1.0.0",
   "author": "yWorks GmbH <[email protected]>",
   "private": true,
-  "dependencies": {
-    "@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.0.4-Evaluation/lib-dev/yfiles-25.0.4+eval-dev.tgz"
-  },
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
     "postinstall": "npm run copy-eval-license",
-    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib/license.json','./src/license.json')\""
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.6-Evaluation/lib/license.json','./src/license.json')\""
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "yfiles": "../yFiles-for-HTML-Complete-2.6-Evaluation/lib-dev/yfiles-26.0.0+eval-dev.tgz"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "~5.1.6",
+    "vite": "^4.3.9"
   }
 }

public/index.html

@@ -1,7 +1,6 @@
-import React from 'react'
-import logo from './yfiles-logo.svg'
+import logo from './assets/yfiles-logo.svg'
 import './App.css'
-import ReactGraphComponent from './ReactGraphComponent.js'
+import { ReactGraphComponent } from './components/ReactGraphComponent'
 
 function App() {
   return (