@nuxt/scripts 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/runtime/components/MapLibre/ScriptMapLibreGeoJson.vue

@@ -4,17 +4,111 @@
 
 <script setup>
 import { toRaw, watch } from "vue";
-import { useMapLibreResource } from "./useMapLibreResource";
+import { reportMapLibreResourceError, useMapLibreResource } from "./useMapLibreResource";
 const props = defineProps({
   sourceId: { type: String, required: true },
   data: { type: null, required: true },
   sourceOptions: { type: Object, required: false },
   layers: { type: Array, required: true },
-  beforeId: { type: String, required: false }
+  beforeId: { type: String, required: false },
+  cursor: { type: String, required: false }
 });
+const emit = defineEmits(["error", "click", "mouseenter", "mouseleave"]);
 let ownedLayerIds = [];
 let ownedSourceId;
+let appliedStructure;
+let appliedStyleSignature;
+let appliedStyles = [];
+let layerSubscriptions = [];
+let restoreCursor;
+let isPointerOverLayer = false;
+let hoveredLayerKey = "";
+let pendingHoverKey = "";
+let isStyleMutable = false;
+let hasPendingSync = false;
+function layerStructure(layer) {
+  const structure = { ...layer };
+  delete structure.paint;
+  delete structure.layout;
+  delete structure.filter;
+  return structure;
+}
+function structureSignature() {
+  return JSON.stringify([
+    props.sourceId,
+    props.sourceOptions ?? null,
+    props.beforeId ?? null,
+    props.layers.map(layerStructure)
+  ]);
+}
+function readLayerStyles() {
+  return props.layers.map((layer) => {
+    const source = layer;
+    return {
+      paint: source.paint ?? {},
+      layout: source.layout ?? {},
+      filter: source.filter
+    };
+  });
+}
+function styleSignature() {
+  return JSON.stringify(readLayerStyles());
+}
+function detachLayerStyles(signature) {
+  return JSON.parse(signature);
+}
+function applyCursor(map, cursor) {
+  const canvas = map.getCanvas();
+  if (!canvas)
+    return;
+  if (cursor === void 0) {
+    if (restoreCursor !== void 0)
+      canvas.style.cursor = restoreCursor;
+    restoreCursor = void 0;
+    return;
+  }
+  restoreCursor ??= canvas.style.cursor;
+  canvas.style.cursor = cursor;
+}
+function unbindLayerEvents(map) {
+  for (const subscription of layerSubscriptions)
+    subscription.unsubscribe();
+  layerSubscriptions = [];
+  if (isPointerOverLayer)
+    pendingHoverKey = hoveredLayerKey;
+  isPointerOverLayer = false;
+  if (restoreCursor !== void 0)
+    applyCursor(map, void 0);
+}
+function bindLayerEvents(map, carryHover) {
+  unbindLayerEvents(map);
+  const carriedHoverKey = pendingHoverKey;
+  pendingHoverKey = "";
+  if (!ownedLayerIds.length)
+    return;
+  const layerIds = [...ownedLayerIds];
+  const layerKey = layerIds.join("\n");
+  layerSubscriptions = [
+    map.on("click", layerIds, (event) => emit("click", event)),
+    map.on("mouseenter", layerIds, (event) => {
+      isPointerOverLayer = true;
+      hoveredLayerKey = layerKey;
+      applyCursor(map, props.cursor || void 0);
+      emit("mouseenter", event);
+    }),
+    map.on("mouseleave", layerIds, (event) => {
+      isPointerOverLayer = false;
+      applyCursor(map, void 0);
+      emit("mouseleave", event);
+    })
+  ];
+  if (carryHover && carriedHoverKey === layerKey) {
+    isPointerOverLayer = true;
+    applyCursor(map, props.cursor || void 0);
+  }
+}
 function removeOwnedResources(map) {
+  unbindLayerEvents(map);
   for (const layerId of [...ownedLayerIds].reverse()) {
     if (map.getLayer(layerId))
       map.removeLayer(layerId);
@@ -23,10 +117,18 @@ function removeOwnedResources(map) {
   if (ownedSourceId && map.getSource(ownedSourceId))
     map.removeSource(ownedSourceId);
   ownedSourceId = void 0;
+  appliedStructure = void 0;
+  appliedStyleSignature = void 0;
+  appliedStyles = [];
 }
-function syncResources(map) {
-  if (!map.isStyleLoaded())
+function syncResources(map, carryHover = false) {
+  if (!isStyleMutable && map.isStyleLoaded() !== true) {
+    appliedStructure = void 0;
+    appliedStyleSignature = void 0;
+    hasPendingSync = true;
     return;
+  }
+  hasPendingSync = false;
   removeOwnedResources(map);
   const sourceId = props.sourceId;
   try {
@@ -44,26 +146,93 @@ function syncResources(map) {
       map.addLayer(nextLayer, props.beforeId);
       ownedLayerIds.push(nextLayer.id);
     }
+    appliedStructure = structureSignature();
+    appliedStyleSignature = styleSignature();
+    appliedStyles = detachLayerStyles(appliedStyleSignature);
+    bindLayerEvents(map, carryHover);
   } catch (error) {
     removeOwnedResources(map);
     throw error;
   }
 }
+function applyStyleBlock(before, after, set) {
+  for (const name of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+    if (JSON.stringify(before[name]) !== JSON.stringify(after[name]))
+      set(name, after[name]);
+  }
+}
+function updateLayerStyles(map) {
+  const signature = styleSignature();
+  const nextStyles = detachLayerStyles(signature);
+  nextStyles.forEach((next, index) => {
+    const before = appliedStyles[index];
+    const layerId = ownedLayerIds[index];
+    if (!before || !layerId || !map.getLayer(layerId))
+      return;
+    applyStyleBlock(before.paint, next.paint, (name, value) => {
+      map.setPaintProperty(layerId, name, value);
+    });
+    applyStyleBlock(before.layout, next.layout, (name, value) => {
+      map.setLayoutProperty(layerId, name, value);
+    });
+    if (JSON.stringify(before.filter) !== JSON.stringify(next.filter))
+      map.setFilter(layerId, next.filter);
+  });
+  if (isPointerOverLayer) {
+    isPointerOverLayer = false;
+    applyCursor(map, void 0);
+  }
+  appliedStyles = nextStyles;
+  appliedStyleSignature = signature;
+}
+function trySyncResources(map, carryHover = false) {
+  try {
+    syncResources(map, carryHover);
+  } catch (error) {
+    reportMapLibreResourceError(error, (failure) => emit("error", failure));
+  }
+}
+function tryUpdateLayerStyles(map) {
+  try {
+    updateLayerStyles(map);
+  } catch (error) {
+    reportMapLibreResourceError(error, (failure) => emit("error", failure));
+  }
+}
 const geoJson = useMapLibreResource({
   create({ map }) {
-    const onStyleLoad = () => syncResources(map);
+    isStyleMutable = map.isStyleLoaded() === true;
+    const onStyleLoad = () => {
+      isStyleMutable = true;
+      trySyncResources(map, true);
+    };
     const onLoad = () => {
+      isStyleMutable = true;
       if (!ownedSourceId)
-        syncResources(map);
+        trySyncResources(map);
+    };
+    const onStyleDataLoading = () => {
+      isStyleMutable = false;
+      hasPendingSync = true;
+    };
+    const onIdle = () => {
+      isStyleMutable = true;
+      if (hasPendingSync)
+        trySyncResources(map);
     };
     map.on("style.load", onStyleLoad);
     map.on("load", onLoad);
-    syncResources(map);
-    return { map, onLoad, onStyleLoad };
+    map.on("styledataloading", onStyleDataLoading);
+    map.on("idle", onIdle);
+    trySyncResources(map);
+    return { map, onLoad, onStyleLoad, onStyleDataLoading, onIdle };
   },
+  onError: (error) => emit("error", error),
   cleanup(resource) {
     resource.map.off("load", resource.onLoad);
     resource.map.off("style.load", resource.onStyleLoad);
+    resource.map.off("styledataloading", resource.onStyleDataLoading);
+    resource.map.off("idle", resource.onIdle);
     removeOwnedResources(resource.map);
   }
 });
@@ -72,10 +241,23 @@ watch(() => props.data, (data) => {
   if (source?.type === "geojson")
     source.setData(toRaw(data));
 }, { deep: 2 });
-watch(() => [props.sourceId, props.layers, props.sourceOptions, props.beforeId], () => {
-  if (geoJson.value)
-    syncResources(geoJson.value.map);
-}, { deep: 3 });
+watch(() => props.cursor, (cursor) => {
+  if (isPointerOverLayer && geoJson.value)
+    applyCursor(geoJson.value.map, cursor || void 0);
+});
+watch(structureSignature, (structure) => {
+  if (geoJson.value && structure !== appliedStructure)
+    trySyncResources(geoJson.value.map);
+});
+watch(styleSignature, (signature) => {
+  const map = geoJson.value?.map;
+  if (!map || signature === appliedStyleSignature)
+    return;
+  if (structureSignature() === appliedStructure)
+    tryUpdateLayerStyles(map);
+  else
+    trySyncResources(map);
+});
 defineExpose({ geoJson });
 </script>
 

package/dist/runtime/components/MapLibre/ScriptMapLibreGeoJson.vue.d.ts

@@ -1,39 +1,18 @@
-import type { GeoJSON } from 'geojson';
 import type * as MapLibreGl from 'maplibre-gl';
-import type * as MapLibre from 'maplibre-gl';
-export type ScriptMapLibreGeoJsonLayer = Omit<MapLibre.LayerSpecification, 'source'> & {
-    /** Override the component's source ID for this layer. */
-    source?: string;
-};
-export interface ScriptMapLibreGeoJsonResource {
-    map: MapLibre.Map;
-    onLoad: () => void;
-    onStyleLoad: () => void;
-}
+import type { ScriptMapLibreGeoJsonProps, ScriptMapLibreGeoJsonResource } from './types.js';
+export type { ScriptMapLibreGeoJsonEmits, ScriptMapLibreGeoJsonLayer, ScriptMapLibreGeoJsonProps, ScriptMapLibreGeoJsonResource, } from './types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** MapLibre source ID. Changing it rebuilds the owned source and layers. */
-    sourceId: string;
-    /** Inline GeoJSON data or a URL returning GeoJSON. */
-    data: GeoJSON | string;
-    /** GeoJSON source options. `type` and `data` are supplied by the component. */
-    sourceOptions?: Omit<MapLibreGl.GeoJSONSourceSpecification, "type" | "data">;
-    /** Style layers backed by this source. */
-    layers: ScriptMapLibreGeoJsonLayer[];
-    /** Existing layer ID before which the layers are inserted. */
-    beforeId?: string;
-}, {
+declare const __VLS_export: import("vue").DefineComponent<ScriptMapLibreGeoJsonProps, {
     geoJson: import("vue").ShallowRef<ScriptMapLibreGeoJsonResource | undefined>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /** MapLibre source ID. Changing it rebuilds the owned source and layers. */
-    sourceId: string;
-    /** Inline GeoJSON data or a URL returning GeoJSON. */
-    data: GeoJSON | string;
-    /** GeoJSON source options. `type` and `data` are supplied by the component. */
-    sourceOptions?: Omit<MapLibreGl.GeoJSONSourceSpecification, "type" | "data">;
-    /** Style layers backed by this source. */
-    layers: ScriptMapLibreGeoJsonLayer[];
-    /** Existing layer ID before which the layers are inserted. */
-    beforeId?: string;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => any;
+    click: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    mouseenter: (event: MapLibreGl.MapLayerMouseEvent) => any;
+    mouseleave: (event: MapLibreGl.MapLayerMouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptMapLibreGeoJsonProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    onClick?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onMouseenter?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+    onMouseleave?: ((event: MapLibreGl.MapLayerMouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MapLibre/ScriptMapLibreMap.d.vue.ts

@@ -1,119 +1,55 @@
 import type * as MapLibre from 'maplibre-gl';
-import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
-import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+import type { ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots } from './types.js';
+export type { ScriptMapLibreMapEmits, ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots, } from './types.js';
 export { MAPLIBRE_MAP_INJECTION_KEY } from './useMapLibreResource.js';
-export interface ScriptMapLibreMapProps {
-    /**
-     * Defines when the MapLibre script loads.
-     * @default 'visible'
-     */
-    trigger?: ElementScriptTrigger;
-    /** MapLibre style URL or inline style specification. */
-    mapStyle: string | MapLibre.StyleSpecification;
-    /** Initial and reactively controlled map center. */
-    center: MapLibre.LngLatLike;
-    /** Initial and reactively controlled zoom level. @default 12 */
-    zoom?: number;
-    /** Initial and reactively controlled bearing in degrees. @default 0 */
-    bearing?: number;
-    /** Initial and reactively controlled pitch in degrees. @default 0 */
-    pitch?: number;
-    /** Options passed to `new maplibregl.Map()`. Dedicated props take precedence. */
-    options?: Omit<MapLibre.MapOptions, 'container'>;
-    /** Inject MapLibre's stylesheet when the script begins loading. @default true */
-    injectStyles?: boolean;
-    /** Custom MapLibre stylesheet URL. */
-    stylesheetUrl?: string;
-    /** Worker URL passed to `maplibregl.setWorkerUrl()`. */
-    workerUrl?: string;
-    /** Width reserved before the map loads. @default 640 */
-    width?: number | string;
-    /** Height reserved before the map loads. @default 400 */
-    height?: number | string;
-    /** Accessible name for an interactive map. @default 'Interactive map' */
-    ariaLabel?: string;
-    /** Disable map input and remove it from the accessibility tree when decorative. @default true */
-    interactive?: boolean;
-    /** Attributes applied to the outer layout container. */
-    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
-}
-export interface ScriptMapLibreMapExpose {
-    maplibre: ShallowRef<typeof MapLibre | undefined>;
-    map: ShallowRef<MapLibre.Map | undefined>;
-    load: () => Promise<unknown> | unknown;
-}
-export interface ScriptMapLibreMapEmits {
-    'ready': [payload: ScriptMapLibreMapExpose];
-    'error': [error: Error];
-    'click': [event: MapLibre.MapEventType['click']];
-    'move': [event: MapLibre.MapEventType['move']];
-    'moveend': [event: MapLibre.MapEventType['moveend']];
-    'zoom': [event: MapLibre.MapEventType['zoom']];
-    'zoomend': [event: MapLibre.MapEventType['zoomend']];
-    'rotate': [event: MapLibre.MapEventType['rotate']];
-    'rotateend': [event: MapLibre.MapEventType['rotateend']];
-    'pitch': [event: MapLibre.MapEventType['pitch']];
-    'pitchend': [event: MapLibre.MapEventType['pitchend']];
-    'update:center': [center: MapLibre.LngLat];
-    'update:zoom': [zoom: number];
-    'update:bearing': [bearing: number];
-    'update:pitch': [pitch: number];
-}
-export interface ScriptMapLibreMapSlots {
-    default?: () => any;
-    loading?: () => any;
-    awaitingLoad?: () => any;
-    error?: (props: {
-        error: Error;
-    }) => any;
-    placeholder?: () => any;
-    /** Text or links that expose the canvas map's essential information to assistive technology. */
-    description?: () => any;
-}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptMapLibreMapProps, ScriptMapLibreMapExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => any;
     ready: (payload: ScriptMapLibreMapExpose) => any;
+    load: (event: MapLibre.MapLibreEvent<unknown>) => any;
     click: (event: MapLibre.MapMouseEvent) => any;
-    move: (event: MapLibre.MapMovementEvent) => any;
     zoom: (event: MapLibre.MapMovementEvent) => any;
-    rotate: (event: MapLibre.MapMovementEvent) => any;
-    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    pitch: (event: MapLibre.MapMovementEvent) => any;
+    move: (event: MapLibre.MapMovementEvent) => any;
     moveend: (event: MapLibre.MapMovementEvent) => any;
-    "update:center": (center: MapLibre.LngLat) => any;
-    "update:zoom": (zoom: number) => any;
+    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    rotate: (event: MapLibre.MapMovementEvent) => any;
     rotateend: (event: MapLibre.MapMovementEvent) => any;
-    pitch: (event: MapLibre.MapMovementEvent) => any;
     pitchend: (event: MapLibre.MapMovementEvent) => any;
+    "update:center": (center: MapLibre.LngLat) => any;
+    "update:zoom": (zoom: number) => any;
+    styleload: (event: MapLibre.MapStyleLoadEvent) => any;
     "update:bearing": (bearing: number) => any;
     "update:pitch": (pitch: number) => any;
 }, string, import("vue").PublicProps, Readonly<ScriptMapLibreMapProps> & Readonly<{
     onError?: ((error: Error) => any) | undefined;
     onReady?: ((payload: ScriptMapLibreMapExpose) => any) | undefined;
+    onLoad?: ((event: MapLibre.MapLibreEvent<unknown>) => any) | undefined;
     onClick?: ((event: MapLibre.MapMouseEvent) => any) | undefined;
-    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onZoom?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onMoveend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
-    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onRotateend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onPitchend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onStyleload?: ((event: MapLibre.MapStyleLoadEvent) => any) | undefined;
     "onUpdate:bearing"?: ((bearing: number) => any) | undefined;
     "onUpdate:pitch"?: ((pitch: number) => any) | undefined;
 }>, {
-    trigger: ElementScriptTrigger;
+    trigger: import("../../types.js").ElementScriptTrigger;
     injectStyles: boolean;
     width: number | string;
     height: number | string;
-    zoom: number;
-    ariaLabel: string;
     interactive: boolean;
-    pitch: number;
+    zoom: number;
     bearing: number;
+    pitch: number;
+    ariaLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptMapLibreMapSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/MapLibre/ScriptMapLibreMap.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   interactive: { type: Boolean, required: false, default: true },
   rootAttrs: { type: Object, required: false }
 });
-const emit = defineEmits(["ready", "error", "click", "move", "moveend", "zoom", "zoomend", "rotate", "rotateend", "pitch", "pitchend", "update:center", "update:zoom", "update:bearing", "update:pitch"]);
+const emit = defineEmits(["ready", "error", "load", "styleload", "click", "move", "moveend", "zoom", "zoomend", "rotate", "rotateend", "pitch", "pitchend", "update:center", "update:zoom", "update:bearing", "update:pitch"]);
 const slots = defineSlots();
 const rootEl = useTemplateRef("rootEl");
 const mapEl = useTemplateRef("mapEl");
@@ -48,13 +48,24 @@ onError((error) => {
   loadError.value = error ?? new Error("MapLibre failed to load");
   emit("error", loadError.value);
 });
-const exposed = { maplibre, map, load };
+function fitBounds(bounds, options) {
+  map.value?.fitBounds(bounds, options);
+}
+function easeTo(options) {
+  map.value?.easeTo(options);
+}
+function flyTo(options) {
+  map.value?.flyTo(options);
+}
+const exposed = { maplibre, map, load, fitBounds, easeTo, flyTo };
 defineExpose(exposed);
 provide(MAPLIBRE_MAP_INJECTION_KEY, {
   maplibre,
   map
 });
 function bindMapEvents(instance) {
+  instance.on("load", (event) => emit("load", event));
+  instance.on("style.load", (event) => emit("styleload", event));
   instance.on("click", (event) => emit("click", event));
   instance.on("move", (event) => emit("move", event));
   instance.on("moveend", (event) => {
@@ -77,8 +88,9 @@ function bindMapEvents(instance) {
     emit("update:pitch", instance.getPitch());
   });
   instance.on("error", (event) => {
-    loadError.value = event.error;
-    emit("error", event.error);
+    const error = event.error instanceof Error ? event.error : new Error(event.error.message, { cause: event.error });
+    loadError.value = error;
+    emit("error", error);
   });
 }
 onMounted(() => {

package/dist/runtime/components/MapLibre/ScriptMapLibreMap.vue.d.ts

@@ -1,119 +1,55 @@
 import type * as MapLibre from 'maplibre-gl';
-import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
-import type { ElementScriptTrigger } from '#nuxt-scripts/types';
+import type { ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots } from './types.js';
+export type { ScriptMapLibreMapEmits, ScriptMapLibreMapExpose, ScriptMapLibreMapProps, ScriptMapLibreMapSlots, } from './types.js';
 export { MAPLIBRE_MAP_INJECTION_KEY } from './useMapLibreResource.js';
-export interface ScriptMapLibreMapProps {
-    /**
-     * Defines when the MapLibre script loads.
-     * @default 'visible'
-     */
-    trigger?: ElementScriptTrigger;
-    /** MapLibre style URL or inline style specification. */
-    mapStyle: string | MapLibre.StyleSpecification;
-    /** Initial and reactively controlled map center. */
-    center: MapLibre.LngLatLike;
-    /** Initial and reactively controlled zoom level. @default 12 */
-    zoom?: number;
-    /** Initial and reactively controlled bearing in degrees. @default 0 */
-    bearing?: number;
-    /** Initial and reactively controlled pitch in degrees. @default 0 */
-    pitch?: number;
-    /** Options passed to `new maplibregl.Map()`. Dedicated props take precedence. */
-    options?: Omit<MapLibre.MapOptions, 'container'>;
-    /** Inject MapLibre's stylesheet when the script begins loading. @default true */
-    injectStyles?: boolean;
-    /** Custom MapLibre stylesheet URL. */
-    stylesheetUrl?: string;
-    /** Worker URL passed to `maplibregl.setWorkerUrl()`. */
-    workerUrl?: string;
-    /** Width reserved before the map loads. @default 640 */
-    width?: number | string;
-    /** Height reserved before the map loads. @default 400 */
-    height?: number | string;
-    /** Accessible name for an interactive map. @default 'Interactive map' */
-    ariaLabel?: string;
-    /** Disable map input and remove it from the accessibility tree when decorative. @default true */
-    interactive?: boolean;
-    /** Attributes applied to the outer layout container. */
-    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
-}
-export interface ScriptMapLibreMapExpose {
-    maplibre: ShallowRef<typeof MapLibre | undefined>;
-    map: ShallowRef<MapLibre.Map | undefined>;
-    load: () => Promise<unknown> | unknown;
-}
-export interface ScriptMapLibreMapEmits {
-    'ready': [payload: ScriptMapLibreMapExpose];
-    'error': [error: Error];
-    'click': [event: MapLibre.MapEventType['click']];
-    'move': [event: MapLibre.MapEventType['move']];
-    'moveend': [event: MapLibre.MapEventType['moveend']];
-    'zoom': [event: MapLibre.MapEventType['zoom']];
-    'zoomend': [event: MapLibre.MapEventType['zoomend']];
-    'rotate': [event: MapLibre.MapEventType['rotate']];
-    'rotateend': [event: MapLibre.MapEventType['rotateend']];
-    'pitch': [event: MapLibre.MapEventType['pitch']];
-    'pitchend': [event: MapLibre.MapEventType['pitchend']];
-    'update:center': [center: MapLibre.LngLat];
-    'update:zoom': [zoom: number];
-    'update:bearing': [bearing: number];
-    'update:pitch': [pitch: number];
-}
-export interface ScriptMapLibreMapSlots {
-    default?: () => any;
-    loading?: () => any;
-    awaitingLoad?: () => any;
-    error?: (props: {
-        error: Error;
-    }) => any;
-    placeholder?: () => any;
-    /** Text or links that expose the canvas map's essential information to assistive technology. */
-    description?: () => any;
-}
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptMapLibreMapProps, ScriptMapLibreMapExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => any;
     ready: (payload: ScriptMapLibreMapExpose) => any;
+    load: (event: MapLibre.MapLibreEvent<unknown>) => any;
     click: (event: MapLibre.MapMouseEvent) => any;
-    move: (event: MapLibre.MapMovementEvent) => any;
     zoom: (event: MapLibre.MapMovementEvent) => any;
-    rotate: (event: MapLibre.MapMovementEvent) => any;
-    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    pitch: (event: MapLibre.MapMovementEvent) => any;
+    move: (event: MapLibre.MapMovementEvent) => any;
     moveend: (event: MapLibre.MapMovementEvent) => any;
-    "update:center": (center: MapLibre.LngLat) => any;
-    "update:zoom": (zoom: number) => any;
+    zoomend: (event: MapLibre.MapMovementEvent) => any;
+    rotate: (event: MapLibre.MapMovementEvent) => any;
     rotateend: (event: MapLibre.MapMovementEvent) => any;
-    pitch: (event: MapLibre.MapMovementEvent) => any;
     pitchend: (event: MapLibre.MapMovementEvent) => any;
+    "update:center": (center: MapLibre.LngLat) => any;
+    "update:zoom": (zoom: number) => any;
+    styleload: (event: MapLibre.MapStyleLoadEvent) => any;
     "update:bearing": (bearing: number) => any;
     "update:pitch": (pitch: number) => any;
 }, string, import("vue").PublicProps, Readonly<ScriptMapLibreMapProps> & Readonly<{
     onError?: ((error: Error) => any) | undefined;
     onReady?: ((payload: ScriptMapLibreMapExpose) => any) | undefined;
+    onLoad?: ((event: MapLibre.MapLibreEvent<unknown>) => any) | undefined;
     onClick?: ((event: MapLibre.MapMouseEvent) => any) | undefined;
-    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onZoom?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onMove?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onMoveend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
-    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onZoomend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    onRotate?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onRotateend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
-    onPitch?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
     onPitchend?: ((event: MapLibre.MapMovementEvent) => any) | undefined;
+    "onUpdate:center"?: ((center: MapLibre.LngLat) => any) | undefined;
+    "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
+    onStyleload?: ((event: MapLibre.MapStyleLoadEvent) => any) | undefined;
     "onUpdate:bearing"?: ((bearing: number) => any) | undefined;
     "onUpdate:pitch"?: ((pitch: number) => any) | undefined;
 }>, {
-    trigger: ElementScriptTrigger;
+    trigger: import("../../types.js").ElementScriptTrigger;
     injectStyles: boolean;
     width: number | string;
     height: number | string;
-    zoom: number;
-    ariaLabel: string;
     interactive: boolean;
-    pitch: number;
+    zoom: number;
     bearing: number;
+    pitch: number;
+    ariaLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptMapLibreMapSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {