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

package/dist/popup.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Popup as LeafletPopup, PopupOptions } from 'leaflet';
+import type { CreateSvelteEventsMap } from './utils.js';
+export declare function updatePopupProps(instance: LeafletPopup, options: PopupOptions): void;
+export declare const popupEvents: readonly ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout", "contextmenu", "add", "remove", "popupopen", "popupclose", "tooltipopen", "tooltipclose"];
+export type PopupEvents = CreateSvelteEventsMap<typeof popupEvents, LeafletPopup>;
+declare module 'leaflet' {
+    interface Popup {
+        _source: Layer;
+    }
+}

package/dist/popup.svelte.js

@@ -0,0 +1,50 @@
+import { interactiveLayerEvents, layerEvents, popupSpecificEvents, tooltipEvents, } from './events.js';
+export function updatePopupProps(instance, options) {
+    if (!options)
+        return;
+    for (const [key, value] of Object.entries(options)) {
+        // skip if the option value is unchanged
+        if (instance.options[key] === value)
+            continue;
+        // update the option value :
+        // - needed for future comparison (CF above)
+        // - handles simple cases
+        //     bubblingMouseEvents	riseOffset	autoPanPadding
+        //     autoPanSpeed
+        instance.options[key] = value;
+        switch (key) {
+            // unhandled
+            case 'className':
+            case 'interactive':
+            case 'closeButton':
+            case 'pane':
+                throw new Error(`mutation of ${key} option is not supported`);
+            // needs to reopen the popup
+            case 'keepInView':
+            case 'autoPan':
+            case 'autoClose':
+            case 'closeOnClick':
+            case 'closeOnEscapeKey':
+            case 'maxWidth':
+            case 'minWidth':
+            case 'maxHeight':
+            case 'offset':
+                if (instance.isOpen()) {
+                    const source = instance._source;
+                    source.closePopup();
+                    source.openPopup();
+                }
+                break;
+            case 'content':
+                instance.setContent(value);
+                break;
+        }
+    }
+}
+export const popupEvents = [
+    // 'contentupdate', // needs @types/leaflet PR ?
+    ...interactiveLayerEvents,
+    ...layerEvents,
+    ...popupSpecificEvents,
+    ...tooltipEvents,
+];

package/dist/private/GeolocationButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import GeolocationIcon from './GeolocationIcon.svelte';
+	import { FOCUSABLE } from '../contexts.js';
+
+	const tabindex = getContext<-1 | null>(FOCUSABLE);
+</script>
+
+<div>
+	<button {tabindex}>
+		<GeolocationIcon width="1rem" />
+	</button>
+</div>
+
+<style>
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		background-color: white;
+		cursor: pointer;
+		border: none;
+		border-radius: 2px;
+	}
+
+	button:hover {
+		background-color: #f4f4f4;
+	}
+
+	div {
+		border-radius: 4px;
+		border: 2px solid rgba(0, 0, 0, 0.2);
+	}
+</style>

package/dist/private/GeolocationButton.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GeolocationButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GeolocationButton = InstanceType<typeof GeolocationButton>;
+export default GeolocationButton;

package/dist/private/GeolocationIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Props {
+		width?: string;
+	}
+
+	let { width = '32px' }: Props = $props();
+</script>
+
+<svg
+	{width}
+	viewBox="0 0 16 16"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="#000000"
+>
+	<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+	<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+	<g id="SVGRepo_iconCarrier">
+		<rect width="16" height="16" id="icon-bound" fill="none"></rect>
+		<path
+			d="M13.916,7C13.494,4.488,11.512,2.506,9,2.084V0H7v2.084C4.488,2.506,2.506,4.488,2.084,7H0v2h2.084 C2.506,11.512,4.488,13.494,7,13.916V16h2v-2.084c2.512-0.422,4.494-2.403,4.916-4.916H16V7H13.916z M10.828,10.828 C10.072,11.584,9.069,12,8,12s-2.072-0.416-2.828-1.172S4,9.069,4,8s0.416-2.072,1.172-2.828S6.931,4,8,4s2.072,0.416,2.828,1.172 S12,6.931,12,8S11.584,10.072,10.828,10.828z M8,6C6.897,6,6,6.897,6,8s0.897,2,2,2s2-0.897,2-2S9.103,6,8,6z"
+		></path>
+	</g>
+</svg>

package/dist/private/GeolocationIcon.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const GeolocationIcon: import("svelte").Component<{
+    width?: string;
+}, {}, "">;
+export default GeolocationIcon;

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import type { LeafletEventHandlerFnMap } from 'leaflet';
+export declare function capitalize<T extends string>(str: T): Capitalize<T>;
+export declare function getFirstNonCommentChild(element: HTMLElement): HTMLElement | null;
+export type PickOptionByType<Options, Type> = keyof {
+    [K in keyof Options as true extends UnionContainsType<Options[K], Type> ? K : never]: Options[K];
+};
+export type UnionContainsType<Union, Type> = Union extends Type ? true : never;
+export type CreateSvelteEventsMap<EventNames extends readonly (keyof LeafletEventHandlerFnMap)[], SourceTarget = null> = {
+    [K in EventNames[number] as `on${K}`]?: SourceTarget extends null ? LeafletEventHandlerFnMap[K] : (e: Omit<Parameters<Exclude<LeafletEventHandlerFnMap[K], undefined>>[0], 'sourceTarget'> & {
+        sourceTarget: SourceTarget;
+    }) => void;
+};

package/dist/utils.js

@@ -0,0 +1,10 @@
+export function capitalize(str) {
+    return (str[0].toUpperCase() + str.slice(1));
+}
+export function getFirstNonCommentChild(element) {
+    let child = element.firstChild;
+    while (child && child.nodeType !== Node.ELEMENT_NODE) {
+        child = child.nextSibling;
+    }
+    return child;
+}

package/package.json

@@ -1,88 +1,72 @@
 {
 	"name": "@radiofrance/svelte-leaflet",
-	"version": "0.1.0-alpha.9",
-	"description": "A library that wraps leaflet classes in domless/renderless svelte components.",
-	"keywords": [
-		"svelte",
-		"leaflet",
-		"map",
-		"cartography",
-		"sveltekit"
-	],
-	"author": {
-		"email": "romain.durand@radiofrance.com",
-		"name": "Romain Durand"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/radiofrance/svelte-leaflet"
-	},
+	"version": "1.0.0-next.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
 	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		}
 	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
+		"@playwright/test": "^1.45.3",
+		"@skeletonlabs/skeleton": "^3.0.0-next.7",
+		"@skeletonlabs/skeleton-svelte": "^1.0.0-next.12",
+		"@skeletonlabs/tw-plugin": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/d3-scale": "^4.0.8",
-		"@types/d3-scale-chromatic": "^3.0.3",
-		"@types/eslint": "8.56.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"d3-scale": "^4.0.2",
-		"d3-scale-chromatic": "^3.0.0",
-		"eslint": "^8.56.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.0",
+		"@types/leaflet": "^1.9.14",
+		"@types/leaflet.markercluster": "^1.5.5",
+		"@types/node": "^22.9.0",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"publint": "^0.1.9",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"tslib": "^2.4.1",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"leaflet": "^1.9.4",
+		"leaflet.markercluster": "^1.5.3",
+		"lucide-svelte": "^0.456.0",
+		"mdsvex": "^0.11.2",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"publint": "^0.2.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
 		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.11",
-		"vitest": "^1.6.0"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"private": false,
-	"publishConfig": {
-		"access": "public",
-		"registry": "https://registry.npmjs.org/"
-	},
-	"dependencies": {
-		"@types/leaflet": "^1.9.12",
-		"@types/leaflet.markercluster": "^1.5.4",
-		"leaflet": "^1.9.4",
-		"leaflet.markercluster": "^1.5.3"
+		"vitest": "^2.0.4"
 	}
 }

package/dist/Circle.svelte

@@ -1,41 +0,0 @@
-<script>import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
-import {
-  bindEvents,
-  interactiveLayerEvents,
-  layerEvents,
-  popupEvents,
-  tooltipEvents
-} from "./index.js";
-export let center;
-export let options = { radius: 100 };
-export let instance = void 0;
-const events = [
-  "move",
-  ...interactiveLayerEvents,
-  ...layerEvents,
-  ...popupEvents,
-  ...tooltipEvents
-];
-let map = getContext("map")();
-const dispatch = createEventDispatcher();
-$:
-  updateCircle(center, options);
-function updateCircle(center2, options2) {
-  if (instance) {
-    instance.setLatLng(center2);
-    instance.setStyle(options2);
-    instance.setRadius(options2.radius);
-  }
-}
-onMount(async () => {
-  const L = window.L;
-  instance = new L.Circle(center, options);
-  bindEvents(instance, dispatch, events);
-  instance.addTo(map);
-});
-onDestroy(() => {
-  instance?.remove();
-});
-</script>
-
-<slot />

package/dist/Circle.svelte.d.ts

@@ -1,36 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Circle as LeafletCircle, LatLngExpression } from 'leaflet';
-declare const __propDef: {
-    props: {
-        center: LatLngExpression;
-        options?: import("leaflet").CircleMarkerOptions | undefined;
-        instance?: LeafletCircle | undefined;
-    };
-    events: {
-        click: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        dblclick: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        mousedown: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        mouseup: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        mouseover: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        mouseout: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        contextmenu: CustomEvent<import("leaflet").LeafletMouseEvent>;
-        move: CustomEvent<import("leaflet").LeafletEvent>;
-        popupopen: CustomEvent<import("leaflet").PopupEvent>;
-        popupclose: CustomEvent<import("leaflet").PopupEvent>;
-        tooltipopen: CustomEvent<import("leaflet").TooltipEvent>;
-        tooltipclose: CustomEvent<import("leaflet").TooltipEvent>;
-        add: CustomEvent<import("leaflet").LeafletEvent>;
-        remove: CustomEvent<import("leaflet").LeafletEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CircleProps = typeof __propDef.props;
-export type CircleEvents = typeof __propDef.events;
-export type CircleSlots = typeof __propDef.slots;
-export default class Circle extends SvelteComponent<CircleProps, CircleEvents, CircleSlots> {
-}
-export {};