From b125d6c05e3e191f0934b98d29a0e20583ca2224 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 13 Dec 2024 21:07:51 +0200
Subject: [PATCH 1/3] fix(website): update code samples to Svelte 5

---
 website/src/helpers/get-framework-code.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/src/helpers/get-framework-code.ts b/website/src/helpers/get-framework-code.ts
index 86b96e8..6236174 100644
--- a/website/src/helpers/get-framework-code.ts
+++ b/website/src/helpers/get-framework-code.ts
@@ -27,6 +27,9 @@ export const getFrameworkCode = (
     if (lang === 'ts') {
       return `\nconst options: Options = ${stringify(codeOptions)};`;
     }
+    if (lang === 'svelte') {
+      return `\let options = $state(${stringify(codeOptions)});`;
+    }
     return `\nconst options = ${stringify(codeOptions)};`;
   };
 

From bfd56aec2ccb662e971bf31fcc44782286f53d79 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 13 Dec 2024 21:14:47 +0200
Subject: [PATCH 2/3] fix

---
 website/src/helpers/get-framework-code.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/helpers/get-framework-code.ts b/website/src/helpers/get-framework-code.ts
index 6236174..048c090 100644
--- a/website/src/helpers/get-framework-code.ts
+++ b/website/src/helpers/get-framework-code.ts
@@ -28,7 +28,7 @@ export const getFrameworkCode = (
       return `\nconst options: Options = ${stringify(codeOptions)};`;
     }
     if (lang === 'svelte') {
-      return `\let options = $state(${stringify(codeOptions)});`;
+      return `\nlet options = $state(${stringify(codeOptions)});`;
     }
     return `\nconst options = ${stringify(codeOptions)};`;
   };

From 02b825fb5c405652e99f7208fb07f251b29070b8 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 13 Dec 2024 21:18:49 +0200
Subject: [PATCH 3/3] fix "Preview in LiveCodes" Svelte code

---
 .livecodes/svelte.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.livecodes/svelte.json b/.livecodes/svelte.json
index dc68be2..c24a999 100644
--- a/.livecodes/svelte.json
+++ b/.livecodes/svelte.json
@@ -3,7 +3,7 @@
   "activeEditor": "script",
   "script": {
     "language": "svelte",
-    "content": "<script>\n  import { onMount } from \"svelte\";\n  import { race } from \"racing-bars\";\n\n  const options = {\n    dataTransform: (data) =>\n      data.map((d) => ({\n        ...d,\n        icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n      })),\n    title: \"World Population\",\n    subTitle: \"Country Population in millions\",\n    caption: \"Source: World Bank\",\n    dateCounter: \"YYYY\",\n    showIcons: true,\n    labelsPosition: \"outside\",\n  };\n\n  onMount(() => {\n    race(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n  });\n</script>\n\n<div id=\"race\">Loading...</div>\n\n<style>\n  #race {\n    height: 80vh;\n  }\n</style>\n"
+    "content": "<script>\n  import { onMount } from \"svelte\";\n  import { race } from \"racing-bars\";\n\n  let options = $state({\n    dataTransform: (data) =>\n      data.map((d) => ({\n        ...d,\n        icon: `https://flagsapi.com/${d.code}/flat/64.png`,\n      })),\n    title: \"World Population\",\n    subTitle: \"Country Population in millions\",\n    caption: \"Source: World Bank\",\n    dateCounter: \"YYYY\",\n    showIcons: true,\n    labelsPosition: \"outside\",\n  });\n\n  onMount(() => {\n    race(\"{{LC::TO_URL(./data/population.csv)}}\", \"#race\", options);\n  });\n</script>\n\n<div id=\"race\">Loading...</div>\n\n<style>\n  #race {\n    height: 80vh;\n  }\n</style>\n"
   },
   "customSettings": {
     "imports": {