Merge pull request #208 from hatemhosny/svelte5-samples

update code samples to Svelte 5
hatemhosny · Dec 13, 2024 · 73365d2 · 73365d2
2 parents 5994262 + 02b825f
commit 73365d2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git 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": {

diff --git 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 `\nlet options = $state(${stringify(codeOptions)});`;
+    }
     return `\nconst options = ${stringify(codeOptions)};`;
   };