Part 1 of core architecture fix

packages/ts/src/components/annotations/index.ts

@@ -31,7 +31,7 @@ export class Annotations extends ComponentCore<unknown[], AnnotationsConfigInter
 
   constructor (config?: AnnotationsConfigInterface) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   _render (customDuration?: number): void {

packages/ts/src/components/area/index.ts

@@ -52,7 +52,7 @@ export class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datu
 
   constructor (config?: AreaConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     // Determine if the provided chart should be stacked
     this.stacked = Array.isArray(this.config.y)

packages/ts/src/components/axis/index.ts

@@ -70,7 +70,7 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
 
   constructor (config?: AxisConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.g.attr('axis-type', this.config.type)
 

packages/ts/src/components/boxplot/index.ts

@@ -33,7 +33,7 @@ export class Boxplot<Datum> extends XYComponentCore<Datum, BoxplotConfigInterfac
 
   constructor (config?: BoxplotConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   get bleed (): Spacing {

packages/ts/src/components/brush/index.ts

@@ -38,7 +38,7 @@ export class Brush<Datum> extends XYComponentCore<Datum, BrushConfigInterface<Da
 
   constructor (config?: BrushConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     const directions: BrushHandleType[] = [{ type: BrushDirection.West }, { type: BrushDirection.East }]
     this.unselectedRange = this.g

packages/ts/src/components/bullet-legend/index.ts

@@ -37,7 +37,7 @@ export class BulletLegend {
 
     this.element = this.div.node()
 
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   setConfig (config: BulletLegendConfigInterface): void {

packages/ts/src/components/chord-diagram/index.ts

@@ -76,7 +76,7 @@ export class ChordDiagram<
 
   constructor (config?: ChordDiagramConfigInterface<N, L>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.background = this.g.append('rect').attr('class', s.background)
     this.linkGroup = this.g.append('g').attr('class', s.links)

packages/ts/src/components/crosshair/index.ts

@@ -89,7 +89,7 @@ export class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfigInte
 
   constructor (config?: CrosshairConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.g.style('opacity', 0)
     this.line = this.g.append('line')

packages/ts/src/components/donut/index.ts

@@ -51,7 +51,7 @@ export class Donut<Datum> extends ComponentCore<Datum[], DonutConfigInterface<Da
 
   constructor (config?: DonutConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     this.arcBackground = this.g.append('path')
     this.arcGroup = this.g.append('g')
     this.centralLabel = this.g.append('text')

packages/ts/src/components/flow-legend/index.ts

@@ -35,7 +35,7 @@ export class FlowLegend {
 
     this.labels = this.div.append('div')
 
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   setConfig (config: FlowLegendConfigInterface): void {

packages/ts/src/components/free-brush/index.ts

@@ -25,7 +25,7 @@
 
   constructor (config: FreeBrushConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.brush = this.g
       .append('g')
@@ -111,7 +111,7 @@
       case FreeBrushMode.XY: {
         const selection = s as [[number, number], [number, number]]
         const xSelection = this._pixelRangeToDataRange([selection[0][0], selection[1][0]], this.xScale, isArray(config.selectionMinLength) ? config.selectionMinLength[0] : config.selectionMinLength)
         const ySelection = this._pixelRangeToDataRange([selection[0][1], selection[1][1]], this.yScale, isArray(config.selectionMinLength) ? config.selectionMinLength[1] : config.selectionMinLength, true)
         selectedDomain = (xSelection && ySelection) ? [
           [xSelection?.[0], xSelection?.[1]],
           [ySelection?.[0], ySelection?.[1]],

packages/ts/src/components/graph/index.ts

@@ -157,7 +157,7 @@
 
   constructor (config?: GraphConfigInterface<N, L>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this._backgroundRect = this.g.append('rect').attr('class', generalSelectors.background)
     this._graphGroup = this.g.append('g').attr('class', generalSelectors.graphGroup)
@@ -669,21 +669,21 @@
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeClick (d: GraphNode<N, L>): void {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeMouseOut (d: GraphNode<N, L>): void {
     this._updateNodesLinksPartial()
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeMouseOver (d: GraphNode<N, L>): void {
     this._updateNodesLinksPartial()
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onLinkClick (d: GraphLink<N, L>): void {
   }
 
   private _onLinkMouseOver (d: GraphLink<N, L>): void {

packages/ts/src/components/grouped-bar/index.ts

@@ -39,7 +39,7 @@
 
   constructor (config?: GroupedBarConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   get bleed (): Spacing {
@@ -129,7 +129,7 @@
 
     // Animate exiting bars going down
     smartTransition(barGroupExit.selectAll<SVGPathElement, Datum>(`.${s.bar}`), duration)
       .attr('transform', (d, i, e) => {
         return this.isVertical()
           ? `translate(0,${this.yScale(0)}) scale(1,0)`
           : `translate(${this.xScale(0)},0) scale(0,1)`

packages/ts/src/components/heatmap/index.ts

@@ -54,7 +54,7 @@ export class Heatmap<Datum> extends ComponentCore<Datum[], HeatmapConfigInterfac
 
   constructor (config?: HeatmapConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     this.cellsGroup = this.g.append('g')
     this.columnLabelsGroup = this.g.append('g')
     this.rowLabelsGroup = this.g.append('g')

packages/ts/src/components/leaflet-flow-map/index.ts

@@ -55,6 +55,7 @@ export class LeafletFlowMap<
     super(ComponentType.HTML)
 
     this.leafletMap = new LeafletMap<PointDatum>(container, config, data?.points ?? [])
+    this.setConfig(config)
 
     const rendererImportPromise = import('./renderer')
     Promise.all([rendererImportPromise, this.leafletMap.getLeafletInstancePromise()])

packages/ts/src/components/leaflet-map/index.ts

@@ -124,7 +124,7 @@
       .attr('class', s.root)
       .attr('aria-hidden', true)
 
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     if (!this._container.clientWidth) {
       console.warn('Unovis | Leaflet Map: The width of the container is not set. Setting to 100%.')
@@ -184,9 +184,9 @@
 
         this._map.leaflet.setView(initialMapCenter, initialMapZoom)
 
-        if (isDarkThemeEnabled() && config.styleDarkTheme) {
+        if (isDarkThemeEnabled() && this.config.styleDarkTheme) {
           this._isDarkThemeActive = true
-          this.setTheme(config.styleDarkTheme)
+          this.setTheme(this.config.styleDarkTheme)
         }
 
         this.config.onMapInitialized?.()
@@ -226,10 +226,10 @@
   setConfig (config: LeafletMapConfigInterface<Datum>): void {
     super.setConfig(config)
 
-    if (config.width) this._containerSelection.style('width', isString(config.width) ? config.width : `${config.width}px`)
-    if (config.height) this._containerSelection.style('height', isString(config.height) ? config.height : `${config.height}px`)
+    if (config?.width) this._containerSelection.style('width', isString(config.width) ? config.width : `${config.width}px`)
+    if (config?.height) this._containerSelection.style('height', isString(config.height) ? config.height : `${config.height}px`)
 
-    if (this._map && config.renderer === LeafletMapRenderer.MapLibre) {
+    if (this._map && config?.renderer === LeafletMapRenderer.MapLibre) {
       const layer = this._map.layer as any // Using any because the typings are not full
       const maplibreMap = layer.getMaplibreMap()
       if (maplibreMap.isStyleLoaded()) updateTopoJson(maplibreMap, this.config)
@@ -242,7 +242,7 @@
     }
 
     // Apply the `aria-label` attribute
-    this._containerSelection.attr('aria-label', config.ariaLabel)
+    this._containerSelection.attr('aria-label', this.config.ariaLabel)
   }
 
   setData (data: Datum[]): void {
@@ -520,7 +520,7 @@
 
     // Render content
     const points = this._pointGroup.selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}:not(.exit)`)
       .data(pointData, (d: LeafletMapPoint<Datum>, i) => `${d.id || d.geometry.coordinates.join('')}`)
 
     points.exit<LeafletMapPoint<Datum>>().classed('exit', true).call(removeNodes)
     const pointsEnter = points.enter().append('g').attr('class', s.point)
@@ -533,7 +533,7 @@
 
     this._clusterBackground.call(updateBackgroundNode, this._expandedCluster, config, this._map.leaflet, this._clusterBackgroundRadius)
     if (this._expandedCluster && config.clusterBackground) {
       pointData.forEach((d, i) => { d._zIndex = (d.properties as LeafletMapPointDatum<Datum>)?.expandedClusterPoint ? 2 : 0 })
       this._pointGroup
         .selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}, .${s.clusterBackground}, .${s.pointSelectionRing}`)
         .sort((a: LeafletMapPoint<Datum>, b: LeafletMapPoint<Datum>) => a._zIndex - b._zIndex)

packages/ts/src/components/line/index.ts

@@ -42,7 +42,7 @@ export class Line<Datum> extends XYComponentCore<Datum, LineConfigInterface<Datu
 
   constructor (config?: LineConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   get bleed (): Spacing {

packages/ts/src/components/nested-donut/index.ts

@@ -54,7 +54,7 @@ NestedDonutConfigInterface<Datum>
 
   constructor (config?: NestedDonutConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     this.arcBackground = this.g.append('g')
     this.arcGroup = this.g.append('g')
       .attr('class', s.segmentsGroup)

packages/ts/src/components/plotband/index.ts

@@ -25,7 +25,7 @@ export class Plotband<Datum> extends XYComponentCore<Datum, PlotbandConfigInterf
 
   constructor (config: PlotbandConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.plotband = this.g.append('rect')
       .attr('class', s.plotband)

packages/ts/src/components/plotline/index.ts

@@ -24,7 +24,7 @@ export class Plotline<Datum> extends XYComponentCore<Datum, PlotlineConfigInterf
 
   constructor (config: PlotlineConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     this.plotline = this.g
       .append('line')

packages/ts/src/components/radial-bar/index.ts

@@ -50,7 +50,7 @@ export class RadialBar<Datum> extends ComponentCore<Datum[], RadialBarConfigInte
 
   constructor (config?: RadialBarConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     this.trackGroup = this.g.append('g')
     this.barGroup = this.g.append('g')
     this.centralLabel = this.g.append('text')

packages/ts/src/components/rolling-pin-legend/index.ts

@@ -27,7 +27,7 @@ export class RollingPinLegend {
 
     this.element = this.div.node()
 
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   setConfig (config: RollingPinLegendConfigInterface): void {

packages/ts/src/components/sankey/index.ts

@@ -94,7 +94,7 @@ export class Sankey<
 
   constructor (config?: SankeyConfigInterface<N, L>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     // eslint-disable-next-line @typescript-eslint/naming-convention
     this._gNode = this.g.node() as (SVGGElement & { __zoom: ZoomTransform })
     this._backgroundRect = this.g.append('rect').attr('class', s.background).style('pointer-events', 'all')

packages/ts/src/components/scatter/index.ts

@@ -51,7 +51,7 @@ export class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfigInterfac
 
   constructor (config?: ScatterConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   setConfig (config: ScatterConfigInterface<Datum>): void {

packages/ts/src/components/stacked-bar/index.ts

@@ -38,7 +38,7 @@ export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfigIn
 
   constructor (config?: StackedBarConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   get bleed (): Spacing {

packages/ts/src/components/timeline/index.ts

@@ -82,7 +82,7 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
 
   constructor (config?: TimelineConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
 
     // Invisible background rect to track events
     this._background = this.g.append('rect').attr('class', s.background)

packages/ts/src/components/topojson-map/index.ts

@@ -142,7 +142,7 @@ export class TopoJSONMap<
       .on('zoom', this._onZoom.bind(this))
       .on('end', this._onZoomEnd.bind(this))
 
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     if (data) this.setData(data)
 
     this.g.append('defs')

packages/ts/src/components/treemap/index.ts

@@ -40,7 +40,7 @@ export class Treemap<Datum> extends ComponentCore<Datum[], TreemapConfigInterfac
 
   constructor (config?: TreemapConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
     this.tiles = this.g.append('g').attr('class', s.tiles)
   }
 

packages/ts/src/components/xy-labels/index.ts

@@ -29,7 +29,7 @@ export class XYLabels<Datum> extends XYComponentCore<Datum, XYLabelsConfigInterf
 
   constructor (config?: XYLabelsConfigInterface<Datum>) {
     super()
-    if (config) this.setConfig(config)
+    this.setConfig(config)
   }
 
   _render (customDuration?: number): void {

packages/ts/src/core/xy-component/index.ts

@@ -45,8 +45,10 @@ export class XYComponentCore<
 
   setConfig (config: ConfigInterface): void {
     // We don't allow changing scales after the component has been initialized
-    if (this.config?.xScale) config.xScale = this.config.xScale
-    if (this.config?.yScale) config.yScale = this.config.yScale
+    if (config) {
+      if (this.config?.xScale) config.xScale = this.config.xScale
+      if (this.config?.yScale) config.yScale = this.config.yScale
+    }
 
     super.setConfig(config)
   }

packages/ts/src/utils/data.ts

@@ -114,7 +114,9 @@ export const cloneDeep = <T>(obj: T, stack: Map<any, any> = new Map()): T => {
 export const merge = <T, K>(obj1: T, obj2: K, visited: Map<any, any> = new Map()): T & K => {
   type Rec = Record<string | number, unknown>
 
-  if (!obj1 || !obj2) return obj1 as T & K
+  // Clone `obj1` even when there's nothing to merge, so that callers never get a reference
+  // to the original object (e.g. a shared default config) that they could accidentally mutate
+  if (!obj1 || !obj2) return (obj1 ? cloneDeep(obj1) : obj1) as T & K
   if ((obj1 as unknown) === (obj2 as unknown)) return obj1 as T & K
 
   const newObj = (isAClassInstance(obj1 as Rec) ? obj1 : cloneDeep(obj1)) as T & K
@@ -129,9 +131,8 @@ export const merge = <T, K>(obj1: T, obj2: K, visited: Map<any, any> = new Map()
 
     if (isPlainObject((obj1 as Rec)[key]) && isPlainObject((obj2 as Rec)[key])) {
       (newObj as Rec)[key] = merge((obj1 as Rec)[key], (obj2 as Rec)[key], visited)
-    } else if (isAClassInstance(obj2 as Rec)) {
-      (newObj as Rec)[key] = obj2
     } else {
+      // `cloneDeep` copies class instances and primitives by reference, and clones plain objects / arrays
       (newObj as Rec)[key] = cloneDeep((obj2 as Rec)[key])
     }
   })