[Map] Prefer abstract "dispatchEvent" instead

Author: Kocal

src/Map/assets/dist/abstract_map_controller.d.ts

@@ -35,6 +35,7 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     protected map: Map;
     protected markers: Array<Marker>;
     protected infoWindows: Array<InfoWindow>;
+    protected additionalEventPayload: Record<string, unknown>;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point;
@@ -52,6 +53,5 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         marker: Marker;
     }): InfoWindow;
     protected abstract doFitBoundsToMarkers(): void;
-    protected abstract augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown>;
-    private dispatchEvent;
+    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
 }

src/Map/assets/dist/abstract_map_controller.js

@@ -5,6 +5,7 @@ class default_1 extends Controller {
         super(...arguments);
         this.markers = [];
         this.infoWindows = [];
+        this.additionalEventPayload = {};
     }
     connect() {
         const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
@@ -34,12 +35,6 @@ class default_1 extends Controller {
         this.infoWindows.push(infoWindow);
         return infoWindow;
     }
-    dispatchEvent(name, payload = {}) {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: this.augmentEventPayload(payload),
-        });
-    }
 }
 default_1.values = {
     providerOptions: Object,

src/Map/assets/src/abstract_map_controller.ts

@@ -66,6 +66,8 @@ export default abstract class<
     protected markers: Array<Marker> = [];
     protected infoWindows: Array<InfoWindow> = [];
 
+    protected additionalEventPayload: Record<string, unknown> = {};
+
     connect() {
         const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
 
@@ -134,12 +136,5 @@ export default abstract class<
 
     protected abstract doFitBoundsToMarkers(): void;
 
-    protected abstract augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown>;
-
-    private dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: this.augmentEventPayload(payload),
-        });
-    }
+    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
 }

src/Map/assets/test/abstract_map_controller.test.ts

@@ -2,8 +2,16 @@ import { Application } from '@hotwired/stimulus';
 import { getByTestId, waitFor } from '@testing-library/dom';
 import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
 import AbstractMapController from '../src/abstract_map_controller.ts';
+import * as L from 'leaflet';
 
 class MyMapController extends AbstractMapController {
+    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
+        this.dispatch(name, {
+            prefix: 'ux:map',
+            detail: payload,
+        });
+    }
+
     doCreateMap({ center, zoom, options }) {
         return { map: 'map', center, zoom, options };
     }

src/Map/src/Bridge/Google/README.md

@@ -84,9 +84,6 @@ $map->options($googleOptions);
 
 Below are some common or advanced use cases when using a map.
 
-> **Note**:
-> As the UX Map component is new, there are not too many examples for the moment.
-
 ### Customize the marker
 
 A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created.
@@ -96,7 +93,7 @@ Assuming you have a map with a custom controller:
 {{ render_map(map, {'data-controller': 'my-map' }) }}
 ```
 
-You can create a controller to customize the marker before it is created:
+You can create a Stimulus controller to customize the markers before they are created:
 ```js
 // assets/controllers/my_map_controller.js
 import {Controller} from "@hotwired/stimulus";
@@ -128,7 +125,7 @@ export default class extends Controller
         // 2. To use a custom glyph for the marker
         const pinElement = new google.maps.marker.PinElement({
             // Note: instead of using an hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`. 
-            glyph: new URL(String('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg')), 
+            glyph: new URL('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg'), 
             glyphColor: "white",
         });
         definition.rawOptions = {

src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts

@@ -9,6 +9,7 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
     };
     providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
     connect(): Promise<void>;
+    protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ center, zoom, options, }: {
         center: Point;
         zoom: number;
@@ -22,6 +23,5 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
     private createTextOrElement;
     private closeInfoWindowsExcept;
     protected doFitBoundsToMarkers(): void;
-    protected augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown>;
 }
 export {};

src/Map/src/Bridge/Google/assets/dist/map_controller.js

@@ -22,6 +22,15 @@ class default_1 extends AbstractMapController {
         }
         super.connect();
     }
+    dispatchEvent(name, payload = {}) {
+        this.dispatch(name, {
+            prefix: 'ux:map',
+            detail: {
+                ...payload,
+                google: _google,
+            },
+        });
+    }
     doCreateMap({ center, zoom, options, }) {
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
@@ -104,10 +113,6 @@ class default_1 extends AbstractMapController {
         });
         this.map.fitBounds(bounds);
     }
-    augmentEventPayload(payload) {
-        payload.google = _google;
-        return payload;
-    }
 }
 default_1.values = {
     providerOptions: Object,

src/Map/src/Bridge/Google/assets/src/map_controller.ts

@@ -75,6 +75,16 @@ export default class extends AbstractMapController<
         super.connect();
     }
 
+    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
+        this.dispatch(name, {
+            prefix: 'ux:map',
+            detail: {
+                ...payload,
+                google: _google,
+            },
+        });
+    }
+
     protected doCreateMap({
         center,
         zoom,
@@ -197,10 +207,4 @@ export default class extends AbstractMapController<
 
         this.map.fitBounds(bounds);
     }
-
-    protected augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown> {
-        payload.google = _google;
-
-        return payload;
-    }
 }

src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php

@@ -38,7 +38,7 @@ public function __construct(
         private ?string $url = null,
         private ?string $version = null,
         /**
-         * @var array<'core' | 'maps' | 'places' | 'geocoding' | 'routes' | 'marker' | 'geometry' | 'elevation' | 'streetView' | 'journeySharing' | 'drawing' | 'visualization'>
+         * @var array<'core'|'maps'|'places'|'geocoding'|'routes'|'marker'|'geometry'|'elevation'|'streetView'|'journeySharing'|'drawing'|'visualization'>
          */
         private array $libraries = [],
     ) {

src/Map/src/Bridge/Leaflet/README.md

@@ -41,9 +41,6 @@ $map->options($leafletOptions);
 
 Below are some common or advanced use cases when using a map.
 
-> **Note**:
-> As the UX Map component is new, there are not too many examples for the moment.
-
 ### Customize the marker
 
 A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created.
@@ -53,7 +50,7 @@ Assuming you have a map with a custom controller:
 {{ render_map(map, {'data-controller': 'my-map' }) }}
 ```
 
-You can create a controller to customize the marker before it is created:
+You can create a Stimulus controller to customize the markers before they are created:
 ```js
 // assets/controllers/my_map_controller.js
 import {Controller} from "@hotwired/stimulus";

src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts

@@ -12,6 +12,7 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
 };
 export default class extends AbstractMapController<MapOptions, typeof L.Map, MarkerOptions, typeof L.Marker, typeof L.Popup, PopupOptions> {
     connect(): void;
+    protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ center, zoom, options }: {
         center: Point;
         zoom: number;
@@ -23,6 +24,5 @@ export default class extends AbstractMapController<MapOptions, typeof L.Map, Mar
         marker: L.Marker;
     }): L.Popup;
     protected doFitBoundsToMarkers(): void;
-    protected augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown>;
 }
 export {};

src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js

@@ -13,6 +13,15 @@ class map_controller extends AbstractMapController {
         });
         super.connect();
     }
+    dispatchEvent(name, payload = {}) {
+        this.dispatch(name, {
+            prefix: 'ux:map',
+            detail: {
+                ...payload,
+                leaflet: L,
+            },
+        });
+    }
     doCreateMap({ center, zoom, options }) {
         const map = L.map(this.element, {
             ...options,
@@ -54,10 +63,6 @@ class map_controller extends AbstractMapController {
             return [position.lat, position.lng];
         }));
     }
-    augmentEventPayload(payload) {
-        payload.L = L;
-        return payload;
-    }
 }
 
 export { map_controller as default };

src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts

@@ -24,9 +24,20 @@ export default class extends AbstractMapController<
             popupAnchor: [0, -41],
             className: '',
         });
+
         super.connect();
     }
 
+    protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
+        this.dispatch(name, {
+            prefix: 'ux:map',
+            detail: {
+                ...payload,
+                leaflet: L,
+            },
+        });
+    }
+
     protected doCreateMap({ center, zoom, options }: { center: Point; zoom: number; options: MapOptions }): L.Map {
         const map = L.map(this.element, {
             ...options,
@@ -88,10 +99,4 @@ export default class extends AbstractMapController<
             })
         );
     }
-
-    protected augmentEventPayload(payload: Record<string, unknown>): Record<string, unknown> {
-        payload.L = L;
-
-        return payload;
-    }
 }