Merge pull request #5596 from xyflow/chore/svelte-typed-context

Chore/svelte typed context

examples/svelte/.eslintignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

examples/svelte/.eslintrc.cjs

@@ -1,30 +0,0 @@
-module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
-};

examples/svelte/.gitignore

@@ -1,10 +1,24 @@
-.DS_Store
 node_modules
-/build
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
 /.svelte-kit
-/package
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

examples/svelte/.npmrc

@@ -1,2 +1 @@
-engine-strict=true
-resolution-mode=highest
+engine-strict=true

examples/svelte/eslint.config.js

@@ -0,0 +1,41 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

examples/svelte/package.json

@@ -12,25 +12,25 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.20.7",
-		"@typescript-eslint/eslint-plugin": "^8.34.0",
-		"@typescript-eslint/parser": "^8.34.0",
-		"eslint": "^9.24.0",
-		"eslint-config-prettier": "^10.1.2",
-		"eslint-plugin-svelte": "^3.5.1",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "^5.27.0",
-		"svelte-check": "^4.1.6",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.49.1",
+		"@typescript-eslint/eslint-plugin": "^8.48.1",
+		"@typescript-eslint/parser": "^8.48.1",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"svelte": "^5.45.4",
+		"svelte-check": "^4.3.4",
 		"tslib": "^2.8.1",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.0"
+		"typescript": "^5.9.3",
+		"vite": "^7.2.6"
 	},
 	"type": "module",
 	"dependencies": {
-		"@dagrejs/dagre": "^1.1.4",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@dagrejs/dagre": "^1.1.8",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@xyflow/svelte": "workspace:^"
 	}
 }

examples/svelte/src/routes/examples/edge-toolbar/CustomEdge.svelte

@@ -21,6 +21,6 @@
 </script>
 
 <BaseEdge {id} path={edgePath} />
-<EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
+<EdgeToolbar x={labelX} y={labelY} isVisible>
 	<button onclick={deleteEdge}>Delete</button>
 </EdgeToolbar>

examples/svelte/svelte.config.js

@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess({ script: true }),
+	preprocess: vitePreprocess(),
 	compilerOptions: {
 		runes: true
 	},

examples/svelte/tsconfig.json

@@ -9,7 +9,9 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"target": "ES2022",
+		"target": "esnext",
+		"module": "esnext",
+		"moduleResolution": "bundler",
 		"verbatimModuleSyntax": true,
 		"isolatedModules": true
 	}