fix: update to svelte 4 (#2280)

* svelte4 * update * update * update * update * update * update
2026-08-21 08:02:26 +00:00 · 2023-09-13 23:55:27 +02:00
parent f6982fe818
commit 47b1591e8f
9 changed files with 604 additions and 173 deletions
@@ -18,10 +18,10 @@
 	"devDependencies": {
 		"@floating-ui/core": "^1.3.1",
 		"@playwright/test": "^1.34.3",
-		"@rgossiaux/svelte-headlessui": "^1.0.2",
-		"@sveltejs/adapter-static": "^2.0.2",
-		"@sveltejs/kit": "^1.20.1",
-		"@sveltejs/package": "^2.2.0",
+		"@rgossiaux/svelte-headlessui": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.25.0",
+		"@sveltejs/package": "^2.2.2",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",
 		"@types/d3": "^7.4.0",
@@ -37,7 +37,7 @@
 		"d3-dag": "^0.11.5",
 		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^8.6.0",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-plugin-svelte": "^2.33.1",
 		"monaco-editor-workers": "~0.39.1",
 		"ol": "^7.4.0",
 		"openapi-typescript-codegen": "^0.25.0",
@@ -50,7 +50,7 @@
 		"simple-svelte-autocomplete": "^2.5.1",
 		"style-to-object": "^0.4.1",
 		"stylelint-config-recommended": "^13.0.0",
-		"svelte": "^3.59.2",
+		"svelte": "^4.0.0",
 		"svelte-awesome": "^3.2.1",
 		"svelte-awesome-color-picker": "^2.4.5",
 		"svelte-check": "^3.4.3",
@@ -61,7 +61,7 @@
 		"svelte-popperjs": "^1.3.2",
 		"svelte-preprocess": "^5.0.1",
 		"svelte-range-slider-pips": "^2.1.1",
-		"svelte-splitpanes": "^0.7.14",
+		"svelte-splitpanes": "^0.8.0",
 		"svelte2tsx": "^0.6.16",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.6.1",
@@ -70,6 +70,20 @@
 		"vite-plugin-monaco-editor": "^1.1.0",
 		"yootils": "^0.3.1"
 	},
+	"overrides": {
+		"@rgossiaux/svelte-headlessui": {
+			"svelte": "$svelte"
+		},
+		"ag-grid-svelte": {
+			"svelte": "$svelte"
+		},
+		"svelte-chartjs": {
+			"svelte": "$svelte"
+		},
+		"svelte-timezone-picker": {
+			"svelte": "$svelte"
+		}
+	},
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
@@ -78,7 +92,7 @@
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
 		"@redocly/json-to-json-schema": "^0.0.1",
-		"@tanstack/svelte-table": "^8.9.2",
+		"@tanstack/svelte-table": "^8.9.9",
 		"ag-grid-svelte": "^0.3.0",
 		"ansi_up": "^5.2.1",
 		"chart.js": "^4.3.0",
@@ -92,14 +106,14 @@
 		"graphql": "^16.7.1",
 		"highlight.js": "^11.8.0",
 		"lodash": "^4.17.21",
-		"lucide-svelte": "^0.246.0",
+		"lucide-svelte": "^0.277.0",
 		"monaco-graphql": "^1.3.0",
 		"monaco-languageclient": "~6.0.3",
 		"openai": "^4.3.0",
 		"quill": "^1.3.7",
 		"svelte-autosize": "^1.0.1",
 		"svelte-carousel": "^1.0.25",
-		"svelte-chartjs": "^3.1.0",
+		"svelte-chartjs": "^3.1.2",
 		"svelte-dnd-action": "^0.9.22",
 		"svelte-exmarkdown": "^2.1.0",
 		"svelte-infinite-loading": "^1.3.8",
@@ -114,8 +128,8 @@
 		"yjs": "^13.6.7"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^1.20.1",
-		"svelte": "^3.59.2"
+		"@sveltejs/kit": "^1.25.0",
+		"svelte": "^4.0.0"
 	},
 	"exports": {
 		"./package.json": "./package.json",
@@ -21,7 +21,6 @@ import {
 	Underline
 } from 'lucide-svelte'
 import type { components } from '../component'
-import type { SvelteComponent } from 'svelte'

 export const STYLE_STORE_KEY = 'style_store' as const

@@ -100,7 +99,7 @@ export type TopColors = [] | [string] | [string, string] | [string, string, stri

 export type StylePropertyOption = {
 	text: string
-	icon: string | typeof SvelteComponent
+	icon: string | any
 }

 export type BaseStylePropertyValue<T extends StylePropertyType> = {
@@ -22,7 +22,8 @@
 		if (items) {
 		}
 		loading = true
-		const data = await import('lucide-svelte/dist/svelte/icons')
+		// @ts-ignore
+		const data = await import('lucide-svelte/icons')

 		filteredItems = items = Object.entries(data)
 			.filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
@@ -1,11 +1,10 @@
-import type { SvelteComponent } from 'svelte'
 import { writable } from 'svelte/store'

 export const SECONDARY_MENU_ID = 'app-secondary-menu' as const

 export interface SecondaryMenuStore {
 	isOpen: boolean
-	component?: typeof SvelteComponent | string
+	component?: any | string
 	props: Record<string, any>
 	onClose?: (() => void) | undefined
 }
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ConfirmationModal from './ConfirmationModal.svelte'
 	import { beforeNavigate, goto } from '$app/navigation'
-	import { onDestroy } from 'svelte/internal'
+	import { onDestroy } from 'svelte'
 	import { dirtyStore } from './dirtyStore'

 	let navigationState: { from: URL | undefined; to: URL | null; cancel: () => void } | undefined =
@@ -2,7 +2,6 @@
 	import type { SupportedLanguage } from '$lib/common'
 	import MySQLIcon from '$lib/components/icons/Mysql.svelte'
 	import PostgresIcon from '$lib/components/icons/PostgresIcon.svelte'
-	import type { SvelteComponent } from 'svelte'
 	import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './'
 	import JavaScript from './JavaScript.svelte'
 	import FetchIcon from './FetchIcon.svelte'
@@ -42,7 +41,7 @@

 	const langToComponent: Record<
 		SupportedLanguage | 'pgsql' | 'javascript' | 'fetch' | 'docker' | 'powershell',
-		typeof SvelteComponent
+		any
 	> = {
 		go: GoIcon,
 		python3: PythonIcon,
@@ -34,7 +34,7 @@
 		}
 		select: string
 		newBranch: { module: FlowModule }
-		move: { module: FlowModule }
+		move: { module: FlowModule } | undefined
 	}>()

 	$: itemProps = {
@@ -45,7 +45,9 @@
 		<button
 			title="Delete branch"
 			on:click|stopPropagation={() => {
-				dispatch('deleteBranch', deleteBranch)
+				if (deleteBranch) {
+					dispatch('deleteBranch', deleteBranch)
+				}
 			}}
 			type="button"
 			class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"