Adding support for Chartjs 3

rollup.config.js

@@ -4,6 +4,39 @@ import glob from 'glob';
 import path from 'path';
 import pkgUp from 'pkg-up';
 
+/**
+ * Guarantees that any files imported from a peer dependency are treated as an external.
+ *
+ * For example, if we import `chart.js/auto`, that would not normally
+ * match the "chart.js" we pass to the "externals" config. This plugin
+ * catches that case and adds it as an external.
+ *
+ * Inspired by https://github.com/oat-sa/rollup-plugin-wildcard-external
+ */
+const wildcardExternalsPlugin = (peerDependencies) => ({
+    name: 'wildcard-externals',
+    resolveId(source, importer) {
+        if (importer) {
+            let matchesExternal = false;
+            peerDependencies.forEach((peerDependency) => {
+                if (source.includes(`/${peerDependency}/`)) {
+                    matchesExternal = true;
+                }
+            });
+
+            if (matchesExternal) {
+                return {
+                    id: source,
+                    external: true,
+                    moduleSideEffects: true
+                };
+            }
+        }
+
+        return null; // other ids should be handled as usually
+    }
+});
+
 const files = glob.sync("src/**/assets/src/*controller.ts");
 const packages = files.map((file) => {
     const absolutePath = path.join(__dirname, file);
@@ -23,6 +56,7 @@ const packages = files.map((file) => {
         plugins: [
             resolve(),
             typescript(),
+            wildcardExternalsPlugin(peerDependencies)
         ],
     };
 });

src/Chartjs/Resources/assets/dist/controller.js

@@ -1,16 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
-import { Chart } from 'chart.js';
+import Chart from 'chart.js/auto';
 
-class controller extends Controller {
+class default_1 extends Controller {
     connect() {
         if (!(this.element instanceof HTMLCanvasElement)) {
             throw new Error('Invalid element');
         }
-        const viewData = this.element.getAttribute('data-view');
-        if (!viewData) {
-            throw new Error('Missing data-view attribute.');
-        }
-        const payload = JSON.parse(viewData);
+        const payload = this.viewValue;
         if (Array.isArray(payload.options) && 0 === payload.options.length) {
             payload.options = {};
         }
@@ -28,5 +24,8 @@ class controller extends Controller {
         this.element.dispatchEvent(userEvent);
     }
 }
+default_1.values = {
+    view: Object,
+};
 
-export { controller as default };
+export { default_1 as default };

src/Chartjs/Resources/assets/package.json

@@ -15,12 +15,13 @@
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0",
-        "chart.js": "^2.9.4"
+        "chart.js": "^3.4.1"
     },
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",
         "@types/chart.js": "^2.9.34",
-        "chart.js": "^2.9.4",
-        "jest-canvas-mock": "^2.3.0"
+        "chart.js": "^3.4.1",
+        "jest-canvas-mock": "^2.3.0",
+        "resize-observer-polyfill": "^1.5.1"
     }
 }

src/Chartjs/Resources/assets/src/controller.ts

@@ -10,7 +10,7 @@
 'use strict';
 
 import { Controller } from '@hotwired/stimulus';
-import { Chart } from 'chart.js';
+import Chart from 'chart.js/auto';
 
 export default class extends Controller {
     static values = {

src/Chartjs/Resources/assets/test/controller.test.ts

@@ -32,17 +32,20 @@ const startStimulus = () => {
     const application = Application.start();
     application.register('check', CheckController);
     application.register('chartjs', ChartjsController);
+
+    return application;
 };
 
 describe('ChartjsController', () => {
-    let container;
+    let application;
 
     afterEach(() => {
         clearDOM();
+        application.stop();
     });
 
     it('connect without options', async () => {
-        container = mountDOM(`
+        const container = mountDOM(`
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
@@ -53,18 +56,19 @@ describe('ChartjsController', () => {
         expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
-        startStimulus();
+        application = startStimulus();
+
         await waitFor(() => {
             expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
             expect(getByTestId(container, 'canvas')).toHaveClass('connected');
         });
 
         const chart = getByTestId(container, 'canvas').chart;
-        expect(chart.options.showLines).toBe(true);
+        expect(chart.options.showLines).toBeUndefined();
     });
 
     it('connect with options', async () => {
-        container = mountDOM(`
+        const container = mountDOM(`
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
@@ -75,7 +79,7 @@ describe('ChartjsController', () => {
         expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
-        startStimulus();
+        application = startStimulus();
         await waitFor(() => {
             expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
             expect(getByTestId(container, 'canvas')).toHaveClass('connected');

src/Chartjs/Resources/assets/test/setup.js

@@ -10,3 +10,5 @@
 'use strict';
 
 import 'jest-canvas-mock';
+// eslint-disable-next-line
+global.ResizeObserver = require('resize-observer-polyfill');