Update sub-component spread prop type

.changeset/beige-rings-joke.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+Update sub-component props type that are spread (`ComponentProps<SomeComponent>`) to be more accurate (`Partial<...>`)

packages/layerchart/src/lib/components/Area.svelte

@@ -37,7 +37,7 @@
   export let defined: Parameters<Area<any>['defined']>[0] | undefined = undefined;
 
   /** Enable showing line */
-  export let line: boolean | ComponentProps<Spline> = false;
+  export let line: boolean | Partial<ComponentProps<Spline>> = false;
 
   $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });

packages/layerchart/src/lib/components/Axis.svelte

@@ -25,7 +25,7 @@
   /** Length of the tick line */
   export let tickSize = 4;
   export let format: FormatType = undefined;
-  export let labelProps: ComponentProps<Text> | undefined = undefined;
+  export let labelProps: Partial<ComponentProps<Text>> | undefined = undefined;
 
   $: orientation = ['top', 'bottom'].includes(placement) ? 'horizontal' : 'vertical';
   $: scale = orientation === 'horizontal' ? $xScale : $yScale;

packages/layerchart/src/lib/components/Calendar.svelte

@@ -18,7 +18,7 @@
   export let cellSize: number | [number, number] | undefined = undefined;
 
   /** Enable drawing path around each month.  If object, pass as props to underlying <path> */
-  export let monthPath: boolean | ComponentProps<MonthPath> = false;
+  export let monthPath: boolean | Partial<ComponentProps<MonthPath>> = false;
 
   /**
    * Tooltip context to setup mouse events to show tooltip for related data

packages/layerchart/src/lib/components/Chart.svelte

@@ -78,9 +78,9 @@
    */
   $: yReverse = yScale ? !isScaleBand(yScale) : true;
 
-  export let tooltip: ComponentProps<TooltipContext> | boolean | undefined = undefined;
+  export let tooltip: Partial<ComponentProps<TooltipContext>> | boolean | undefined = undefined;
 
-  export let geo: ComponentProps<GeoContext> | undefined = undefined;
+  export let geo: Partial<ComponentProps<GeoContext>> | undefined = undefined;
 </script>
 
 <LayerCake

packages/layerchart/src/lib/components/Graticule.svelte

@@ -5,8 +5,8 @@
   import GeoPath from './GeoPath.svelte';
 
   // TODO: Support full api (stepMinor/Major, extent[Minor/Major], etc
-  export let lines: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined = undefined;
-  export let outline: Omit<ComponentProps<GeoPath>, 'geojson'> | boolean | undefined = undefined;
+  export let lines: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
+  export let outline: Partial<ComponentProps<GeoPath>> | boolean | undefined = undefined;
   export let step: [number, number] = [10, 10];
 
   $: graticule = geoGraticule();
@@ -22,11 +22,11 @@
 
   {#if lines}
     {#each graticule.lines() as line}
-      <GeoPath geojson={line} {...lines} />
+      <GeoPath geojson={line} {...typeof lines === 'object' ? lines : null} />
     {/each}
   {/if}
 
   {#if outline}
-    <GeoPath geojson={graticule.outline()} {...outline} />
+    <GeoPath geojson={graticule.outline()} {...typeof outline === 'object' ? outline : null} />
   {/if}
 </g>

packages/layerchart/src/lib/components/Highlight.svelte

@@ -30,21 +30,21 @@
   export let axis: 'x' | 'y' | 'both' | 'none' | undefined = undefined;
 
   /** Show points and pass props to Circles */
-  export let points: boolean | ComponentProps<Circle> = false;
+  export let points: boolean | Partial<ComponentProps<Circle>> = false;
 
   /** Show lines and pass props to Lines */
-  export let lines: boolean | ComponentProps<Line> = false;
+  export let lines: boolean | Partial<ComponentProps<Line>> = false;
 
   /** Show area and pass props to Rect */
-  export let area: boolean | ComponentProps<Rect> = false;
+  export let area: boolean | Partial<ComponentProps<Rect>> = false;
 
   /** Show bar and pass props to Rect */
-  export let bar: boolean | ComponentProps<Rect> = false;
+  export let bar: boolean | Partial<ComponentProps<Rect>> = false;
 
   // TODO: Fix circle points being backwards for stack (see AreaStack)
 
-  let _points = [];
-  let _lines = [];
+  let _points: { x: number; y: number }[] = [];
+  let _lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
   let _area = {
     x: 0,
     y: 0,

packages/layerchart/src/lib/components/Points.svelte

@@ -17,7 +17,7 @@
   export let offsetY: Offset = undefined;
 
   /** Enable showing links between related points (array x/y accessors) */
-  export let links: boolean | ComponentProps<Link> = false;
+  export let links: boolean | Partial<ComponentProps<Link>> = false;
 
   function getOffset(value, offset: Offset, scale: any) {
     if (typeof offset === 'function') {