Support Svelte 5 in Svelte SDK

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"

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",

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"
   }
 }

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];

packages/sdks/e2e/svelte/src/BuilderBlockWithClassName.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import { Blocks } from '@builder.io/sdk-svelte';
 
-  export let builderBlock: any;
-  export let content: any;
+  interface Props {
+    builderBlock: any;
+    content: any;
+  }
+
+  let { builderBlock, content }: Props = $props();
 </script>
 
 <div>

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'),
 });
 

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": {

packages/sdks/e2e/sveltekit/src/components/BuilderBlockWithClassName.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import { Blocks } from '@builder.io/sdk-svelte';
 
-  export let builderBlock: any;
-  export let content: any;
+  interface Props {
+    builderBlock: any;
+    content: any;
+  }
+
+  let { builderBlock, content }: Props = $props();
 </script>
 
 <div>

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,

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"
   }
 }

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"
   }
 }

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();
 </script>
 
 <svelte:head>

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({

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({

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({

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';

packages/sdks/snippets/svelte/src/components/advanced-child/CustomTabs.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
   import { Blocks, type BuilderBlock } from '@builder.io/sdk-svelte';
 
-  export let builderBlock: BuilderBlock;
-  export let tabList: Array<{ tabName: string; blocks: BuilderBlock[] }>;
+  interface Props {
+    builderBlock: BuilderBlock;
+    tabList: Array<{ tabName: string; blocks: BuilderBlock[] }>;
+  }
 
-  let activeTab = 0;
+  let { builderBlock, tabList }: Props = $props();
+
+  let activeTab = $state(0);
 </script>
 
 {#if tabList.length}
   <div class="dynamics-slots">
     {#each tabList as tab, index}
-      <button on:click={() => (activeTab = index)}>
+      <button onclick={() => (activeTab = index)}>
         {tab.tabName}
       </button>
     {/each}

packages/sdks/snippets/svelte/src/components/blueprints/BlogArticle.svelte

@@ -7,8 +7,12 @@
     type BuilderContent,
   } from '@builder.io/sdk-svelte';
 
-  export let handle: string;
-  let article: BuilderContent | null;
+  interface Props {
+    handle: string;
+  }
+
+  let { handle }: Props = $props();
+  let article: BuilderContent | null = $state();
   const model = 'blog-article';
   const apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
 

packages/sdks/snippets/svelte/src/components/blueprints/Hero.svelte

@@ -7,7 +7,7 @@
     type BuilderContent,
     isPreviewing,
   } from '@builder.io/sdk-svelte';
-  let productHero: BuilderContent | null = null;
+  let productHero: BuilderContent | null = $state(null);
 
   const MODEL = 'collection-hero';
   const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';

packages/sdks/snippets/svelte/src/components/blueprints/Homepage.svelte

@@ -7,7 +7,7 @@
     isPreviewing,
   } from '@builder.io/sdk-svelte';
 
-  let content: BuilderContent | null = null;
+  let content: BuilderContent | null = $state(null);
 
   const model = 'homepage';
   const apiKey = 'ee9f13b4981e489a9a1209887695ef2b';

packages/sdks/snippets/svelte/src/components/blueprints/ProductDetails.svelte

@@ -2,8 +2,12 @@
   import { onMount } from 'svelte';
   import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-svelte';
 
-  export let handle: string;
-  let productDetails: BuilderContent | null = null;
+  interface Props {
+    handle: string;
+  }
+
+  let { handle }: Props = $props();
+  let productDetails: BuilderContent | null = $state(null);
 
   onMount(() => {
     fetchOneEntry({

packages/sdks/snippets/svelte/src/components/blueprints/navlinks/NavBar.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import type { BuilderContent } from '@builder.io/sdk-svelte';
-  export let links: BuilderContent;
+  interface Props {
+    links: BuilderContent;
+  }
+
+  let { links }: Props = $props();
 </script>
 
 {#if links.data?.links}

packages/sdks/snippets/svelte/src/components/blueprints/navlinks/NavLinks.svelte

@@ -4,7 +4,7 @@
   import { fetchOneEntry } from '@builder.io/sdk-svelte';
   import type { BuilderContent } from '@builder.io/sdk-svelte';
 
-  let links: BuilderContent | null = null;
+  let links: BuilderContent | null = $state(null);
 
   onMount(() => {
     fetchOneEntry({

packages/sdks/snippets/svelte/src/components/blueprints/product-editorial/ProductEditorial.svelte

@@ -12,9 +12,13 @@
 
   const API_KEY = 'ee9f13b4981e489a9a1209887695ef2b';
   const modelName = 'product-editorial';
-  export let handle: string;
-  let product: any = null;
-  let editorial: BuilderContent | null = null;
+  interface Props {
+    handle: string;
+  }
+
+  let { handle }: Props = $props();
+  let product: any = $state(null);
+  let editorial: BuilderContent | null = $state(null);
 
   onMount(() => {
     fetch(`https://fakestoreapi.com/products/${handle}`)

packages/sdks/snippets/svelte/src/components/blueprints/product-editorial/ProductInfo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let product: {
+  interface Props {
+    product: {
     id: number;
     title: string;
     price: number;
@@ -8,6 +9,9 @@
     image: string;
     rating: { rate: number; count: number };
   } | null;
+  }
+
+  let { product }: Props = $props();
 </script>
 
 {#if product}

packages/sdks/snippets/svelte/src/components/custom-child/CustomChild.svelte

@@ -4,8 +4,8 @@
   import type { BuilderContent } from '@builder.io/sdk-svelte';
   import { customHeroInfo } from './CustomHeroInfo';
 
-  let loading = true;
-  let content: BuilderContent | null;
+  let loading = $state(true);
+  let content: BuilderContent | null = $state();
 
   let model = 'custom-child';
   let apiKey = 'ee9f13b4981e489a9a1209887695ef2b';

packages/sdks/snippets/svelte/src/components/custom-child/CustomHero.svelte

@@ -1,5 +1,13 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <section>
   <div>This is text from your component</div>
   <!-- The slot will render any child blocks from Builder -->
-  <slot />
+  {@render children?.()}
 </section>

packages/sdks/snippets/svelte/src/components/editable-regions/CustomColumns.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { Blocks, type BuilderBlock } from '@builder.io/sdk-svelte';
 
-  export let column1: BuilderBlock[];
-  export let column2: BuilderBlock[];
-  export let builderBlock: BuilderBlock;
+  interface Props {
+    column1: BuilderBlock[];
+    column2: BuilderBlock[];
+    builderBlock: BuilderBlock;
+  }
+
+  let { column1, column2, builderBlock }: Props = $props();
 </script>
 
 <!-- Left Column -->

packages/sdks/snippets/svelte/src/components/editable-regions/EditableRegions.svelte

@@ -4,8 +4,8 @@
   import type { BuilderContent } from '@builder.io/sdk-svelte';
   import { CustomColumnsInfo } from './CustomColumnsInfo';
 
-  let loading = true;
-  let content: BuilderContent | null;
+  let loading = $state(true);
+  let content: BuilderContent | null = $state();
 
   let model = 'editable-regions';
   let apiKey = 'ee9f13b4981e489a9a1209887695ef2b';