From 2cfb714c03743291b75f5c6318a8973888de1bc1 Mon Sep 17 00:00:00 2001 From: dangreen Date: Thu, 4 Nov 2021 04:00:58 +0700 Subject: [PATCH] refactor: tree-shaking Added support of tree-shaking of Chart.js BREAKING CHANGE: Added support of tree-shaking of Chart.js. Now you should register Chart.js components by youreslf. #706 --- .size-limit | 6 ++--- src/chart.tsx | 2 +- src/typedCharts.tsx | 56 +++++++++++++++++++++++++++++++++---------- stories/Bar.tsx | 1 + stories/Bubble.tsx | 1 + stories/Chart.tsx | 1 + stories/Doughnut.tsx | 1 + stories/Line.tsx | 1 + stories/Pie.tsx | 1 + stories/PolarArea.tsx | 1 + stories/Radar.tsx | 1 + stories/Scatter.tsx | 1 + test/chart.test.tsx | 3 ++- 13 files changed, 59 insertions(+), 17 deletions(-) diff --git a/.size-limit b/.size-limit index 1cfc02606..ef5a3e9e0 100644 --- a/.size-limit +++ b/.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 }" } ] diff --git a/src/chart.tsx b/src/chart.tsx index 7081dd7e4..612cf500f 100644 --- a/src/chart.tsx +++ b/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'; diff --git a/src/typedCharts.tsx b/src/typedCharts.tsx index 1fcb230ef..232e07c6d 100644 --- a/src/typedCharts.tsx +++ b/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(type: T) { +function createTypedChart( + type: T, + registerables: ChartComponentLike +) { + ChartJS.register(registerables); + return forwardRef, Omit, 'type'>>( (props, ref) => ) as TypedChartComponent; } -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 +); diff --git a/stories/Bar.tsx b/stories/Bar.tsx index f43580abd..40728fbf1 100644 --- a/stories/Bar.tsx +++ b/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'; diff --git a/stories/Bubble.tsx b/stories/Bubble.tsx index d90037575..73977c5e8 100644 --- a/stories/Bubble.tsx +++ b/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'; diff --git a/stories/Chart.tsx b/stories/Chart.tsx index db614e627..475a6ce33 100644 --- a/stories/Chart.tsx +++ b/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'; diff --git a/stories/Doughnut.tsx b/stories/Doughnut.tsx index 85dabee89..c11dd27b6 100644 --- a/stories/Doughnut.tsx +++ b/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'; diff --git a/stories/Line.tsx b/stories/Line.tsx index 083952f75..0c61c3f87 100644 --- a/stories/Line.tsx +++ b/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'; diff --git a/stories/Pie.tsx b/stories/Pie.tsx index 63f8a35ee..315c02b44 100644 --- a/stories/Pie.tsx +++ b/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'; diff --git a/stories/PolarArea.tsx b/stories/PolarArea.tsx index 777260a64..d639e1e20 100644 --- a/stories/PolarArea.tsx +++ b/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'; diff --git a/stories/Radar.tsx b/stories/Radar.tsx index a0b96d14e..a02541c48 100644 --- a/stories/Radar.tsx +++ b/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'; diff --git a/stories/Scatter.tsx b/stories/Scatter.tsx index c89b828ff..f359c6bce 100644 --- a/stories/Scatter.tsx +++ b/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'; diff --git a/test/chart.test.tsx b/test/chart.test.tsx index c364e4b74..89aa97200 100644 --- a/test/chart.test.tsx +++ b/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('', () => {