@swr-data-lab/components 2.43.2 → 3.0.0

package/dist/maplibre/Map/Map.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import maplibre, {} from 'maplibre-gl';
+import {} from '../types';
 import { onMount, onDestroy, getContext, hasContext } from 'svelte';
 import { createMapContext, MapContext } from '../context.svelte.js';
-import {} from '../types';
 import FallbackStyle from './FallbackStyle';
 import { de } from './locale';
 let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowPan = true, allowRotation = false, allowZoom = true, showDebug = false, cursor, initialBounds, maxBounds, initialLocation: receivedInitialLocation, 
@@ -9,19 +9,20 @@ let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zo
 // available, see: https://github.com/sveltejs/svelte/issues/7712
 mapContext = $bindable(), cooperativeGestures = false, onmoveend, onmovestart } = $props();
 let container;
-// Merge initial location with default object so individual
-// properties (like pitch) can be omitted by the caller
-let initialLocation = {
+mapContext = createMapContext();
+// Initial location is determined by (in order of precedence) :
+// 1. An arbitrary default location
+// 2. initialLocation prop
+// 3. initialLocation context (notably set by <WithLinkLocation/>)
+let contextLocation = getContext('initialLocation');
+let initialLocation = $derived({
     lat: 51.3,
     lng: 10.2,
     zoom: 5,
     pitch: 0,
-    ...receivedInitialLocation
-};
-mapContext = createMapContext();
-if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
-    initialLocation = getContext('initialLocation');
-}
+    ...receivedInitialLocation,
+    ...contextLocation
+});
 onMount(() => {
     mapContext.map = new maplibre.Map({
         container,
@@ -76,6 +77,12 @@ $effect(() => {
         mapContext.map?.setProjection(projection);
     }
 });
+$effect(() => {
+    mapContext.map?.jumpTo({
+        center: [initialLocation.lng, initialLocation.lat],
+        zoom: initialLocation.zoom
+    });
+});
 $effect(() => {
     if (allowZoom === false) {
         mapContext.map?.scrollZoom.disable();

package/dist/maplibre/Map/Map.svelte.d.ts

@@ -1,7 +1,7 @@
 import maplibre, { type LngLatBoundsLike, type MapLibreEvent, type ProjectionSpecification, type StyleSpecification } from 'maplibre-gl';
+import { type Location } from '../types';
 import { type Snippet } from 'svelte';
 import { MapContext } from '../context.svelte.js';
-import { type Location } from '../types';
 interface MapProps {
     style?: StyleSpecification | string;
     /**
@@ -24,7 +24,7 @@ interface MapProps {
     showDebug?: boolean;
     options?: any;
     /**
-     * Set the mouse cursor. `""` (empty string) restores Maplibre's default behaviour. See VectorLayer/Default for a common usage example
+     * Set the mouse cursor. `""` (empty string) restores Maplibre's default behaviour. See VectorLayer/Default for a usage example
      */
     cursor?: string;
     mapContext?: MapContext;

package/dist/maplibre/VectorLayer/VectorLayer.svelte

@@ -31,6 +31,12 @@ $effect(() => {
         map.addLayer(layerSpec, beforeId);
     }
 });
+// Make filter reactive
+$effect(() => {
+    if (styleLoaded && filter) {
+        map?.setFilter(id, filter);
+    }
+});
 $effect(() => resetLayerEventListener(map, 'click', id, onclick));
 $effect(() => resetLayerEventListener(map, 'mousemove', id, onmousemove));
 $effect(() => resetLayerEventListener(map, 'mouseleave', id, onmouseleave));

package/dist/maplibre/VectorLayer/VectorLayer.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CircleLayoutProps, type CirclePaintProps, type FillLayoutProps, type FillPaintProps, type LineLayoutProps, type SymbolPaintProps, type SymbolLayoutProps, type LinePaintProps, type MapGeoJSONFeature, type MapLayerMouseEvent } from 'maplibre-gl';
+import { type CircleLayoutProps, type CirclePaintProps, type FillLayoutProps, type FillPaintProps, type LineLayoutProps, type SymbolPaintProps, type SymbolLayoutProps, type LinePaintProps, type MapGeoJSONFeature, type MapLayerMouseEvent, type FilterSpecification } from 'maplibre-gl';
 interface VectorLayerProps {
     id: string;
     sourceId: string;
@@ -6,7 +6,7 @@ interface VectorLayerProps {
     /**
      * Maplibre [filter expression](https://maplibre.org/maplibre-style-spec/layers/#filter)
      */
-    filter?: any[];
+    filter?: FilterSpecification;
     type: 'line' | 'fill' | 'circle' | 'symbol';
     placeBelow?: string;
     visible?: boolean;

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">import {} from 'maplibre-gl';
 import MapSource from '../Source/MapSource.svelte';
-const { minZoom = 0, maxZoom = 24, id, url, attribution = '' } = $props();
-const sourceSpec = {
+import fetchTileJSON from './fetchTileJson';
+const { minZoom, maxZoom, id, url, tiles, attribution, promoteId } = $props();
+let tileJsonData = $derived(url ? await fetchTileJSON(url) : {});
+const sourceSpec = $derived({
     type: 'vector',
-    tiles: [url],
-    maxzoom: maxZoom,
-    minzoom: minZoom,
-    attribution
-};
+    tiles: tiles || tileJsonData.tiles || [],
+    maxzoom: maxZoom || tileJsonData.maxZoom || 24,
+    minzoom: minZoom || tileJsonData.minZoom || 0,
+    attribution: attribution || tileJsonData.attribution || '',
+    promoteId
+});
 </script>
 
 <MapSource {id} {sourceSpec} />

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte.d.ts

@@ -1,12 +1,15 @@
+import { type PromoteIdSpecification } from 'maplibre-gl';
 interface VectorTileSourceProps {
     id: string;
-    url: string;
+    url?: string;
+    tiles?: string[];
     minZoom?: number;
     maxZoom?: number;
     /**
-     * Attribution string for your data, usually rendered using an `<AttributionControl>`
+     * Attribution string for your data, usually rendered using an `<AttributionControl/>`
      */
     attribution?: string;
+    promoteId?: PromoteIdSpecification;
 }
 declare const VectorTileSource: import("svelte").Component<VectorTileSourceProps, {}, "">;
 type VectorTileSource = ReturnType<typeof VectorTileSource>;

package/dist/maplibre/VectorTileSource/fetchTileJson.d.ts

@@ -0,0 +1,2 @@
+import { type TileJsonData } from './types';
+export default function fetchTileJSON(url: string): Promise<TileJsonData>;

package/dist/maplibre/VectorTileSource/fetchTileJson.js

@@ -0,0 +1,16 @@
+import {} from './types';
+// Workaround for https://github.com/versatiles-org/versatiles-rs/issues/184
+// Drop when/if this lands: https://github.com/maplibre/maplibre-gl-js/issues/182
+export default async function fetchTileJSON(url) {
+    const u = new URL(url);
+    const res = await fetch(u);
+    const data = await res.json();
+    // Simple heuristic for absolute URLs
+    const re = /(((http)s?)):\/\/.*/gi;
+    return {
+        tiles: data?.tiles.map((path) => (re.test(path) ? path : `${u.origin}${path}`)),
+        attribution: data?.attribution || data?.author,
+        minZoom: data?.minzoom,
+        maxZoom: data?.maxzoom
+    };
+}

package/dist/maplibre/VectorTileSource/types.d.ts

@@ -0,0 +1,7 @@
+interface TileJsonData {
+    tiles?: string[];
+    attribution?: string;
+    minZoom?: number;
+    maxZoom?: number;
+}
+export { type TileJsonData };

package/dist/maplibre/VectorTileSource/types.js

@@ -0,0 +1 @@
+export {};

package/dist/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -8,11 +8,11 @@ let geocoder;
 if (service === 'maptiler') {
     geocoder = new MaptilerGeocoderAPI(key);
 }
-let location = $state();
+let location = $state({});
 function bboxToArea(bbox) {
     return (bbox[2] - bbox[0]) * (bbox[3] - bbox[1]);
 }
-onMount(async () => {
+$effect(async () => {
     const params = new URLSearchParams(window.location.search);
     if (params.has(urlParameter)) {
         const config = {
@@ -23,22 +23,17 @@ onMount(async () => {
         };
         const res = await geocoder.forwardGeocode(config);
         if (res.features[0].bbox && res.features[0].geometry.type === 'Point') {
-            location = {
-                lat: res.features[0].geometry.coordinates[1],
-                lng: res.features[0].geometry.coordinates[0],
-                zoom: 11 - bboxToArea(res.features[0].bbox) * 5.5
-            };
+            location.lat = res.features[0].geometry.coordinates[1];
+            location.lng = res.features[0].geometry.coordinates[0];
+            location.zoom = 11 - bboxToArea(res.features[0].bbox) * 5.5;
+            location.active = true;
         }
     }
     else {
-        location = false;
+        location = {};
     }
 });
-$effect.pre(() => {
-    setContext('initialLocation', location);
-});
+setContext('initialLocation', location);
 </script>
 
-{#if location !== undefined}
-	{@render children?.()}
-{/if}
+{@render children?.()}

package/dist/maplibre/WithLinkLocation/WithLinkLocation.svelte.d.ts

@@ -10,7 +10,13 @@ interface WithLinkLocationProps {
      * Limit search to one or more countries
      */
     countries?: GeocodingLanguage | GeocodingCountry[];
+    /**
+     * Limit search to one or more languages
+     */
     languages?: GeocodingLanguage | GeocodingLanguage[];
+    /**
+     * Customise the URL parameter used to set the initial location
+     */
     urlParameter?: string;
     children: Snippet;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.43.2",
+	"version": "3.0.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -41,16 +41,16 @@
 	"devDependencies": {
 		"@semantic-release/changelog": "6.0.3",
 		"@semantic-release/git": "10.0.1",
-		"@semantic-release/npm": "13.1.3",
-		"@storybook/addon-docs": "10.2.7",
-		"@storybook/addon-links": "10.2.7",
-		"@storybook/addon-svelte-csf": "^5.0.10",
-		"@storybook/addon-vitest": "10.2.7",
-		"@storybook/sveltekit": "10.2.7",
+		"@semantic-release/npm": "13.1.5",
+		"@storybook/addon-docs": "10.2.13",
+		"@storybook/addon-links": "10.2.13",
+		"@storybook/addon-svelte-csf": "^5.0.11",
+		"@storybook/addon-vitest": "10.2.13",
+		"@storybook/sveltekit": "10.2.13",
 		"@storybook/test-runner": "^0.24.2",
-		"@sveltejs/adapter-auto": "7.0.0",
-		"@sveltejs/enhanced-img": "0.9.3",
-		"@sveltejs/kit": "2.50.1",
+		"@sveltejs/adapter-auto": "7.0.1",
+		"@sveltejs/enhanced-img": "0.10.3",
+		"@sveltejs/kit": "2.53.4",
 		"@sveltejs/package": "2.5.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.4",
 		"@types/geojson": "7946.0.16",
@@ -69,8 +69,8 @@
 		"sass": "1.93.2",
 		"sass-embedded": "1.97.3",
 		"semantic-release": "25.0.3",
-		"storybook": "10.2.7",
-		"svelte": "5.49.1",
+		"storybook": "10.2.13",
+		"svelte": "5.53.5",
 		"svelte-check": "4.3.2",
 		"svelte-preprocess": "6.0.3",
 		"typescript": "5.9.3",