diff --git a/package-lock.json b/package-lock.json
index 70fcacf837..be18f178a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "@typescript-eslint/eslint-plugin": "^8.23.0",
         "@typescript-eslint/parser": "^8.23.0",
         "@typescript-eslint/utils": "^8.23.0",
-        "@vitejs/plugin-basic-ssl": "^1.1.0",
+        "@vitejs/plugin-basic-ssl": "^1.2.0",
         "@vitejs/plugin-react": "^4.2.1",
         "@zip.js/zip.js": "^2.7.29",
         "ansi-styles": "^4.3.0",
@@ -1895,6 +1895,44 @@
         "eslint": ">=8.40.0"
       }
     },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.0.3.tgz",
+      "integrity": "sha512-MCFS6CrQDu1yGwspm4qtli0e63vaPCehf6V7pIMP15AsWgMKrqDGCPFF/0kn4SP0ii4aySu4Pa62+fIRGFMjgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+        "debug": "^4.4.0",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.15",
+        "vitefu": "^1.0.4"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+      "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.7"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "svelte": "^5.0.0",
+        "vite": "^6.0.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -2571,6 +2609,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/agentkeepalive": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
@@ -3185,17 +3232,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/code-red": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.10.0",
-        "estree-walker": "^3.0.3",
-        "periscopic": "^3.1.0"
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/codemirror": {
@@ -3327,19 +3370,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "license": "MIT",
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4217,6 +4247,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "license": "MIT"
+    },
     "node_modules/espree": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
@@ -4248,6 +4284,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/esrap": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.5.tgz",
+      "integrity": "sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -4271,15 +4316,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -5902,12 +5938,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "license": "CC0-1.0"
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6530,17 +6560,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/periscopic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "is-reference": "^3.0.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7640,40 +7659,28 @@
       }
     },
     "node_modules/svelte": {
-      "version": "4.2.19",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
-      "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
+      "version": "5.20.4",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.20.4.tgz",
+      "integrity": "sha512-2Mo/AfObaw9zuD0u1JJ7sOVzRCGcpETEyDkLbtkcctWpCMCIyT0iz83xD8JT29SR7O4SgswuPRIDYReYF/607A==",
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.9.0",
-        "aria-query": "^5.3.0",
-        "axobject-query": "^4.0.0",
-        "code-red": "^1.0.3",
-        "css-tree": "^2.3.1",
-        "estree-walker": "^3.0.3",
-        "is-reference": "^3.0.1",
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.3",
+        "is-reference": "^3.0.3",
         "locate-character": "^3.0.0",
-        "magic-string": "^0.30.4",
-        "periscopic": "^3.1.0"
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
       },
       "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/svelte-hmr": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-      "license": "ISC",
-      "engines": {
-        "node": "^12.20 || ^14.13.1 || >= 16"
-      },
-      "peerDependencies": {
-        "svelte": "^3.19.0 || ^4.0.0"
+        "node": ">=18"
       }
     },
     "node_modules/to-regex-range": {
@@ -8520,6 +8527,24 @@
         "@esbuild/win32-x64": "0.24.2"
       }
     },
+    "node_modules/vitefu": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.6.tgz",
+      "integrity": "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==",
+      "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
@@ -8857,6 +8882,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "license": "MIT"
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
@@ -8964,7 +8995,7 @@
       "dependencies": {
         "playwright": "1.51.0-next",
         "playwright-core": "1.51.0-next",
-        "vite": "^5.4.14 || ^6.0.0"
+        "vite": "^6.1.0"
       },
       "engines": {
         "node": ">=18"
@@ -9006,561 +9037,18 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@playwright/experimental-ct-core": "1.51.0-next",
-        "@sveltejs/vite-plugin-svelte": "^3.0.1"
+        "@sveltejs/vite-plugin-svelte": "^5.0.3"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "devDependencies": {
-        "svelte": "^4.2.19"
+        "svelte": "^5.20.2"
       },
       "engines": {
         "node": ">=18"
       }
     },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-        "debug": "^4.3.4",
-        "deepmerge": "^4.3.1",
-        "kleur": "^4.1.5",
-        "magic-string": "^0.30.10",
-        "svelte-hmr": "^0.16.0",
-        "vitefu": "^0.2.5"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20"
-      },
-      "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
-        "vite": "^5.0.0"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20"
-      },
-      "peerDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "svelte": "^4.0.0 || ^5.0.0-next.0",
-        "vite": "^5.0.0"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/esbuild": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "peer": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.21.5",
-        "@esbuild/android-arm": "0.21.5",
-        "@esbuild/android-arm64": "0.21.5",
-        "@esbuild/android-x64": "0.21.5",
-        "@esbuild/darwin-arm64": "0.21.5",
-        "@esbuild/darwin-x64": "0.21.5",
-        "@esbuild/freebsd-arm64": "0.21.5",
-        "@esbuild/freebsd-x64": "0.21.5",
-        "@esbuild/linux-arm": "0.21.5",
-        "@esbuild/linux-arm64": "0.21.5",
-        "@esbuild/linux-ia32": "0.21.5",
-        "@esbuild/linux-loong64": "0.21.5",
-        "@esbuild/linux-mips64el": "0.21.5",
-        "@esbuild/linux-ppc64": "0.21.5",
-        "@esbuild/linux-riscv64": "0.21.5",
-        "@esbuild/linux-s390x": "0.21.5",
-        "@esbuild/linux-x64": "0.21.5",
-        "@esbuild/netbsd-x64": "0.21.5",
-        "@esbuild/openbsd-x64": "0.21.5",
-        "@esbuild/sunos-x64": "0.21.5",
-        "@esbuild/win32-arm64": "0.21.5",
-        "@esbuild/win32-ia32": "0.21.5",
-        "@esbuild/win32-x64": "0.21.5"
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/vite": {
-      "version": "5.4.14",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
-      "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "esbuild": "^0.21.3",
-        "postcss": "^8.4.43",
-        "rollup": "^4.20.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
-      }
-    },
-    "packages/playwright-ct-svelte/node_modules/vitefu": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
-      }
-    },
     "packages/playwright-ct-vue": {
       "name": "@playwright/experimental-ct-vue",
       "version": "1.51.0-next",
diff --git a/package.json b/package.json
index a173ee695e..544f94ba65 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "@typescript-eslint/eslint-plugin": "^8.23.0",
     "@typescript-eslint/parser": "^8.23.0",
     "@typescript-eslint/utils": "^8.23.0",
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@zip.js/zip.js": "^2.7.29",
     "ansi-styles": "^4.3.0",
diff --git a/packages/playwright-ct-core/package.json b/packages/playwright-ct-core/package.json
index a2702f0658..51474714d5 100644
--- a/packages/playwright-ct-core/package.json
+++ b/packages/playwright-ct-core/package.json
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "playwright-core": "1.51.0-next",
-    "vite": "^5.4.14 || ^6.0.0",
+    "vite": "^6.1.0",
     "playwright": "1.51.0-next"
   }
 }
diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts
index 761831f331..3cb31954d5 100644
--- a/packages/playwright-ct-svelte/index.d.ts
+++ b/packages/playwright-ct-svelte/index.d.ts
@@ -14,33 +14,51 @@
  * limitations under the License.
  */
 
-import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
+import type { Snippet } from "svelte"
+import type {
+  SvelteComponent as V4Component,
+  Component as V5Component,
+  ComponentProps
+} from 'svelte/types/runtime';
 import type { TestType, Locator } from '@playwright/experimental-ct-core';
 
-type ComponentSlot = string | string[];
+type ComponentSlot = Snippet | string;
 type ComponentSlots = Record<string, ComponentSlot> & { default?: ComponentSlot };
 type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<HooksConfig, Component extends SvelteComponent> {
-  props?: ComponentProps<Component>;
+export interface MountOptions<
+  HooksConfig,
+  Component extends (new (...args: any[]) => V4Component) | V5Component
+> {
+  props?: ComponentProps<InstanceType<Component>>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountResult<Component extends SvelteComponent> extends Locator {
+export interface MountResult<
+  Component extends (new (...args: any[]) => V4Component) | V5Component
+> extends Locator {
   unmount(): Promise<void>;
   update(options: {
-    props?: Partial<ComponentProps<Component>>;
+    props?: Partial<ComponentProps<InstanceType<Component>>>;
     on?: Partial<ComponentEvents>;
   }): Promise<void>;
 }
 
 export const test: TestType<{
-  mount<HooksConfig, Component extends SvelteComponent = SvelteComponent>(
-    component: new (...args: any[]) => Component,
-    options?: MountOptions<HooksConfig, Component>
+  mount<
+    HooksConfig,
+    Component extends (new (...args: any[]) => V4Component) | V5Component
+  >(
+    component: Component,
+    options?: MountOptions<HooksConfig, InstanceType<Component>>
   ): Promise<MountResult<Component>>;
 }>;
 
-export { defineConfig, PlaywrightTestConfig, expect, devices } from '@playwright/experimental-ct-core';
+export {
+  defineConfig,
+  PlaywrightTestConfig,
+  expect,
+  devices
+} from '@playwright/experimental-ct-core';
diff --git a/packages/playwright-ct-svelte/package.json b/packages/playwright-ct-svelte/package.json
index fa01d16d2e..1c64ffefed 100644
--- a/packages/playwright-ct-svelte/package.json
+++ b/packages/playwright-ct-svelte/package.json
@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@playwright/experimental-ct-core": "1.51.0-next",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1"
+    "@sveltejs/vite-plugin-svelte": "^5.0.3"
   },
   "devDependencies": {
-    "svelte": "^4.2.19"
+    "svelte": "^5.20.2"
   },
   "bin": {
     "playwright": "cli.js"
diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs
index 5901458813..85f7aa6015 100644
--- a/packages/playwright-ct-svelte/registerSource.mjs
+++ b/packages/playwright-ct-svelte/registerSource.mjs
@@ -18,12 +18,13 @@
 
 // This file is injected into the registry as text, no dependencies are allowed.
 
-import { detach as __pwDetach, insert as __pwInsert, noop as __pwNoop } from 'svelte/internal';
+import { asClassComponent } from 'svelte/legacy';
+import { createRawSnippet } from "svelte";
 
 /** @typedef {import('../playwright-ct-core/types/component').Component} Component */
 /** @typedef {import('../playwright-ct-core/types/component').ObjectComponent} ObjectComponent */
-/** @typedef {any} FrameworkComponent */
 /** @typedef {import('svelte').SvelteComponent} SvelteComponent */
+/** @typedef {import('svelte').ComponentType} ComponentType */
 
 /**
  * @param {any} component
@@ -33,36 +34,27 @@ function isObjectComponent(component) {
   return typeof component === 'object' && component && component.__pw_type === 'object-component';
 }
 
-/**
- * TODO: remove this function when the following issue is fixed:
- * https://github.com/sveltejs/svelte/issues/2588
- */
-function __pwCreateSlots(slots) {
-  const svelteSlots = {};
+/** @type {( component: ObjectComponent ) => Record<string, any>} */
+function extractParams(component) {
+  let {props, slots, on} = component;
 
-  for (const slotName in slots) {
-    const template = document
-        .createRange()
-        .createContextualFragment(slots[slotName]);
-    svelteSlots[slotName] = [createSlotFn(template)];
-  }
+  slots = Object.fromEntries(
+    Object.entries(slots ?? {}).map(([key, snippet]) => {
+      if(typeof snippet === "string") {
+        return [key, createRawSnippet(() => ({render: () => snippet}))];
+      }
 
-  function createSlotFn(element) {
-    return function() {
-      return {
-        c: __pwNoop,
-        m: function mount(target, anchor) {
-          __pwInsert(target, element, anchor);
-        },
-        d: function destroy(detaching) {
-          if (detaching)
-            __pwDetach(element);
-        },
-        l: __pwNoop,
-      };
-    };
-  }
-  return svelteSlots;
+      return [key, snippet]
+    })
+  );
+
+  on = Object.fromEntries(
+    Object.entries(on ?? {}).map(([key, fn]) => {
+      return [`on${key}`, fn]
+    })
+  );
+
+  return {...props, ...slots, ...on};
 }
 
 const __pwSvelteComponentKey = Symbol('svelteComponent');
@@ -71,37 +63,38 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
   if (!isObjectComponent(component))
     throw new Error('JSX mount notation is not supported');
 
-  const objectComponent = component;
-  const componentCtor = component.type;
+  const componentCtor = asClassComponent(component.type);
 
   class App extends componentCtor {
     constructor(options = {}) {
+      if (!isObjectComponent(component))
+        throw new Error('JSX mount notation is not supported');
+
       super({
         target: rootElement,
-        props: {
-          ...objectComponent.props,
-          $$slots: __pwCreateSlots(objectComponent.slots),
-          $$scope: {},
-        },
+        props: extractParams(component),
         ...options
       });
     }
   }
 
+  /** @type {SvelteComponent | undefined} */
   let svelteComponent;
-  for (const hook of window.__pw_hooks_before_mount || [])
+  for (const hook of window.__pw_hooks_before_mount || []) {
     svelteComponent = await hook({ hooksConfig, App });
+  }
 
-  if (!svelteComponent)
+  if (!svelteComponent) {
     svelteComponent = new App();
+  }
 
   rootElement[__pwSvelteComponentKey] = svelteComponent;
 
-  for (const [key, listener] of Object.entries(objectComponent.on || {}))
-    svelteComponent.$on(key, event => listener(event.detail));
-
   for (const hook of window.__pw_hooks_after_mount || [])
     await hook({ hooksConfig, svelteComponent });
+
+  for (const [key, listener] of Object.entries(component.on || {}))
+    svelteComponent.$on(key, event => listener(event.detail));
 };
 
 window.playwrightUnmount = async rootElement => {
@@ -120,9 +113,8 @@ window.playwrightUpdate = async (rootElement, component) => {
   if (!svelteComponent)
     throw new Error('Component was not mounted');
 
+  svelteComponent.$set(extractParams(component));
+
   for (const [key, listener] of Object.entries(component.on || {}))
     svelteComponent.$on(key, event => listener(event.detail));
-
-  if (component.props)
-    svelteComponent.$set(component.props);
 };
diff --git a/tests/components/ct-svelte-vite/package.json b/tests/components/ct-svelte-vite/package.json
index e5bdd1adeb..92b64dcb45 100644
--- a/tests/components/ct-svelte-vite/package.json
+++ b/tests/components/ct-svelte-vite/package.json
@@ -10,13 +10,13 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.2",
     "svelte-check": "^3.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.2.8"
+    "vite": "^6.1.0"
   },
   "dependencies": {
-    "svelte": "^4.2.8"
+    "svelte": "^5.19.9"
   }
 }
diff --git a/tests/components/ct-svelte-vite/src/components/Button.svelte b/tests/components/ct-svelte-vite/src/components/Button.svelte
index 2011c48b6b..b44df67b29 100644
--- a/tests/components/ct-svelte-vite/src/components/Button.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Button.svelte
@@ -1,7 +1,6 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  export let title: string;
-  const dispatch = createEventDispatcher();
+<script>
+/** @type {{title: string, onsubmit: (msg: string) => void}} */
+const { title, onsubmit } = $props();
 </script>
- 
-<button on:click={() => dispatch('submit', 'hello')}>{title}</button>
+
+<button onclick={() => onsubmit('hello')}>{title}</button>
diff --git a/tests/components/ct-svelte-vite/src/components/Counter.svelte b/tests/components/ct-svelte-vite/src/components/Counter.svelte
index 0362e2ac53..cddda72e6b 100644
--- a/tests/components/ct-svelte-vite/src/components/Counter.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Counter.svelte
@@ -1,14 +1,13 @@
-<script lang="ts">
+<script>
 import { update, remountCount } from '../store'
-import { createEventDispatcher } from "svelte";
-export let count: number;
-const dispatch = createEventDispatcher();
+/** @type {{count: number; onsubmit: (msg: string) => void; main?: import("svelte").Snippet; children?: import("svelte").Snippet}} */
+const { count, onsubmit, main, children } = $props()
 update();
 </script>
 
-<button on:click={() => dispatch('submit', 'hello')}>
+<button onclick={() => onsubmit?.('hello')}>
   <span data-testid="props">{count}</span>
   <span data-testid="remount-count">{remountCount}</span>
-  <slot name="main" />
-  <slot />
+  {@render main?.()}
+  {@render children?.()}
 </button>
diff --git a/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte b/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
index 201dda6ce3..78a73487e2 100644
--- a/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
+++ b/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
@@ -1,7 +1,12 @@
+<script>
+/** @type {{children?: import("svelte").Snippet}} */
+const {children} = $props()
+</script>
+
 <div>
   <h1>Welcome!</h1>
   <main>
-    <slot />
+    {@render children?.()}
   </main>
   <footer>
     Thanks for visiting.
diff --git a/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte b/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
index 5f0d988af5..da5843c09f 100644
--- a/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
+++ b/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
@@ -1,11 +1,16 @@
+<script>
+/** @type {{header?: import("svelte").Snippet, main?: import("svelte").Snippet, footer?: import("svelte").Snippet}} */
+const {header, main, footer} = $props()
+</script>
+
 <div>
   <header>
-    <slot name="header" />
+    {@render header?.()}
   </header>
   <main>
-    <slot name="main" />
+    {@render main?.()}
   </main>
   <footer>
-    <slot name="footer" />
+    {@render footer?.()}
   </footer>
 </div>
diff --git a/tests/components/ct-svelte-vite/tests/render.spec.ts b/tests/components/ct-svelte-vite/tests/render.spec.ts
index bf830dd715..b382fa879c 100644
--- a/tests/components/ct-svelte-vite/tests/render.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/render.spec.ts
@@ -1,5 +1,4 @@
 import { test, expect } from '@playwright/experimental-ct-svelte';
-import type { HooksConfig } from '../playwright';
 import Button from '@/components/Button.svelte';
 import Empty from '@/components/Empty.svelte';
 import Context from '@/components/Context.svelte';
@@ -21,7 +20,7 @@ test('get textContent of the empty component', async ({ mount }) => {
 });
 
 test('render context', async ({ mount }) => {
-  const component = await mount<HooksConfig>(Context, {
+  const component = await mount(Context, {
     hooksConfig: {
       context: 'context-value',
     }
diff --git a/tests/components/ct-svelte-vite/tests/slots.spec.ts b/tests/components/ct-svelte-vite/tests/slots.spec.ts
index 4d6823abe7..4d0385faea 100644
--- a/tests/components/ct-svelte-vite/tests/slots.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/slots.spec.ts
@@ -5,7 +5,7 @@ import NamedSlots from '@/components/NamedSlots.svelte';
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: 'Main Content',
+      children: 'Main Content',
     },
   });
   await expect(component).toContainText('Main Content');
diff --git a/tests/components/ct-svelte/package.json b/tests/components/ct-svelte/package.json
index 65a27f1681..90ac777a15 100644
--- a/tests/components/ct-svelte/package.json
+++ b/tests/components/ct-svelte/package.json
@@ -19,6 +19,6 @@
     "sirv-cli": "^2.0.0"
   },
   "dependencies": {
-    "svelte": "^4.2.8"
+    "svelte": "^5.19.9"
   }
 }
diff --git a/tests/components/ct-svelte/src/components/Button.svelte b/tests/components/ct-svelte/src/components/Button.svelte
index 8c46efd1f2..9e8d2ac890 100644
--- a/tests/components/ct-svelte/src/components/Button.svelte
+++ b/tests/components/ct-svelte/src/components/Button.svelte
@@ -1,7 +1,5 @@
 <script>
-import { createEventDispatcher } from "svelte";
-export let title;
-const dispatch = createEventDispatcher();
+const { title, onsubmit } = $props();
 </script>
-    
-<button on:click={() => dispatch('submit', 'hello')}>{title}</button>
+
+<button onclick={() => onsubmit('hello')}>{title}</button>
diff --git a/tests/components/ct-svelte/src/components/Counter.svelte b/tests/components/ct-svelte/src/components/Counter.svelte
index 38674bb6c3..76cace9a5b 100644
--- a/tests/components/ct-svelte/src/components/Counter.svelte
+++ b/tests/components/ct-svelte/src/components/Counter.svelte
@@ -1,14 +1,12 @@
 <script>
 import { update, remountCount } from '../store'
-import { createEventDispatcher } from "svelte";
-export let count;
-const dispatch = createEventDispatcher();
+const { count, onsubmit, main, children } = $props()
 update();
 </script>
 
-<button on:click={() => dispatch('submit', 'hello')}>
+<button onclick={() => onsubmit?.('hello')}>
   <span data-testid="props">{count}</span>
   <span data-testid="remount-count">{remountCount}</span>
-  <slot name="main" />
-  <slot />
+  {@render main?.()}
+  {@render children?.()}
 </button>
diff --git a/tests/components/ct-svelte/src/components/DefaultSlot.svelte b/tests/components/ct-svelte/src/components/DefaultSlot.svelte
index 201dda6ce3..be05b7924f 100644
--- a/tests/components/ct-svelte/src/components/DefaultSlot.svelte
+++ b/tests/components/ct-svelte/src/components/DefaultSlot.svelte
@@ -1,7 +1,11 @@
+<script>
+const {children} = $props()
+</script>
+
 <div>
   <h1>Welcome!</h1>
   <main>
-    <slot />
+    {@render children?.()}
   </main>
   <footer>
     Thanks for visiting.
diff --git a/tests/components/ct-svelte/src/components/NamedSlots.svelte b/tests/components/ct-svelte/src/components/NamedSlots.svelte
index 5f0d988af5..62b7c828ab 100644
--- a/tests/components/ct-svelte/src/components/NamedSlots.svelte
+++ b/tests/components/ct-svelte/src/components/NamedSlots.svelte
@@ -1,11 +1,15 @@
+<script>
+  const {header, main, footer} = $props()
+</script>
+
 <div>
   <header>
-    <slot name="header" />
+    {@render header?.()}
   </header>
   <main>
-    <slot name="main" />
+    {@render main?.()}
   </main>
   <footer>
-    <slot name="footer" />
+    {@render footer?.()}
   </footer>
 </div>
diff --git a/tests/components/ct-svelte/tests/slots.spec.ts b/tests/components/ct-svelte/tests/slots.spec.ts
index 4d6823abe7..4d0385faea 100644
--- a/tests/components/ct-svelte/tests/slots.spec.ts
+++ b/tests/components/ct-svelte/tests/slots.spec.ts
@@ -5,7 +5,7 @@ import NamedSlots from '@/components/NamedSlots.svelte';
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: 'Main Content',
+      children: 'Main Content',
     },
   });
   await expect(component).toContainText('Main Content');
diff --git a/tests/components/ct-svelte4/.gitignore b/tests/components/ct-svelte4/.gitignore
new file mode 100644
index 0000000000..2347f3ca3b
--- /dev/null
+++ b/tests/components/ct-svelte4/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+/public/build/
+/public/tests/
+
+.DS_Store
diff --git a/tests/components/ct-svelte4/README.md b/tests/components/ct-svelte4/README.md
new file mode 100644
index 0000000000..8ca4fcaff9
--- /dev/null
+++ b/tests/components/ct-svelte4/README.md
@@ -0,0 +1,109 @@
+*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
+
+*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```
diff --git a/tests/components/ct-svelte4/package.json b/tests/components/ct-svelte4/package.json
new file mode 100644
index 0000000000..90ac777a15
--- /dev/null
+++ b/tests/components/ct-svelte4/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "ct-svelte",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^2.0.0"
+  },
+  "dependencies": {
+    "svelte": "^5.19.9"
+  }
+}
diff --git a/tests/components/ct-svelte4/playwright.config.ts b/tests/components/ct-svelte4/playwright.config.ts
new file mode 100644
index 0000000000..e26caad736
--- /dev/null
+++ b/tests/components/ct-svelte4/playwright.config.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, devices } from '@playwright/experimental-ct-svelte';
+import { resolve } from 'path';
+
+export default defineConfig({
+  testDir: 'tests',
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'html' : 'line',
+  use: {
+    trace: 'on-first-retry',
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});
diff --git a/tests/components/ct-svelte4/playwright/index.html b/tests/components/ct-svelte4/playwright/index.html
new file mode 100644
index 0000000000..43136a165e
--- /dev/null
+++ b/tests/components/ct-svelte4/playwright/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>
diff --git a/tests/components/ct-svelte4/playwright/index.ts b/tests/components/ct-svelte4/playwright/index.ts
new file mode 100644
index 0000000000..fe89c98e10
--- /dev/null
+++ b/tests/components/ct-svelte4/playwright/index.ts
@@ -0,0 +1,15 @@
+// @ts-check
+import '../src/assets/index.css';
+import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
+
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
+  console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
+});
+  
+afterMount<HooksConfig>(async () => {
+  console.log(`After mount`);
+});
diff --git a/tests/components/ct-svelte4/public/favicon.png b/tests/components/ct-svelte4/public/favicon.png
new file mode 100644
index 0000000000..7e6f5eb5a2
Binary files /dev/null and b/tests/components/ct-svelte4/public/favicon.png differ
diff --git a/tests/components/ct-svelte4/public/index.html b/tests/components/ct-svelte4/public/index.html
new file mode 100644
index 0000000000..74558940d0
--- /dev/null
+++ b/tests/components/ct-svelte4/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+  <title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='/favicon.png'>
+  <link rel='stylesheet' href='/build/bundle.css'>
+
+  <script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/tests/components/ct-svelte4/rollup.config.js b/tests/components/ct-svelte4/rollup.config.js
new file mode 100644
index 0000000000..10b425f1fb
--- /dev/null
+++ b/tests/components/ct-svelte4/rollup.config.js
@@ -0,0 +1,121 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    }
+  };
+}
+
+const prod = {
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js'
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production
+      }
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  }
+};
+
+const test = {
+  input: 'src/tests.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/tests/bundle.js'
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production
+      }
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    commonjs(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  },
+};
+
+export default [ prod, test ];
diff --git a/tests/components/ct-svelte4/scripts/setupTypeScript.js b/tests/components/ct-svelte4/scripts/setupTypeScript.js
new file mode 100644
index 0000000000..e6184aa223
--- /dev/null
+++ b/tests/components/ct-svelte4/scripts/setupTypeScript.js
@@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+    export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^2.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^8.0.0",
+  "typescript": "^4.0.0",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add TSConfig
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}
diff --git a/tests/components/ct-svelte4/src/App.svelte b/tests/components/ct-svelte4/src/App.svelte
new file mode 100644
index 0000000000..93a64258b0
--- /dev/null
+++ b/tests/components/ct-svelte4/src/App.svelte
@@ -0,0 +1,34 @@
+<script>
+import { onMount, onDestroy } from 'svelte';
+import LoginPage from './pages/LoginPage.svelte';
+import DashboardPage from './pages/DashboardPage.svelte';
+
+let path = '';
+function updatePath() {
+  path = window.location.pathname;
+}
+onMount(() => {
+  updatePath();
+  window.addEventListener('popstate', updatePath);
+});
+onDestroy(() => {
+  window.removeEventListener('popstate', updatePath);
+});
+/**
+ * @param newPath {string}
+ */
+function navigate(newPath) {
+  history.pushState({}, '', newPath);
+  updatePath();
+}
+</script>
+
+<header>
+  <a on:click={(e) => { e.preventDefault(); navigate('/'); }} href='/login'>Login</a>
+  <a on:click={(e) => { e.preventDefault(); navigate('/dashboard'); }} href='/dashboard'>Dashboard</a>
+</header>
+{#if path === '/'}
+  <LoginPage />
+{:else if path === '/dashboard'}
+  <DashboardPage />
+{/if}
diff --git a/tests/components/ct-svelte4/src/assets/index.css b/tests/components/ct-svelte4/src/assets/index.css
new file mode 100644
index 0000000000..97495c44b8
--- /dev/null
+++ b/tests/components/ct-svelte4/src/assets/index.css
@@ -0,0 +1,20 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #e3e3e3;
+    background-color: #1b1b1d;
+  }
+}
diff --git a/tests/components/ct-svelte4/src/components/Button.svelte b/tests/components/ct-svelte4/src/components/Button.svelte
new file mode 100644
index 0000000000..8c46efd1f2
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Button.svelte
@@ -0,0 +1,7 @@
+<script>
+import { createEventDispatcher } from "svelte";
+export let title;
+const dispatch = createEventDispatcher();
+</script>
+    
+<button on:click={() => dispatch('submit', 'hello')}>{title}</button>
diff --git a/tests/components/ct-svelte4/src/components/Component.svelte b/tests/components/ct-svelte4/src/components/Component.svelte
new file mode 100644
index 0000000000..179f993315
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Component.svelte
@@ -0,0 +1 @@
+<div>test</div>
diff --git a/tests/components/ct-svelte4/src/components/Counter.svelte b/tests/components/ct-svelte4/src/components/Counter.svelte
new file mode 100644
index 0000000000..38674bb6c3
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/Counter.svelte
@@ -0,0 +1,14 @@
+<script>
+import { update, remountCount } from '../store'
+import { createEventDispatcher } from "svelte";
+export let count;
+const dispatch = createEventDispatcher();
+update();
+</script>
+
+<button on:click={() => dispatch('submit', 'hello')}>
+  <span data-testid="props">{count}</span>
+  <span data-testid="remount-count">{remountCount}</span>
+  <slot name="main" />
+  <slot />
+</button>
diff --git a/tests/components/ct-svelte4/src/components/DefaultSlot.svelte b/tests/components/ct-svelte4/src/components/DefaultSlot.svelte
new file mode 100644
index 0000000000..201dda6ce3
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/DefaultSlot.svelte
@@ -0,0 +1,9 @@
+<div>
+  <h1>Welcome!</h1>
+  <main>
+    <slot />
+  </main>
+  <footer>
+    Thanks for visiting.
+  </footer>
+</div>
diff --git a/tests/components/ct-svelte4/src/components/Empty.svelte b/tests/components/ct-svelte4/src/components/Empty.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/components/ct-svelte4/src/components/MultiRoot.svelte b/tests/components/ct-svelte4/src/components/MultiRoot.svelte
new file mode 100644
index 0000000000..87996d0ce0
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/MultiRoot.svelte
@@ -0,0 +1,2 @@
+<div>root 1</div>
+<div>root 2</div>
diff --git a/tests/components/ct-svelte4/src/components/NamedSlots.svelte b/tests/components/ct-svelte4/src/components/NamedSlots.svelte
new file mode 100644
index 0000000000..5f0d988af5
--- /dev/null
+++ b/tests/components/ct-svelte4/src/components/NamedSlots.svelte
@@ -0,0 +1,11 @@
+<div>
+  <header>
+    <slot name="header" />
+  </header>
+  <main>
+    <slot name="main" />
+  </main>
+  <footer>
+    <slot name="footer" />
+  </footer>
+</div>
diff --git a/tests/components/ct-svelte4/src/main.js b/tests/components/ct-svelte4/src/main.js
new file mode 100644
index 0000000000..e081023688
--- /dev/null
+++ b/tests/components/ct-svelte4/src/main.js
@@ -0,0 +1,8 @@
+import App from './App.svelte';
+import './assets/index.css';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
diff --git a/tests/components/ct-svelte4/src/pages/DashboardPage.svelte b/tests/components/ct-svelte4/src/pages/DashboardPage.svelte
new file mode 100644
index 0000000000..161f5338e8
--- /dev/null
+++ b/tests/components/ct-svelte4/src/pages/DashboardPage.svelte
@@ -0,0 +1 @@
+<main>Dashboard</main>
diff --git a/tests/components/ct-svelte4/src/pages/LoginPage.svelte b/tests/components/ct-svelte4/src/pages/LoginPage.svelte
new file mode 100644
index 0000000000..3c359ab27c
--- /dev/null
+++ b/tests/components/ct-svelte4/src/pages/LoginPage.svelte
@@ -0,0 +1 @@
+<main>Login</main>
diff --git a/tests/components/ct-svelte4/src/store/index.ts b/tests/components/ct-svelte4/src/store/index.ts
new file mode 100644
index 0000000000..43d7ee31fc
--- /dev/null
+++ b/tests/components/ct-svelte4/src/store/index.ts
@@ -0,0 +1,4 @@
+export let remountCount = 0;
+export function update() {
+  remountCount++;
+}
diff --git a/tests/components/ct-svelte4/tests/events.spec.ts b/tests/components/ct-svelte4/tests/events.spec.ts
new file mode 100644
index 0000000000..f2f2593515
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/events.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+
+test('emit an submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
diff --git a/tests/components/ct-svelte4/tests/render.spec.ts b/tests/components/ct-svelte4/tests/render.spec.ts
new file mode 100644
index 0000000000..3c0ada7a61
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/render.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import Component from '@/components/Component.svelte';
+import Empty from '@/components/Empty.svelte';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component without options', async ({ mount }) => {
+  const component = await mount(Component);
+  await expect(component).toContainText('test');
+});
+
+test('get textContent of the empty component', async ({ mount }) => {
+  const component = await mount(Empty);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
diff --git a/tests/components/ct-svelte4/tests/router.spec.ts b/tests/components/ct-svelte4/tests/router.spec.ts
new file mode 100644
index 0000000000..127620b3c9
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/router.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import App from '@/App.svelte';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount(App);
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-svelte4/tests/unmount.spec.ts b/tests/components/ct-svelte4/tests/unmount.spec.ts
new file mode 100644
index 0000000000..c0ac0f6785
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/unmount.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import MultiRoot from '@/components/MultiRoot.svelte';
+
+test('unmount', async ({ page, mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(page.locator('#root')).toContainText('Submit');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ page, mount }) => {
+  const component = await mount(MultiRoot);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
diff --git a/tests/components/ct-svelte4/tests/update.spec.ts b/tests/components/ct-svelte4/tests/update.spec.ts
new file mode 100644
index 0000000000..358204edfa
--- /dev/null
+++ b/tests/components/ct-svelte4/tests/update.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Counter from '@/components/Counter.svelte';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    props: { count: 9001 },
+  });
+  await expect(component.getByTestId('props')).toContainText('9001');
+
+  await component.update({
+    props: { count: 1337 },
+  });
+  await expect(component).not.toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('1337');
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(Counter);
+
+  const messages: string[] = [];
+  await component.update({
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-svelte4/tsconfig.json b/tests/components/ct-svelte4/tsconfig.json
new file mode 100644
index 0000000000..4ce7ec19bf
--- /dev/null
+++ b/tests/components/ct-svelte4/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "*": ["_"],
+    }
+  }
+}