Propose a simplified registration process

docs/docs/getting-started/integration.md

@@ -22,9 +22,17 @@ var myChart = new Chart(ctx, {...});
 
 ## Bundlers (Webpack, Rollup, etc.)
 
-Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
+To use Chart.js, a simple import is all that is required.
+
+```javascript
+import Chart from 'chart.js';
+var myChart = new Chart(ctx, {...});
+```
+
+### Tree Shaking
+
+Chart.js 3 has optional tree shaking that is enabled via the `chart.js/tree` package. To use this, it is necessary to import and register the controllers, elements, scales and plugins you wish to use. The example below shows all of the available imports and how to register them.
 
-For all available imports see the example below.
 ```javascript
 import {
   Chart,
@@ -50,7 +58,7 @@ import {
   Legend,
   Title,
   Tooltip
-} from 'chart.js';
+} from 'chart.js/tree';
 
 Chart.register(
   ArcElement,
@@ -80,6 +88,18 @@ Chart.register(
 var myChart = new Chart(ctx, {...});
 ```
 
+A short registration format is also available.
+
+```javascript
+import { Chart, controllers, elements, plugins, scales } from 'chart.js';
+Chart.register(...[
+    ...Object.values(controllers),
+    ...Object.values(elements),
+    ...Object.values(plugins),
+    ...Object.values(scales),
+]);
+```
+
 ## Require JS
 
 **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/chart.js`, `dist/chart.min.js`, etc.).

docs/docs/getting-started/v3-migration.md

@@ -22,34 +22,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 * Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. Please see the [installation](installation.md) and [integration](integration.md) docs for details on the recommended way to setup Chart.js if you were using these builds.
 * `moment` is no longer specified as an npm dependency. If you are using the `time` or `timeseries` scales, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
 * The `Chart` constructor will throw an error if the canvas/context provided is already in use
-* Chart.js 3 is tree-shakeable. So if you are using it as an `npm` module in a project, you need to import and register the controllers, elements, scales and plugins you want to use. You will not have to call `register` if importing Chart.js via a `script` tag, but will not get the tree shaking benefits in this case. Here is an example of registering components:
-
-```javascript
-import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from `chart.js`
-
-Chart.register(LineController, LineElement, PointElement, LinearScale, Title);
-
-const chart = new Chart(ctx, {
-    type: 'line',
-    // data: ...
-    options: {
-        plugins: {
-            title: {
-                display: true,
-                text: 'Chart Title'
-            }
-        },
-        scales: {
-            x: {
-                type: 'linear'
-            },
-            y: {
-                type: 'linear'
-            }
-        }
-    }
-})
-```
+* Chart.js 3 has optional tree shaking when used as an `npm` module. In v3.0.0-beta.10 and below, this was the always enabled. Starting in v3.0.0-beta.11, tree shaking was moved to the `chart.js/tree` package and made into an optional enhancement. For details on how to enable tree-shaking, see the [integration](integration.md#tree-shaking) documentation.
 
 ### Chart types
 

package.json

@@ -30,7 +30,9 @@
     "dist/chunks/*.js",
     "dist/chunks/*.d.ts",
     "helpers/**/*.js",
-    "helpers/**/*.d.ts"
+    "helpers/**/*.d.ts",
+    "tree/**/*.js",
+    "tree/**/*.d.ts"
   ],
   "scripts": {
     "autobuild": "rollup -c -w",

rollup.config.js

@@ -11,10 +11,12 @@ const pkg = require('./package.json');
 const input = 'src/index.js';
 const inputESM = {
 	'dist/chart.esm': 'src/index.esm.js',
+	'dist/chart.shakeable.esm': 'src/index.shakeable.esm.js',
 	'dist/helpers.esm': 'src/helpers/index.js'
 };
 const inputESMTypings = {
 	'dist/chart.esm': 'types/index.esm.d.ts',
+	'dist/chart.shakeable.esm': 'types/index.shakeable.esm.d.ts',
 	'dist/helpers.esm': 'types/helpers/index.d.ts'
 };
 

src/index.esm.js

@@ -1,6 +1,18 @@
+// Export all of these as we do in the tree-shakeable version
 export * from './controllers';
 export * from './core';
 export * from './elements';
 export * from './platform';
 export * from './plugins';
 export * from './scales';
+
+import {Chart} from './core';
+import * as controllers from './controllers';
+import * as elements from './elements';
+import * as plugins from './plugins';
+import * as scales from './scales';
+
+Chart.register(controllers, elements, plugins, scales);
+
+// Since everything is already registered, provide a default Chart export for convenience
+export default Chart;

src/index.shakeable.esm.js

@@ -0,0 +1,6 @@
+export * from './controllers';
+export * from './core';
+export * from './elements';
+export * from './platform';
+export * from './plugins';
+export * from './scales';

tree/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "chart.js-tree-shaking",
+    "private": true,
+    "description": "tree shakeable version of chart.js ESM build",
+    "main": "tree.js",
+    "module": "tree.esm.js",
+    "types": "tree.esm.d.ts"
+}

tree/tree.esm.d.ts

@@ -0,0 +1 @@
+export * from '../dist/chart.shakeable.esm';

tree/tree.esm.js

@@ -0,0 +1 @@
+export * from '../dist/chart.shakeable.esm';

tree/tree.js

@@ -0,0 +1 @@
+module.exports = require('..').tree;

tsconfig.json

@@ -12,7 +12,7 @@
   },
   "typedocOptions": {
     "name": "Chart.js",
-    "entryPoints": ["src/index.esm.js"],
+    "entryPoints": ["src/index.esm.js", "src/index.shakeable.esm.js"],
     "excludeExternals": true,
     "excludeNotExported": true,
     "includeVersion": true,

types/animation.d.ts

@@ -1,4 +1,4 @@
-import { Chart } from './index.esm';
+import { Chart } from './index.shakeable.esm';
 import { AnyObject } from './basic';
 
 export class Animation {

types/helpers/helpers.canvas.d.ts

@@ -1,4 +1,4 @@
-import { PointStyle } from '../index.esm';
+import { PointStyle } from '../index.shakeable.esm';
 import { Color } from '../color';
 import { ChartArea } from '../geometric';
 import { CanvasFontSpec } from './helpers.options';

types/helpers/helpers.easing.d.ts

@@ -1,4 +1,4 @@
-import { EasingFunction } from '../index.esm';
+import { EasingFunction } from '../index.shakeable.esm';
 
 export type EasingFunctionSignature = (t: number) => number;
 

types/helpers/helpers.options.d.ts

@@ -1,4 +1,4 @@
-import { FontSpec } from '../index.esm';
+import { FontSpec } from '../index.shakeable.esm';
 
 export interface CanvasFontSpec extends FontSpec {
 	string: string;