svelteplot 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/marks/Line.svelte.d.ts

@@ -1,5 +1,17 @@
-import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, DataRow } from '../types.js';
+export type LineMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+};
+import { type CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: LineMarkProps;
     events: {
@@ -10,6 +22,6 @@ declare const __propDef: {
 export type LineProps = typeof __propDef.props;
 export type LineEvents = typeof __propDef.events;
 export type LineSlots = typeof __propDef.slots;
-export default class Line extends SvelteComponent<LineProps, LineEvents, LineSlots> {
+export default class Line extends SvelteComponentTyped<LineProps, LineEvents, LineSlots> {
 }
 export {};

package/dist/marks/LineX.svelte

@@ -1,10 +1,8 @@
-<script>import Line from "./Line.svelte";
+<script context="module"></script>
+
+<script>import wrapValueArray from "../helpers/wrapValueArray.js";
+import Line from "./Line.svelte";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="value"
-    y="index"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="value" y="index" {...rest} />

package/dist/marks/LineX.svelte.d.ts

@@ -1,9 +1,16 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import { SvelteComponentTyped } from "svelte";
+import type { CurveFactory } from 'd3-shape';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve, RawValue } from '../types.js';
+export type LineXMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
+declare const __propDef: {
+    props: LineXMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -12,6 +19,6 @@ declare const __propDef: {
 export type LineXProps = typeof __propDef.props;
 export type LineXEvents = typeof __propDef.events;
 export type LineXSlots = typeof __propDef.slots;
-export default class LineX extends SvelteComponent<LineXProps, LineXEvents, LineXSlots> {
+export default class LineX extends SvelteComponentTyped<LineXProps, LineXEvents, LineXSlots> {
 }
 export {};

package/dist/marks/LineY.svelte

@@ -1,10 +1,8 @@
+<script context="module"></script>
+
 <script>import Line from "./Line.svelte";
+import wrapValueArray from "../helpers/wrapValueArray.js";
 let { data, ...rest } = $props();
 </script>
 
-<Line
-    data={data.map((value, index) => ({ value, index, ___orig___: value }))}
-    x="index"
-    y="value"
-    {...rest}
-/>
+<Line data={wrapValueArray(data)} x="index" y="value" {...rest} />

package/dist/marks/LineY.svelte.d.ts

@@ -1,9 +1,17 @@
-import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+export type LineYMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: RawValue[];
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve?: Curve | CurveFactory;
+    tension?: number;
+};
+import type { RawValue } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: LineYMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -12,6 +20,6 @@ declare const __propDef: {
 export type LineYProps = typeof __propDef.props;
 export type LineYEvents = typeof __propDef.events;
 export type LineYSlots = typeof __propDef.slots;
-export default class LineY extends SvelteComponent<LineYProps, LineYEvents, LineYSlots> {
+export default class LineY extends SvelteComponentTyped<LineYProps, LineYEvents, LineYSlots> {
 }
 export {};

package/dist/marks/RuleX.svelte

@@ -1,22 +1,30 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import resolveChannel from "../helpers/resolveChannel";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
 const BaseMark_RuleX = BaseMark;
 const plot = getContext("svelteplot");
-let { data = [], x, y1, y2, ...styleProps } = $props();
-let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
+let { data = [], ...channels } = $props();
+let { x, y1, y2 } = $derived(channels);
+let dataWrapped = $derived(x ? data : data.map((d) => ({ __x: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
+<BaseMark_RuleX
+    type="rule-x"
+    data={dataWrapped}
+    channels={['x', 'y1', 'y2']}
+    {...{ x: '__x', ...channels }}
+>
     <g class="rule-x">
         {#each data as datum}
             <line
-                transform="translate({plot.xScale(resolveChannel('x', datum, x))}, {0})"
-                style={getBaseStyles(datum, styleProps)}
-                y1={y1 != null ? plot.yScale(resolveChannel('y', datum, y1)) : plot.margins.top}
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style={getBaseStyles(datum, channels)}
+                y1={y1 != null
+                    ? plot.yScale(resolveChannel('y1', datum, channels))
+                    : plot.margins.top}
                 y2={y2 != null
-                    ? plot.yScale(resolveChannel('y', datum, y2))
+                    ? plot.yScale(resolveChannel('y2', datum, channels))
                     : plot.plotHeight + plot.margins.top}
             />
         {/each}

package/dist/marks/RuleX.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RuleXMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleXMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 export type RuleXProps = typeof __propDef.props;
 export type RuleXEvents = typeof __propDef.events;
 export type RuleXSlots = typeof __propDef.slots;
-export default class RuleX extends SvelteComponent<RuleXProps, RuleXEvents, RuleXSlots> {
+export default class RuleX extends SvelteComponentTyped<RuleXProps, RuleXEvents, RuleXSlots> {
 }
 export {};

package/dist/marks/RuleY.svelte

@@ -1,23 +1,30 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import resolveChannel from "../helpers/resolveChannel";
-import wrapArray from "../helpers/wrapArray";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
 const BaseMark_RuleY = BaseMark;
 const plot = getContext("svelteplot");
-let { data = [], y, x1, x2, ...styleProps } = $props();
-let dataWrapped = $derived(y ? data : data.map((d) => ({ y: d, ___orig___: d })));
+let { data = [], ...channels } = $props();
+let { y, x1, x2 } = $derived(channels);
+let dataWrapped = $derived(y ? data : data.map((d) => ({ __y: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleY type="rule-y" data={dataWrapped} channels={['y', 'x']} {y} {x1} {x2}>
+<BaseMark_RuleY
+    type="rule-y"
+    data={dataWrapped}
+    channels={['y', 'x1', 'x2']}
+    {...{ y: '__y', ...channels }}
+>
     <g class="rule-y">
         {#each data as datum}
             <line
-                transform="translate(0,{plot.yScale(resolveChannel('y', datum, y))})"
-                style={getBaseStyles(datum, styleProps)}
-                x1={x1 != null ? plot.xScale(resolveChannel('x', datum, x1)) : plot.margins.left}
+                transform="translate(0,{plot.yScale(resolveChannel('y', datum, channels))})"
+                style={getBaseStyles(datum, channels)}
+                x1={x1 != null
+                    ? plot.xScale(resolveChannel('x1', datum, channels))
+                    : plot.margins.left}
                 x2={x2 != null
-                    ? plot.xScale(resolveChannel('x', datum, x2))
+                    ? plot.xScale(resolveChannel('x2', datum, channels))
                     : plot.plotWidth + plot.margins.left}
             />
         {/each}

package/dist/marks/RuleY.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { RuleYMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleYMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 export type RuleYProps = typeof __propDef.props;
 export type RuleYEvents = typeof __propDef.events;
 export type RuleYSlots = typeof __propDef.slots;
-export default class RuleY extends SvelteComponent<RuleYProps, RuleYEvents, RuleYSlots> {
+export default class RuleY extends SvelteComponentTyped<RuleYProps, RuleYEvents, RuleYSlots> {
 }
 export {};

package/dist/marks/SymbolLegend.svelte

@@ -1,32 +1,30 @@
 <script>import { getContext } from "svelte";
 import { symbol as d3Symbol } from "d3-shape";
-import { maybeSymbol } from "../helpers/symbols";
+import { maybeSymbol } from "../helpers/symbols.js";
 const plot = getContext("svelteplot");
 </script>
 
 {#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
-<div class="symbol-legend">
-    {#each plot.symbolScale.domain() as value}
-        {@const symbolV = plot.symbolScale(value)}
-        {@const symbolType = maybeSymbol(symbolV)}
-        {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
-        <div class="item">
-            <div class="swatch">
-                <svg width="15" height="15"
-                    >
+    <div class="symbol-legend">
+        {#each plot.symbolScale.domain() as value}
+            {@const symbolV = plot.symbolScale(value)}
+            {@const symbolType = maybeSymbol(symbolV)}
+            {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
+            <div class="item">
+                <div class="swatch">
+                    <svg width="15" height="15">
                         <path
                             transform="translate(7.5,7.5)"
                             fill={plot.hasFilledDotMarks ? color : 'none'}
                             stroke={plot.hasFilledDotMarks ? null : color}
                             d={d3Symbol(symbolType, 40)()}
                         />
-                   </svg
-                >
+                    </svg>
+                </div>
+                <span class="item-label">{value}</span>
             </div>
-            <span class="item-label">{value}</span>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
 {/if}
 
 <style>
@@ -38,7 +36,9 @@ const plot = getContext("svelteplot");
     .item {
         margin: 0 1em 0.5ex 0;
     }
-    path { stroke-width: 1.5;}
+    path {
+        stroke-width: 1.5;
+    }
     .item,
     .item-label,
     .swatch {

package/dist/marks/SymbolLegend.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponent } from "svelte";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
@@ -9,6 +9,6 @@ declare const __propDef: {
 export type SymbolLegendProps = typeof __propDef.props;
 export type SymbolLegendEvents = typeof __propDef.events;
 export type SymbolLegendSlots = typeof __propDef.slots;
-export default class SymbolLegend extends SvelteComponent<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
+export default class SymbolLegend extends SvelteComponentTyped<SymbolLegendProps, SymbolLegendEvents, SymbolLegendSlots> {
 }
 export {};

package/dist/marks/TickX.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickX = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickX type="tick-x" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-x">
+        {#each data as datum}
+            <line
+                transform="translate({plot.xScale(resolveChannel('x', datum, channels))}, {0})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                y1={plot.yScale(resolveChannel('y', datum, channels))}
+                y2={plot.yScale(resolveChannel('y', datum, channels)) + plot.yScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickX>
+
+<style>
+    .tick-x line {
+        stroke: currentColor;
+    }
+</style>

package/dist/marks/TickX.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickXProps = typeof __propDef.props;
+export type TickXEvents = typeof __propDef.events;
+export type TickXSlots = typeof __propDef.slots;
+export default class TickX extends SvelteComponentTyped<TickXProps, TickXEvents, TickXSlots> {
+}
+export {};

package/dist/marks/TickY.svelte

@@ -0,0 +1,30 @@
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_TickY = BaseMark;
+const plot = getContext("svelteplot");
+let { data = [], ...channels } = $props();
+</script>
+
+<BaseMark_TickY type="tick-y" {data} channels={['x', 'y', 'stroke']} {...channels}>
+    <g class="tick-y">
+        {#each data as datum}
+            <line
+                transform="translate(0, {plot.yScale(resolveChannel('y', datum, channels))})"
+                style:stroke={channels.stroke
+                    ? plot.colorScale(resolveChannel('stroke', datum, channels))
+                    : null}
+                style={getBaseStyles(datum, channels)}
+                x1={plot.xScale(resolveChannel('x', datum, channels))}
+                x2={plot.xScale(resolveChannel('x', datum, channels)) + plot.xScale.bandwidth()}
+            />
+        {/each}
+    </g>
+</BaseMark_TickY>
+
+<style>
+    .tick-y line {
+        stroke: currentColor;
+    }
+</style>

package/dist/marks/TickY.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TickMarkProps } from '../types.js';
+declare const __propDef: {
+    props: TickMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TickYProps = typeof __propDef.props;
+export type TickYEvents = typeof __propDef.events;
+export type TickYSlots = typeof __propDef.slots;
+export default class TickY extends SvelteComponentTyped<TickYProps, TickYEvents, TickYSlots> {
+}
+export {};

package/dist/transforms/normalize.d.ts

@@ -0,0 +1,18 @@
+export declare function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }: {
+    [x: string]: any;
+    data: any;
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+}): {
+    data: any[];
+    y: any;
+    y1: any;
+    y2: any;
+    stroke: any;
+    fill: any;
+    z: any;
+};

package/dist/transforms/normalize.js

@@ -0,0 +1,25 @@
+import groupBy from 'underscore/modules/groupBy.js';
+export function normalizeY({ data, y, y1, y2, stroke, fill, z, ...restProps }) {
+    const groupBy = stroke || fill || z;
+    const normalizedData = normalize(data, groupBy, ['y', 'y1', 'y2']);
+    return {
+        data: normalizedData,
+        y,
+        y1,
+        y2,
+        stroke,
+        fill,
+        z,
+        ...restProps
+    };
+}
+function normalize(data, groupKey, props) {
+    const filteredProps = props.filter((p) => data[0][p] != null);
+    const groups = Object.values(groupBy(data, groupKey));
+    return groups
+        .map((data) => data.map((datum) => ({
+        ...datum,
+        ...Object.fromEntries(filteredProps.map((prop) => [prop, datum[prop] / data[0][prop]]))
+    })))
+        .flat(1);
+}

package/dist/transforms/recordize.d.ts

@@ -0,0 +1,3 @@
+import type { TransformArg } from '../types.js';
+export declare function recordizeX({ data, ...channels }: TransformArg): TransformArg;
+export declare function recordizeY({ data, ...channels }: TransformArg): TransformArg;

package/dist/transforms/recordize.js

@@ -0,0 +1,36 @@
+import isDataRecord from '../helpers/isDataRecord.js';
+// This transform takes an array of raw values as input and returns
+export function recordizeX({ data, ...channels }) {
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({
+                __value: value,
+                __index: index,
+                ___orig___: value
+            })),
+            ...channels,
+            x: '__value',
+            y: '__index'
+        };
+    }
+    return { data, ...channels };
+}
+export function recordizeY({ data, ...channels }) {
+    if (!data)
+        return { data, ...channels };
+    const dataIsRawValueArray = !isDataRecord(data[0]);
+    if (dataIsRawValueArray) {
+        return {
+            data: data.map((value, index) => ({
+                __value: value,
+                __index: index,
+                ___orig___: value
+            })),
+            ...channels,
+            x: '__index',
+            y: '__value'
+        };
+    }
+    return { data, ...channels };
+}

package/dist/transforms/rename.d.ts

@@ -0,0 +1,4 @@
+import type { ChannelName, TransformArg } from '../types.js';
+type RenameChannelsOptions = Record<ChannelName, ChannelName>;
+export declare function renameChannels({ data, ...channels }: TransformArg, options: RenameChannelsOptions): TransformArg;
+export {};

package/dist/transforms/rename.js

@@ -0,0 +1,10 @@
+export function renameChannels({ data, ...channels }, options) {
+    const newChannels = channels;
+    for (const [from, to] of Object.entries(options)) {
+        if (newChannels[from] !== undefined) {
+            newChannels[to] = newChannels[from];
+            delete newChannels[from];
+        }
+    }
+    return { data, ...newChannels };
+}

package/dist/transforms/stack.d.ts

@@ -0,0 +1,11 @@
+import type { TransformArg } from '../types.js';
+type StackOrder = 'none' | 'appearance' | 'inside-out' | 'sum';
+type StackOffset = 'none' | 'wiggle' | 'center' | 'normalize';
+export type StackOptions = {
+    offset: null | StackOffset;
+    order: null | StackOrder;
+    reverse: boolean;
+};
+export declare function stackY({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
+export {};

package/dist/transforms/stack.js

@@ -0,0 +1,80 @@
+import isDataRecord from '../helpers/isDataRecord.js';
+import resolveChannel from '../helpers/resolveChannel.js';
+import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone } from 'd3-shape';
+import { index, union } from 'd3-array';
+const DEFAULT_STACK_OPTIONS = {
+    order: null,
+    offset: null,
+    reverse: false
+};
+const STACK_ORDER = {
+    // null
+    // TODO: value: ,
+    none: stackOrderNone,
+    sum: stackOrderAscending,
+    appearance: stackOrderAppearance,
+    'inside-out': stackOrderInsideOut
+};
+const STACK_OFFSET = {
+    none: null,
+    wiggle: stackOffsetWiggle,
+    center: stackOffsetSilhouette,
+    normalize: stackOffsetExpand
+};
+function stackXY(byDim, data, channels, options) {
+    const groupBy = channels.z ? 'z' : channels.fill ? 'fill' : channels.stroke ? 'stroke' : true;
+    const secondDim = byDim === 'x' ? 'y' : 'x';
+    const byLow = `${byDim}1`;
+    const byHigh = `${byDim}2`;
+    if (channels[byDim] !== undefined &&
+        channels[`${byLow}`] === undefined &&
+        channels[`${byHigh}`] === undefined) {
+        const resolvedData = data.map((d) => ({
+            ...(isDataRecord(d) ? d : { __orig: d }),
+            [`__${secondDim}`]: resolveChannel(secondDim, d, channels),
+            __group: groupBy === true ? 'G' : resolveChannel(groupBy, d, channels),
+            [`__${byDim}`]: resolveChannel(byDim, d, channels)
+        }));
+        const indexed = index(resolvedData, (d) => d[`__${secondDim}`], (d) => d.__group);
+        const stackOrder = (series) => {
+            const f = STACK_ORDER[options.order || 'none'];
+            return options.reverse ? f(series).reverse() : f(series);
+        };
+        const series = stack()
+            .order(stackOrder)
+            .offset(STACK_OFFSET[options.offset])
+            .keys(union(resolvedData.map((d) => d.__group)))
+            .value(([, group], key) => (group.get(key) ? group.get(key)[`__${byDim}`] : 0))(indexed);
+        const newData = series
+            .map((values) => {
+            const groupKey = values.key;
+            return values
+                .filter((d) => d.data[1].get(groupKey))
+                .map((d) => {
+                const { [`__${byDim}`]: unused1, [`__${secondDim}`]: unused2, ...datum } = d.data[1].get(groupKey);
+                return { ...datum, [`__${byLow}`]: d[0], [`__${byHigh}`]: d[1] };
+            });
+        })
+            .flat(1);
+        console.log({ newData });
+        return {
+            data: newData,
+            ...channels,
+            [byDim]: undefined,
+            ...{ [byLow]: `__${byLow}`, [byHigh]: `__${byHigh}` }
+        };
+    }
+    return { data, ...channels };
+}
+export function stackY({ data, ...channels }, opts = {}) {
+    return stackXY('y', data, channels, applyDefaults(opts));
+}
+export function stackX({ data, ...channels }, opts = {}) {
+    return stackXY('x', data, channels, applyDefaults(opts));
+}
+function applyDefaults(opts) {
+    if (opts.offset === 'wiggle' && opts.order === undefined) {
+        return { ...DEFAULT_STACK_OPTIONS, order: 'inside-out', ...opts };
+    }
+    return { ...DEFAULT_STACK_OPTIONS, ...opts };
+}