refactor: tree-shaking (#839)

BREAKING CHANGE: Added support of tree-shaking of Chart.js. Now you should register Chart.js
components by yourself.

.size-limit

@@ -8,17 +8,17 @@
   {
     "path": "dist/index.js",
     "limit": "1.5 KB",
-    "import": "Chart"
+    "import": "{ Chart }"
   },
   {
     "path": "dist/index.modern.js",
-    "limit": "2.3 KB",
+    "limit": "2.35 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.modern.js",
     "limit": "1.5 KB",
-    "import": "Chart"
+    "import": "{ Chart }"
   }
 ]

package.json

@@ -2,6 +2,7 @@
   "name": "react-chartjs-2",
   "version": "3.3.0",
   "description": "React components for Chart.js",
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "types": "dist/index.d.ts",

src/chart.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import type { ForwardedRef, MouseEvent } from 'react';
-import ChartJS from 'chart.js/auto';
+import { Chart as ChartJS } from 'chart.js';
 import type { ChartData, ChartType, DefaultDataPoint } from 'chart.js';
 
 import type { ChartProps, TypedChartComponent } from './types';

src/typedCharts.tsx

@@ -1,27 +1,59 @@
 import React, { forwardRef } from 'react';
-import { ChartType } from 'chart.js';
-
-import { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types';
+import {
+  Chart as ChartJS,
+  LineController,
+  BarController,
+  RadarController,
+  DoughnutController,
+  PolarAreaController,
+  BubbleController,
+  PieController,
+  ScatterController,
+} from 'chart.js';
+import type { ChartType, ChartComponentLike } from 'chart.js';
+
+import type {
+  ChartProps,
+  ChartJSOrUndefined,
+  TypedChartComponent,
+} from './types';
 import { Chart } from './chart';
 
-function createTypedChart<T extends ChartType>(type: T) {
+function createTypedChart<T extends ChartType>(
+  type: T,
+  registerables: ChartComponentLike
+) {
+  ChartJS.register(registerables);
+
   return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>(
     (props, ref) => <Chart {...props} ref={ref} type={type} />
   ) as TypedChartComponent<T, true>;
 }
 
-export const Line = createTypedChart('line');
+export const Line = /* #__PURE__ */ createTypedChart('line', LineController);
 
-export const Bar = createTypedChart('bar');
+export const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
 
-export const Radar = createTypedChart('radar');
+export const Radar = /* #__PURE__ */ createTypedChart('radar', RadarController);
 
-export const Doughnut = createTypedChart('doughnut');
+export const Doughnut = /* #__PURE__ */ createTypedChart(
+  'doughnut',
+  DoughnutController
+);
 
-export const PolarArea = createTypedChart('polarArea');
+export const PolarArea = /* #__PURE__ */ createTypedChart(
+  'polarArea',
+  PolarAreaController
+);
 
-export const Bubble = createTypedChart('bubble');
+export const Bubble = /* #__PURE__ */ createTypedChart(
+  'bubble',
+  BubbleController
+);
 
-export const Pie = createTypedChart('pie');
+export const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
 
-export const Scatter = createTypedChart('scatter');
+export const Scatter = /* #__PURE__ */ createTypedChart(
+  'scatter',
+  ScatterController
+);

stories/Bar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { Bar } from '../src';
 import * as verticalBar from '../sandboxes/bar/vertical/App';
 import * as horizontalBar from '../sandboxes/bar/horizontal/App';

stories/Bubble.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { Bubble } from '../src';
 import { data, options } from '../sandboxes/bubble/default/App';
 

stories/Chart.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useReducer } from 'react';
+import 'chart.js/auto';
 import { InteractionItem } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import { Chart } from '../src';

stories/Doughnut.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import 'chart.js/auto';
 import { Doughnut } from '../src';
 import { data } from '../sandboxes/doughnut/default/App';
 

stories/Line.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { Line } from '../src';
 import * as defaultLine from '../sandboxes/line/default/App';
 import * as multiaxisLine from '../sandboxes/line/multiaxis/App';

stories/Pie.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import faker from 'faker';
+import 'chart.js/auto';
 import { Pie } from '../src';
 import { data } from '../sandboxes/pie/default/App';
 

stories/PolarArea.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { PolarArea } from '../src';
 import { data } from '../sandboxes/polarArea/default/App';
 

stories/Radar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { Radar } from '../src';
 import { data } from '../sandboxes/radar/default/App';
 

stories/Scatter.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'chart.js/auto';
 import { Scatter } from '../src';
 import { data, options } from '../sandboxes/scatter/default/App';
 

test/chart.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
-import ChartJS from 'chart.js/auto';
+import 'chart.js/auto';
+import { Chart as ChartJS } from 'chart.js';
 import { Chart } from '../src';
 
 describe('<Chart />', () => {