feat!: add Svelte5 specific types (#381)

* feat: add typing for svelte5

* fix: update svelte in example

* fix: missing svelte5 export

* fix: update vite-svelte example to svelte5

* fix: update all svelte deps to latest

* fix: update vite-svelte example to use new style App

* fix: svelte5 d.ts

* chore: remove unused ts-expect-error

* chore: fix pnpm lock file

README.md

@@ -615,6 +615,13 @@ For Svelte + Vite, in the `src/vite-env.d.ts` file:
 /// <reference types="unplugin-icons/types/svelte" />
 ```
 
+If you're still using Svelte 4, replace the reference to use Svelte 4:
+```js
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/svelte4" />
+```
+
 If you're still using Svelte 3, replace the reference to use Svelte 3:
 ```js
 /// <reference types="svelte" />

examples/sveltekit/package.json

@@ -14,10 +14,10 @@
     "@iconify-json/icon-park": "^1.1.13",
     "@iconify-json/logos": "^1.1.43",
     "@iconify-json/mdi": "^1.1.67",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.4",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
     "unplugin-icons": "workspace:*"

examples/vite-svelte/package.json

@@ -15,11 +15,11 @@
     "@iconify-json/icon-park": "^1.1.13",
     "@iconify-json/logos": "^1.1.43",
     "@iconify-json/mdi": "^1.1.67",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
     "cross-env": "^7.0.3",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.4",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
     "svelte-preprocess": "^6.0.2",
     "typescript": "^5.5.4",
     "unplugin-icons": "workspace:*",

examples/vite-svelte/src/CustomSvg.svelte

@@ -1,2 +1,4 @@
-<script>export let content;</script>
-<svg {...$$props}>{@html content}</svg>
+<script>
+  const { content, ...props } = $props();
+</script>
+<svg {...props}>{@html content}</svg>

examples/vite-svelte/src/main.ts

@@ -1,6 +1,7 @@
+import { mount } from 'svelte'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 

package.json

@@ -112,6 +112,9 @@
     "./types/svelte4": {
       "types": "./types/svelte4.d.ts"
     },
+    "./types/svelte5": {
+      "types": "./types/svelte5.d.ts"
+    },
     "./types/vue": {
       "types": "./types/vue.d.ts"
     },