allow passing thru of data-sveltekit- attributes

gka · gka · commit 878989c3d053 · 2025-06-02T23:49:53.000+02:00
diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,7 +28,7 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { PlotContext, BaseRectMarkProps, LinkableMarkProps } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 
diff --git a/src/lib/marks/Sphere.svelte b/src/lib/marks/Sphere.svelte
@@ -2,8 +2,8 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '$lib/types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '$lib/types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">
diff --git a/src/lib/marks/helpers/Anchor.svelte b/src/lib/marks/helpers/Anchor.svelte
@@ -8,6 +8,13 @@
     const rel = $derived(resolveProp(options.rel, datum, null));
     const type = $derived(resolveProp(options.type, datum, null));
     const download = $derived(resolveProp(options.download, datum, null));
+
+    // filter data attributes from options
+    const dataAttributes = $derived(
+        Object.fromEntries(
+            Object.entries(options).filter(([key]) => key.startsWith('data-sveltekit-'))
+        )
+    );
 </script>
 
 {#if href}
@@ -20,6 +27,7 @@
         {rel}
         {type}
         {download}
+        {...dataAttributes}
         aria-label="link"
         xmlns="http://www.w3.org/2000/svg">
         {@render children?.()}
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -657,6 +657,8 @@ export type LinkableMarkProps = {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
      */
     download: ConstantAccessor<boolean>;
+    // allow data-sveltekit-* attributes on the link element, e.g. data-sveltekit-reload
+    [key: `data-sveltekit-${string}`]: string | boolean;
 };
 
 export type BaseMarkProps = Partial<{
diff --git a/src/routes/examples/bar/linked-bars.svelte b/src/routes/examples/bar/linked-bars.svelte
@@ -7,11 +7,30 @@
 <script>
     import { Plot, BarX } from 'svelteplot';
     import { page } from '$app/state';
+    const data = [
+        {
+            url: '/marks/line',
+            label: 'Line',
+            value: 5
+        },
+        {
+            url: '/marks/bar',
+            label: 'Bar',
+            value: 3
+        },
+        {
+            url: '/marks/dot',
+            label: 'Dot',
+            value: 4
+        }
+    ];
 </script>
 
 <Plot>
     <BarX
-        data={[1, 2, 3, 4, 5]}
-        href={(d) => `#/${d}`}
-        target="_blank" />
+        {data}
+        x="value"
+        y="label"
+        data-sveltekit-noscroll
+        href="url" />
 </Plot>
