@radiofrance/svelte-leaflet 0.1.0-alpha.9 → 1.0.0-next.1

package/dist/Marker.svelte

@@ -1,74 +1,72 @@
-<script context="module"></script>
+<script lang="ts">
+	import { getContext, onDestroy, onMount, setContext, type Snippet } from 'svelte';
+	import type {
+		Map as LeafletMap,
+		Marker as LeafletMarker,
+		MarkerOptions,
+		LayerGroup,
+		MarkerClusterGroup,
+	} from 'leaflet';
+	import { bindEvents, type LatLngExpression } from './index.js';
+	import { markerEvents, updateMarkerProps, type MarkerEvents } from './marker.svelte.js';
+	import { LAYERGROUP, MAP, MARKER } from './contexts.js';
 
-<script>import { createEventDispatcher, getContext, onDestroy, setContext, tick } from "svelte";
-const dispatch = createEventDispatcher();
-const L = globalThis.window.L;
-export let size = 25;
-export let latlng;
-export let id = "";
-export let options = {};
-let markerElement;
-let marker;
-const getMap = getContext("map");
-const getLayerGroup = getContext("layerGroup");
-setContext("layer", () => marker);
-$:
-  recreateMarker(size, latlng, id, options);
-async function recreateMarker(size2, latlng2, id2, options2) {
-  removeMarker();
-  await tick();
-  createMarker(size2, latlng2, id2, options2);
-}
-async function createMarker(size2, latlng2, id2, options2) {
-  await tick();
-  const layerGroup = getLayerGroup?.();
-  const map = getMap();
-  const mapOrLayerGroup = layerGroup || map;
-  marker = L.marker(latlng2, options2);
-  marker.id = id2;
-  marker.on("click", (e) => dispatch("click", e)).on("dblclick", (e) => dispatch("dblclick", e)).on("contextmenu", (e) => dispatch("contextmenu", e)).on("dragstart", (e) => dispatch("dragstart", e)).on("drag", (e) => dispatch("drag", e)).on("dragend", (e) => dispatch("dragend", e));
-  mapOrLayerGroup.addLayer(marker);
-  await tick();
-  if (markerElement.childElementCount > 0) {
-    marker.setIcon(
-      L.divIcon({
-        html: markerElement,
-        className: "map-marker",
-        iconSize: L.point(size2, size2)
-      })
-    );
-  }
-}
-function removeMarker() {
-  if (!marker)
-    return;
-  const layerGroup = getLayerGroup?.();
-  const map = getMap();
-  const mapOrLayerGroup = layerGroup || map;
-  mapOrLayerGroup.removeLayer(marker);
-}
-onDestroy(() => {
-  removeMarker();
-});
-</script>
+	type Props = {
+		latlng: LatLngExpression;
+		options?: MarkerOptions;
+		instance?: LeafletMarker;
+		children?: Snippet;
+	} & MarkerEvents;
+
+	let {
+		latlng,
+		options = $bindable(),
+		instance = $bindable(),
+		children,
+		...restProps
+	}: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup | MarkerClusterGroup>(LAYERGROUP);
+	setContext(MARKER, () => instance);
+
+	$effect(() => {
+		if (instance && options) {
+			updateMarkerProps(instance, options);
+		}
+	});
 
-<template>
-	{#key marker}
-		{#if marker}
-			<div bind:this={markerElement} class="leaflet-marker">
-				<slot name="icon" />
-			</div>
-			<slot />
-		{/if}
-	{/key}
-</template>
+	$effect(() => {
+		if (!instance?.getLatLng().equals(latlng)) {
+			instance?.setLatLng(latlng);
+		}
+	});
 
-<style>
-	.leaflet-marker {
-		display: none;
-	}
+	onMount(() => {
+		const markerOptions = { ...options };
+		instance = window.L.marker(latlng, markerOptions);
+		bindEvents(instance, restProps, markerEvents);
+
+		const map = getMap();
+		const layerGroup = getLayerGroup?.();
+		const mapOrLayerGroup = layerGroup || map;
+		instance.addTo(mapOrLayerGroup);
+		mapOrLayerGroup.remove;
+	});
+
+	onDestroy(() => {
+		const layerGroup = getLayerGroup?.();
+		const map = getMap();
+		if (instance) {
+			if (layerGroup) {
+				layerGroup.removeLayer(instance);
+			} else {
+				map.removeLayer(instance);
+			}
+		}
+	});
+</script>
 
-	:global(.map-marker .leaflet-marker) {
-		display: inherit;
-	}
-</style>
+{#if instance && children}
+	{@render children()}
+{/if}

package/dist/Marker.svelte.d.ts

@@ -1,34 +1,11 @@
-import { SvelteComponent } from "svelte";
-type MarkerContext = {
-    id?: string;
-};
-export type Marker = LeafletMarker & MarkerContext;
-import type { LatLngExpression, Marker as LeafletMarker, MarkerOptions } from 'leaflet';
-declare const __propDef: {
-    props: {
-        size?: number | undefined;
-        latlng: LatLngExpression;
-        id?: string | undefined;
-        options?: MarkerOptions | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-        dblclick: CustomEvent<any>;
-        contextmenu: CustomEvent<any>;
-        dragstart: CustomEvent<any>;
-        drag: CustomEvent<any>;
-        dragend: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-export type MarkerProps = typeof __propDef.props;
-export type MarkerEvents = typeof __propDef.events;
-export type MarkerSlots = typeof __propDef.slots;
-export default class Marker extends SvelteComponent<MarkerProps, MarkerEvents, MarkerSlots> {
-}
-export {};
+import { type Snippet } from 'svelte';
+import type { Marker as LeafletMarker, MarkerOptions } from 'leaflet';
+import { type LatLngExpression } from './index.js';
+import { type MarkerEvents } from './marker.svelte.js';
+declare const Marker: import("svelte").Component<{
+    latlng: LatLngExpression;
+    options?: MarkerOptions;
+    instance?: LeafletMarker;
+    children?: Snippet;
+} & MarkerEvents, {}, "instance" | "options">;
+export default Marker;

package/dist/MarkerClusterGroup.svelte

@@ -1,44 +1,75 @@
-<script>import { getContext, onMount, setContext, tick } from "svelte";
-export let options = {};
-export let icon = null;
-let markerElement;
-const L = globalThis.window.L;
-const getMap = getContext("map");
-let clusterGroup;
-setContext("layerGroup", () => clusterGroup);
-onMount(async () => {
-  const map = getMap();
-  if (icon) {
-    options.iconCreateFunction = function(cluster) {
-      const html = document.createElement("div");
-      new icon({ target: html, props: { count: cluster.getChildCount() } });
-      return L.divIcon({ html, className: "foobar" });
-    };
-  }
-  if (markerElement.childElementCount > 0) {
-    options.iconCreateFunction = function(cluster) {
-      const html = markerElement.innerHTML.replace("%count%", cluster.getChildCount().toString());
-      return L.divIcon({ html, className: "" });
-    };
-  }
-  clusterGroup = L.markerClusterGroup(options);
-  map.addLayer(clusterGroup);
-});
+<script lang="ts">
+	import {
+		getContext,
+		mount,
+		onDestroy,
+		onMount,
+		setContext,
+		type Component,
+		type Snippet,
+	} from 'svelte';
+	import type {
+		MarkerClusterGroup as LeafletMarkerClusterGroup,
+		LayerGroup as LeafletLayerGroup,
+		MarkerClusterGroupOptions,
+		LeafletEventHandlerFnMap,
+		MarkerCluster,
+	} from 'leaflet';
+	import { LAYERGROUP, MAP } from './contexts.js';
+	import {
+		markerClusterGroupEvents,
+		type MarkerClusterGroupEvents,
+	} from './markerClusterGroup.svelte.js';
+	import { bindEvents } from './index.js';
+
+	type Props = {
+		icon?: Component<{ count: number }>;
+		instance?: LeafletMarkerClusterGroup;
+		options?: MarkerClusterGroupOptions;
+		children?: Snippet;
+	} & MarkerClusterGroupEvents;
+
+	let { instance = $bindable(), options, children, icon, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => L.Map>(MAP);
+	const getLayerGroup = getContext<() => LeafletLayerGroup>(LAYERGROUP);
+
+	setContext(LAYERGROUP, () => instance);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+
+		const mergedOptions = { ...options };
+		if (icon) {
+			mergedOptions.iconCreateFunction = (cluster: MarkerCluster) => {
+				const mountTarget = document.createElement('div');
+				mountTarget.classList.add('MOUNTTARGET');
+				mount(icon, {
+					target: mountTarget,
+					props: { count: cluster.getChildCount() },
+				});
+				const html = mountTarget.innerHTML;
+				return window.L.divIcon({ html });
+			};
+		}
+
+		instance = window.L.markerClusterGroup(mergedOptions);
+		context.addLayer(instance);
+		bindEvents(
+			instance,
+			restProps,
+			// TODO : find a better way to type this
+			markerClusterGroupEvents as unknown as readonly (keyof LeafletEventHandlerFnMap)[],
+		);
+	});
+
+	onDestroy(() => {
+		instance?.clearLayers();
+	});
 </script>
 
-<slot />
-<template>
-	<div bind:this={markerElement} class="leaflet-markercluster">
-		<slot name="icon" />
-	</div>
-</template>
-
-<style>
-	.leaflet-markercluster {
-		display: none;
-	}
-
-	:global(.map-marker .leaflet-markercluster) {
-		display: inherit;
-	}
-</style>
+{#if instance && children}
+	{@render children()}
+{/if}

package/dist/MarkerClusterGroup.svelte.d.ts

@@ -1,21 +1,69 @@
-import { SvelteComponent } from "svelte";
-import type { MarkerClusterGroupOptions } from 'leaflet';
-declare const __propDef: {
-    props: {
-        options?: MarkerClusterGroupOptions | undefined;
-        icon?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        icon: {};
-    };
-};
-export type MarkerClusterGroupProps = typeof __propDef.props;
-export type MarkerClusterGroupEvents = typeof __propDef.events;
-export type MarkerClusterGroupSlots = typeof __propDef.slots;
-export default class MarkerClusterGroup extends SvelteComponent<MarkerClusterGroupProps, MarkerClusterGroupEvents, MarkerClusterGroupSlots> {
-}
-export {};
+import { type Component, type Snippet } from 'svelte';
+import type { MarkerClusterGroup as LeafletMarkerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
+declare const MarkerClusterGroup: Component<{
+    icon?: Component<{
+        count: number;
+    }>;
+    instance?: LeafletMarkerClusterGroup;
+    options?: MarkerClusterGroupOptions;
+    children?: Snippet;
+} & {
+    onclustermovestart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermoveend?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterdragstart?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterdrag?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusteradd?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterremove?: ((e: Omit<import("leaflet").LeafletEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterpopupopen?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterpopupclose?: ((e: Omit<import("leaflet").PopupEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustertooltipopen?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustertooltipclose?: ((e: Omit<import("leaflet").TooltipEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterdblclick?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermousedown?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermouseup?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermouseover?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustermouseout?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclustercontextmenu?: ((e: Omit<import("leaflet").LeafletMouseEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+    onclusterdragend?: ((e: Omit<import("leaflet").DragEndEvent, "sourceTarget"> & {
+        sourceTarget: import("leaflet").Marker<any>;
+    }) => void) | undefined;
+} & import("./utils.js").CreateSvelteEventsMap<readonly ["animationend", "spiderfied", "unspiderfied"]>, {}, "instance">;
+export default MarkerClusterGroup;

package/dist/Polygon.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type { Polygon as LeafletPolygon, PolylineOptions, LayerGroup } from 'leaflet';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.svelte.js';
+	import { bindEvents, type Latlngs, type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+
+	type Props = {
+		latlngs: Latlngs<3>;
+		instance?: LeafletPolygon;
+		options?: PolylineOptions;
+	} & PolygonEvents;
+
+	let { latlngs, instance = $bindable(), options = {}, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
+
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.polygon(latlngs, options);
+		instance.addTo(context);
+		bindEvents(instance, restProps, polygonEvents);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && latlngs) {
+			instance.setLatLngs(latlngs);
+		}
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updatePolylineProps(instance, options);
+		}
+	});
+</script>

package/dist/Polygon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Polygon as LeafletPolygon, PolylineOptions } from 'leaflet';
+import { type PolygonEvents } from './polyline.svelte.js';
+import { type Latlngs } from './index.js';
+declare const Polygon: import("svelte").Component<{
+    latlngs: Latlngs<3>;
+    instance?: LeafletPolygon;
+    options?: PolylineOptions;
+} & PolygonEvents, {}, "instance">;
+export default Polygon;

package/dist/Polyline.svelte

@@ -1,26 +1,43 @@
-<script>import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
-export let latlngs;
-export let options = {};
-let line;
-let map = getContext("map")();
-const dispatch = createEventDispatcher();
-$:
-  updateLine(latlngs, options);
-function updateLine(latLngs, lineStyle) {
-  if (line) {
-    line.setLatLngs(latLngs);
-    line.setStyle(lineStyle);
-  }
-}
-onMount(async () => {
-  const L = window.L;
-  line = new L.Polyline(latlngs, options);
-  line.on("click", (e) => dispatch("click", e));
-  line.addTo(map);
-});
-onDestroy(() => {
-  line?.remove();
-});
-</script>
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type { Polyline as LeafletPolyline, PolylineOptions, LayerGroup } from 'leaflet';
+	import { polygonEvents, updatePolylineProps, type PolygonEvents } from './polyline.svelte.js';
+	import { bindEvents, type Latlngs, type LeafletMap } from './index.js';
+	import { LAYERGROUP, MAP } from './contexts.js';
+
+	type Props = {
+		latlngs: Latlngs;
+		instance?: LeafletPolyline;
+		options?: PolylineOptions;
+	} & PolygonEvents;
+
+	let { latlngs, instance = $bindable(), options = {}, ...restProps }: Props = $props();
+
+	const getMap = getContext<() => LeafletMap>(MAP);
+	const getLayerGroup = getContext<() => LayerGroup>(LAYERGROUP);
 
-<slot />
+	onMount(() => {
+		const map = getMap?.();
+		const layerGroup = getLayerGroup?.();
+		const context = layerGroup || map;
+		instance = window.L.polyline(latlngs, options);
+		instance.addTo(context);
+		bindEvents(instance, restProps, polygonEvents);
+	});
+
+	onDestroy(() => {
+		instance?.remove();
+	});
+
+	$effect(() => {
+		if (instance && latlngs) {
+			instance.setLatLngs(latlngs);
+		}
+	});
+
+	$effect(() => {
+		if (instance && options) {
+			updatePolylineProps(instance, options);
+		}
+	});
+</script>

package/dist/Polyline.svelte.d.ts

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
-import type { LatLngExpression, PathOptions } from 'leaflet';
-declare const __propDef: {
-    props: {
-        latlngs: LatLngExpression[];
-        options?: PathOptions | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PolylineProps = typeof __propDef.props;
-export type PolylineEvents = typeof __propDef.events;
-export type PolylineSlots = typeof __propDef.slots;
-export default class Polyline extends SvelteComponent<PolylineProps, PolylineEvents, PolylineSlots> {
-}
-export {};
+import type { Polyline as LeafletPolyline, PolylineOptions } from 'leaflet';
+import { type PolygonEvents } from './polyline.svelte.js';
+import { type Latlngs } from './index.js';
+declare const Polyline: import("svelte").Component<{
+    latlngs: Latlngs;
+    instance?: LeafletPolyline;
+    options?: PolylineOptions;
+} & PolygonEvents, {}, "instance">;
+export default Polyline;