[Map] Create Map component

.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
 
@@ -89,6 +89,12 @@ jobs:
                     dependency-version: 'highest'
                 component: ${{ fromJson(needs.tests-php-components.outputs.components )}}
                 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/.gitattributes

@@ -0,0 +1,8 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.symfony.bundle.yaml export-ignore
+/phpunit.xml.dist export-ignore
+/assets/src export-ignore
+/assets/test export-ignore
+/assets/vitest.config.js export-ignore
+/tests export-ignore

src/Map/.gitignore

@@ -0,0 +1,3 @@
+vendor
+composer.lock
+.phpunit.result.cache

src/Map/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "doc"

src/Map/CHANGELOG.md

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

src/Map/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024-present Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

src/Map/README.md

@@ -0,0 +1,16 @@
+# Symfony UX Map
+
+**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 Google Maps.
+
+**This repository is a READ-ONLY sub-tree split**. See
+https://github.com/symfony/ux to create issues or submit pull requests.
+
+## Resources
+
+-   [Documentation](https://symfony.com/bundles/ux-map/current/index.html)
+-   [Report issues](https://github.com/symfony/ux/issues) and
+    [send Pull Requests](https://github.com/symfony/ux/pulls)
+    in the [main Symfony UX repository](https://github.com/symfony/ux)

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

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus';
+export type Point = {
+    lat: number;
+    lng: number;
+};
+export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
+    center: Point;
+    zoom: number;
+    fitBoundsToMarkers: boolean;
+    markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    options: Options;
+};
+export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
+    position: Point;
+    title: string | null;
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    rawOptions?: MarkerOptions;
+};
+export type InfoWindowDefinition<InfoWindowOptions> = {
+    headerContent: string | null;
+    content: string | null;
+    position: Point;
+    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: Point;
+        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 };

src/Map/assets/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@symfony/ux-map",
+    "description": "Integrates interactive maps in your Symfony applications",
+    "license": "MIT",
+    "version": "1.0.0",
+    "type": "module",
+    "main": "dist/abstract_map_controller.js",
+    "types": "dist/abstract_map_controller.d.ts",
+    "symfony": {
+        "importmap": {
+            "@hotwired/stimulus": "^3.0.0",
+            "@symfony/ux-map/abstract-map-controller": "path:%PACKAGE%/dist/abstract_map_controller.js"
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    }
+}