feat(VectorTileSource): Make tiles and url props reactive (#338)

* Add test case
* Build out feature

Author: awesomephant

components/package.json

@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@maplibre/maplibre-gl-geocoder": "1.9.1",
 		"@maplibre/maplibre-gl-inspect": "1.7.1",
-		"maplibre-gl": "5.7.0",
+		"maplibre-gl": "5.20.0",
 		"svelte-select": "5.8.3"
 	},
 	"devDependencies": {

components/src/maplibre/MapStyle/SWRDataLabLight.ts

@@ -24,7 +24,7 @@ const tokens = {
 	sans_bold: ['swr_sans_bold'],
 	background: {
 		stops: [
-			[6, 'hsl(24, 20%, 97%)'],
+			[6, 'hsl(24, 20%, 96%)'],
 			[6.5, 'hsl(24, 10%, 99%)']
 		]
 	},
@@ -37,7 +37,7 @@ const tokens = {
 	sand: 'hsl(60, 0%, 95%)',
 	rock: 'hsl(192, 0%, 90%)',
 	street_primary: 'hsl(0, 4%, 95%)',
-	street_primary_faded: 'hsl(0, 4%, 93%)',
+	street_primary_faded: 'hsl(0, 4%, 90%)',
 	street_primary_case: 'hsl(240, 1%, 84%)',
 	street_secondary: 'hsl(0, 0%, 95%)',
 	street_secondary_case: 'hsl(0, 0%, 75%)',

components/src/maplibre/Source/MapSource.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { onDestroy, type Snippet } from 'svelte';
-	import { type Map, type SourceSpecification } from 'maplibre-gl';
-	import { getMapContext, createSourceContext } from '../context.svelte.js';
+	import {
+		VectorTileSource,
+		type VectorSourceSpecification,
+		type Map,
+		type SourceSpecification
+	} from 'maplibre-gl';
+	import { getMapContext, createSourceContext, SourceContext } from '../context.svelte.js';
 
 	type Source = maplibregl.VectorTileSource | maplibregl.GeoJSONSource;
 
@@ -14,7 +19,8 @@
 	}
 
 	let { id, sourceSpec, source = $bindable(), children }: MapSourceProps = $props();
-	let firstRun = true;
+
+	let firstRun = $state(true);
 
 	// Get map context
 	const { map, styleLoaded } = $derived(getMapContext());
@@ -26,13 +32,12 @@
 	// actual source object back from the map instance
 	$effect(() => {
 		if (map && styleLoaded && firstRun) {
-			map.addSource(id, $state.snapshot(sourceSpec) as SourceSpecification);
+			map.addSource(id, $state.snapshot(sourceSpec));
 			source = map.getSource(id);
 			firstRun = false;
 		}
 	});
 
-	// 2. Do extra stuff with the source object
 	$effect(() => {
 		if (source && sourceSpec.type === 'geojson') {
 			if (firstRun === false) {
@@ -41,6 +46,18 @@
 		}
 	});
 
+	$effect(() => {
+		if (!firstRun && source instanceof VectorTileSource) {
+			source.setTiles(sourceSpec.tiles);
+		}
+	});
+
+	$effect(() => {
+		if (!firstRun && source instanceof VectorTileSource) {
+			source.setUrl(sourceSpec.url);
+		}
+	});
+
 	onDestroy(() => {
 		if (map && styleLoaded) {
 			const layers = map?.getStyle().layers;

components/src/maplibre/VectorTileSource/VectorTileSource.stories.svelte

@@ -13,6 +13,12 @@
 		title: 'Maplibre/Source/VectorTileSource',
 		component: VectorTileSource
 	});
+
+	const demoUrls = [
+		'https://demotiles.maplibre.org/tiles/tiles.json',
+		'https://tiles.datenhub.net/tiles/osm/tiles.json'
+	];
+	let demoUrl = $state(demoUrls[0]);
 </script>
 
 <Story asChild name="Default">
@@ -57,7 +63,7 @@
 	</DesignTokens>
 </Story>
 
-<Story asChild name="Usign bare tile URL">
+<Story asChild name="Using a bare tile URL">
 	<DesignTokens theme="light">
 		<div class="container">
 			<Map showDebug={true} style={SWRDataLabLight()}>
@@ -84,6 +90,46 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="Reactive url parameter">
+	<DesignTokens theme="light">
+		<label for="select-url">URL</label>
+		<select name="select-url" id="select-url" bind:value={demoUrl}>
+			{#each demoUrls as url}
+				<option>{url}</option>
+			{/each}
+		</select>
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight()}>
+				<VectorTileSource id="test-source" url={demoUrl} />
+
+				<VectorLayer
+					sourceId="test-source"
+					sourceLayer="countries"
+					id="test-layer"
+					type="line"
+					paint={{
+						'line-color': shades.red.base,
+						'line-width': 2
+					}}
+				/>
+
+				<VectorLayer
+					sourceId="test-source"
+					sourceLayer="boundaries"
+					id="test-layer-2"
+					type="line"
+					paint={{
+						'line-color': shades.forest.base,
+						'line-width': 2
+					}}
+				/>
+
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		width: 100%;

components/src/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -18,15 +18,8 @@
 		promoteId?: PromoteIdSpecification;
 	}
 
-	const {
-		minZoom,
-		maxZoom,
-		id,
-		url,
-		tiles,
-		attribution,
-		promoteId
-	}: VectorTileSourceProps = $props();
+	const { minZoom, maxZoom, id, url, tiles, attribution, promoteId }: VectorTileSourceProps =
+		$props();
 
 	let tileJsonData = $derived(url ? await fetchTileJSON(url) : {});