Chart.js ESM Flat Facade

This is a helper package for the latest chart.js 3.0.0-alpha.2 version to provide a unified flat export hierarchy for both UMD and ESM cases. It is an application of the Facade Design Pattern.

Works only with Chart.js >= 3.0.0-alpha.2

Install

npm install --save chart.js@next @sgratzl/chartjs-esm-facade@next

Usage

ESM

import {
  Chart,
  CategoryScale,
  LinearScale,
  Rectangle,
  Legend,
  Line,
  merge,
  valueOrDefault,
} from '@sgratzl/chartjs-esm-facade';

UMD

const { Chart, CategoryScale, LinearScale, Rectangle, Legend, merge, valueOrDefault } = ChartESMFacade;

see Samples on Github

Library Usage

In order to proper choose the right adapter when embedding it into a library, one has to enforce the UMD case when building UMD package versions. This will be accomplished using an alias in the bundler.

An example rollup config

// rollup.config.js
import pnp from 'rollup-plugin-pnp-resolve';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import alias from '@rollup/plugin-alias';
import pkg from './package.json';

export default [
  {
    input: 'src/bundle.js',
    output: {
      file: pkg.main,
      name: 'UMDName',
      format: 'umd',
      globals: {
        'chart.js': 'Chart',
      },
    },
    external: ['chart.js'],
    plugins: [
      alias({
        // enforce UMD adapter version
        entries: [
          {
            find: /^(@sgratzl\/chartjs-esm-facade)$/,
            replacement: '@sgratzl/chartjs-esm-facade/src/index.umd.js',
          },
        ],
      }),
      commonjs(),
      pnp(),
      resolve(),
      babel({ babelHelpers: 'runtime' }),
    ],
  },
  {
    input: 'src/index.js',
    output: {
      file: pkg.module,
      format: 'esm',
    },
    external: (e) => e === 'chart.js' || e.startsWith('chart.js/'),
    plugins: [commonjs(), pnp(), resolve()],
  },
];

Development Environment

npm i -g yarn
yarn set version 2.1.0
yarn
yarn pnpify --sdk vscode

Building

yarn install
yarn build