fix: typed components update fix (#78)

Author: dangreen

.size-limit.cjs

@@ -16,7 +16,7 @@ module.exports = [
   },
   {
     path: 'package/index.js',
-    limit: '1.2 KB',
+    limit: '1.25 KB',
     import: '{ Bar }',
     modifyWebpackConfig
   },

src/Bar.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(BarController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="bar" {...props} />

src/Bubble.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(BubbleController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="bubble" {...props} />

src/Chart.svelte

@@ -45,7 +45,7 @@
     if (!chart) return;
 
     chart.data = data;
-    chart.options = options;
+    Object.assign(chart.options, options);
     chart.update(updateMode);
   });
 

src/Doughnut.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(DoughnutController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="doughnut" {...props} />

src/Line.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(LineController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="line" {...props} />

src/Pie.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(PieController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="pie" {...props} />

src/PolarArea.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(PolarAreaController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="polarArea" {...props} />

src/Radar.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(RadarController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="radar" {...props} />

src/Scatter.svelte

@@ -13,10 +13,12 @@
   ChartJS.register(ScatterController);
 
   export let chart: $$Props['chart'] = null;
-  let props = $$props as $$Props;
+  let props: $$Props;
   let baseChartRef: Chart;
 
   useForwardEvents(() => baseChartRef);
+
+  $: props = $$props as $$Props;
 </script>
 
 <Chart bind:this={baseChartRef} bind:chart type="scatter" {...props} />