@beyonk/svelte-mapbox 12.1.2 → 12.1.3

package/README.md

@@ -173,7 +173,7 @@ The Geocoder is an autocompleting place lookup, which returns a lat and lng for
 </script>
 ```
 
-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 geocoder has six events you can subscribe to: `onloading`, `onresult`, `onresults`, `onclear`, `onerror`, and `onchange` which are [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on)
 
 The most important event is `onresult` which is fired when a user selects an autocomplete result.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyonk/svelte-mapbox",
-  "version": "12.1.2",
+  "version": "12.1.3",
   "devDependencies": {
     "@beyonk/eslint-config": "^9.1.4",
     "@eslint/eslintrc": "^3.1.0",

package/src/lib/asset-loader.js

@@ -4,7 +4,11 @@ function load (assets, cb) {
 
     if (existing) {
       if (type === 'script') {
-        cb()
+        if (window.mapboxgl) {
+          cb()
+        } else {
+          existing.addEventListener('load', () => cb(), { once: true })
+        }
       }
       return
     }

package/src/lib/geocoder/Geocoder.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { untrack } from 'svelte'
   import geocoderAttachment from './geocoder-attachment.js'
 
   let {
@@ -7,7 +8,7 @@
     version = 'v5.1.0',
     types = [ 'country', 'region', 'postcode', 'district', 'place', 'locality', 'neighborhood', 'address' ],
     placeholder = 'Search',
-    value = null,
+    value = $bindable(null),
     customStylesheetUrl = false,
     geocoder = $bindable(),
     onresults,
@@ -16,6 +17,7 @@
     onerror,
     onclear,
     onload,
+    onchange,
     ...rest
   } = $props()
 
@@ -27,17 +29,22 @@
     types: types.join(','),
     placeholder,
     customStylesheetUrl,
-    value
+    value: untrack(() => value)
   }, options))
 
   function init (detail) {
     geocoder = detail.geocoder
   }
+
+  function updateValue (detail) {
+    value = detail.query
+    onchange?.(detail)
+  }
 </script>
 
 <div
   id={fieldId}
-  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload })}
+  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload, onchange: updateValue })}
   onready={init}
   {...rest}
 ></div>

package/src/lib/geocoder/geocoder-attachment.js

@@ -1,8 +1,10 @@
 import { load } from '../asset-loader.js'
 
-export default function geocoderAttachment (options, { onresults, onresult, onloading, onerror, onclear, onready }) {
+export default function geocoderAttachment (options, { onresults, onresult, onloading, onerror, onclear, onready, onchange }) {
   return (element) => {
     let geocoderInstance
+    let inputElement
+    let handleChange
 
     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' }
@@ -40,9 +42,18 @@ export default function geocoderAttachment (options, { onresults, onresult, onlo
       geocoderInstance.on('load', (ev) => {
         onready?.({ ...ev, geocoder: geocoderInstance })
       })
+
+      inputElement = element.querySelector('input')
+      handleChange = (ev) => {
+        onchange({ query: ev.target.value })
+      }
+      inputElement.addEventListener('change', handleChange)
     })
 
     return () => {
+      if (inputElement) {
+        inputElement.removeEventListener('change', handleChange)
+      }
       geocoderInstance && geocoderInstance.remove && geocoderInstance.remove()
     }
   }