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

dangreen · dangreen · commit ec905ccfaf51 · 2022-08-17T23:54:06.000+04:00
diff --git a/.size-limit.json b/.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
   },
diff --git a/sandboxes/bubble/components/Chart.svelte b/sandboxes/bubble/components/Chart.svelte
@@ -9,7 +9,6 @@
     Legend,
     PointElement,
     LinearScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale);
diff --git a/sandboxes/doughnut/components/Chart.svelte b/sandboxes/doughnut/components/Chart.svelte
@@ -9,7 +9,6 @@
     Legend,
     ArcElement,
     CategoryScale,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
diff --git a/sandboxes/events/components/Chart.svelte b/sandboxes/events/components/Chart.svelte
@@ -1,6 +1,6 @@
 <script>
   import {
-    Base as Chart,
+    Chart,
     getDatasetAtEvent,
     getElementAtEvent,
     getElementsAtEvent,
diff --git a/sandboxes/pie/components/Chart.svelte b/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);
diff --git a/sandboxes/polar/components/Chart.svelte b/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 }} />
diff --git a/sandboxes/ref/components/Chart.svelte b/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 {
diff --git a/sandboxes/scatter/components/Chart.svelte b/sandboxes/scatter/components/Chart.svelte
@@ -11,7 +11,6 @@
     CategoryScale,
     LinearScale,
     PointElement,
-    Plugin,
   } from 'chart.js';
 
   ChartJS.register(
diff --git a/src/Bar.svelte b/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} />
diff --git a/src/Bubble.svelte b/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} />
diff --git a/src/Chart.svelte b/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;
   }
 
diff --git a/src/Doughnut.svelte b/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} />
diff --git a/src/Line.svelte b/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} />
diff --git a/src/Pie.svelte b/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} />
diff --git a/src/PolarArea.svelte b/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} />
diff --git a/src/Radar.svelte b/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} />
diff --git a/src/Scatter.svelte b/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} />
diff --git a/src/index.ts b/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,
+};
diff --git a/src/types/chart.ts b/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
diff --git a/stories/chart.stories.ts b/stories/chart.stories.ts
diff --git a/stories/polar.stories.ts b/stories/polar.stories.ts
diff --git a/test/PolarArea.spec.ts b/test/PolarArea.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"path": "dist/index.cjs",`
`4`		`- "limit": "2.6 KB",`
	`4`	`+ "limit": "2.7 KB",`
`5`	`5`	`"webpack": false,`
`6`	`6`	`"running": false`
`7`	`7`	`},`
`@@ -12,7 +12,7 @@`
`12`	`12`	`},`
`13`	`13`	`{`
`14`	`14`	`"path": "dist/index.js",`
`15`		`- "limit": "2.6 KB",`
	`15`	`+ "limit": "2.7 KB",`
`16`	`16`	`"webpack": false,`
`17`	`17`	`"running": false`
`18`	`18`	`},`