Skip to content

Commit cd06696

Browse files
ildyriaildyria
authored
Fix vite 8 building a broken frontend (#4242)
1 parent 3ca189f commit cd06696

File tree

7 files changed

+664
-765
lines changed

7 files changed

+664
-765
lines changed

‎package-lock.json‎

Lines changed: 490 additions & 753 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
},
4242
"dependencies": {
4343
"@fortawesome/fontawesome-free": "^7.2.0",
44-
"@lychee-org/leaflet.photo": "^1.0.0",
4544
"@mollie/api-client": "^4.4.0",
4645
"@paypal/paypal-js": "^9.4.1",
4746
"@primeuix/themes": "^2.0.3",

‎resources/js/composables/photo.ts‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import L from "leaflet";
3+
4+
const PhotosLayer = L.FeatureGroup.extend({
5+
options: {
6+
icon: {
7+
iconSize: [40, 40],
8+
},
9+
},
10+
11+
initialize: function (photos: any, options: any) {
12+
L.setOptions(this, options);
13+
// @ts-expect-error initialize does exists
14+
L.FeatureGroup.prototype.initialize.call(this, photos);
15+
},
16+
17+
addLayers: function (photos: any) {
18+
if (photos) {
19+
for (let i = 0, len = photos.length; i < len; i++) {
20+
this.addLayer(photos[i]);
21+
}
22+
}
23+
return this;
24+
},
25+
26+
addLayer: function (photo: any) {
27+
L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
28+
},
29+
30+
createMarker: function (photo: any) {
31+
const marker: L.Marker & { photo?: any } = L.marker(photo, {
32+
icon: L.divIcon(
33+
L.extend(
34+
{
35+
html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>​',
36+
className: "leaflet-marker-photo",
37+
},
38+
photo,
39+
this.options.icon,
40+
),
41+
),
42+
title: photo.caption || "",
43+
});
44+
marker.photo = photo;
45+
return marker;
46+
},
47+
});
48+
49+
const photosLayerFunc = function (photos: any, options: any) {
50+
// @ts-expect-error we are expecting 2 arguments
51+
return new PhotosLayer(photos, options);
52+
};
53+
54+
const Cluster = L.MarkerClusterGroup.extend({
55+
options: {
56+
featureGroup: photosLayerFunc,
57+
maxClusterRadius: 100,
58+
showCoverageOnHover: false,
59+
iconCreateFunction: function (cluster: any) {
60+
return new L.DivIcon(
61+
L.extend(
62+
{
63+
className: "leaflet-marker-photo",
64+
html:
65+
'<div style="background-image: url(' +
66+
cluster.getAllChildMarkers()[0].photo.thumbnail +
67+
');"></div>​<b>' +
68+
cluster.getChildCount() +
69+
"</b>",
70+
},
71+
this.icon,
72+
),
73+
);
74+
},
75+
icon: {
76+
iconSize: new L.Point(40, 40),
77+
},
78+
},
79+
80+
initialize: function (options: any) {
81+
options = L.Util.setOptions(this, options);
82+
// @ts-expect-error initialize does exists
83+
L.MarkerClusterGroup.prototype.initialize.call(this);
84+
this._photos = options.featureGroup(null, options);
85+
},
86+
87+
add: function (photos: any) {
88+
this.addLayer(this._photos.addLayers(photos));
89+
return this;
90+
},
91+
92+
clear: function () {
93+
this._photos.clearLayers();
94+
this.clearLayers();
95+
},
96+
});
97+
98+
const clusterFunc = function (options: any) {
99+
// @ts-expect-error we do expect an argument
100+
return new Cluster(options);
101+
};
102+
103+
export { photosLayerFunc, clusterFunc };

‎resources/js/services/sidebar-map.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import L from "leaflet";
22
import "leaflet-rotatedmarker/leaflet.rotatedMarker.js";
33
import "leaflet.markercluster/dist/leaflet.markercluster.js";
4-
import "@lychee-org/leaflet.photo/Leaflet.Photo.js";
54
import "leaflet/dist/leaflet.css";
6-
import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
75
import { ref } from "vue";
86
import AlbumService from "./album-service";
97
import Constants from "./constants";

‎resources/js/views/gallery-panels/Map.vue‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ import { useRouter } from "vue-router";
2929
import L, { LatLngBoundsLiteral } from "leaflet";
3030
import "leaflet-rotatedmarker/leaflet.rotatedMarker.js";
3131
import "leaflet.markercluster/dist/leaflet.markercluster.js";
32-
import "@lychee-org/leaflet.photo/Leaflet.Photo.js";
3332
import "leaflet/dist/leaflet.css";
34-
import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
3533
import "leaflet-gpx/gpx.js";
3634
import { useToast } from "primevue/usetoast";
3735
import Toolbar from "primevue/toolbar";
@@ -41,6 +39,7 @@ import { useTogglablesStateStore } from "@/stores/ModalsState";
4139
import { onMounted } from "vue";
4240
import { useLeftMenuStateStore } from "@/stores/LeftMenuState";
4341
import GoBack from "@/components/headers/GoBack.vue";
42+
import { clusterFunc } from "@/composables/photo";
4443
4544
type MapPhotoEntry = {
4645
lat?: number | null;
@@ -130,7 +129,7 @@ function fetchData() {
130129
function open() {
131130
// Define how the photos on the map should look
132131
// @ts-expect-error Leaflet.Photo is not typed
133-
photoLayer.value = L.photo.cluster().on("click", function (e: MapClickEvent) {
132+
photoLayer.value = clusterFunc().on("click", function (e: MapClickEvent) {
134133
const photo: MapPhotoEntry = {
135134
photoID: e.layer.photo.photoID,
136135
albumID: e.layer.photo.albumID,
@@ -295,3 +294,32 @@ onMounted(() => {
295294
loadMapProvider();
296295
});
297296
</script>
297+
<style lang="css">
298+
.leaflet-marker-photo {
299+
border: 2px solid #fff;
300+
box-shadow: 3px 3px 10px #888;
301+
}
302+
303+
.leaflet-marker-photo div {
304+
width: 100%;
305+
height: 100%;
306+
background-size: cover;
307+
background-position: center center;
308+
background-repeat: no-repeat;
309+
}
310+
311+
.leaflet-marker-photo b {
312+
position: absolute;
313+
top: -7px;
314+
right: -11px;
315+
color: #555;
316+
background-color: #fff;
317+
border-radius: 8px;
318+
height: 12px;
319+
min-width: 12px;
320+
line-height: 12px;
321+
text-align: center;
322+
padding: 3px;
323+
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
324+
}
325+
</style>

‎resources/sass/app.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@import "primeicons/primeicons.css";
44
@import "leaflet/dist/leaflet.css";
55
@import "leaflet.markercluster/dist/MarkerCluster.css";
6-
@import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
76

87
@import "tailwindcss";
98
@plugin "@tailwindcss/typography";

‎vite.config.ts‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,28 @@ import laravel from "laravel-vite-plugin";
44
import vue from "@vitejs/plugin-vue";
55
import i18n from "laravel-vue-i18n/vite";
66
import tailwindcss from "@tailwindcss/vite";
7+
import type { Plugin } from 'vite';
8+
9+
10+
function leafletGlobalPlugin(): Plugin {
11+
const LEAFLET_PLUGINS = [
12+
'leaflet-gpx',
13+
'leaflet-rotatedmarker',
14+
'leaflet.markercluster',
15+
];
16+
return {
17+
name: 'vite-plugin-leaflet-global',
18+
transform(code, id) {
19+
if (
20+
LEAFLET_PLUGINS.some((p) => id.includes(p)) &&
21+
!id.endsWith('.css') &&
22+
!id.includes('?vue&type=style')
23+
) {
24+
return { code: `import L from 'leaflet';\n${code}`, map: null };
25+
}
26+
},
27+
};
28+
}
729

830
const laravelPlugin = laravel({
931
input: ["resources/sass/app.css", "resources/js/app.ts"],
@@ -59,6 +81,7 @@ const localDevelopMiddleware: PluginOption = {
5981
const baseConfig = {
6082
base: "./",
6183
plugins: [
84+
leafletGlobalPlugin(),
6285
tailwindcss(),
6386
vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false } } }),
6487
i18n(),
@@ -89,13 +112,25 @@ const baseConfig = {
89112
build: {
90113
rollupOptions: {
91114
output: {
92-
manualChunks(id) {
93-
if (id.includes("node_modules")) {
94-
return id.toString().split("node_modules/")[1].split("/")[0].toString();
95-
}
115+
codeSplitting: {
116+
groups: [
117+
{
118+
test: /primevue/,
119+
name: 'primevue',
120+
},
121+
],
96122
},
97123
},
98-
},
124+
}
125+
// rollupOptions: {
126+
// output: {
127+
// // manualChunks(id) {
128+
// // if (id.includes("node_modules")) {
129+
// // return id.toString().split("node_modules/")[1].split("/")[0].toString();
130+
// // }
131+
// // },
132+
// },
133+
// },
99134
},
100135
} as UserConfig;
101136

0 commit comments

Comments
 (0)