Migration Guide - v3.2.0

What Changed?

Version 3.2.0 introduces ES module (ESM) support as the primary distribution format while maintaining backward compatibility with CommonJS and browser usage.

Breaking Changes

1. Package Distribution Format

The package now uses dual package exports with ESM as the default:

Before (v3.x):

• Single UMD bundle: dist/chartjs-plugin-trendline.min.js
• CommonJS-style package

After (v3.2.x):

• ESM build: dist/chartjs-plugin-trendline.esm.js
• CommonJS build: dist/chartjs-plugin-trendline.cjs
• UMD build (unminified): dist/chartjs-plugin-trendline.js
• UMD build (minified): dist/chartjs-plugin-trendline.min.js

2. Import Changes

Modern Bundlers (Vite, SvelteKit, Next.js, webpack 5)

No changes needed! Your bundler will automatically use the ESM version:

import ChartJSTrendline from 'chartjs-plugin-trendline';

Node.js with CommonJS

The CommonJS build is automatically used when using require():

const ChartJSTrendline = require('chartjs-plugin-trendline');

Browser via CDN

The global export name has changed:

Before:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@3"></script>
<!-- Plugin auto-registered with Chart.js -->

After:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@3"></script>
<script>
  // Option 1: Plugin auto-registers if Chart.js is available
  // Option 2: Manual registration
  Chart.register(ChartJSTrendline);
</script>

Benefits

For Modern Projects

• ✅ Better tree-shaking support
• ✅ Faster build times with Vite, SvelteKit, and modern bundlers
• ✅ Full ESM support
• ✅ Smaller bundle sizes (only import what you need)

For Legacy Projects

• ✅ Backward compatible with CommonJS
• ✅ UMD builds still available for browser <script> tags
• ✅ Works with older webpack and Node.js versions

Recommendations

New Projects

Use ESM imports with modern bundlers (Vite, SvelteKit, Next.js, Nuxt):

import ChartJSTrendline from 'chartjs-plugin-trendline';
import { Chart } from 'chart.js';

Chart.register(ChartJSTrendline);

Legacy Projects

Continue using CommonJS require():

const ChartJSTrendline = require('chartjs-plugin-trendline');
const Chart = require('chart.js');

Chart.register(ChartJSTrendline);

Browser CDN

Use the minified UMD build:

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@3"></script>

Technical Details

Package.json Configuration

{
  "type": "module",
  "main": "./dist/chartjs-plugin-trendline.cjs",
  "module": "./dist/chartjs-plugin-trendline.esm.js",
  "exports": {
    ".": {
      "import": "./dist/chartjs-plugin-trendline.esm.js",
      "require": "./dist/chartjs-plugin-trendline.cjs"
    }
  }
}

This ensures:

• Modern bundlers use the ESM version
• Node.js require() uses the CommonJS version
• Maximum compatibility across environments

Questions?

If you encounter any issues during migration, please open an issue on GitHub.