diff --git a/examples/svelte/svelte-vite/package.json b/examples/svelte/svelte-vite/package.json
index e66f9a18aa3..17d0d44184f 100644
--- a/examples/svelte/svelte-vite/package.json
+++ b/examples/svelte/svelte-vite/package.json
@@ -16,7 +16,7 @@
"eslint-config-prettier": "^8.3.0",
"prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.5.0",
- "svelte": "^4.2.7",
+ "svelte": "^5.0.0",
"svelte-eslint-parser": "0.33.1",
"typescript": "~4.6.2",
"vite": "^4.5.12"
diff --git a/examples/svelte/sveltekit/package.json b/examples/svelte/sveltekit/package.json
index 37246bb8e7a..1c165aa8da2 100644
--- a/examples/svelte/sveltekit/package.json
+++ b/examples/svelte/sveltekit/package.json
@@ -14,7 +14,7 @@
"@sveltejs/adapter-vercel": "^4.0.5",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
- "svelte": "^4.2.7",
+ "svelte": "^5.0.0",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
diff --git a/packages/sdks/e2e/svelte/package.json b/packages/sdks/e2e/svelte/package.json
index 4615f8d3bba..c388bd0b4be 100644
--- a/packages/sdks/e2e/svelte/package.json
+++ b/packages/sdks/e2e/svelte/package.json
@@ -14,12 +14,12 @@
"@sdk/tests": "workspace:*"
},
"devDependencies": {
- "@sveltejs/vite-plugin-svelte": "^2.0.3",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tsconfig/svelte": "^4.0.1",
- "svelte": "^3.57.0",
- "svelte-check": "^3.4.6",
+ "svelte": "^5.0.0",
+ "svelte-check": "^4.0.0",
"tslib": "^2.5.0",
- "typescript": "^5.1.6",
- "vite": "^4.5.11"
+ "typescript": "^5.5.0",
+ "vite": "^5.4.4"
}
}
diff --git a/packages/sdks/e2e/svelte/src/App.svelte b/packages/sdks/e2e/svelte/src/App.svelte
index 7c7821a0287..824a9dd3c48 100644
--- a/packages/sdks/e2e/svelte/src/App.svelte
+++ b/packages/sdks/e2e/svelte/src/App.svelte
@@ -42,7 +42,7 @@
],
};
- let props = undefined;
+ let props = $state(undefined);
const fetch = async () => {
props = await getProps({ _processContentResult });
props.customComponents = [builderBlockWithClassNameCustomComponent];
diff --git a/packages/sdks/e2e/svelte/src/BuilderBlockWithClassName.svelte b/packages/sdks/e2e/svelte/src/BuilderBlockWithClassName.svelte
index c075672ff10..a2893af6fb2 100644
--- a/packages/sdks/e2e/svelte/src/BuilderBlockWithClassName.svelte
+++ b/packages/sdks/e2e/svelte/src/BuilderBlockWithClassName.svelte
@@ -1,8 +1,12 @@
diff --git a/packages/sdks/e2e/svelte/src/main.ts b/packages/sdks/e2e/svelte/src/main.ts
index 7f13bc6d409..05a23f9488d 100644
--- a/packages/sdks/e2e/svelte/src/main.ts
+++ b/packages/sdks/e2e/svelte/src/main.ts
@@ -1,6 +1,7 @@
import App from './App.svelte';
+import { mount } from "svelte";
-const app = new App({
+const app = mount(App, {
target: document.getElementById('app'),
});
diff --git a/packages/sdks/e2e/sveltekit/package.json b/packages/sdks/e2e/sveltekit/package.json
index 7f0f02403d4..b67b69af9d5 100644
--- a/packages/sdks/e2e/sveltekit/package.json
+++ b/packages/sdks/e2e/sveltekit/package.json
@@ -16,10 +16,10 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^3.2.5",
"@sveltejs/kit": "^2.8.3",
- "svelte": "^4.2.19",
+ "svelte": "^5.0.0",
"svelte-check": "^4.0.5",
"tslib": "^2.4.1",
- "typescript": "^5.1.6",
+ "typescript": "^5.5.0",
"vite": "^5.4.9"
},
"nx": {
diff --git a/packages/sdks/e2e/sveltekit/src/components/BuilderBlockWithClassName.svelte b/packages/sdks/e2e/sveltekit/src/components/BuilderBlockWithClassName.svelte
index c075672ff10..a2893af6fb2 100644
--- a/packages/sdks/e2e/sveltekit/src/components/BuilderBlockWithClassName.svelte
+++ b/packages/sdks/e2e/sveltekit/src/components/BuilderBlockWithClassName.svelte
@@ -1,8 +1,12 @@
diff --git a/packages/sdks/e2e/sveltekit/src/routes/[...catchall]/+page.svelte b/packages/sdks/e2e/sveltekit/src/routes/[...catchall]/+page.svelte
index fa8a1aa20a4..3913642f814 100644
--- a/packages/sdks/e2e/sveltekit/src/routes/[...catchall]/+page.svelte
+++ b/packages/sdks/e2e/sveltekit/src/routes/[...catchall]/+page.svelte
@@ -10,8 +10,13 @@
}
}
- // this data comes from the function in `+page.server.ts`, which runs on the server only
- export let data;
+
+ interface Props {
+ // this data comes from the function in `+page.server.ts`, which runs on the server only
+ data: any;
+ }
+
+ let { data }: Props = $props();
const builderBlockWithClassNameCustomComponent = {
name: 'BuilderBlockWithClassName',
component: BuilderBlockWithClassName,
diff --git a/packages/sdks/output/svelte/package.json b/packages/sdks/output/svelte/package.json
index 3b519f09341..e0fd47bddde 100644
--- a/packages/sdks/output/svelte/package.json
+++ b/packages/sdks/output/svelte/package.json
@@ -55,7 +55,7 @@
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/kit": "^1.22.4",
"@sveltejs/package": "^2.2.0",
- "svelte": "^4.1.2",
+ "svelte": "^5.0.0",
"svelte-check": "^3.4.6",
"svelte-preprocess": "^5.0.4",
"tslib": "^2.3.1",
@@ -93,6 +93,6 @@
}
},
"peerDependencies": {
- "svelte": "^4.1.2"
+ "svelte": "^5.0.0"
}
}
diff --git a/packages/sdks/snippets/svelte/package.json b/packages/sdks/snippets/svelte/package.json
index 032f082e640..ad2a5d1da08 100644
--- a/packages/sdks/snippets/svelte/package.json
+++ b/packages/sdks/snippets/svelte/package.json
@@ -16,12 +16,12 @@
"svelte-routing": "^2.13.0"
},
"devDependencies": {
- "@sveltejs/vite-plugin-svelte": "^3.0.2",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tsconfig/svelte": "^5.0.2",
- "svelte": "^4.2.12",
- "svelte-check": "^3.6.7",
+ "svelte": "^5.0.0",
+ "svelte-check": "^4.0.0",
"tslib": "^2.6.2",
- "typescript": "^5.2.2",
- "vite": "^5.2.0"
+ "typescript": "^5.5.0",
+ "vite": "^5.4.4"
}
}
diff --git a/packages/sdks/snippets/svelte/src/App.svelte b/packages/sdks/snippets/svelte/src/App.svelte
index 449312c8f82..014e9ee8807 100644
--- a/packages/sdks/snippets/svelte/src/App.svelte
+++ b/packages/sdks/snippets/svelte/src/App.svelte
@@ -15,7 +15,11 @@
import Hero from './components/blueprints/Hero.svelte';
import Homepage from './components/blueprints/Homepage.svelte';
import NavLinks from './components/blueprints/navlinks/NavLinks.svelte';
- export let url = '';
+ interface Props {
+ url?: string;
+ }
+
+ let { url = '' }: Props = $props();
diff --git a/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte b/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte
index d23d56776f8..2414aee2256 100644
--- a/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte
+++ b/packages/sdks/snippets/svelte/src/components/AnnouncementBar.svelte
@@ -13,8 +13,8 @@
let apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
let model = 'announcement-bar';
- let announcementBar: BuilderContent | null = null;
- let canShowContent = false;
+ let announcementBar: BuilderContent | null = $state(null);
+ let canShowContent = $state(false);
async function fetchContent() {
announcementBar = await fetchOneEntry({
diff --git a/packages/sdks/snippets/svelte/src/components/CatchAll.svelte b/packages/sdks/snippets/svelte/src/components/CatchAll.svelte
index 5c87e75fc5d..521cc98928d 100644
--- a/packages/sdks/snippets/svelte/src/components/CatchAll.svelte
+++ b/packages/sdks/snippets/svelte/src/components/CatchAll.svelte
@@ -12,8 +12,8 @@
let apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
let model = 'page';
- let content: BuilderContent | null = null;
- let canShowContent = false;
+ let content: BuilderContent | null = $state(null);
+ let canShowContent = $state(false);
async function fetchContent() {
content = await fetchOneEntry({
diff --git a/packages/sdks/snippets/svelte/src/components/LivePreview.svelte b/packages/sdks/snippets/svelte/src/components/LivePreview.svelte
index cd3b8d2cd51..9850d0da577 100644
--- a/packages/sdks/snippets/svelte/src/components/LivePreview.svelte
+++ b/packages/sdks/snippets/svelte/src/components/LivePreview.svelte
@@ -7,11 +7,11 @@
} from '@builder.io/sdk-svelte';
import type { BuilderContent } from '@builder.io/sdk-svelte';
- let content: BuilderContent | null = null;
- let isLoading = true;
+ let content: BuilderContent | null = $state(null);
+ let isLoading = $state(true);
let urlPath = window.location.pathname;
- let canShowContent = false;
+ let canShowContent = $state(false);
async function fetchContent() {
content = await fetchOneEntry({
diff --git a/packages/sdks/snippets/svelte/src/components/advanced-child/AdvancedChild.svelte b/packages/sdks/snippets/svelte/src/components/advanced-child/AdvancedChild.svelte
index d146637038d..3c1a932122b 100644
--- a/packages/sdks/snippets/svelte/src/components/advanced-child/AdvancedChild.svelte
+++ b/packages/sdks/snippets/svelte/src/components/advanced-child/AdvancedChild.svelte
@@ -4,8 +4,8 @@
import type { BuilderContent } from '@builder.io/sdk-svelte';
import { CustomTabsInfo } from './CustomTabsInfo';
- let loading = true;
- let content: BuilderContent | null;
+ let loading = $state(true);
+ let content: BuilderContent | null = $state();
let model = 'advanced-child';
let apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
diff --git a/packages/sdks/snippets/svelte/src/components/advanced-child/CustomTabs.svelte b/packages/sdks/snippets/svelte/src/components/advanced-child/CustomTabs.svelte
index a436f9c54ac..b3c7055d5ff 100644
--- a/packages/sdks/snippets/svelte/src/components/advanced-child/CustomTabs.svelte
+++ b/packages/sdks/snippets/svelte/src/components/advanced-child/CustomTabs.svelte
@@ -1,16 +1,20 @@
{#if tabList.length}
{#each tabList as tab, index}
-