feat: new prop types, expose chart instance (#62)

.size-limit.json

@@ -12,7 +12,7 @@
   },
   {
     "path": "dist/index.js",
-    "limit": "1.98 KB",
+    "limit": "2.1 KB",
     "webpack": false,
     "running": false
   },

package.json

@@ -36,11 +36,12 @@
     "test:size": "size-limit",
     "test:unit": "jest -c jest.config.json",
     "test": "pnpm test:lint && pnpm test:unit",
-    "start:storybook": "start-storybook -p 6006",
+    "start:storybook": "start-storybook -p 6006 --ci",
     "build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook",
     "bumpVersion": "standard-version",
     "createGithubRelease": "simple-github-release",
-    "release": "pnpm bumpVersion && git push origin master --tags && pnpm createGithubRelease"
+    "release": "pnpm bumpVersion && git push origin master --tags && pnpm createGithubRelease",
+    "updateGitHooks": "simple-git-hooks"
   },
   "peerDependencies": {
     "chart.js": "^3.5.0",
@@ -63,7 +64,7 @@
     "@types/jest": "^28.1.5",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",
-    "chart.js": "^3.5.0",
+    "chart.js": "^3.8.0",
     "clean-publish": "^4.0.1",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
@@ -80,6 +81,7 @@
     "rollup": "^2.75.7",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-swc": "^0.2.1",
+    "simple-git-hooks": "^2.8.0",
     "simple-github-release": "^1.0.0",
     "size-limit": "^7.0.8",
     "standard-version": "^9.5.0",

src/Bar.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { Chart, BarController } from 'chart.js';
-
+  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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'bar', number[], unknown>;
-    options?: TChartOptions<'bar'>;
-    plugins?: TChartPlugin<'bar'>[];
+  interface $$Props<TData = DefaultDataPoint<'bar'>, TLabel = unknown>
+    extends Omit<ChartProps<'bar', TData, TLabel>, 'type'> {
+    chart: ChartJS<'bar', TData, TLabel> | null;
   }
 
-  Chart.register(BarController);
+  ChartJS.register(BarController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="bar" />
+<Base bind:chart type="bar" {...props} />

src/Base.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
   import { onMount, afterUpdate, onDestroy } from 'svelte';
-
-  import { Chart } from 'chart.js';
-
-  import type {
-    TChartType,
-    TChartData,
-    TChartOptions,
-    TChartPlugin,
-    TypedChartJS,
-  } from './types';
-
-  export let data: TChartData = {
-    labels: [],
-    datasets: [{ data: [] }],
-  };
-  export let type: TChartType = 'line';
-  export let options: TChartOptions<TChartType> = {};
-  export let plugins: TChartPlugin[] = [];
+  import type { ChartType, DefaultDataPoint } from 'chart.js';
+  import { Chart as ChartJS } from 'chart.js';
+  import type { ChartProps } from './types';
+
+  interface $$Props<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+  > extends ChartProps<TType, TData, TLabel> {
+    chart: ChartJS<TType, TData, TLabel> | null;
+  }
 
   function clean(props: SvelteAllProps) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -27,19 +20,25 @@
     return rest;
   }
 
+  export let type: $$Props['type'];
+  export let data: $$Props['data'] = {
+    datasets: [],
+  };
+  export let options: $$Props['options'] = {};
+  export let plugins: $$Props['plugins'] = [];
+  export let chart: $$Props['chart'] = null;
+  let canvasRef: HTMLCanvasElement;
   let props = clean($$props);
 
-  let chart: TypedChartJS | null = null;
-  let chartRef: HTMLCanvasElement;
-
   onMount(() => {
-    chart = new Chart(chartRef, {
+    chart = new ChartJS(canvasRef, {
       type,
       data,
       options,
       plugins,
     });
   });
+
   afterUpdate(() => {
     if (!chart) return;
 
@@ -54,4 +53,4 @@
   });
 </script>
 
-<canvas bind:this={chartRef} {...props} />
+<canvas bind:this={canvasRef} {...props} />

src/Bubble.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { Chart, BubbleController } from 'chart.js';
-  import type { BubbleDataPoint } from 'chart.js';
-
+  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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'bubble', BubbleDataPoint[], unknown>;
-    options?: TChartOptions<'bubble'>;
-    plugins?: TChartPlugin<'bubble'>[];
+  interface $$Props<TData = DefaultDataPoint<'bubble'>, TLabel = unknown>
+    extends Omit<ChartProps<'bubble', TData, TLabel>, 'type'> {
+    chart: ChartJS<'bubble', TData, TLabel> | null;
   }
 
-  Chart.register(BubbleController);
+  ChartJS.register(BubbleController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="bubble" />
+<Base bind:chart type="bubble" {...props} />

src/Doughnut.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { Chart, DoughnutController } from 'chart.js';
-
+  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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'doughnut', number[], unknown>;
-    options?: TChartOptions<'doughnut'>;
-    plugins?: TChartPlugin<'doughnut'>[];
+  interface $$Props<TData = DefaultDataPoint<'doughnut'>, TLabel = unknown>
+    extends Omit<ChartProps<'doughnut', TData, TLabel>, 'type'> {
+    chart: ChartJS<'doughnut', TData, TLabel> | null;
   }
 
-  Chart.register(DoughnutController);
+  ChartJS.register(DoughnutController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="doughnut" />
+<Base bind:chart type="doughnut" {...props} />

src/Line.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { Chart, LineController } from 'chart.js';
   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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'line', DefaultDataPoint<'line'>, unknown>;
-    options?: TChartOptions<'line'>;
-    plugins?: TChartPlugin<'line'>[];
+  interface $$Props<TData = DefaultDataPoint<'line'>, TLabel = unknown>
+    extends Omit<ChartProps<'line', TData, TLabel>, 'type'> {
+    chart: ChartJS<'line', TData, TLabel> | null;
   }
 
-  Chart.register(LineController);
+  ChartJS.register(LineController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="line" />
+<Base bind:chart type="line" {...props} />

src/Pie.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { Chart, PieController } from 'chart.js';
-
+  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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'pie', number[], unknown>;
-    options?: TChartOptions<'pie'>;
-    plugins?: TChartPlugin<'pie'>[];
+  interface $$Props<TData = DefaultDataPoint<'pie'>, TLabel = unknown>
+    extends Omit<ChartProps<'pie', TData, TLabel>, 'type'> {
+    chart: ChartJS<'pie', TData, TLabel> | null;
   }
 
-  Chart.register(PieController);
+  ChartJS.register(PieController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="pie" />
+<Base bind:chart type="pie" {...props} />

src/Polar.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { Chart, PolarAreaController } from 'chart.js';
-
+  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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'polarArea', number[], unknown>;
-    options?: TChartOptions<'polarArea'>;
-    plugins?: TChartPlugin<'polarArea'>[];
+  interface $$Props<TData = DefaultDataPoint<'polarArea'>, TLabel = unknown>
+    extends Omit<ChartProps<'polarArea', TData, TLabel>, 'type'> {
+    chart: ChartJS<'polarArea', TData, TLabel> | null;
   }
 
-  Chart.register(PolarAreaController);
+  ChartJS.register(PolarAreaController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="polarArea" />
+<Base bind:chart type="polarArea" {...props} />

src/Radar.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { Chart, RadarController } from 'chart.js';
   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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'radar', DefaultDataPoint<'radar'>, unknown>;
-    options?: TChartOptions<'radar'>;
-    plugins?: TChartPlugin<'radar'>[];
+  interface $$Props<TData = DefaultDataPoint<'radar'>, TLabel = unknown>
+    extends Omit<ChartProps<'radar', TData, TLabel>, 'type'> {
+    chart: ChartJS<'radar', TData, TLabel> | null;
   }
 
-  Chart.register(RadarController);
+  ChartJS.register(RadarController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="radar" />
+<Base bind:chart type="radar" {...props} />

src/Scatter.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-  import { Chart, ScatterController } from 'chart.js';
   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 { TChartData, TChartOptions, TChartPlugin } from './types';
 
-  interface $$Props {
-    data: TChartData<'scatter', DefaultDataPoint<'scatter'>, unknown>;
-    options?: TChartOptions<'scatter'>;
-    plugins?: TChartPlugin<'scatter'>[];
+  interface $$Props<TData = DefaultDataPoint<'scatter'>, TLabel = unknown>
+    extends Omit<ChartProps<'scatter', TData, TLabel>, 'type'> {
+    chart: ChartJS<'scatter', TData, TLabel> | null;
   }
 
-  Chart.register(ScatterController);
+  ChartJS.register(ScatterController);
+
+  export let chart: $$Props['chart'] = null;
+  let props = $$props as $$Props;
 </script>
 
-<Base {...$$props} type="scatter" />
+<Base bind:chart type="scatter" {...props} />