WIP convert Svelte files to Svelte 5

Author: jimjam-slam

.gitignore

@@ -20,5 +20,7 @@
 /docs/.quarto/
 /docs/.sverto/
 
-# sverto extension in docs site (we get it from project root on render)
-/docs/_extensions/sverto
+# sverto extension + files in docs site (we get it from project root on render)
+/docs/_extensions/sverto
+/docs/package.json
+/docs/package-lock.json

Circles.svelte

@@ -6,16 +6,14 @@
 
   // here we declare `data` as a prop that this component can expect. it has
   // a default value in case we don't provide anything
-  // https://svelte.dev/tutorial/declaring-props
-  export let data = [5, 15, 10, 12, 14];
-
-  // prefix a statement with $: to make it reactive (so it runs every time
-  // data changes)
-  // https://svelte.dev/tutorial/reactive-statements
-  $: console.log("Dataset prop:", data);
+  
+  let { data = [5, 15, 10, 12, 14] } = $props();
 
 </script>
 
+<!-- use @debug to log changes in an object to the developer console -->
+{@debug data}
+
 <!-- we use svelte's in/out transitions for entering and exiting dom elements,
      and vanilla css transitions for retained elements that change. the
      #each block means we create an svg <circle> for each element of data -->

_extensions/sverto/rollup.config.js

@@ -1,6 +1,6 @@
 import svelte from "rollup-plugin-svelte"
 import commonjs from "@rollup/plugin-commonjs"
-import resolve from "@rollup/plugin-node-resolve"
+import { nodeResolve } from "@rollup/plugin-node-resolve"
 import terser from "@rollup/plugin-terser"
 
 const path = require('node:path')
@@ -51,7 +51,7 @@ export default cmd => {
 						dev: !production,
 					}
 				}),
-				resolve({
+				nodeResolve({
 					browser: true,
 					dedupe: ["svelte"]
 				}),

_extensions/sverto/sverto-prerender.lua

@@ -134,7 +134,8 @@ cmd =
   "npm run build " ..
   rollup_config .. " -- " ..
   '--configQuartoOutPath="' .. os.getenv("QUARTO_PROJECT_OUTPUT_DIR") .. '" ' ..
-  '--configSvelteInPaths="' .. svelte_path_string .. '"'
+  '--configSvelteInPaths="' .. svelte_path_string .. '" ' ..
+  '--bundleConfigAsCjs'
 
 local svelteResult = os.execute(cmd)
 

_extensions/sverto/sverto.lua

@@ -99,7 +99,8 @@ function inject_svelte_and_compile(m)
       local svelteCommand =
         "npm run build rollup.config.js -- " ..
         '--configQuartoOutPath="./" ' ..
-        '--configSvelteInPaths="' .. sveltePaths .. '"'
+        '--configSvelteInPaths="' .. sveltePaths .. '" ' ..
+        '--bundleConfigAsCjs'
       local svelteResult = os.execute(svelteCommand)
       quarto.log.warning("Svelte compiler finished with code " .. svelteResult)
 

docs/_quarto.yml

@@ -1,7 +1,7 @@
 project:
   type: sverto
-  pre-render:
-    - './copy-extension.sh'
+  # pre-render:
+  #   - './copy-extension.sh'
 
 execute:
   freeze: auto

docs/copy-extension.sh

@@ -6,6 +6,10 @@
 if [ "$QUARTO_PROJECT_RENDER_ALL" = 1 ]; then
     mkdir -p _extensions/
     cp -Rf ../_extensions/sverto _extensions/
-    cp ../package.json package.json
     echo "> Sverto extension retrieved"
+
+    if [ ! -f ../package.json ]; then
+        echo "> Sverto package.json not found; also copying"
+        cp ../package.json package.json
+    fi
 fi

docs/examples/barchart/BarChart.svelte

@@ -1,32 +1,33 @@
 <script>
+
   /* let's borrow svelte's fly transitions for the circles that need to be
      created or destroyed
      https://svelte.dev/tutorial/transition */
   import { fly } from "svelte/transition";
 
-  /* these are our props and their default values (starting with `export let`).
-     in particular, note that data is an array of numbers
-     https://svelte.dev/tutorial/declaring-props */
-  export let data =  [50, 45, 15, 25, 30];
-  export let height = 100;
-  export let width = 400;
-  export let barWidth = 25;
-  export let barColor = "black"
+  let {
+    data = [50, 45, 15, 25, 30],
+    height = 100,
+    width = 400,
+    barWidth = 25,
+    barColor = "black"
+  } = $props();
 
   /* unlike ojs, svelte code isn't "naturally" reactive (except down below in
      the rendered html or svg), but you can prefix a statement with `$:` to
      make it reactive (so it runs every time `data` changes).
      here we're going to normalise our data to 100, and we'll use the normalised
      data in our barchart instead
      https://svelte.dev/tutorial/reactive-statements */
-  $: normalisedData = data.map(d => ({
+  let normalisedData = $derived(data.map(d => ({
     y: d,
     h: d / Math.max(...data) * height
-  }));
-  $: console.log(normalisedData);
+  })));
 
 </script>
 
+{@debug normalisedData}
+
 <!-- these css styles just apply to our component -->
 <style>
   text {

docs/examples/time-series/TimeSeriesChart.svelte

@@ -1,61 +1,66 @@
 <script>
+
   import { blur } from "svelte/transition"
   import { extent } from "d3-array"
   import { scaleLinear, scaleSequential } from "d3-scale"
-  import { interpolateYlGnBu, interpolateYlOrRd, select, axisLeft, axisBottom, format, tickFormat, formatLocale } from "d3"
-
-  // should be an array of objects with:
-  // year
-  // value
-  export let data = []
-  export let valueSuffix = "°C"
-  export let colourScheme = "cool" // or warm
-  $: console.log(colourScheme)
-  $: colourRamp = (colourScheme == "cool") ?
+  import { interpolateYlGnBu, interpolateYlOrRd, select, axisLeft, axisBottom, format, formatLocale } from "d3"
+
+  // `data` should be an array of objects with:
+  // - year
+  // - value
+  let { data = [], valueSuffix = "°C", colourScheme = "cool" } = $props();
+  
+  let colourRamp = $derived((colourScheme == "cool") ?
     interpolateYlGnBu :
-    interpolateYlOrRd
+    interpolateYlOrRd)
 
   // dimensions bound to size of container
-  let height = 500
-  let width = 300
+  let height = $state(500)
+  let width = $state(300)
 
   // add padding to chart
-  $: padX = [60, width - 10]
-  $: padY = [height - 30, 10]
+  let padX = $derived([60, width - 10])
+  let padY = $derived([height - 30, 10])
 
-  $: xDomain = extent(data.map(d => d.year))
-  $: yDomain = extent(data.map(d => d.value))
+  let xDomain = $derived(extent(data.map(d => d.year)))
+  let yDomain = $derived(extent(data.map(d => d.value)))
 
   // scales (flip the colours if they're cool)
-  $: xScale = scaleLinear()
+  let xScale = $derived(scaleLinear()
     .domain(xDomain)
-    .range(padX)
-  $: yScale = scaleLinear()
+    .range(padX))
+  let yScale = $derived(scaleLinear()
     .domain(yDomain)
-    .range(padY)
-  $: colourScale = scaleSequential()
+    .range(padY))
+  let colourScale = $derived(scaleSequential()
     .domain(colourScheme == "cool" ? yDomain.reverse() : yDomain)
-    .interpolator(colourRamp)
+    .interpolator(colourRamp))
 
   // temperature formatter (for x-axis)
   const tempFormat = formatLocale({
     currency: ["", valueSuffix]
   });
 
   // axes
-  let xAxisGroup
-  let yAxisGroup
-  $: select(xAxisGroup)
-    .transition()
-    .duration(500)
-    .call(axisBottom(xScale).tickFormat(format(".0f")))
-  $: select(yAxisGroup)
-    .transition()
-    .duration(500)
-    .call(axisLeft(yScale).tickFormat(tempFormat.format("$.1f")))
+  let xAxisGroup = $state()
+  let yAxisGroup = $state()
+  $effect(() => {
+    select(xAxisGroup)
+      .transition()
+      .duration(500)
+      .call(axisBottom(xScale).tickFormat(format(".0f")))
+  });
+  $effect(() => {
+    select(yAxisGroup)
+      .transition()
+      .duration(500)
+      .call(axisLeft(yScale).tickFormat(tempFormat.format("$.1f")))
+  });
 
 </script>
 
+{@debug colourScheme}
+
 <style>
 
   svg circle {
@@ -70,7 +75,6 @@
     font-size: 14px;
   }
 
-
 </style>
 
 <main bind:clientHeight={height} bind:clientWidth={width}>

docs/index.qmd

@@ -36,9 +36,9 @@ This will add the extension itself (which includes some project scripts) to the
 
 When you use the Sverto template in a project, it creates some files for you:
 
-* [`example.qmd`](./example.qmd): an example Quarto doc that uses a Svelte component. If you're adding Sverto to an existing document, you can delete this.
-* [`Circles.svelte`](./Circles.svelte): an example Svelte visualisation. If you have a Svelte component that you want to use instead, you can delete this.
-* [`package.json`](./package.json): this is used to keep track of the dependencies of your Svelte components. **You should add this to version control.**
+* `example.qmd`: an example Quarto doc that uses a Svelte component. If you're adding Sverto to an existing document, you can delete this.
+* `Circles.svelte`: an example Svelte visualisation. If you have a Svelte component that you want to use instead, you can delete this.
+* `package.json`: this is used to keep track of the dependencies of your Svelte components. **You should add this to version control.**
 * `package-lock.json` is created once you run `npm install`. You should add this to version control.
 * `node_modules/`: This folder is created once you rum `npm install`. Don't add it to version control.
 

package.json

@@ -1,18 +1,18 @@
 {
   "name": "svelte-app",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "private": true,
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -w -c"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^7.0.0",
-    "svelte": "^3.0.0"
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "rollup": "^4.22.0",
+    "rollup-plugin-svelte": "^7.2.2",
+    "svelte": "^5.0.0"
   }
 }