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
npm install --save chart.js@next @sgratzl/chartjs-esm-facade@nextESM
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
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()],
},
];npm i -g yarn
yarn set version 2.1.0
yarn
yarn pnpify --sdk vscodeyarn install
yarn build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent