Update for yFiles for HTML 3.0

michabaur · michabaur · commit d31459a75acf · 2025-02-27T16:48:41.000+01:00
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -3,12 +3,8 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript'
-  ],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript'],
   parserOptions: {
-    ecmaVersion: 'latest'
-  }
+    ecmaVersion: 'latest',
+  },
 }
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 ## Version Information
 
 - create-vue v3.3
-- yFiles for HTML 2.6
+- yFiles for HTML 3.0
 
 ## Getting Started
 
@@ -19,7 +19,7 @@ Just clone this repository with
 git clone https://github.com/yWorks/yfiles-vue-integration-basic
 ```
 
-Then, extract a yFiles Evaluation package beside it and run
+Then, extract a yFiles Evaluation package besides it and run
 
 ```
 npm install
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
@@ -30,7 +30,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,34 +1,27 @@
 {
-  "name": "yfiles-vue-integration-basic",
-  "version": "26.0.4",
+  "name": "@yfiles/yfiles-vue-integration-basic",
+  "version": "30.0.0",
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
     "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "build": "vite build",
     "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": {
-    "vue": "^3.3.8",
-    "yfiles": "../yFiles-for-HTML-Complete-2.6.0.4-Evaluation/lib-dev/yfiles-26.0.4+eval-dev.tgz"
+    "vue": "^3.5.13",
+    "@yfiles/yfiles": "../yFiles-for-HTML-Complete-3.0-Evaluation/lib-dev/yfiles-30.0.0+eval-dev.tgz"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^20.9.4",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-vue": "^9.18.1",
-    "npm-run-all": "^4.1.5",
-    "typescript": "~5.3.2",
-    "vite": "^5.0.4",
-    "vue-tsc": "^1.8.22"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.20.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "typescript": "~5.7.3",
+    "vite": "^6.1.0",
+    "vue-tsc": "^2.2.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -23,10 +23,12 @@ import GraphComponent from './components/GraphComponent.vue'
   flex-direction: column;
   align-items: center;
 }
+
 .header {
   width: 100%;
   text-align: center;
 }
+
 .header img {
   height: 100px;
 }
diff --git a/src/components/GraphComponent.vue b/src/components/GraphComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from 'yfiles'
+import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from '@yfiles/yfiles'
 import licenseData from '../license.json'
 
 License.value = licenseData
@@ -11,12 +11,14 @@ const graphComponent = initializeGraphComponent()
 graphComponent.inputMode = new GraphEditorInputMode()
 
 onMounted(() => {
-  ;(gcContainer.value as unknown as HTMLDivElement).appendChild(graphComponent.div)
+  ;(gcContainer.value as unknown as HTMLDivElement).appendChild(graphComponent.htmlElement)
   graphComponent.fitGraphBounds()
 })
 
 onUnmounted(() => {
-  ;(graphComponent.div.parentElement as HTMLDivElement).removeChild(graphComponent.div)
+  ;(graphComponent.htmlElement.parentElement as HTMLDivElement).removeChild(
+    graphComponent.htmlElement,
+  )
 })
 
 function initializeGraphComponent(): GraphComponent {
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": [
     "vite.config.*",
     "vitest.config.*",
diff --git a/vite.config.ts b/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
 })

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
`@@ -23,10 +23,12 @@ import GraphComponent from './components/GraphComponent.vue'`
`23`	`23`	`flex-direction: column;`
`24`	`24`	`align-items: center;`
`25`	`25`	`}`
	`26`	`+`
`26`	`27`	`.header {`
`27`	`28`	`width: 100%;`
`28`	`29`	`text-align: center;`
`29`	`30`	`}`
	`31`	`+`
`30`	`32`	`.header img {`
`31`	`33`	`height: 100px;`
`32`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": "@tsconfig/node18/tsconfig.json",`
	`2`	`+ "extends": "@vue/tsconfig/tsconfig.dom.json",`
`3`	`3`	`"include": [`
`4`	`4`	`"vite.config.*",`
`5`	`5`	`"vitest.config.*",`