Update for yFiles for HTML 3.0

michabaur · michabaur · commit a58eaf30481c · 2025-02-27T16:48:40.000+01:00
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,6 +9,6 @@ module.exports = {
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': 'warn'
+    'react-refresh/only-export-components': 'warn',
   },
 }
diff --git a/README.md b/README.md
@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- create vite v9.5.1
-- yFiles for HTML 2.6
+- React 19
+- yFiles for HTML 3.0
 
 ## Getting Started
 
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/integration-howto.md b/integration-howto.md
@@ -24,7 +24,7 @@ Adding yFiles as a dependency is almost as easy as installing an external librar
    ```
    "dependencies": {
      ...
-     "yfiles": "../yFiles-for-HTML-Complete-2.6.0.4-Evaluation/lib-dev/yfiles-26.0.4+eval-dev.tgz"
+     "@yfiles/yfiles": "../yFiles-for-HTML-Complete-3.0-Evaluation/lib-dev/yfiles-30.0.0+eval-dev.tgz"
    },
    ```
 
diff --git a/package.json b/package.json
@@ -1,32 +1,32 @@
 {
-  "name": "yfiles-react-integration-basic",
-  "version": "26.0.4",
+  "name": "@yfiles/yfiles-react-integration-basic",
+  "version": "30.0.0",
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "private": true,
   "type": "module",
   "scripts": {
     "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.6.0.4-Evaluation/lib/license.json','./src/license.json')\""
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-3.0-Evaluation/lib/license.json','./src/license.json')\""
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "yfiles": "../yFiles-for-HTML-Complete-2.6.0.4-Evaluation/lib-dev/yfiles-26.0.4+eval-dev.tgz"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@yfiles/yfiles": "../yFiles-for-HTML-Complete-3.0-Evaluation/lib-dev/yfiles-30.0.3+eval-dev.tgz"
   },
   "devDependencies": {
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "typescript": "~5.3.2",
-    "vite": "^5.0.4"
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
   }
 }
diff --git a/src/components/ReactGraphComponent.tsx b/src/components/ReactGraphComponent.tsx
@@ -1,5 +1,5 @@
-import { useRef, useMemo, useLayoutEffect } from 'react'
-import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from 'yfiles'
+import { useLayoutEffect, useMemo, useRef } from 'react'
+import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from '@yfiles/yfiles'
 import licenseData from '../license.json'
 
 License.value = licenseData
@@ -40,7 +40,7 @@ export function ReactGraphComponent() {
 
   useLayoutEffect(() => {
     const gcContainer = graphComponentContainer.current!
-    gcContainer.appendChild(graphComponent.div)
+    gcContainer.appendChild(graphComponent.htmlElement)
     return () => {
       gcContainer.innerHTML = ''
     }
diff --git a/src/main.tsx b/src/main.tsx
@@ -6,5 +6,5 @@ import './index.css'
 ReactDOM.createRoot(document.querySelector<HTMLElement>('#root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react()]
 })

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@ module.exports = {`
`9`	`9`	`parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },`
`10`	`10`	`plugins: ['react-refresh'],`
`11`	`11`	`rules: {`
`12`		`- 'react-refresh/only-export-components': 'warn'`
	`12`	`+ 'react-refresh/only-export-components': 'warn',`
`13`	`13`	`},`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8" />`
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@ import './index.css'`
`6`	`6`	`ReactDOM.createRoot(document.querySelector<HTMLElement>('#root')!).render(`
`7`	`7`	`<React.StrictMode>`
`8`	`8`	`<App />`
`9`		`- </React.StrictMode>`
	`9`	`+ </React.StrictMode>,`
`10`	`10`	`)`