[GLJS-1390] Modernize GL Geocoder

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,4 +3,4 @@
  - [ ] briefly describe the changes in this PR
  - [ ] write tests for all new functionality
  - [ ] run `npm run docs` and commit changes to API.md
- - [ ] update CHANGELOG.md with changes under `main` heading before merging
+ - [ ] update CHANGELOG.md with changes under `HEAD` heading before merging

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: 22.x
+        node-version-file: '.nvmrc'
         cache: 'npm'
 
     - uses: actions/cache@v4
@@ -30,12 +30,10 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
-    - name: Install Firefox
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y firefox
+    - name: Install Chromium
+      run: npx playwright install chromium
 
-    - name: Run tests with Smokestack and Firefox
+    - name: Run tests with Vitest
       run: |
         export DISPLAY=:99
         Xvfb :99 -screen 0 1024x768x24 2> /dev/null &

.gitignore

@@ -1,3 +1,2 @@
-env.test.sh
 dist
 node_modules

.nvmrc

@@ -0,0 +1 @@
+22

CHANGELOG.md

@@ -1,5 +1,14 @@
 ## HEAD
 
+### Breaking Changes ⚠️
+
+- Increase minimum supported version of EcmaScript to ES2020. This means that the library now uses modern JavaScript features and may not be compatible with older browsers or environments that do not support ES2020.
+- Migrate not bundled source code to ESM modules. This change allows for better tree-shaking and module loading, improving performance and reducing bundle size.
+
+### Features / Improvements 🚀
+
+- Add `once` method to `Geocoder` class to allow for one-time event listeners
+
 ## 5.1.0
 
 ### Features / Improvements 🚀

README.md

@@ -1,15 +1,13 @@
-Mapbox GL Geocoder [![Build Status](https://travis-ci.com/mapbox/mapbox-gl-geocoder.svg?branch=master)](https://travis-ci.com/mapbox/mapbox-gl-geocoder)
+Mapbox GL Geocoder [![Build Status](https://github.com/mapbox/mapbox-gl-geocoder/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/mapbox/mapbox-gl-geocoder/actions/workflows/main.yml)
 ---
 
 A geocoder control for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) using the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/#geocoding). For a JavaScript geocoder without a graphical user interface see the [Mapbox SDK for JS](https://github.com/mapbox/mapbox-sdk-js/blob/master/docs/services.md#geocoding).
 
-### Usage
+## Usage
 
 * https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
 * https://docs.mapbox.com/mapbox-gl-js/example/?search=mapbox-gl-geocoder
 
-**If you are supporting older browsers, you will need to use a polyfill.** We recommend working with [@babel/polyfill](https://babeljs.io/docs/en/babel-polyfill).
-
 ### Usage with a module bundler
 
 ```bash
@@ -28,18 +26,19 @@ const geocoder = new MapboxGeocoder({
 ```
 
 ###  Using without a Map
-It is possible to use the plugin without it being placed as a control on a mapbox-gl map. Keep in mind that the Mapbox [Terms of Service](https://www.mapbox.com/legal/tos#[GAGA]) require that POI search results be shown on a Mapbox map. If you don't need POIs, you can exclude them from your search results with the `options.types` parameter  when constructing a new Geocoder. 
 
-### Deeper dive
+It is possible to use the plugin without it being placed as a control on a mapbox-gl map. Keep in mind that the Mapbox [Terms of Service](https://www.mapbox.com/legal/tos) require that POI search results be shown on a Mapbox map. If you don't need POIs, you can exclude them from your search results with the `options.types` parameter  when constructing a new Geocoder. 
+
+## Deeper dive
 
-#### API Documentation
+### API Documentation
 
-See [API.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md) for complete reference.
+See [API.md](./API.md) for complete reference.
 
-#### Examples
+### Examples
 
 See [https://docs.mapbox.com/mapbox-gl-js/examples/#geocoder](https://docs.mapbox.com/mapbox-gl-js/examples/#geocoder).
 
 ### Contributing
 
-See [CONTRIBUTING.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CONTRIBUTING.md).
+See [CONTRIBUTING.md](./CONTRIBUTING.md).

debug/filter.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mapbox GL Geocoder</title>
+    <link rel="stylesheet" href="../node_modules/mapbox-gl/dist/mapbox-gl.css">
+    <link rel="stylesheet" href="../lib/mapbox-gl-geocoder.css">
+</head>
+<body>
+    <script type="module" src="./filter.js"></script>
+</body>
+</html>

debug/filter.js

@@ -1,31 +1,23 @@
-'use strict';
-var mapboxgl = require('mapbox-gl');
-var insertCss = require('insert-css');
-var fs = require('fs');
-mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
-
-insertCss(fs.readFileSync('./lib/mapbox-gl-geocoder.css', 'utf8'));
-insertCss(
-  fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8')
-);
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '../lib';
 
-var MapboxGeocoder = require('../');
+mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
 
-var mapDiv = document.body.appendChild(document.createElement('div'));
+const mapDiv = document.body.appendChild(document.createElement('div'));
 mapDiv.style.position = 'absolute';
 mapDiv.style.top = 0;
 mapDiv.style.right = 0;
 mapDiv.style.left = 0;
 mapDiv.style.bottom = 0;
 
-var map = new mapboxgl.Map({
+const map = new mapboxgl.Map({
   container: mapDiv,
   style: 'mapbox://styles/mapbox/streets-v9',
   center: [-79.4512, 43.6568],
   zoom: 13
 });
 
-var geocoder = new MapboxGeocoder({
+const geocoder = new MapboxGeocoder({
   accessToken: window.localStorage.getItem('MapboxAccessToken'),
   country: 'au',
   filter: function(item) {
@@ -42,10 +34,10 @@ var geocoder = new MapboxGeocoder({
 
 window.geocoder = geocoder;
 
-var button = document.createElement('button');
+const button = document.createElement('button');
 button.textContent = 'click me';
 
-var removeBtn = document.body.appendChild(document.createElement('button'));
+const removeBtn = document.body.appendChild(document.createElement('button'));
 removeBtn.style.position = 'absolute';
 removeBtn.style.zIndex = 10;
 removeBtn.style.top = '10px';

debug/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mapbox GL Geocoder</title>
+    <link rel="stylesheet" href="../node_modules/mapbox-gl/dist/mapbox-gl.css">
+    <link rel="stylesheet" href="../lib/mapbox-gl-geocoder.css">
+</head>
+<body>
+    <script type="module" src="./index.js"></script>
+</body>
+</html>

debug/index.js

@@ -1,59 +1,50 @@
-'use strict';
-var mapboxgl = require('mapbox-gl');
-var insertCss = require('insert-css');
-var fs = require('fs');
+import mapboxgl from 'mapbox-gl';
+import MapboxGeocoder from '../lib';
 
 mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
 
-
-var meta = document.createElement('meta');
+const meta = document.createElement('meta');
 meta.name = 'viewport';
 meta.content = 'initial-scale=1,maximum-scale=1,user-scalable=no';
 document.getElementsByTagName('head')[0].appendChild(meta);
 
-insertCss(fs.readFileSync('./lib/mapbox-gl-geocoder.css', 'utf8'));
-insertCss(
-  fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8')
-);
-
-var MapboxGeocoder = require('../');
-
-var mapDiv = document.body.appendChild(document.createElement('div'));
+const mapDiv = document.body.appendChild(document.createElement('div'));
 mapDiv.style.position = 'absolute';
 mapDiv.style.top = 0;
 mapDiv.style.right = 0;
 mapDiv.style.left = 0;
 mapDiv.style.bottom = 0;
 
-var map = new mapboxgl.Map({
+const map = new mapboxgl.Map({
   container: mapDiv,
   center: [-79.4512, 43.6568],
   zoom: 13
 });
 
-var coordinatesGeocoder = function(query) {
-  var matches = query.match(/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/);
+function coordinateFeature(lng, lat) {
+  lng = Number(lng);
+  lat = Number(lat);
+  return {
+    center: [lng, lat],
+    geometry: {
+      type: 'Point',
+      coordinates: [lng, lat]
+    },
+    place_name: 'Lat: ' + lat + ', Lng: ' + lng,
+    place_type: ['coordinate'],
+    properties: {},
+    type: 'Feature'
+  };
+}
+
+function coordinatesGeocoder(query) {
+  const matches = query.match(/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/);
   if (!matches) {
     return null;
   }
-  function coordinateFeature(lng, lat) {
-    lng = Number(lng);
-    lat = Number(lat);
-    return {
-      center: [lng, lat],
-      geometry: {
-        type: 'Point',
-        coordinates: [lng, lat]
-      },
-      place_name: 'Lat: ' + lat + ', Lng: ' + lng,
-      place_type: ['coordinate'],
-      properties: {},
-      type: 'Feature'
-    };
-  }
-  var coord1 = matches[1];
-  var coord2 = matches[2];
-  var geocodes = [];
+  const coord1 = matches[1];
+  const coord2 = matches[2];
+  const geocodes = [];
   if (coord1 < -90 || coord1 > 90) {
     // must be lng, lat
     geocodes.push(coordinateFeature(coord1, coord2));
@@ -70,7 +61,7 @@ var coordinatesGeocoder = function(query) {
   return geocodes;
 };
 
-var geocoder = new MapboxGeocoder({
+const geocoder = new MapboxGeocoder({
   accessToken: mapboxgl.accessToken,
   trackProximity: true,
   useBrowserFocus: true,
@@ -81,7 +72,7 @@ var geocoder = new MapboxGeocoder({
   externalGeocoder: function(query, features) {
     // peak at the query and features before calling the external api
     if(query.length > 5 && (features.length ? features[0].relevance != 1 : true)) {
-      return fetch('/mock-api.json')
+      return fetch('mock-api.json')
         .then(response => response.json())
     }
   },
@@ -92,10 +83,10 @@ map.addControl(geocoder)
 
 window.geocoder = geocoder;
 
-var button = document.createElement('button');
+const button = document.createElement('button');
 button.textContent = 'click me';
 
-var removeBtn = document.body.appendChild(document.createElement('button'));
+const removeBtn = document.body.appendChild(document.createElement('button'));
 removeBtn.style.position = 'absolute';
 removeBtn.style.zIndex = 10;
 removeBtn.style.top = '10px';

debug/mock-api.json

@@ -1,3 +1,57 @@
 [
-  {"id":"place.7673410831246050","type":"Feature","place_type":["place"],"relevance":1,"properties":{"wikidata":"Q61"},"text_en-US":"Washington","language_en-US":"en","place_name_en-US":"Washington, District of Columbia, United States of America","text":"Washington","language":"en","place_name":"SERVER: Washington, District of Columbia, United States of America","matching_place_name":"Washington, DC, United States of America","bbox":[-77.1197609567342,38.79155738,-76.909391,38.99555093],"center":[-77.0366,38.895],"geometry":{"type":"Point","coordinates":[-77.0366,38.895]},"context":[{"id":"region.14064402149979320","short_code":"US-DC","wikidata":"Q3551781","text_en-US":"District of Columbia","language_en-US":"en","text":"District of Columbia","language":"en"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text_en-US":"United States of America","language_en-US":"en","text":"United States of America","language":"en"}]}
+  {
+    "id": "place.7673410831246050",
+    "type": "Feature",
+    "place_type": [
+      "place"
+    ],
+    "relevance": 1,
+    "properties": {
+      "wikidata": "Q61"
+    },
+    "text_en-US": "Washington",
+    "language_en-US": "en",
+    "place_name_en-US": "Washington, District of Columbia, United States of America",
+    "text": "Washington",
+    "language": "en",
+    "place_name": "SERVER: Washington, District of Columbia, United States of America",
+    "matching_place_name": "Washington, DC, United States of America",
+    "bbox": [
+      -77.1197609567342,
+      38.79155738,
+      -76.909391,
+      38.99555093
+    ],
+    "center": [
+      -77.0366,
+      38.895
+    ],
+    "geometry": {
+      "type": "Point",
+      "coordinates": [
+        -77.0366,
+        38.895
+      ]
+    },
+    "context": [
+      {
+        "id": "region.14064402149979320",
+        "short_code": "US-DC",
+        "wikidata": "Q3551781",
+        "text_en-US": "District of Columbia",
+        "language_en-US": "en",
+        "text": "District of Columbia",
+        "language": "en"
+      },
+      {
+        "id": "country.19678805456372290",
+        "wikidata": "Q30",
+        "short_code": "us",
+        "text_en-US": "United States of America",
+        "language_en-US": "en",
+        "text": "United States of America",
+        "language": "en"
+      }
+    ]
+  }
 ]