[Map] Third iteration, introduce Bridges, simplify Map creation and customization, abstract rendering and Stimulus controller

Author: Kocal

.github/build-packages.php

@@ -9,7 +9,7 @@
 use Symfony\Component\Finder\Finder;
 
 $finder = (new Finder())
-    ->in(__DIR__.'/../src/*/')
+    ->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/'])
     ->depth(0)
     ->name('composer.json')
 ;
@@ -44,6 +44,18 @@
         $key = isset($packageData['require']['symfony/stimulus-bundle']) ? 'require' : 'require-dev';
         $packageData[$key]['symfony/stimulus-bundle'] = '@dev';
     }
+    
+    if (isset($packageData['require']['symfony/ux-map'])
+        || isset($packageData['require-dev']['symfony/ux-map'])
+    ) {
+        $repositories[] = [
+            'type' => 'path',
+            'url' => '../../../',
+        ];
+        $key = isset($packageData['require']['symfony/ux-map']) ? 'require' : 'require-dev';
+        $packageData[$key]['symfony/ux-map'] = '@dev';
+    }
+    
     if ($repositories) {
         $packageData['repositories'] = $repositories;
     }

.github/workflows/test.yaml

@@ -71,7 +71,7 @@ jobs:
 
             - id: components
               run: |
-                components=$(tree src -J -d -L 1 | jq -c '.[0].contents | map(.name)')
+                components=$(find src/ -mindepth 2 -type f -name composer.json -not -path "*/vendor/*" -printf '%h\n' | jq -R -s -c 'split("\n")[:-1] | map(. | sub("^src/";"")) | sort')
                 echo "$components"
                 echo "components=$components" >> $GITHUB_OUTPUT
 
@@ -91,6 +91,10 @@ jobs:
                 exclude:
                   - component: Map # does not support PHP 8.1
                     php-version: '8.1'
+                  - component: Map/src/Bridge/Google # does not support PHP 8.1
+                    php-version: '8.1'
+                  - component: Map/src/Bridge/Leaflet # does not support PHP 8.1
+                    php-version: '8.1'
                   - component: Swup  # has no tests
                   - component: Turbo # has its own workflow (test-turbo.yml)
                   - component: Typed  # has no tests

bin/build_javascript.js

@@ -21,6 +21,8 @@ const files = [
     // custom handling for StimulusBundle
     'src/StimulusBundle/assets/src/loader.ts',
     'src/StimulusBundle/assets/src/controllers.ts',
+    // custom handling for Bridge
+    ...glob.sync('src/*/src/Bridge/*/assets/src/*controller.ts'),
     ...glob.sync('src/*/assets/src/*controller.ts'),
 ];
 

biome.json

@@ -1,7 +1,18 @@
 {
     "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
     "files": {
-        "include": ["src/*/assets/src/**", "src/*/assets/test/**", "src/*/*.json", "src/*/*/md", "*.json", "*.md"],
+        "include": [
+            "*.json",
+            "*.md",
+            "src/*/*.json",
+            "src/*/*/md",
+            "src/*/assets/src/**",
+            "src/*/assets/test/**",
+            "src/*/src/Bridge/*.json",
+            "src/*/src/Bridge/*.md",
+            "src/*/src/Bridge/*/assets/src/**",
+            "src/*/src/Bridge/*/assets/test/**"
+        ],
         "ignore": ["**/composer.json", "**/vendor", "**/node_modules"]
     },
     "linter": {

package.json

@@ -1,6 +1,6 @@
 {
     "private": true,
-    "workspaces": ["src/*/assets"],
+    "workspaces": ["src/*/assets", "src/*/src/Bridge/*/assets"],
     "scripts": {
         "build": "node bin/build_javascript.js && node bin/build_styles.js",
         "test": "bin/run-vitest-all.sh",

rollup.config.js

@@ -46,11 +46,15 @@ const wildcardExternalsPlugin = (peerDependencies) => ({
 const moveTypescriptDeclarationsPlugin = (packagePath) => ({
     name: 'move-ts-declarations',
     writeBundle: async () => {
-        const files = glob.sync(path.join(packagePath, 'dist', '*', 'assets', 'src', '**/*.d.ts'));
+        const isBridge = packagePath.includes('src/Bridge');
+        const globPattern = isBridge
+            ? path.join(packagePath, 'dist', packagePath.replace(/^src\//, ''), '**/*.d.ts')
+            : path.join(packagePath, 'dist', '*', 'assets', 'src', '**/*.d.ts')
+        const files = glob.sync(globPattern);
         files.forEach((file) => {
-            // a bit odd, but remove first 7 directories, which will leave
+            // a bit odd, but remove first 7 or 13 directories, which will leave
             // only the relative path to the file
-            const relativePath = file.split('/').slice(7).join('/');
+            const relativePath = file.split('/').slice(isBridge ? 13 : 7).join('/');
 
             const targetFile = path.join(packagePath, 'dist', relativePath);
             if (!fs.existsSync(path.dirname(targetFile))) {

src/Map/CHANGELOG.md

@@ -1,5 +1,5 @@
 # CHANGELOG
 
-## 2.19.0
+## Unreleased
 
 -   Component added

src/Map/README.md

@@ -3,7 +3,7 @@
 **EXPERIMENTAL** This component is currently experimental and is
 likely to change, or even change drastically.
 
-Symfony UX Map integrates interactive Maps in Symfony applications, like Leaflet or GoogleMaps.
+Symfony UX Map integrates interactive Maps in Symfony applications, like Leaflet or Google Maps.
 
 **This repository is a READ-ONLY sub-tree split**. See
 https://github.com/symfony/ux to create issues or submit pull requests.

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

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus';
+export type LatLng = {
+    lat: number;
+    lng: number;
+};
+export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
+    center: LatLng;
+    zoom: number;
+    fitBoundsToMarkers: boolean;
+    markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    options: Options;
+};
+export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
+    position: LatLng;
+    title: string | null;
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    rawOptions?: MarkerOptions;
+};
+export type InfoWindowDefinition<InfoWindowOptions> = {
+    headerContent: string | null;
+    content: string | null;
+    position: LatLng;
+    opened: boolean;
+    autoClose: boolean;
+    rawOptions?: InfoWindowOptions;
+};
+export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow> extends Controller<HTMLElement> {
+    static values: {
+        providerOptions: ObjectConstructor;
+        view: ObjectConstructor;
+    };
+    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions>;
+    protected map: Map;
+    protected markers: Array<Marker>;
+    protected infoWindows: Array<InfoWindow>;
+    initialize(): void;
+    connect(): void;
+    protected abstract doCreateMap({ center, zoom, options, }: {
+        center: LatLng;
+        zoom: number;
+        options: MapOptions;
+    }): Map;
+    createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
+    protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
+    protected createInfoWindow({ definition, marker, }: {
+        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+        marker: Marker;
+    }): InfoWindow;
+    protected abstract doCreateInfoWindow({ definition, marker, }: {
+        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+        marker: Marker;
+    }): InfoWindow;
+    protected abstract doFitBoundsToMarkers(): void;
+    private dispatchEvent;
+}

src/Map/assets/dist/abstract_map_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus';
+
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.markers = [];
+        this.infoWindows = [];
+    }
+    initialize() { }
+    connect() {
+        const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
+        this.dispatchEvent('pre-connect', { options });
+        this.map = this.doCreateMap({ center, zoom, options });
+        markers.forEach((marker) => this.createMarker(marker));
+        if (fitBoundsToMarkers) {
+            this.doFitBoundsToMarkers();
+        }
+        this.dispatchEvent('connect', {
+            map: this.map,
+            markers: this.markers,
+            infoWindows: this.infoWindows,
+        });
+    }
+    createMarker(definition) {
+        this.dispatchEvent('marker:before-create', { definition });
+        const marker = this.doCreateMarker(definition);
+        this.dispatchEvent('marker:after-create', { marker });
+        this.markers.push(marker);
+        return marker;
+    }
+    createInfoWindow({ definition, marker, }) {
+        this.dispatchEvent('info-window:before-create', { definition, marker });
+        const infoWindow = this.doCreateInfoWindow({ definition, marker });
+        this.dispatchEvent('info-window:after-create', { infoWindow, marker });
+        this.infoWindows.push(infoWindow);
+        return infoWindow;
+    }
+    dispatchEvent(name, payload = {}) {
+        this.dispatch(name, { prefix: 'ux:map', detail: payload });
+    }
+}
+default_1.values = {
+    providerOptions: Object,
+    view: Object,
+};
+
+export { default_1 as default };