@beyonk/svelte-mapbox - npm Package Compare versions

Comparing version 12.1.2 to 12.1.3

package.json

 {
   "name": "@beyonk/svelte-mapbox",
-  "version": "12.1.2",
+  "version": "12.1.3",
   "devDependencies": {
@@ -5,0 +5,0 @@ "@beyonk/eslint-config": "^9.1.4",

README.md

@@ -176,3 +176,3 @@ <a href="https://beyonk.com">
 
-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)
 
@@ -179,0 +179,0 @@ The most important event is `onresult` which is fired when a user selects an autocomplete result.

src/lib/asset-loader.js

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

src/lib/geocoder/geocoder-attachment.js

 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
 
@@ -43,5 +45,14 @@ const resources = [
       })
+
+      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()
@@ -48,0 +59,0 @@ }

src/lib/geocoder/Geocoder.svelte

 <script>
+  import { untrack } from 'svelte'
   import geocoderAttachment from './geocoder-attachment.js'
@@ -10,3 +11,3 @@
     placeholder = 'Search',
-    value = null,
+    value = $bindable(null),
     customStylesheetUrl = false,
@@ -20,2 +21,3 @@ geocoder = $bindable(),
     onload,
+    onchange,
     ...rest
@@ -32,3 +34,3 @@ } = $props()
     customStylesheetUrl,
-    value
+    value: untrack(() => value)
   }, options))
@@ -39,2 +41,7 @@
   }
+
+  function updateValue (detail) {
+    value = detail.query
+    onchange?.(detail)
+  }
 </script>
@@ -44,3 +51,3 @@
   id={fieldId}
-  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload })}
+  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload, onchange: updateValue })}
   onready={init}
@@ -47,0 +54,0 @@ {...rest}

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

47653

1.45%

Lines of code

850

1.67%

No dependency changes