@loidolt/theme-maps 0.7.0

package/dist/internal/use-layer.svelte.js

@@ -0,0 +1,179 @@
+import { untrack } from 'svelte';
+import { changedProperties, deepEqual } from '../core/equality.js';
+import { getSourceContext, requireMapContext } from './context.js';
+import { safely } from './safely.js';
+const toEvent = (event) => ({
+    feature: event.features[0],
+    features: (event.features ?? []),
+    lngLat: [event.lngLat.lng, event.lngLat.lat],
+    point: [event.point.x, event.point.y],
+});
+/**
+ * Adds a layer of `type` to the enclosing map and keeps it in step with its props: added on
+ * every style load, diffed on every change (only what changed is sent), recoloured on a theme
+ * change, removed on unmount.
+ */
+export function useLayer(type, props, defaults = () => ({})) {
+    const context = requireMapContext(`${type} layer`);
+    const enclosing = getSourceContext();
+    let added = $state(false);
+    let applied = {};
+    const resolve = (current, colors) => {
+        const base = defaults(colors);
+        const own = typeof current.paint === 'function' ? current.paint(colors) : current.paint;
+        return {
+            paint: { ...base.paint, ...own },
+            layout: {
+                ...base.layout,
+                ...current.layout,
+                visibility: current.visible === false ? 'none' : 'visible',
+            },
+        };
+    };
+    // Settled through deriveds: only a real change of id or source re-creates the layer.
+    const layerId = $derived(props().id);
+    const namedSource = $derived(props().source);
+    $effect(() => {
+        const target = context.map;
+        const [id, named] = [layerId, namedSource];
+        const sourceId = named ?? enclosing?.id;
+        void context.styleVersion;
+        const sourceReady = named ? true : Boolean(enclosing?.ready);
+        if (!target || !context.loaded || !sourceReady)
+            return;
+        if (!sourceId && type !== 'background') {
+            throw new Error(`Layer "${id}" has no source: pass \`source\` or place it inside <MapSource>.`);
+        }
+        let waiting;
+        const add = () => {
+            if (sourceId && !target.getSource(sourceId))
+                return false;
+            untrack(() => {
+                const current = props();
+                const { paint, layout } = resolve(current, context.colors);
+                if (!target.getLayer(id)) {
+                    const before = current.beforeId && target.getLayer(current.beforeId) ? current.beforeId : undefined;
+                    target.addLayer({
+                        id,
+                        type,
+                        ...(sourceId ? { source: sourceId } : {}),
+                        ...(current.sourceLayer ? { 'source-layer': current.sourceLayer } : {}),
+                        ...(current.filter ? { filter: current.filter } : {}),
+                        ...(current.minZoom !== undefined ? { minzoom: current.minZoom } : {}),
+                        ...(current.maxZoom !== undefined ? { maxzoom: current.maxZoom } : {}),
+                        paint,
+                        layout,
+                    }, before);
+                }
+                applied = {
+                    paint,
+                    layout,
+                    filter: current.filter,
+                    zoom: [current.minZoom ?? 0, current.maxZoom ?? 24],
+                    beforeId: current.beforeId,
+                };
+            });
+            added = true;
+            return true;
+        };
+        if (!add()) {
+            // A source named outside any MapSource may not exist yet; wait for it.
+            waiting = () => {
+                if (add())
+                    target.off('sourcedata', waiting);
+            };
+            target.on('sourcedata', waiting);
+        }
+        // Registering writes the map's layer list, which this effect must not come to depend on.
+        const unregister = untrack(() => context.registerLayer({ id, label: props().label ?? id, type }));
+        return () => {
+            added = false;
+            untrack(unregister);
+            safely(() => {
+                if (waiting)
+                    target.off('sourcedata', waiting);
+                if (target.getLayer(id))
+                    target.removeLayer(id);
+            });
+        };
+    });
+    // Everything after creation: diffed, so a re-render sends only what changed.
+    $effect(() => {
+        const current = props();
+        const colors = context.colors;
+        const target = context.map;
+        if (!added || !target)
+            return;
+        const { id } = current;
+        const { paint, layout } = resolve(current, colors);
+        for (const [name, value] of changedProperties(applied.paint, paint)) {
+            target.setPaintProperty(id, name, (value ?? null));
+        }
+        for (const [name, value] of changedProperties(applied.layout, layout)) {
+            target.setLayoutProperty(id, name, (value ?? null));
+        }
+        if (!deepEqual(applied.filter, current.filter))
+            target.setFilter(id, (current.filter ?? null));
+        const zoom = [current.minZoom ?? 0, current.maxZoom ?? 24];
+        if (!deepEqual(applied.zoom, zoom))
+            target.setLayerZoomRange(id, zoom[0], zoom[1]);
+        if (current.beforeId !== applied.beforeId) {
+            target.moveLayer(id, current.beforeId && target.getLayer(current.beforeId) ? current.beforeId : undefined);
+        }
+        applied = { paint, layout, filter: current.filter, zoom, beforeId: current.beforeId };
+    });
+    // Pointer events. Handlers read the latest props when they fire.
+    $effect(() => {
+        const target = context.map;
+        const id = layerId;
+        if (!added || !target)
+            return;
+        let hovered = null;
+        const clearHover = () => {
+            if (hovered)
+                safely(() => target.setFeatureState(hovered, { hover: false }));
+            hovered = null;
+        };
+        const click = (event) => {
+            if (event.features?.length)
+                props().onClick?.(toEvent(event));
+        };
+        const move = (event) => {
+            const feature = event.features?.[0];
+            if (!feature)
+                return;
+            const current = props();
+            if (current.onClick)
+                target.getCanvas().style.cursor = 'pointer';
+            if (feature.id !== undefined && feature.id !== hovered?.id) {
+                clearHover();
+                hovered = {
+                    source: feature.source,
+                    ...(feature.sourceLayer ? { sourceLayer: feature.sourceLayer } : {}),
+                    id: feature.id,
+                };
+                target.setFeatureState(hovered, { hover: true });
+            }
+            current.onHover?.(toEvent(event));
+        };
+        const leave = () => {
+            target.getCanvas().style.cursor = '';
+            clearHover();
+            props().onHover?.(null);
+        };
+        target.on('click', id, click);
+        target.on('mousemove', id, move);
+        target.on('mouseleave', id, leave);
+        return () => safely(() => {
+            clearHover();
+            target.off('click', id, click);
+            target.off('mousemove', id, move);
+            target.off('mouseleave', id, leave);
+        });
+    });
+    return {
+        get added() {
+            return added;
+        },
+    };
+}

package/dist/maplibre.d.ts

@@ -0,0 +1,19 @@
+import type * as MapLibre from 'maplibre-gl';
+export type MapLibreModule = typeof MapLibre;
+export type MapLibreLoader = () => Promise<unknown> | unknown;
+/** Replaces how MapLibre is loaded. `null` restores the default dynamic import. */
+export declare function setMapLibreLoader(loader: MapLibreLoader | null): void;
+/**
+ * Where MapLibre's web worker is served from. MapLibre 6 ships the worker as its own file and
+ * finds it relative to itself at runtime, which bundlers cannot see — so a bundled app has to
+ * emit the worker and say where it went. With Vite:
+ *
+ *   import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+ *   setMapLibreWorkerUrl(workerUrl);
+ *
+ * Without it, raster layers still draw but GeoJSON and vector tiles never do. MapLibre 5
+ * inlines its worker and needs none of this.
+ */
+export declare function setMapLibreWorkerUrl(url: string | null): void;
+/** Loads MapLibre once. Resolves `null` rather than rejecting when it cannot. */
+export declare function loadMapLibre(): Promise<MapLibreModule | null>;

package/dist/maplibre.js

@@ -0,0 +1,47 @@
+/** MapLibre 6 is named exports only; 5 bundles as a default export too. Accept either. */
+const unwrap = (module) => {
+    const candidate = module;
+    if (typeof candidate?.Map === 'function')
+        return candidate;
+    if (typeof candidate?.default?.Map === 'function') {
+        return candidate.default;
+    }
+    return null;
+};
+const defaultLoader = () => import('maplibre-gl');
+let registered = null;
+let cached = null;
+let workerUrl = null;
+/** Replaces how MapLibre is loaded. `null` restores the default dynamic import. */
+export function setMapLibreLoader(loader) {
+    registered = loader;
+    cached = null;
+}
+/**
+ * Where MapLibre's web worker is served from. MapLibre 6 ships the worker as its own file and
+ * finds it relative to itself at runtime, which bundlers cannot see — so a bundled app has to
+ * emit the worker and say where it went. With Vite:
+ *
+ *   import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+ *   setMapLibreWorkerUrl(workerUrl);
+ *
+ * Without it, raster layers still draw but GeoJSON and vector tiles never do. MapLibre 5
+ * inlines its worker and needs none of this.
+ */
+export function setMapLibreWorkerUrl(url) {
+    workerUrl = url;
+    cached = null;
+}
+/** Loads MapLibre once. Resolves `null` rather than rejecting when it cannot. */
+export function loadMapLibre() {
+    cached ??= Promise.resolve()
+        .then(registered ?? defaultLoader)
+        .then(unwrap)
+        .then((maplibre) => {
+        if (maplibre && workerUrl)
+            maplibre.setWorkerUrl?.(workerUrl);
+        return maplibre;
+    })
+        .catch(() => null);
+    return cached;
+}

package/dist/styles.css

@@ -0,0 +1,10 @@
+/*
+ * MapLibre's own stylesheet, slotted into the `loidolt.vendor` cascade layer. The layer order
+ * is restated first so it holds whichever of this file and `@loidolt/theme-styles` is imported
+ * first: the base resets must not reach MapLibre's controls, and the map styles in
+ * `@loidolt/theme-styles` must be able to restyle them.
+ */
+@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
+  loidolt.utilities, loidolt.a11y;
+
+@import 'maplibre-gl/dist/maplibre-gl.css' layer(loidolt.vendor);

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@loidolt/theme-maps",
+  "version": "0.7.0",
+  "description": "Accessible, themed MapLibre maps for Loidolt applications",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./spatial.worker": {
+      "types": "./dist/core/workers/spatial.worker.d.ts",
+      "default": "./dist/core/workers/spatial.worker.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src/lib -o dist && cp src/styles.css dist/styles.css",
+    "prepack": "npm run build",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run && vitest run --config vitest.config.ssr.ts",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@loidolt/theme-svelte": "^0.7.0",
+    "@loidolt/theme-tokens": "^0.7.0",
+    "rbush": "^4.0.1"
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^5.0.0 || ^6.0.0",
+    "svelte": "^5.33.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.3.0",
+    "@types/rbush": "^4.0.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "jsdom": "^27.0.0",
+    "maplibre-gl": "^6.0.0",
+    "rimraf": "^6.0.1",
+    "svelte": "^5.56.10",
+    "svelte-check": "^4.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.0.0",
+    "vitest-axe": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loidolt/loidolt-theme.git",
+    "directory": "packages/maps"
+  }
+}