fixes layer and source deconstruction

dev/serve.vue

@@ -28,7 +28,7 @@
 
 				<mgl-geo-json-source source-id="geojson" :data="geoJsonSource.data">
 					<mgl-line-layer
-						v-if="geoJsonSource.show"
+						v-if="geoJsonSource.show.value"
 						layer-id="geojson"
 						:layout="geoJsonSource.layout"
 						:paint="geoJsonSource.paint"
@@ -113,7 +113,7 @@
 				buttonIcon       : mdiCursorDefaultClick,
 				markerCoordinates: [ 13.377507, 52.516267 ],
 				geoJsonSource    : {
-					show  : true,
+					show  : ref(true),
 					data  : {
 						type    : 'FeatureCollection',
 						features: [
@@ -171,7 +171,7 @@
 		},
 		mounted() {
 			setTimeout(() => (this.markerCoordinates = [ 13.377507, 42.516267 ]), 5000);
-			// setInterval(() => (this.geoJsonSource.show = !this.geoJsonSource.show), 1000);
+			setInterval(() => (this.geoJsonSource.show.value = !this.geoJsonSource.show.value), 1000);
 		}
 	});
 </script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.21",
+	"version": "1.0.0-beta.22",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",

src/components/layers/background.layer.ts

@@ -1,6 +1,6 @@
 import { BackgroundLayer, BackgroundLayout, BackgroundPaint } from 'maplibre-gl';
 import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, PropType, warn, watch } from 'vue';
+import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
@@ -32,12 +32,16 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
+		function removeLayer() {
 			if (isLoaded.value) {
 				map.value.removeLayer(props.layerId);
 			}
-		});
+		}
 
+		registry.registerUnmountHandler(props.layerId, removeLayer);
+		onBeforeUnmount(() => {
+			removeLayer();
+		});
 
 	},
 	render() {

src/components/layers/circle.layer.ts

@@ -1,5 +1,5 @@
 import { CircleLayer, CircleLayout, CirclePaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/fill.layer.ts

@@ -1,5 +1,5 @@
 import { FillLayer, FillLayout, FillPaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/fillExtrusion.layer.ts

@@ -1,5 +1,5 @@
 import { FillExtrusionLayout, FillExtrusionPaint, LineLayer } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/heatmap.layer.ts

@@ -1,5 +1,5 @@
 import { HeatmapLayer, HeatmapLayout, HeatmapPaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/hillshade.layer.ts

@@ -1,5 +1,5 @@
 import { HillshadeLayer, HillshadeLayout, HillshadePaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/line.layer.ts

@@ -1,5 +1,5 @@
 import { LineLayer, LineLayout, LinePaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/raster.layer.ts

@@ -1,5 +1,5 @@
 import { RasterLayer, RasterLayout, RasterPaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/layers/shared.ts

@@ -1,5 +1,7 @@
-import { defineComponent, PropType, unref, VNode } from 'vue';
+import { defineComponent, onBeforeUnmount, PropType, Ref, unref, VNode } from 'vue';
 import { AnySourceData, BackgroundLayer, Layer, Map, MapLayerEventType } from 'maplibre-gl';
+import { ComponentInternalInstance } from '@vue/runtime-core';
+import { SourceLayerRegistry } from '@/components/sources/sourceLayer.registry';
 
 const sourceOpts: Array<keyof (Omit<BackgroundLayer, 'source-layer'> & { sourceLayer?: string })> = [
 	'metadata', 'ref', 'source', 'sourceLayer', 'minzoom', 'maxzoom', 'interactive', 'filter', 'layout', 'paint'
@@ -64,3 +66,18 @@ export function unregisterLayerEvents(map: Map, layerId: string, vn: VNode) {
 		}
 	}
 }
+
+export function handleDispose(isLoaded: Ref<boolean>, map: Ref<Map>, ci: ComponentInternalInstance, props: { layerId: string }, registry: SourceLayerRegistry) {
+	function removeLayer() {
+		if (isLoaded.value) {
+			unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			map.value.removeLayer(props.layerId);
+		}
+	}
+
+	registry.registerUnmountHandler(props.layerId, removeLayer);
+	onBeforeUnmount(() => {
+		registry.unregisterUnmountHandler(props.layerId);
+		removeLayer();
+	});
+}

src/components/layers/smybol.layer.ts

@@ -1,5 +1,5 @@
 import { SymbolLayer, SymbolLayout, SymbolPaint } from 'maplibre-gl';
-import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
+import { genLayerOpts, handleDispose, registerLayerEvents, Shared } from '@/components/layers/shared';
 import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
 import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
@@ -34,12 +34,7 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		registry.addUnmountHandler(() => {
-			if (isLoaded.value) {
-				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
-				map.value.removeLayer(props.layerId);
-			}
-		});
+		handleDispose(isLoaded, map, ci, props, registry);
 
 	},
 	render() {

src/components/sources/shared.ts

@@ -44,6 +44,7 @@ export function bindSource<T extends object, O extends object>(map: Ref<GlMap>,
 	emitter.on('styleSwitched', resetSource);
 
 	return onBeforeUnmount(() => {
+		console.log('UMOUNT SOURC')
 		if (isLoaded.value) {
 			registry.unmount();
 			map.value.removeSource(props.sourceId);

src/components/sources/sourceLayer.registry.ts

@@ -2,16 +2,18 @@ export type SourceLayerRegistryHandler = () => void
 
 export class SourceLayerRegistry {
 
-	private unmountHandlers: SourceLayerRegistryHandler[] = [];
+	private unmountHandlers = new Map<string, SourceLayerRegistryHandler>();
 
-	addUnmountHandler(handler: SourceLayerRegistryHandler) {
-		this.unmountHandlers.push(handler);
+	registerUnmountHandler(id: string, handler: SourceLayerRegistryHandler) {
+		this.unmountHandlers.set(id, handler);
+	}
+
+	unregisterUnmountHandler(id: string) {
+		this.unmountHandlers.delete(id);
 	}
 
 	unmount() {
-		for (let i = 0, len = this.unmountHandlers.length; i < len; i++) {
-			this.unmountHandlers[ i ]();
-		}
+		this.unmountHandlers.forEach((h) => h());
 	}
 
 }