WIP

Author: Kocal

.github/workflows/test.yaml

@@ -71,7 +71,10 @@ jobs:
 
             - id: components
               run: |
-                components=$(tree src -J -d -L 1 | jq -c '.[0].contents | map(.name)')
+                components=()
+                while IFS= read -r line; do
+                components+=("$line")
+                done <<< $(find src -type f -name composer.json \( -path 'src/*/composer.json' -o -path 'src/*/src/Bridge/*/composer.json' \) ! -path '*/vendor/*' | sed -e 's/^src\///' -e 's/\/composer.json$//' | sort)
                 echo "$components"
                 echo "components=$components" >> $GITHUB_OUTPUT
 
@@ -91,6 +94,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 Map
+    ...glob.sync('src/Map/src/Bridge/*/assets/src/*controller.ts'),
     ...glob.sync('src/*/assets/src/*controller.ts'),
 ];
 

package.json

@@ -1,13 +1,14 @@
 {
     "private": true,
     "workspaces": [
-        "src/*/assets"
+        "src/*/assets",
+        "src/Map/src/Bridge/*/assets"
     ],
     "scripts": {
         "build": "node bin/build_javascript.js && node bin/build_styles.js",
         "test": "bin/run-vitest-all.sh",
         "lint": "yarn workspaces run eslint src test",
-        "format": "prettier src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md} --write",
+        "format": "prettier src/*/assets/src/*.ts src/*/assets/test/*.js src/*/src/Bridge/*/assets/src/*.ts src/*/src/Bridge/*/assets/test/*.ts {,src/*/}*.{json,md} --write",
         "check-lint": "yarn lint --no-fix",
         "check-format": "yarn format --no-write --check"
     },

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/.gitignore

@@ -1,3 +1,4 @@
 vendor
 composer.lock
 .phpunit.result.cache
+assets/node_modules

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,43 @@
+import { Controller } from '@hotwired/stimulus';
+
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.markers = [];
+        this.infoWindows = [];
+    }
+    initialize() { }
+    connect() {
+        this.dispatchEvent('pre-connect', {});
+        const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
+        this.map = this.doCreateMap({ center, zoom, options });
+        markers.forEach((marker) => this.createMarker(marker));
+        if (fitBoundsToMarkers) {
+            this.doFitBoundsToMarkers();
+        }
+        this.dispatchEvent('connect');
+    }
+    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 };