svelteplot 0.8.1-pr-298.6 → 0.8.1-pr-301.0

package/README.md

@@ -1,6 +1,6 @@
 # SveltePlot
 
-![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
+![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg) [![Netlify Status](https://api.netlify.com/api/v1/badges/81163b24-76c1-4256-833c-919284f211ed/deploy-status)](https://app.netlify.com/projects/svelteplot/deploys)
 
 SveltePlot is a visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
 

package/dist/core/Plot.svelte

@@ -31,6 +31,7 @@
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
     import { getPlotDefaults, setPlotDefaults } from '../hooks/plotDefaults.js';
     import { maybeNumber } from '../helpers/index.js';
+    import { setPlot, usePlot } from '../hooks/usePlot.svelte.js';
 
     // automatic margins can be applied by the marks, registered
     // with their respective unique identifier as keys
@@ -261,11 +262,10 @@
     let facetWidth: number | null = $state(null);
     let facetHeight: number | null = $state(null);
 
-    // eslint-disable-next-line svelte/prefer-writable-derived
-    let plotState: PlotState = $state(computePlotState());
+    let plotState = setPlot(computePlotState());
 
     $effect(() => {
-        plotState = computePlotState();
+        plotState.update(computePlotState());
     });
 
     function computePlotState() {
@@ -337,7 +337,7 @@
             if (facetHeight !== h) facetHeight = h;
         },
         updatePlotState() {
-            plotState = computePlotState();
+            plotState.update(computePlotState());
         }
     });
 

package/dist/hooks/usePlot.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { PlotOptions } from '../types/plot';
+import type { PlotScales, PlotState as TPlotState } from '../types';
+/**
+ * Internal state representation of a Plot.
+ */
+declare class PlotState implements TPlotState {
+    width: number;
+    height: number;
+    options: PlotOptions;
+    facetWidth: number;
+    facetHeight: number;
+    plotWidth: number;
+    plotHeight: number;
+    scales: PlotScales;
+    body: HTMLDivElement;
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant: boolean;
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks: boolean;
+    css: ((d: string) => string) | null;
+    constructor(state: PlotState);
+    update(newState: Partial<PlotState>): void;
+    get publicState(): PublicPlotState;
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+declare class PublicPlotState {
+    #private;
+    constructor(plotState: PlotState);
+    get width(): number;
+    get height(): number;
+    get options(): PlotOptions;
+    get scales(): PlotScales;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get facetWidth(): number;
+    get facetHeight(): number;
+    get body(): HTMLDivElement;
+    get colorSymbolRedundant(): boolean;
+    get hasFilledDotMarks(): boolean;
+}
+export declare function setPlot(initialState: PlotState): PlotState;
+export declare function usePlot(): Readonly<TPlotState>;
+export {};

package/dist/hooks/usePlot.svelte.js

@@ -0,0 +1,87 @@
+import { getContext } from 'svelte';
+/**
+ * Internal state representation of a Plot.
+ */
+class PlotState {
+    // Define properties and methods for PlotState as needed
+    width = $state(50);
+    height = $state(50);
+    options = $state({});
+    facetWidth = $state(0);
+    facetHeight = $state(0);
+    plotWidth = $state(0);
+    plotHeight = $state(0);
+    scales = $state();
+    body = $state();
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant = $state(false);
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks = $state(false);
+    css = $state(null);
+    constructor(state) {
+        // Initialization code here
+        Object.assign(this, state);
+    }
+    update(newState) {
+        Object.assign(this, newState);
+    }
+    get publicState() {
+        return new PublicPlotState(this);
+    }
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+class PublicPlotState {
+    #plotState;
+    constructor(plotState) {
+        this.#plotState = plotState;
+    }
+    get width() {
+        return this.#plotState.width;
+    }
+    get height() {
+        return this.#plotState.height;
+    }
+    get options() {
+        return this.#plotState.options;
+    }
+    get scales() {
+        return this.#plotState.scales;
+    }
+    get plotWidth() {
+        return this.#plotState.plotWidth;
+    }
+    get plotHeight() {
+        return this.#plotState.plotHeight;
+    }
+    get facetWidth() {
+        return this.#plotState.facetWidth;
+    }
+    get facetHeight() {
+        return this.#plotState.facetHeight;
+    }
+    get body() {
+        return this.#plotState.body;
+    }
+    get colorSymbolRedundant() {
+        return this.#plotState.colorSymbolRedundant;
+    }
+    get hasFilledDotMarks() {
+        return this.#plotState.hasFilledDotMarks;
+    }
+}
+export function setPlot(initialState) {
+    return new PlotState({
+        ...initialState
+    });
+}
+export function usePlot() {
+    const { getPlotState } = getContext('svelteplot');
+    return getPlotState().publicState;
+}

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './transforms/index.js';
 export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/index.js

@@ -7,3 +7,4 @@ export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 // hooks
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/marks/Area.svelte

@@ -19,7 +19,6 @@
 
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
     import { area, type CurveFactory } from 'd3-shape';
@@ -31,7 +30,6 @@
 
     import type {
         CurveName,
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -43,6 +41,7 @@
     import type { StackOptions } from '../transforms/stack.js';
     import { addEventHandlers } from './helpers/events';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: AreaMarkProps = $props();
 
@@ -64,8 +63,7 @@
         ...options
     }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const groupByKey = $derived(options.z || options.fill || options.stroke);
 
@@ -144,7 +142,7 @@
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options,
                                     datum: datum?.datum
                                 })}

package/dist/marks/Arrow.svelte

@@ -37,9 +37,7 @@
         inset?: ConstantAccessor<number, Datum>;
         sweep?: SweepOption;
     }
-    import { getContext } from 'svelte';
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -57,6 +55,7 @@
     import { sort } from '../transforms/sort.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: ArrowMarkProps = $props();
 
@@ -76,8 +75,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args: ArrowMarkProps = $derived(
         sort(
@@ -134,7 +132,7 @@
                     <g
                         class={[className]}
                         {@attach addEventHandlers({
-                            getPlotState,
+                            plot,
                             options,
                             datum: d?.datum
                         })}>

package/dist/marks/AxisX.svelte

@@ -6,7 +6,6 @@
     import Mark from '../Mark.svelte';
     import BaseAxisX from './helpers/BaseAxisX.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         RawValue,
         ConstantAccessor,
@@ -19,6 +18,7 @@
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface AxisXMarkProps extends Omit<
         BaseMarkProps<Datum>,
@@ -96,8 +96,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         tickCount != null

package/dist/marks/AxisY.svelte

@@ -6,7 +6,6 @@
     import BaseAxisY from './helpers/BaseAxisY.svelte';
     import Mark from '../Mark.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         RawValue,
         FacetContext,
@@ -18,6 +17,7 @@
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface AxisYMarkProps extends Omit<
         BaseMarkProps<Datum>,
@@ -94,8 +94,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         tickCount != null

package/dist/marks/BarX.svelte

@@ -19,7 +19,6 @@
     }
 
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { stackX, recordizeX, intervalX, sort } from '../index.js';
 
     import type { StackOptions } from '../transforms/stack.js';
@@ -27,13 +26,13 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
         LinkableMarkProps
     } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const DEFAULTS = {
         fill: 'currentColor',
@@ -50,8 +49,7 @@
         ...options
     }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackX(

package/dist/marks/BarY.svelte

@@ -20,14 +20,12 @@
     }
 
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { intervalY, stackY, recordizeY, sort } from '../index.js';
 
     import type { StackOptions } from '../transforms/stack.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
@@ -35,9 +33,9 @@
         LinkableMarkProps
     } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const DEFAULTS = {
         ...getPlotDefaults().bar,

package/dist/marks/Brush.svelte

@@ -34,10 +34,11 @@
     }
     import { getContext, untrack } from 'svelte';
     import Rect from './Rect.svelte';
-    import type { BaseMarkProps, DataRecord, PlotContext } from '../types/index.js';
+    import type { BaseMarkProps, DataRecord } from '../types/index.js';
     import { clientToLayerCoordinates } from './helpers/events.js';
     import Frame from './Frame.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let { brush: brushExternal = $bindable({ enabled: false }), ...markProps }: BrushMarkProps =
         $props();
@@ -85,8 +86,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const xScaleFn = $derived(plot.scales.x.fn);
     const yScaleFn = $derived(plot.scales.y.fn);

package/dist/marks/Cell.svelte

@@ -10,7 +10,6 @@
         y?: ChannelAccessor<Datum>;
     }
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
@@ -18,13 +17,13 @@
         LinkableMarkProps
     } from '../types/index.js';
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { recordizeY, sort } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
 
     import { isValid } from '../helpers/index.js';
     import RectPath from './helpers/RectPath.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: CellMarkProps = $props();
 
@@ -41,8 +40,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         options.sort !== undefined

package/dist/marks/ColorLegend.svelte

@@ -2,7 +2,6 @@
     interface ColorLegendMarkProps {
         class: string | null;
     }
-    import { getContext } from 'svelte';
     import Plot from '../Plot.svelte';
     import AxisX from './AxisX.svelte';
     import Frame from './Frame.svelte';
@@ -10,13 +9,12 @@
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import type { PlotContext } from '../types/plot.js';
     import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const DEFAULTS = getPlotDefaults();
 

package/dist/marks/CustomMarkHTML.svelte

@@ -23,21 +23,16 @@
         class: string | null;
         children: Snippet<{ datum: Datum; x: number; y: number }>;
     }
-    import { getContext, type Snippet } from 'svelte';
-    import type {
-        ChannelAccessor,
-        ConstantAccessor,
-        DataRecord,
-        PlotContext
-    } from '../types/index.js';
-
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    import { type Snippet } from 'svelte';
+    import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     import { resolveChannel } from '../helpers/resolve.js';
     import { projectX, projectY, projectXY } from '../helpers/scales.js';
     import { isValid } from '../helpers/index.js';
 
+    const plot = usePlot();
+
     let {
         data = [{} as Datum],
         x,

package/dist/marks/DifferenceY.svelte

@@ -49,19 +49,17 @@
         BaseMarkProps,
         ChannelAccessor,
         CurveName,
-        DataRecord,
-        PlotContext
+        DataRecord
     } from '../types/index.js';
     import { Line, Area } from './index.js';
     import { randomId, coalesce } from '../helpers/index.js';
-    import { getContext } from 'svelte';
     import { extent, max, min } from 'd3-array';
     import { resolveChannel } from '../helpers/resolve.js';
     import type { CurveFactory } from 'd3-shape';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let markProps: DifferenceYMarkProps = $props();
 

package/dist/marks/Dot.svelte

@@ -12,9 +12,8 @@
         dotClass?: ConstantAccessor<string, Datum>;
     }
 
-    import { getContext, type Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -33,6 +32,7 @@
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { isOrdinalScale } from '../helpers/scales.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const DEFAULTS = {
         ...getPlotDefaults().dot
@@ -48,8 +48,7 @@
         ...options
     }: DotMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     function getSymbolPath(symbolType, size) {
         return d3Symbol(maybeSymbol(symbolType), size)();
@@ -113,7 +112,7 @@
                                 ]}
                                 {style}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options: args,
                                     datum: d?.datum
                                 })} />

package/dist/marks/Frame.svelte

@@ -21,17 +21,12 @@
         insetBottom?: number;
     }
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
-    import type {
-        PlotContext,
-        BaseRectMarkProps,
-        LinkableMarkProps,
-        DataRecord
-    } from '../types/index.js';
+    import type { BaseRectMarkProps, LinkableMarkProps, DataRecord } from '../types/index.js';
     import type { BaseMarkProps } from '../types/index.js';
     import RectPath from './helpers/RectPath.svelte';
     import { resolveProp } from '../helpers/resolve';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: FrameMarkProps = $props();
 
@@ -61,8 +56,7 @@
     const dx = $derived(resolveProp(options.dx, null, 0) || 0);
     const dy = $derived(resolveProp(options.dy, null, 0) || 0);
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 </script>
 
 <Mark type="frame" {automatic}>

package/dist/marks/Geo.svelte

@@ -23,10 +23,8 @@
         r?: ChannelAccessor<Datum>;
         svgFilter?: ConstantAccessor<string | undefined, Datum>;
     }
-    import { getContext } from 'svelte';
     import type {
         DataRecord,
-        PlotContext,
         BaseMarkProps,
         ConstantAccessor,
         LinkableMarkProps,
@@ -43,9 +41,9 @@
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
     import Anchor from './helpers/Anchor.svelte';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let markProps: GeoMarkProps = $props();
 
@@ -114,7 +112,7 @@
                                 class={[styleClass]}
                                 filter={resolveProp(args.svgFilter, d.datum, undefined)}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options: args,
                                     datum: d?.datum
                                 })}>

package/dist/marks/GridX.svelte

@@ -8,15 +8,8 @@
         y1?: ChannelAccessor<Datum>;
         y2?: ChannelAccessor<Datum>;
     }
-    import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type {
-        PlotContext,
-        BaseMarkProps,
-        RawValue,
-        DataRecord,
-        ChannelAccessor
-    } from '../types/index.js';
+    import type { BaseMarkProps, RawValue, DataRecord, ChannelAccessor } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
@@ -24,6 +17,7 @@
     import isDataRecord from '../helpers/isDataRecord';
     import { INDEX } from '../constants';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: GridXMarkProps = $props();
 
@@ -41,8 +35,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))