fix event dispatching

Author: antony

README.md

@@ -30,17 +30,17 @@ npm install --save-dev @beyonk/svelte-mapbox
 
 The container component is the map, and there are a variety of components which go on the map.
 
-```jsx
+```svelte
 <Map
   accessToken="<your api key>" // add your api key here
   bind:this={mapComponent} // Get reference to your map component to use methods
-  on:recentre={e => console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events
+  onrecentre={e => console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events
   options={{ scrollZoom: false }} // // add arbitrary options to the map from the mapbox api
 >
   <Earthquakes /> // Any custom component you create or want here - see marker example
   <Marker lat={someLat} lng={someLng} color="rgb(255,255,255)" label="some marker label" popupClassName="class-name" /> // built in Marker component
   <NavigationControl />
-  <GeolocateControl options={{ some: 'control-option' }} on:eventname={eventHandler} />
+  <GeolocateControl options={{ some: 'control-option' }} oneventname={eventHandler} />
   <ScaleControl />
 </Map>
 
@@ -73,13 +73,13 @@ The container component is the map, and there are a variety of components which
 
 By default, markers are typical map pins to which you can pass a color property.
 
-```jsx
+```svelte
 <Marker color={brandColour} />
 ```
 
 You may also create a custom pin with the default slot.
 
-```jsx
+```svelte
 <Marker
 lat={waypoint.geo.lat}
 lng={waypoint.geo.lng}
@@ -98,13 +98,13 @@ lng={waypoint.geo.lng}
 ### Marker Popups
 By default a popup is revealed when you click a pin.  It is populated with text provided in the label property.
 
-```jsx
+```svelte
 <Marker label={markerText} />
 ```
 
 To indicate interactivity, you may target the marker with some custom CSS:
 
-```jsx
+```svelte
 <style>
     :global(.mapboxgl-marker){
       cursor: pointer;
@@ -114,13 +114,13 @@ To indicate interactivity, you may target the marker with some custom CSS:
 
 Optionally, disable the popup with the `popup={false}` property:
 
-```jsx
+```svelte
 <Marker popup={false} />
 ```
 
 You may alternatively pass a custom DOM element to the marker to use as a popup. 
 
-```jsx
+```svelte
 <Marker lat={pin.coordinates.latitude} lng={pin.coordinates.longitude}>
     <div class="content" slot="popup">
       <h3>{pin.name}</h3>
@@ -139,7 +139,7 @@ This also means that if you bind these properties to a variable, that variable w
 
 This is often easier than waiting for events such as `recentre` or `zoom` to be fired, to update markers and similar:
 
-```jsx
+```svelte
 <Map accessToken="<your api key>" bind:center bind:zoom>
   <Marker bind:lat bind:lng />
 </Map>
@@ -165,19 +165,19 @@ map is ready in your browser when you call it this way.
 
 The Geocoder is an autocompleting place lookup, which returns a lat and lng for a place.
 
-```jsx
-<Geocoder accessToken="<your api key>" on:result={somePlaceChangeFunction} />
+```svelte
+<Geocoder accessToken="<your api key>" onresult={somePlaceChangeFunction} />
 
 <script>
   import { Geocoder } from '@beyonk/svelte-mapbox'
 </script>
 ```
 
-The geocoder has five events you can subscribe to: `on:loading`, `on:result`, `on:results`, `on:clear`, and `on:error` which are [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on)
+The geocoder has five events you can subscribe to: `onloading`, `onresult`, `onresults`, `onclear`, and `onerror` which are [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on)
 
-The most important event is `on:result` which is fired when a user selects an autocomplete result.
+The most important event is `onresult` which is fired when a user selects an autocomplete result.
 
-There is a sixth event specific to this library, which is `on:ready`, which is fired when the component is ready for use. You can likely ignore it.
+There is a sixth event specific to this library, which is `onready`, which is fired when the component is ready for use. You can likely ignore it.
 
 ## Custom CSS
 

src/lib/event-bindings.js

@@ -10,6 +10,12 @@
     value = null,
     customStylesheetUrl = false,
     geocoder = $bindable(),
+    onresults,
+    onresult,
+    onloading,
+    onerror,
+    onclear,
+    onload,
     ...rest
   } = $props()
 
@@ -24,15 +30,14 @@
     value
   }, options))
 
-  function init (e) {
-    geocoder = e.detail.geocoder
-    onready?.()
+  function init (detail) {
+    geocoder = detail.geocoder
   }
 </script>
 
 <div
   id={fieldId}
-  {@attach geocoderAttachment(optionsWithDefaults)}
+  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload })}
   onready={init}
   {...rest}
 ></div>

src/lib/geocoder/Geocoder.svelte

@@ -1,10 +1,8 @@
 import { load } from '../asset-loader.js'
-import { bindEvents } from '../event-bindings.js'
 
-export default function geocoderAttachment (options) {
+export default function geocoderAttachment (options, { onresults, onresult, onloading, onerror, onclear, onready }) {
   return (element) => {
     let geocoderInstance
-    let unbind = () => {}
 
     const resources = [
       { type: 'script', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.min.js`, id: 'byk-gc-js' }
@@ -23,33 +21,30 @@ export default function geocoderAttachment (options) {
       if (options.value) {
         geocoderInstance.setInput(options.value)
       }
-      unbind = bindEvents(geocoderInstance, handlers, false, element)
+
+      geocoderInstance.on('results', (ev) => {
+        onresults?.(ev)
+      })
+      geocoderInstance.on('result', (ev) => {
+        console.log('result', onresult, ev)
+        onresult?.(ev)
+      })
+      geocoderInstance.on('loading', (ev) => {
+        onloading?.(ev)
+      })
+      geocoderInstance.on('error', (ev) => {
+        onerror?.(ev)
+      })
+      geocoderInstance.on('clear', (ev) => {
+        onclear?.(ev)
+      })
+      geocoderInstance.on('load', (ev) => {
+        onready?.({ ...ev, geocoder: geocoderInstance })
+      })
     })
 
     return () => {
-      unbind()
       geocoderInstance && geocoderInstance.remove && geocoderInstance.remove()
     }
   }
 }
-
-const handlers = {
-  results: (el, ev) => {
-    return [ 'results', ev ]
-  },
-  result: (el, ev) => {
-    return [ 'result', ev ]
-  },
-  loading: (el, ev) => {
-    return [ 'loading', ev ]
-  },
-  error: (el, ev) => {
-    return [ 'error', ev ]
-  },
-  clear: (el, ev) => {
-    return [ 'clear', ev ]
-  },
-  load: el => {
-    return [ 'ready', { geocoder: el } ]
-  }
-}

src/lib/geocoder/geocoder-attachment.js

@@ -5,7 +5,6 @@
   import { EventQueue } from '../queue.svelte.js'
 
   let {
-    map = $bindable(null),
     version = 'v3.20.0',
     center = [ 0, 0 ],
     zoom = $bindable(9),
@@ -17,13 +16,24 @@
     style = 'mapbox://styles/mapbox/streets-v11',
     children,
     onready,
+    ondragend,
+    ondrag,
+    onmoveend,
+    onzoomstart,
+    onzoom,
+    onzoomend,
     ...rest
   } = $props()
 
+  let map = $state()
   let mapbox = $state()
 
+  setContext(contextKey, {
+    getMap: () => map,
+    getMapbox: () => mapbox
+  })
 
-  const optionsWithDefaults = {
+  const optionsWithDefaults = $derived.by(() => Object.assign({
     accessToken,
     style,
     center,
@@ -32,26 +42,21 @@
     wheelZoomRate,
     version,
     customStylesheetUrl,
-    map,
     ...options
-  }
-
-  setContext(contextKey, {
-    getMap: () => map,
-    getMapbox: () => mapbox
-  })
+  }))
 
   const queue = new EventQueue()
 
-  function init (e) {
-    map = e.detail.map
-    mapbox = e.detail.mapbox
+  function init (detail) {
+    map = detail.map
+    mapbox = detail.mapbox
     queue.start(map)
-    onready?.()
 
     map.on('zoomend', (e) => {
       zoom = map.getZoom()
     })
+
+    onready?.({ map, mapbox })
   }
 
   $effect(() => {
@@ -99,8 +104,10 @@
 </script>
 
 <div
-  {@attach mapAttachment(optionsWithDefaults)}
-  onready={init}
+  {@attach mapAttachment(
+      optionsWithDefaults,
+      { onready: init, ondragend, ondrag, onmoveend, onzoomstart, onzoom, onzoomend }
+    )}
   {...rest}
   role="presentation"
 >

src/lib/map/Map.svelte

@@ -1,29 +1,24 @@
 <script>
   import { getContext, onMount, untrack } from 'svelte'
   import { contextKey } from '../../mapbox.js'
-  import { bindEvents } from '../../event-bindings.js'
 
   const { getMap, getMapbox } = getContext(contextKey)
   const map = getMap()
   const mapbox = getMapbox()
 
-  let { position = 'top-left', options = {}, ...rest } = $props()
+  let { position = 'top-left', options = {}, onerror, ongeolocate, onoutofmaxbounds, ontrackuserlocationend, ontrackuserlocationstart, ...rest } = $props()
 
   let dispatcher = $state()
 
-  const handlers = {
-    error: (el, ev) => [ 'error', ev ],
-    geolocate: (el, ev) => [ 'geolocate', ev ],
-    outofmaxbounds: (el, ev) => [ 'outofmaxbounds', ev ],
-    trackuserlocationend: (el, ev) => [ 'trackuserlocationend', ev ],
-    trackuserlocationstart: (el, ev) => [ 'trackuserlocationstart', ev ]
-  }
-
   const geolocate = new mapbox.GeolocateControl(untrack(() => options))
   map.addControl(geolocate, untrack(() => position))
 
   onMount(() => {
-    return bindEvents(geolocate, handlers, mapbox, dispatcher)
+    geolocate.on('error', onerror)
+    geolocate.on('geolocate', ongeolocate)
+    geolocate.on('outofmaxbounds', onoutofmaxbounds)
+    geolocate.on('trackuserlocationend', ontrackuserlocationend)
+    geolocate.on('trackuserlocationstart', ontrackuserlocationstart)
   })
 
   export function trigger () {