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

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;
 }

src/Dropzone/assets/dist/controller.js

@@ -5,7 +5,7 @@ class default_1 extends Controller {
         this.clear();
         this.previewClearButtonTarget.addEventListener('click', () => this.clear());
         this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
-        this._dispatchEvent('dropzone:connect');
+        this.dispatchEvent('connect');
     }
     clear() {
         this.inputTarget.value = '';
@@ -15,7 +15,7 @@ class default_1 extends Controller {
         this.previewImageTarget.style.display = 'none';
         this.previewImageTarget.style.backgroundImage = 'none';
         this.previewFilenameTarget.textContent = '';
-        this._dispatchEvent('dropzone:clear');
+        this.dispatchEvent('clear');
     }
     onInputChange(event) {
         const file = event.target.files[0];
@@ -30,7 +30,7 @@ class default_1 extends Controller {
         if (file.type && file.type.indexOf('image') !== -1) {
             this._populateImagePreview(file);
         }
-        this._dispatchEvent('dropzone:change', file);
+        this.dispatchEvent('change', file);
     }
     _populateImagePreview(file) {
         if (typeof FileReader === 'undefined') {
@@ -43,8 +43,8 @@ class default_1 extends Controller {
         });
         reader.readAsDataURL(file);
     }
-    _dispatchEvent(name, payload = {}) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    dispatchEvent(name, payload = {}) {
+        this.dispatch(name, { detail: payload, prefix: 'dropzone' });
     }
 }
 default_1.targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];

src/Dropzone/assets/src/controller.ts

@@ -31,7 +31,7 @@ export default class extends Controller {
         // Listen on input change and display preview
         this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
 
-        this._dispatchEvent('dropzone:connect');
+        this.dispatchEvent('connect');
     }
 
     clear() {
@@ -43,7 +43,7 @@ export default class extends Controller {
         this.previewImageTarget.style.backgroundImage = 'none';
         this.previewFilenameTarget.textContent = '';
 
-        this._dispatchEvent('dropzone:clear');
+        this.dispatchEvent('clear');
     }
 
     onInputChange(event: any) {
@@ -66,7 +66,7 @@ export default class extends Controller {
             this._populateImagePreview(file);
         }
 
-        this._dispatchEvent('dropzone:change', file);
+        this.dispatchEvent('change', file);
     }
 
     _populateImagePreview(file: Blob) {
@@ -85,7 +85,7 @@ export default class extends Controller {
         reader.readAsDataURL(file);
     }
 
-    _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: 'dropzone' });
     }
 }

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

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

src/LazyImage/assets/dist/controller.js

@@ -10,13 +10,13 @@ class default_1 extends Controller {
             if (srcsetString) {
                 element.srcset = srcsetString;
             }
-            this._dispatchEvent('lazy-image:ready', { image: hd });
+            this.dispatchEvent('ready', { image: hd });
         });
         hd.src = this.srcValue;
         if (srcsetString) {
             hd.srcset = srcsetString;
         }
-        this._dispatchEvent('lazy-image:connect', { image: hd });
+        this.dispatchEvent('connect', { image: hd });
     }
     _calculateSrcsetString() {
         if (!this.hasSrcsetValue) {
@@ -27,8 +27,8 @@ class default_1 extends Controller {
         });
         return sets.join(', ').trimEnd();
     }
-    _dispatchEvent(name, payload) {
-        this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'lazy-image' });
     }
 }
 default_1.values = {

src/LazyImage/assets/src/controller.ts

@@ -32,15 +32,15 @@ export default class extends Controller {
             if (srcsetString) {
                 element.srcset = srcsetString;
             }
-            this._dispatchEvent('lazy-image:ready', { image: hd });
+            this.dispatchEvent('ready', { image: hd });
         });
 
         hd.src = this.srcValue;
         if (srcsetString) {
             hd.srcset = srcsetString;
         }
 
-        this._dispatchEvent('lazy-image:connect', { image: hd });
+        this.dispatchEvent('connect', { image: hd });
     }
 
     _calculateSrcsetString(): string {
@@ -55,7 +55,7 @@ export default class extends Controller {
         return sets.join(', ').trimEnd();
     }
 
-    _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: 'lazy-image' });
     }
 }

src/LiveComponent/assets/dist/live_controller.d.ts

@@ -48,5 +48,5 @@ export default class extends Controller<HTMLElement> implements LiveController {
     private updateModelFromElementEvent;
     handleConnectedControllerEvent(event: LiveEvent): void;
     handleDisconnectedChildControllerEvent(event: LiveEvent): void;
-    _dispatchEvent(name: string, detail?: any, canBubble?: boolean, cancelable?: boolean): boolean;
+    private dispatchEvent;
 }

src/LiveComponent/assets/dist/live_controller.js

@@ -2238,15 +2238,15 @@ class default_1 extends Controller {
             this.component.element.addEventListener(event, callback);
         });
         ComponentRegistry$1.registerComponent(this.element, this.component);
-        this._dispatchEvent('live:connect');
+        this.dispatchEvent('connect');
     }
     disconnect() {
         this.component.disconnect();
         this.elementEventListeners.forEach(({ event, callback }) => {
             this.component.element.removeEventListener(event, callback);
         });
         ComponentRegistry$1.unregisterComponent(this.element);
-        this._dispatchEvent('live:disconnect');
+        this.dispatchEvent('disconnect');
     }
     update(event) {
         if (event.type === 'input' || event.type === 'change') {
@@ -2365,14 +2365,10 @@ class default_1 extends Controller {
         }
         this.component.removeChild(childController.component);
     }
-    _dispatchEvent(name, detail = {}, canBubble = true, cancelable = false) {
+    dispatchEvent(name, detail = {}, canBubble = true, cancelable = false) {
         detail.controller = this;
         detail.component = this.proxiedComponent;
-        return this.element.dispatchEvent(new CustomEvent(name, {
-            bubbles: canBubble,
-            cancelable,
-            detail,
-        }));
+        this.dispatch(name, { detail, prefix: 'live', cancelable, bubbles: canBubble });
     }
 }
 default_1.values = {

src/LiveComponent/assets/src/live_controller.ts

@@ -107,7 +107,7 @@ export default class extends Controller<HTMLElement> implements LiveController {
         });
 
         ComponentRegistry.registerComponent(this.element, this.component);
-        this._dispatchEvent('live:connect');
+        this.dispatchEvent('connect');
     }
 
     disconnect() {
@@ -118,7 +118,7 @@ export default class extends Controller<HTMLElement> implements LiveController {
         });
 
         ComponentRegistry.unregisterComponent(this.element);
-        this._dispatchEvent('live:disconnect');
+        this.dispatchEvent('disconnect');
     }
 
     /**
@@ -348,16 +348,10 @@ export default class extends Controller<HTMLElement> implements LiveController {
         this.component.removeChild(childController.component);
     }
 
-    _dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
+    private dispatchEvent(name: string, detail: any = {}, canBubble = true, cancelable = false) {
         detail.controller = this;
         detail.component = this.proxiedComponent;
 
-        return this.element.dispatchEvent(
-            new CustomEvent(name, {
-                bubbles: canBubble,
-                cancelable,
-                detail,
-            })
-        );
+        this.dispatch(name, { detail, prefix: 'live', cancelable, bubbles: canBubble });
     }
 }

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

@@ -9,5 +9,5 @@ export default class extends Controller {
     connect(): void;
     disconnect(): void;
     _notify(content: string | undefined): void;
-    _dispatchEvent(name: string, payload: any): void;
+    private dispatchEvent;
 }