Convert LayerCake.svelte lib to Svelte 5

src/_components/AnnotationsData.html.svelte

@@ -3,9 +3,9 @@
 	Adds text annotations that get their x and y placement using the `xScale` and `yScale`.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xGet, yGet, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} ArrowSource
@@ -50,7 +50,7 @@
 	 */
 
 	/** @type {Props} */
-	let { annotations, getText = d => d.text, pr = $percentRange } = $props();
+	let { annotations, getText = d => d.text, pr = c.percentRange } = $props();
 
 	let units = $derived(pr === true ? '%' : 'px');
 </script>
@@ -60,8 +60,8 @@
 		<div
 			class="layercake-annotation"
 			data-id={i}
-			style:left={`calc(${$xGet(d)}${units} + ${d.dx || 0}px)`}
-			style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}px)`}
+			style:left={`calc(${c.xGet(d)}${units} + ${d.dx || 0}px)`}
+			style:top={`calc(${c.yGet(d)}${units} + ${d.dy || 0}px)`}
 		>
 			{getText(d)}
 		</div>

src/_components/Area-D3.svelte

@@ -3,10 +3,10 @@
 	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { area, curveLinear } from 'd3-shape';
 
-	const { data, xGet, yGet, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -19,12 +19,12 @@
 
 	let path = $derived(
 		area()
-			.x($xGet)
-			.y1($yGet)
-			.y0(d => $yScale(0))
+			.x(c.xGet)
+			.y1(c.yGet)
+			.y0(d => c.yScale(0))
 			.curve(curve)
 	);
 	// .defined($y)
 </script>
 
-<path class="path-area" d={path($data)} {fill}></path>
+<path class="path-area" d={path(c.data)} {fill}></path>

src/_components/Area.svelte

@@ -3,9 +3,9 @@
 	Generates an SVG area shape.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -17,24 +17,24 @@
 
 	let path = $derived(
 		'M' +
-			$data
+			c.data
 				.map((/** @type {object} */ d) => {
-					return $xGet(d) + ',' + $yGet(d);
+					return c.xGet(d) + ',' + c.yGet(d);
 				})
 				.join('L')
 	);
 
 	/**	@type {string} **/
 	let area = $derived.by(() => {
-		const yRange = $yScale.range();
+		const yRange = c.yScale.range();
 		return (
 			path +
 			('L' +
-				$xScale($extents.x ? $extents.x[1] : 0) +
+				c.xScale(c.extents.x ? c.extents.x[1] : 0) +
 				',' +
 				yRange[0] +
 				'L' +
-				$xScale($extents.x ? $extents.x[0] : 0) +
+				c.xScale(c.extents.x ? c.extents.x[0] : 0) +
 				',' +
 				yRange[0] +
 				'Z')

src/_components/AreaStacked.svelte

@@ -3,21 +3,21 @@
 	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape) and sets the color via an ordinal scale in `zScale`. It assumes your data is in a [D3 stack format](https://github.com/d3/d3-shape#stack).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { area } from 'd3-shape';
 
-	const { data, xGet, yScale, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	let areaGen = $derived(
 		area()
-			.x(d => $xGet(d))
-			.y0(d => $yScale(d[0]))
-			.y1(d => $yScale(d[1]))
+			.x(d => c.xGet(d))
+			.y0(d => c.yScale(d[0]))
+			.y1(d => c.yScale(d[1]))
 	);
 </script>
 
 <g class="area-group">
-	{#each $data as d}
-		<path class="path-area" d={areaGen(d)} fill={$zGet(d)}></path>
+	{#each c.data as d}
+		<path class="path-area" d={areaGen(d)} fill={c.zGet(d)}></path>
 	{/each}
 </g>

src/_components/Arrows.svelte

@@ -4,7 +4,8 @@
  -->
 <script>
 	// @ts-nocheck
-	import { getContext, onMount, tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { swoopyArrow, getElPosition, parseCssValue } from '../_modules/arrowUtils.js';
 
 	/**
@@ -27,7 +28,7 @@
 
 	let container = $state();
 
-	const { width, height, xScale, yScale, x, y } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/* --------------------------------------------
 	 * Some lookups to convert between x, y / width, height terminology
@@ -88,15 +89,15 @@
 		 * Otherwise pass it to our xGet and yGet functions
 		 */
 		const targetCoords = [
-			arrow.target.x || $x(arrow.target),
-			arrow.target.y || $y(arrow.target)
+			arrow.target.x || c.x(arrow.target),
+			arrow.target.y || c.y(arrow.target)
 		].map((q, j) => {
 			const val =
 				typeof q === 'string' && q.includes('%')
-					? parseCssValue(q, j, $width, $height)
+					? parseCssValue(q, j, c.width, c.height)
 					: j
-						? $yScale(q)
-						: $xScale(q);
+						? c.yScale(q)
+						: c.xScale(q);
 			return val + (arrow.target[`d${lookups[j].position}`] || 0);
 		});
 

src/_components/AxisRadial.svelte

@@ -3,9 +3,9 @@
 	Generates an SVG radial scale, useful for radar charts.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { width, height, xScale, extents, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -16,12 +16,12 @@
 	/** @type {Props} */
 	let { lineLengthFactor = 1.1, labelPlacementFactor = 1.25 } = $props();
 
-	let max = $derived($xScale(Math.max(...$extents.x)));
+	let max = $derived(c.xScale(Math.max(...c.extents.x)));
 
 	let lineLength = $derived(max * lineLengthFactor);
 	let labelPlacement = $derived(max * labelPlacementFactor);
 
-	let angleSlice = $derived((Math.PI * 2) / $config.x.length);
+	let angleSlice = $derived((Math.PI * 2) / c.config.x.length);
 
 	/** @param {number} total
 	 *  @param {number} i */
@@ -35,12 +35,12 @@
 	}
 </script>
 
-<g transform="translate({$width / 2}, {$height / 2})">
+<g transform="translate({c.width / 2}, {c.height / 2})">
 	<circle cx="0" cy="0" r={max} stroke="#ccc" stroke-width="1" fill="#CDCDCD" fill-opacity="0.1"
 	></circle>
 	<circle cx="0" cy="0" r={max / 2} stroke="#ccc" stroke-width="1" fill="none"></circle>
 
-	{#each $config.x as label, i}
+	{#each c.config.x as label, i}
 		{@const thisAngleSlice = angleSlice * i - Math.PI / 2}
 		<line
 			x1="0"
@@ -53,7 +53,7 @@
 		>
 		</line>
 		<text
-			text-anchor={anchor($config.x.length, i)}
+			text-anchor={anchor(c.config.x.length, i)}
 			dy="0.35em"
 			font-size="12px"
 			transform="translate({labelPlacement * Math.cos(thisAngleSlice)}, {labelPlacement *

src/_components/AxisX.percent-range.html.svelte

@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xScale, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -36,30 +36,30 @@
 		tickGutter = 0,
 		dx = 0,
 		dy = 0,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <div class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $xScale(tick)}
+		{@const tickValUnits = c.xScale(tick)}
 
 		{#if baseline === true}
 			<div class="baseline" style="top:100%; width:100%;"></div>

src/_components/AxisX.svelte

@@ -3,9 +3,9 @@
 	Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { width, height, xScale, yRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -51,31 +51,31 @@
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <g class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
 		{#if baseline === true}
-			<line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
+			<line class="baseline" y1={c.height} y2={c.height} x1="0" x2={c.width} />
 		{/if}
 
-		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+		<g class="tick tick-{i}" transform="translate({c.xScale(tick)},{Math.max(...c.yRange)})">
 			{#if gridlines === true}
-				<line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
+				<line class="gridline" x1={halfBand} x2={halfBand} y1={-c.height} y2="0" />
 			{/if}
 			{#if tickMarks === true}
 				<line

src/_components/AxisXTop.percent-range.html.svelte

@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xScale, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -36,30 +36,30 @@
 		tickGutter = 0,
 		dx = 0,
 		dy = 0,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <div class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $xScale(tick)}
+		{@const tickValUnits = c.xScale(tick)}
 
 		{#if baseline === true}
 			<div class="baseline" style="top:0; width:100%;"></div>