Skip to content

Commit 48c5fa1

Browse files
KocalKocal
committed
bug #2199 [Map] Fix Google/Leaflet bridges when using Webpack Encore (Kocal)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Map] Fix Google/Leaflet bridges when using Webpack Encore | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #2105 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> This PR fixes #2105, and ensures Leaflet and GoogleMaps bridges are working fine with Webpack Encore. To be sure: 1. I've created a new Symfony app (no `--webapp`), 2. Installed Encore, Stimulus, and Map 3. Added `.addAliases({ 'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css' })` and `.enableStimulusBridge('./assets/controllers.json')` in `webpack.config.js` 4. Created the Map (`new Map()`) and rendered it (`ux_map(map, { style: 'height: ...' })`) I am able to display a Leaflet map: <img width="1568" alt="image" src="https://github.com/user-attachments/assets/0a44eb8e-8346-452a-9598-2774af17f0ad"> And a GoogleMap maps: <img width="1537" alt="image" src="https://github.com/user-attachments/assets/2fae715e-fa2d-41c3-a566-886a340f9c1d"> --- The Map rendered on ux.symfony.com is also working (after updating the `importmap.php` as documented): <img width="1543" alt="image" src="https://github.com/user-attachments/assets/c869cad6-e48b-4c24-8ea3-490e7109a05d"> Commits ------- b3283f4 [Site] Adjust importmap.php due to last changes on Map 0d1bc8b [Map] Fix Google/Leaflet bridges when using Webpack Encore
2 parents 365dd97 + b3283f4 commit 48c5fa1

File tree

16 files changed

+142
-22
lines changed

16 files changed

+142
-22
lines changed

‎src/Map/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
- Add `ux_map` Twig function (replaces `render_map` with a more flexible
88
interface)
99
- Add `<twig:ux:map />` Twig component
10+
- The importmap entry `@symfony/ux-map/abstract-map-controller` can be removed
11+
from your importmap, it is no longer needed.
1012

1113
## 2.19
1214

‎src/Map/assets/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
"types": "dist/abstract_map_controller.d.ts",
99
"symfony": {
1010
"importmap": {
11-
"@hotwired/stimulus": "^3.0.0",
12-
"@symfony/ux-map/abstract-map-controller": "path:%PACKAGE%/dist/abstract_map_controller.js"
11+
"@hotwired/stimulus": "^3.0.0"
1312
}
1413
},
1514
"peerDependencies": {

‎src/Map/src/Bridge/Google/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# CHANGELOG
22

3+
## 2.20
4+
5+
### BC Breaks
6+
7+
- Renamed importmap entry `@symfony/ux-google-map/map-controller` to `@symfony/ux-google-map`,
8+
you will need to update your importmap.
9+
310
## 2.19
411

512
- Bridge added

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
2-
import type { Point, MarkerDefinition } from '@symfony/ux-map/abstract-map-controller';
1+
import AbstractMapController from '@symfony/ux-map';
2+
import type { Point, MarkerDefinition } from '@symfony/ux-map';
33
import type { LoaderOptions } from '@googlemaps/js-api-loader';
44
type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
55
export default class extends AbstractMapController<MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindow> {

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

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,48 @@
1-
import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
1+
import { Controller } from '@hotwired/stimulus';
22
import { Loader } from '@googlemaps/js-api-loader';
33

4+
let default_1$1 = class default_1 extends Controller {
5+
constructor() {
6+
super(...arguments);
7+
this.markers = [];
8+
this.infoWindows = [];
9+
}
10+
connect() {
11+
const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
12+
this.dispatchEvent('pre-connect', { options });
13+
this.map = this.doCreateMap({ center, zoom, options });
14+
markers.forEach((marker) => this.createMarker(marker));
15+
if (fitBoundsToMarkers) {
16+
this.doFitBoundsToMarkers();
17+
}
18+
this.dispatchEvent('connect', {
19+
map: this.map,
20+
markers: this.markers,
21+
infoWindows: this.infoWindows,
22+
});
23+
}
24+
createMarker(definition) {
25+
this.dispatchEvent('marker:before-create', { definition });
26+
const marker = this.doCreateMarker(definition);
27+
this.dispatchEvent('marker:after-create', { marker });
28+
this.markers.push(marker);
29+
return marker;
30+
}
31+
createInfoWindow({ definition, marker, }) {
32+
this.dispatchEvent('info-window:before-create', { definition, marker });
33+
const infoWindow = this.doCreateInfoWindow({ definition, marker });
34+
this.dispatchEvent('info-window:after-create', { infoWindow, marker });
35+
this.infoWindows.push(infoWindow);
36+
return infoWindow;
37+
}
38+
};
39+
default_1$1.values = {
40+
providerOptions: Object,
41+
view: Object,
42+
};
43+
444
let _google;
5-
class default_1 extends AbstractMapController {
45+
class default_1 extends default_1$1 {
646
async connect() {
747
if (!_google) {
848
_google = { maps: {} };

‎src/Map/src/Bridge/Google/assets/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"importmap": {
1919
"@hotwired/stimulus": "^3.0.0",
2020
"@googlemaps/js-api-loader": "^1.16.6",
21-
"@symfony/ux-google-map/map-controller": "path:%PACKAGE%/dist/map_controller.js"
21+
"@symfony/ux-google-map": "path:%PACKAGE%/dist/map_controller.js"
2222
}
2323
},
2424
"peerDependencies": {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
* file that was distributed with this source code.
88
*/
99

10-
import AbstractMapController from '@symfony/ux-map/abstract-map-controller';
11-
import type { Point, MarkerDefinition } from '@symfony/ux-map/abstract-map-controller';
10+
import AbstractMapController from '@symfony/ux-map';
11+
import type { Point, MarkerDefinition } from '@symfony/ux-map';
1212
import type { LoaderOptions } from '@googlemaps/js-api-loader';
1313
import { Loader } from '@googlemaps/js-api-loader';
1414

‎src/Map/src/Bridge/Google/assets/vitest.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default mergeConfig(
66
defineConfig({
77
resolve: {
88
alias: {
9-
'@symfony/ux-map/abstract-map-controller': __dirname + '/../../../../assets/src/abstract_map_controller.ts',
9+
'@symfony/ux-map': __dirname + '/../../../../assets/src/abstract_map_controller.ts',
1010
},
1111
},
1212
define: {

‎src/Map/src/Bridge/Leaflet/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# CHANGELOG
22

3+
## 2.20
4+
5+
### BC Breaks
6+
7+
- Renamed importmap entry `@symfony/ux-leaflet-map/map-controller` to `@symfony/ux-leaflet-map`,
8+
you will need to update your importmap.
9+
310
## 2.19
411

512
- Bridge added

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,34 @@ export default class extends Controller
9090
}
9191
```
9292

93+
## Known issues
94+
95+
### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore
96+
97+
When using Webpack Encore with the Leaflet bridge, you may encounter the following error:
98+
```
99+
Module build failed: Module not found:
100+
"./node_modules/.pnpm/file+vendor+symfony+ux-leaflet-map+assets_@[email protected][email protected]/node_modules/@symfony/ux-leaflet-map/dist/map_controller.js" contains a reference to the file "leaflet/dist/leaflet.min.css".
101+
This file can not be found, please check it for typos or update it if the file got moved.
102+
103+
Entrypoint app = runtime.67292354.js 488.0777101a.js app.b75294ae.css app.0975a86d.js
104+
webpack compiled with 1 error
105+
 ELIFECYCLE  Command failed with exit code 1.
106+
```
107+
108+
That's because the Leaflet's Stimulus controller references the `leaflet/dist/leaflet.min.css` file,
109+
which exists on [jsDelivr](https://www.jsdelivr.com/package/npm/leaflet) (used by the Symfony AssetMapper component),
110+
but does not in the [`leaflet` npm package](https://www.npmjs.com/package/leaflet).
111+
The correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it because it would break compatibility
112+
with the Symfony AssetMapper component.
113+
114+
As a workaround, you can configure Webpack Encore to add an alias for the `leaflet/dist/leaflet.min.css` file:
115+
```js
116+
Encore.addAliases({
117+
'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
118+
})
119+
```
120+
93121
## Resources
94122

95123
- [Documentation](https://symfony.com/bundles/ux-map/current/index.html)

0 commit comments

Comments
 (0)