chartjs-plugin-trendline 3.1.1 → 3.2.3

package/.github/workflows/release.yml

@@ -10,6 +10,10 @@ jobs:
     publish:
         runs-on: ubuntu-latest
 
+        permissions:
+            id-token: write
+            contents: read
+
         steps:
             - name: Checkout repository
               uses: actions/checkout@v4
@@ -20,8 +24,11 @@ jobs:
                   node-version: '22'
                   registry-url: 'https://registry.npmjs.org/'
 
+            - name: Upgrade npm for OIDC support
+              run: npm install -g npm@latest
+
             - name: Install dependencies
-              run: npm ci
+              run: npm install
 
             - name: Build
               run: npm run build
@@ -50,12 +57,8 @@ jobs:
 
             - name: Publish to npm (beta)
               if: startsWith(github.ref, 'refs/tags/beta/')
-              run: npm publish --tag beta
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+              run: npm publish --tag beta --provenance --access public
 
             - name: Publish to npm (latest)
               if: startsWith(github.ref, 'refs/tags/v')
-              run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+              run: npm publish --provenance --access public

package/MIGRATION.md

@@ -0,0 +1,126 @@
+# 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:
+
+```javascript
+import ChartJSTrendline from 'chartjs-plugin-trendline';
+```
+
+#### Node.js with CommonJS
+The CommonJS build is automatically used when using `require()`:
+
+```javascript
+const ChartJSTrendline = require('chartjs-plugin-trendline');
+```
+
+#### Browser via CDN
+The global export name has changed:
+
+**Before:**
+```html
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@3"></script>
+<!-- Plugin auto-registered with Chart.js -->
+```
+
+**After:**
+```html
+<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):
+
+```javascript
+import ChartJSTrendline from 'chartjs-plugin-trendline';
+import { Chart } from 'chart.js';
+
+Chart.register(ChartJSTrendline);
+```
+
+### Legacy Projects
+Continue using CommonJS `require()`:
+
+```javascript
+const ChartJSTrendline = require('chartjs-plugin-trendline');
+const Chart = require('chart.js');
+
+Chart.register(ChartJSTrendline);
+```
+
+### Browser CDN
+Use the minified UMD build:
+
+```html
+<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
+
+```json
+{
+  "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](https://github.com/Makanz/chartjs-plugin-trendline/issues) on GitHub.

package/README.md

@@ -9,28 +9,45 @@ See the plugin in action with interactive examples for different chart types.
 
 ## Installation
 
-#### Load directly in the browser
+> **Note:** Version 3.2.0+ supports ES modules (ESM) for modern bundlers like Vite, SvelteKit, and Next.js. See [MIGRATION.md](./MIGRATION.md) for upgrade details.
 
-Load Chart.js first, then the plugin which will automatically register itself with Chart.js
+### Modern Bundlers (Vite, SvelteKit, Next.js, webpack 5+)
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+Install via npm:
+
+```bash
+npm i chart.js chartjs-plugin-trendline
 ```
 
-#### As a Chart.JS plugin
+Import and register with Chart.js:
 
-Install & import the plugin via npm:
+```js
+import { Chart } from 'chart.js';
+import ChartJSTrendline from 'chartjs-plugin-trendline';
+
+Chart.register(ChartJSTrendline);
+```
 
-`npm i chart.js chartjs-plugin-trendline`
+### Node.js (CommonJS)
 
 ```js
-import ChartJS from 'chart.js';
-import chartTrendline from 'chartjs-plugin-trendline';
+const { Chart } = require('chart.js');
+const ChartJSTrendline = require('chartjs-plugin-trendline');
 
-ChartJS.plugins.register(chartTrendline);
+Chart.register(ChartJSTrendline);
 ```
 
+### Browser (CDN)
+
+Load Chart.js first, then the plugin which will automatically register itself:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+```
+
+The plugin is now available globally as `ChartJSTrendline` and auto-registers with Chart.js.
+
 ## Configuration
 
 To configure the trendline plugin you simply add a new config options to your dataset in your chart config.

package/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
 };