fix: rename components Base -> Chart, Polar -> PolarArea (#64)

.size-limit.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/index.cjs",
-    "limit": "2.6 KB",
+    "limit": "2.7 KB",
     "webpack": false,
     "running": false
   },
@@ -12,7 +12,7 @@
   },
   {
     "path": "dist/index.js",
-    "limit": "2.6 KB",
+    "limit": "2.7 KB",
     "webpack": false,
     "running": false
   },

sandboxes/bubble/components/Chart.svelte

@@ -9,7 +9,6 @@
     Legend,
     PointElement,
     LinearScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale);

sandboxes/doughnut/components/Chart.svelte

@@ -9,7 +9,6 @@
     Legend,
     ArcElement,
     CategoryScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

sandboxes/events/components/Chart.svelte

@@ -1,6 +1,6 @@
 <script>
   import {
-    Base as Chart,
+    Chart,
     getDatasetAtEvent,
     getElementAtEvent,
     getElementsAtEvent,

sandboxes/pie/components/Chart.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Pie }  from 'svelte-chartjs';
+  import { Pie } from 'svelte-chartjs';
   import { data } from './data.js';
 
   import {
@@ -9,7 +9,6 @@
     Legend,
     ArcElement,
     CategoryScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

sandboxes/polar/components/Chart.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Polar } from 'svelte-chartjs';
+  import { PolarArea } from 'svelte-chartjs';
   import { data } from './data.js';
 
   import {
@@ -9,10 +9,9 @@
     Legend,
     ArcElement,
     RadialLinearScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);
 </script>
 
-<Polar {data} options={{ responsive: true }} />
+<PolarArea {data} options={{ responsive: true }} />

sandboxes/ref/components/Chart.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { Base as Chart } from 'svelte-chartjs';
+  import { Chart } from 'svelte-chartjs';
   import { data, options } from './data.js';
 
   import {

sandboxes/scatter/components/Chart.svelte

@@ -11,7 +11,6 @@
     CategoryScale,
     LinearScale,
     PointElement,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(

src/Bar.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, BarController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'bar'>, TLabel = unknown>
-    extends Omit<ChartProps<'bar', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'bar', TData, TLabel>, 'type'> {
     chart: ChartJS<'bar', TData, TLabel> | null;
   }
 
   ChartJS.register(BarController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="bar" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="bar" {...props} />

src/Bubble.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, BubbleController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'bubble'>, TLabel = unknown>
-    extends Omit<ChartProps<'bubble', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'bubble', TData, TLabel>, 'type'> {
     chart: ChartJS<'bubble', TData, TLabel> | null;
   }
 
   ChartJS.register(BubbleController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="bubble" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="bubble" {...props} />

src/Base.svelte → src/Chart.svelte

@@ -2,14 +2,14 @@
   import { onMount, afterUpdate, onDestroy } from 'svelte';
   import type { ChartType, DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS } from 'chart.js';
-  import type { ChartProps } from './types';
+  import type { ChartBaseProps } from './types';
   import { useForwardEvents } from './utils';
 
   interface $$Props<
     TType extends ChartType = ChartType,
     TData = DefaultDataPoint<TType>,
     TLabel = unknown
-  > extends ChartProps<TType, TData, TLabel> {
+  > extends ChartBaseProps<TType, TData, TLabel> {
     chart: ChartJS<TType, TData, TLabel> | null;
   }
 

src/Doughnut.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, DoughnutController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'doughnut'>, TLabel = unknown>
-    extends Omit<ChartProps<'doughnut', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'doughnut', TData, TLabel>, 'type'> {
     chart: ChartJS<'doughnut', TData, TLabel> | null;
   }
 
   ChartJS.register(DoughnutController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="doughnut" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="doughnut" {...props} />

src/Line.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, LineController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'line'>, TLabel = unknown>
-    extends Omit<ChartProps<'line', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'line', TData, TLabel>, 'type'> {
     chart: ChartJS<'line', TData, TLabel> | null;
   }
 
   ChartJS.register(LineController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="line" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="line" {...props} />

src/Pie.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, PieController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'pie'>, TLabel = unknown>
-    extends Omit<ChartProps<'pie', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'pie', TData, TLabel>, 'type'> {
     chart: ChartJS<'pie', TData, TLabel> | null;
   }
 
   ChartJS.register(PieController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="pie" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="pie" {...props} />

src/Polar.svelte → src/PolarArea.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, PolarAreaController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'polarArea'>, TLabel = unknown>
-    extends Omit<ChartProps<'polarArea', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'polarArea', TData, TLabel>, 'type'> {
     chart: ChartJS<'polarArea', TData, TLabel> | null;
   }
 
   ChartJS.register(PolarAreaController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="polarArea" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="polarArea" {...props} />

src/Radar.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, RadarController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'radar'>, TLabel = unknown>
-    extends Omit<ChartProps<'radar', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'radar', TData, TLabel>, 'type'> {
     chart: ChartJS<'radar', TData, TLabel> | null;
   }
 
   ChartJS.register(RadarController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="radar" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="radar" {...props} />

src/Scatter.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import type { DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS, ScatterController } from 'chart.js';
-  import type { ChartProps } from './types';
-  import Base from './Base.svelte';
+  import type { ChartBaseProps } from './types';
+  import Chart from './Chart.svelte';
   import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'scatter'>, TLabel = unknown>
-    extends Omit<ChartProps<'scatter', TData, TLabel>, 'type'> {
+    extends Omit<ChartBaseProps<'scatter', TData, TLabel>, 'type'> {
     chart: ChartJS<'scatter', TData, TLabel> | null;
   }
 
   ChartJS.register(ScatterController);
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
-  let baseRef: Base;
+  let baseChartRef: Chart;
 
-  useForwardEvents(() => baseRef);
+  useForwardEvents(() => baseChartRef);
 </script>
 
-<Base bind:this={baseRef} bind:chart type="scatter" {...props} />
+<Chart bind:this={baseChartRef} bind:chart type="scatter" {...props} />

src/index.ts

@@ -1,13 +1,36 @@
+import Chart from './Chart.svelte';
 import Line from './Line.svelte';
 import Radar from './Radar.svelte';
 import Doughnut from './Doughnut.svelte';
 import Pie from './Pie.svelte';
 import Bar from './Bar.svelte';
-import Polar from './Polar.svelte';
+import PolarArea from './PolarArea.svelte';
 import Bubble from './Bubble.svelte';
 import Scatter from './Scatter.svelte';
-import Base from './Base.svelte';
+
+/**
+ * @deprecated Please use `Chart` name instead.
+ * @todo Remove in v3.0.0
+ */
+const Base = Chart;
+/**
+ * @deprecated Please use `PolarArea` name instead.
+ * @todo Remove in v3.0.0
+ */
+const Polar = PolarArea;
 
 export * from './types';
 export * from './utils';
-export { Base, Line, Radar, Doughnut, Pie, Bar, Scatter, Bubble, Polar };
+export {
+  Chart,
+  Base,
+  Line,
+  Radar,
+  Doughnut,
+  Pie,
+  Bar,
+  Scatter,
+  Bubble,
+  PolarArea,
+  Polar,
+};

src/types/chart.ts

@@ -8,7 +8,7 @@ import type {
 } from 'chart.js';
 import type { HTMLAttributes } from './html';
 
-export interface ChartProps<
+export interface ChartBaseProps<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
   TLabel = unknown