@beyonk/svelte-mapbox 12.1.0 → 12.1.3

package/.github/workflows/publish.yml

@@ -5,18 +5,21 @@ on:
     tags:
       - 'v*'
 
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   publish-npm:
     if: startsWith(github.ref, 'refs/tags/v')
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: set up node and pnpm
         run: |
           corepack enable
-          pnpm config set '//registry.npmjs.org/:_authToken' "${{secrets.NPM_TOKEN}}"
           pnpm i
 
       - name: publish

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,18 +1,19 @@
 {
   "name": "@beyonk/svelte-mapbox",
-  "version": "12.1.0",
+  "version": "12.1.3",
   "devDependencies": {
-    "@beyonk/eslint-config": "^8.0.2",
+    "@beyonk/eslint-config": "^9.1.4",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
-    "@sveltejs/kit": "^2.55.0",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/kit": "^2.64.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "eslint": "^9.14.0",
     "eslint-plugin-svelte": "^2.46.0",
-    "svelte": "^5.55.0",
-    "svelte2tsx": "^0.7.23",
-    "typescript": "^5.6.3",
-    "vite": "^8.0.2"
+    "svelte": "^5.56.3",
+    "svelte2tsx": "^0.7.56",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "node": "runtime:>=25.0.0"
   },
   "peerDependencies": {
     "svelte": ">=4.0.0"
@@ -20,8 +21,19 @@
   "exports": {
     ".": "./src/lib/components.js"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/beyonk/svelte-mapbox.git"
+  },
   "types": "./components.d.ts",
   "type": "module",
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": ">=25.0.0",
+      "onFail": "download"
+    }
+  },
   "scripts": {
     "dev": "vite dev --port 3030",
     "build": "vite build",

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  unrs-resolver: true

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' }
@@ -26,7 +28,6 @@ export default function geocoderAttachment (options, { onresults, onresult, onlo
         onresults?.(ev)
       })
       geocoderInstance.on('result', (ev) => {
-        console.log('result', onresult, ev)
         onresult?.(ev)
       })
       geocoderInstance.on('loading', (ev) => {
@@ -41,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()
     }
   }

package/src/lib/map/Map.svelte

@@ -37,7 +37,7 @@
     accessToken,
     style,
     center,
-    zoom,
+    zoom: untrack(() => zoom),
     zoomRate,
     wheelZoomRate,
     version,

package/src/lib/map/Marker.svelte

@@ -3,8 +3,6 @@
   import { contextKey } from '../mapbox.js'
 
   const { getMap, getMapbox } = getContext(contextKey)
-  const map = getMap()
-  const mapbox = getMapbox()
 
   function randomColour () {
     return Math.round(Math.random() * 255)
@@ -38,9 +36,12 @@
   })
 
   onMount(() => {
+    const map = getMap()
+    const mapbox = getMapbox()
+
     const namedParams = Object.assign(
       { offset: markerOffset },
-      element.hasChildNodes() ? { element } : { color }
+      element.children.length > 0 || element.textContent.trim().length > 0 ? { element } : { color }
     )
     marker = new mapbox.Marker(Object.assign(namedParams, markerOptions))
 

package/src/routes/+page.svelte

@@ -107,7 +107,6 @@
                 bind:value={placeName}
                 accessToken={PUBLIC_MAPBOX_TOKEN}
                 onresult={({ result }) => {
-                  console.log('sets center', result.center)
                   mapComponent.setCenter(result.center, 14)
                   place = result
                 }}