Update for yFiles for HTML 2.6

michabaur · michabaur · commit 432202dff80f · 2023-07-10T17:11:46.000+02:00
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,11 +1,14 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
-  "root": true,
-  "extends": [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended"
-  ]
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript'
+  ],
+  parserOptions: {
+    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.5
+- yFiles for HTML 2.6
 
 ## 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.
 
-The yFiles package also contains a more extensive [Vue.js integration demo](https://live.yworks.com/demos/toolkit/vue2/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/toolkit/vuejs)) and another [Vue CLI demo](https://live.yworks.com/demos/toolkit/vue2-cli/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit/vue-cli)), as well as a specialized [Vue.js Template Node Style](https://live.yworks.com/demos/style/vuejstemplatenodestyle/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/style/vuejstemplatenodestyle)) that leverages the powerful data binding and conditional rendering features of Vue.js.
+The yFiles package also contains a more extensive [Vue integration demo](https://live.yworks.com/demos/toolkit/vue/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/blob/master/demos/toolkit/vue)), as well as a specialized [Vue.js Template Node Style](https://live.yworks.com/demos/style/vue-template-node-style/index.html) ([GitHub](https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/style/vue-template-node-style)) that leverages the powerful data binding and conditional rendering features of Vue.js.
 
 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.
 
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>yfiles-vue-integration</title>
   </head>
diff --git a/integration-howto.md b/integration-howto.md
@@ -17,7 +17,7 @@ the following options:
 - `Add Vue Router for Single Page Application development?` No
 - `Add Pinia for state management?` No
 - `Add Vitest for Unit testing?` No
-- `Add Cypress for both Unit and End-to-End testing?` No
+- `Add an End-to-End Testing Solution?` No
 - `Add ESLint for code quality?` Yes
 - `Add Prettier for code formatting?` No
 
@@ -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.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"
    },
    ```
 
diff --git a/package.json b/package.json
@@ -6,28 +6,29 @@
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4173",
+    "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
+    "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",
     "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')\""
   },
   "dependencies": {
-    "vue": "^3.2.37",
-    "yfiles": "../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib-dev/yfiles-25.0.4+eval-dev.tgz"
+    "vue": "^3.3.4",
+    "yfiles": "../yFiles-for-HTML-Complete-2.6-Evaluation/lib-dev/yfiles-26.0.0+eval-dev.tgz"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/node": "^16.11.45",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.5.0",
-    "eslint-plugin-vue": "^9.0.0",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.17",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.39.0",
+    "eslint-plugin-vue": "^9.11.0",
     "npm-run-all": "^4.1.5",
-    "typescript": "~4.7.4",
-    "vite": "^3.0.1",
-    "vue-tsc": "^0.38.8"
+    "typescript": "~5.1.6",
+    "vite": "^4.3.9",
+    "vue-tsc": "^1.8.1"
   }
 }
diff --git a/tsconfig.config.json b/tsconfig.config.json
@@ -1,8 +1,12 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,15 +1,11 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
+  "files": [],
   "references": [
     {
-      "path": "./tsconfig.config.json"
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
   ]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "types": ["node"]
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,12 @@`
`1`	`1`	`{`
`2`		`- "extends": "@vue/tsconfig/tsconfig.node.json",`
`3`		`- "include": ["vite.config.", "vitest.config.", "cypress.config.*"],`
	`2`	`+ "extends": "@vue/tsconfig/tsconfig.dom.json",`
	`3`	`+ "include": ["env.d.ts", "src/*/", "src/*/.vue"],`
	`4`	`+ "exclude": ["src/*/__tests__/"],`
`4`	`5`	`"compilerOptions": {`
`5`	`6`	`"composite": true,`
`6`		`- "types": ["node"]`
	`7`	`+ "baseUrl": ".",`
	`8`	`+ "paths": {`
	`9`	`+ "@/": ["./src/"]`
	`10`	`+ }`
`7`	`11`	`}`
`8`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,11 @@`
`1`	`1`	`{`
`2`		`- "extends": "@vue/tsconfig/tsconfig.web.json",`
`3`		`- "include": ["env.d.ts", "src/*/", "src/*/.vue"],`
`4`		`- "compilerOptions": {`
`5`		`- "baseUrl": ".",`
`6`		`- "paths": {`
`7`		`- "@/": ["./src/"]`
`8`		`- }`
`9`		`- },`
	`2`	`+ "files": [],`
`10`	`3`	`"references": [`
`11`	`4`	`{`
`12`		`- "path": "./tsconfig.config.json"`
	`5`	`+ "path": "./tsconfig.node.json"`
	`6`	`+ },`
	`7`	`+ {`
	`8`	`+ "path": "./tsconfig.app.json"`
`13`	`9`	`}`
`14`	`10`	`]`
`15`	`11`	`}`