feature #602 Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | Fix #30
| License       | MIT

Long-overdue fix for #30. This is a small behavior change, but I consider it a bug fix. The only way that you could be affected by this change in practice is if you have one of the UX components listed *inside* of itself - e.g. a chart inside a chart, so now the existing listener on the outer chart is fired twice. But I don't think that makes any practical sense for any of these components.

Cheers!

Commits
-------

f122dcc Making all events bubble - affects Chartjs, Cropperjs, Dropzone, LazyImage, Swup

Author: weaverryan

src/Autocomplete/assets/dist/controller.d.ts

@@ -28,5 +28,6 @@ export default class extends Controller {
     disconnect(): void;
     get selectElement(): HTMLSelectElement | null;
     get formElement(): HTMLInputElement | HTMLSelectElement;
+    private dispatchEvent;
     get preload(): string | boolean;
 }

src/Autocomplete/assets/dist/controller.js

@@ -22,7 +22,7 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 }
 
-var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect, _default_1_dispatchEvent;
+var _default_1_instances, _default_1_getCommonConfig, _default_1_createAutocomplete, _default_1_createAutocompleteWithHtmlContents, _default_1_createAutocompleteWithRemoteData, _default_1_stripTags, _default_1_mergeObjects, _default_1_createTomSelect;
 class default_1 extends Controller {
     constructor() {
         super(...arguments);
@@ -64,6 +64,9 @@ class default_1 extends Controller {
         }
         return this.element;
     }
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'autocomplete' });
+    }
     get preload() {
         if (!this.hasPreloadValue) {
             return 'focus';
@@ -180,12 +183,10 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
 }, _default_1_mergeObjects = function _default_1_mergeObjects(object1, object2) {
     return Object.assign(Object.assign({}, object1), object2);
 }, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
-    __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:pre-connect', { options });
+    this.dispatchEvent('pre-connect', { options });
     const tomSelect = new TomSelect(this.formElement, options);
-    __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_dispatchEvent).call(this, 'autocomplete:connect', { tomSelect, options });
+    this.dispatchEvent('connect', { tomSelect, options });
     return tomSelect;
-}, _default_1_dispatchEvent = function _default_1_dispatchEvent(name, payload) {
-    this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
 };
 default_1.values = {
     url: String,

src/Autocomplete/assets/src/controller.ts

@@ -213,15 +213,15 @@ export default class extends Controller {
     }
 
     #createTomSelect(options: RecursivePartial<TomSettings>): TomSelect {
-        this.#dispatchEvent('autocomplete:pre-connect', { options });
+        this.dispatchEvent('pre-connect', { options });
         const tomSelect = new TomSelect(this.formElement, options);
-        this.#dispatchEvent('autocomplete:connect', { tomSelect, options });
+        this.dispatchEvent('connect', { tomSelect, options });
 
         return tomSelect;
     }
 
-    #dispatchEvent(name: string, payload: any): void {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
+    private dispatchEvent(name: string, payload: any): void {
+        this.dispatch(name, { detail: payload, prefix: 'autocomplete' });
     }
 
     get preload() {

src/Chartjs/assets/dist/controller.d.ts

@@ -5,5 +5,5 @@ export default class extends Controller {
         view: ObjectConstructor;
     };
     connect(): void;
-    _dispatchEvent(name: string, payload: any): void;
+    private dispatchEvent;
 }

src/Chartjs/assets/dist/controller.js

@@ -10,16 +10,16 @@ class default_1 extends Controller {
         if (Array.isArray(payload.options) && 0 === payload.options.length) {
             payload.options = {};
         }
-        this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
+        this.dispatchEvent('pre-connect', { options: payload.options });
         const canvasContext = this.element.getContext('2d');
         if (!canvasContext) {
             throw new Error('Could not getContext() from Element');
         }
         const chart = new Chart(canvasContext, payload);
-        this._dispatchEvent('chartjs:connect', { chart });
+        this.dispatchEvent('connect', { chart });
     }
-    _dispatchEvent(name, payload) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'chartjs' });
     }
 }
 default_1.values = {

src/Chartjs/assets/src/controller.ts

@@ -29,18 +29,18 @@ export default class extends Controller {
             payload.options = {};
         }
 
-        this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
+        this.dispatchEvent('pre-connect', { options: payload.options });
 
         const canvasContext = this.element.getContext('2d');
         if (!canvasContext) {
             throw new Error('Could not getContext() from Element');
         }
         const chart = new Chart(canvasContext, payload);
 
-        this._dispatchEvent('chartjs:connect', { chart });
+        this.dispatchEvent('connect', { chart });
     }
 
-    _dispatchEvent(name: string, payload: any) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    private dispatchEvent(name: string, payload: any) {
+        this.dispatch(name, { detail: payload, prefix: 'chartjs' });
     }
 }

src/Cropperjs/assets/dist/controller.d.ts

@@ -7,5 +7,5 @@ export default class CropperController extends Controller {
         options: ObjectConstructor;
     };
     connect(): void;
-    _dispatchEvent(name: string, payload: any): void;
+    private dispatchEvent;
 }

src/Cropperjs/assets/dist/controller.js

@@ -12,15 +12,15 @@ class CropperController extends Controller {
         }
         parent.appendChild(img);
         const options = this.optionsValue;
-        this._dispatchEvent('cropperjs:pre-connect', { options, img });
+        this.dispatchEvent('pre-connect', { options, img });
         const cropper = new Cropper(img, options);
         img.addEventListener('crop', (event) => {
             this.element.value = JSON.stringify(event.detail);
         });
-        this._dispatchEvent('cropperjs:connect', { cropper, options, img });
+        this.dispatchEvent('connect', { cropper, options, img });
     }
-    _dispatchEvent(name, payload) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'cropperjs' });
     }
 }
 CropperController.values = {

src/Cropperjs/assets/src/controller.ts

@@ -36,7 +36,7 @@ export default class CropperController extends Controller {
         parent.appendChild(img);
 
         const options = this.optionsValue;
-        this._dispatchEvent('cropperjs:pre-connect', { options, img });
+        this.dispatchEvent('pre-connect', { options, img });
 
         // Build the cropper
         const cropper = new Cropper(img, options);
@@ -45,10 +45,10 @@ export default class CropperController extends Controller {
             (this.element as HTMLInputElement).value = JSON.stringify((event as CropEvent).detail);
         });
 
-        this._dispatchEvent('cropperjs:connect', { cropper, options, img });
+        this.dispatchEvent('connect', { cropper, options, img });
     }
 
-    _dispatchEvent(name: string, payload: any) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    private dispatchEvent(name: string, payload: any) {
+        this.dispatch(name, { detail: payload, prefix: 'cropperjs' });
     }
 }

src/Dropzone/assets/dist/controller.d.ts

@@ -11,5 +11,5 @@ export default class extends Controller {
     clear(): void;
     onInputChange(event: any): void;
     _populateImagePreview(file: Blob): void;
-    _dispatchEvent(name: string, payload?: any): void;
+    private dispatchEvent;
 }