esri-gl 0.9.0-alpha.13 → 0.9.0-alpha.16

package/README.md

@@ -368,7 +368,7 @@ For the smoothest React experience with declarative layer management:
 
 ```typescript
 import React, { useState } from 'react';
-import { Map } from 'react-map-gl';
+import { Map } from 'react-map-gl/mapbox';
 import { 
   EsriDynamicLayer, 
   EsriFeatureLayer, 
@@ -485,7 +485,7 @@ import type {
   IdentifyResult,
   EsriLayerProps 
 } from 'esri-gl';
-import type { MapRef } from 'react-map-gl';
+import type { MapRef } from 'react-map-gl/mapbox';
 
 // Fully typed component props
 interface MapComponentProps {
@@ -653,6 +653,8 @@ All type declarations are available in the `dist/` directory after building.
 
 ## Contributing
 
+We welcome contributions! Please follow these steps:
+
 1. Fork the repository
 2. Create a feature branch: `git checkout -b feature/my-feature`
 3. Make changes and add tests
@@ -661,6 +663,17 @@ All type declarations are available in the `dist/` directory after building.
 6. Push to branch: `git push origin feature/my-feature`
 7. Submit a pull request
 
+### Pre-commit Hooks
+
+This project uses [Husky](https://typicode.github.io/husky/) to automatically run quality checks before each commit:
+
+- **Formatting & Linting**: Automatically formats and lints staged files using Prettier and ESLint
+- **Testing**: Runs the full test suite to ensure no regressions
+
+The hooks are automatically installed when you run `npm install`. If you need to skip them (not recommended), you can use `git commit --no-verify`.
+
+For more details, see [.husky/README.md](.husky/README.md).
+
 ## License
 
 MIT License - see [LICENSE](LICENSE) file for details.

package/dist/esri-gl.esm.js

@@ -462,7 +462,11 @@ class DynamicMapService {
     this.rasterSrcOptions = rasterSrcOptions;
     this.esriServiceOptions = esriServiceOptions;
     this._createSource();
-    if (this.options.getAttributionFromService) this.setAttributionFromService();
+    if (this.options.getAttributionFromService) {
+      this.setAttributionFromService().catch(() => {
+        // Silently handle attribution fetch errors to prevent unhandled rejections
+      });
+    }
   }
   get options() {
     return {
@@ -543,7 +547,10 @@ class DynamicMapService {
     };
   }
   _createSource() {
-    this._map.addSource(this._sourceId, this._source);
+    // Check if source already exists before adding
+    if (!this._map.getSource(this._sourceId)) {
+      this._map.addSource(this._sourceId, this._source);
+    }
   }
   // This requires hooking into some undocumented methods
   _updateSource() {
@@ -562,11 +569,21 @@ class DynamicMapService {
     const src = this._map.getSource(this._sourceId);
     if (!src) return;
     try {
-      src.tiles[0] = this._source.tiles[0];
+      // Ensure src.tiles exists before accessing it
+      if (src.tiles && Array.isArray(src.tiles) && this._source.tiles && this._source.tiles.length > 0) {
+        src.tiles[0] = this._source.tiles[0];
+      }
       src._options = this._source;
       if (src.setTiles) {
         // New MapboxGL >= 2.13.0
-        src.setTiles(this._source.tiles);
+        // setTiles may return a promise - handle rejections to prevent console errors
+        const result = src.setTiles(this._source.tiles);
+        if (result && typeof result.catch === 'function') {
+          result.catch(() => {
+            // Silently ignore - setTiles rejections are often abort errors during rapid updates
+            // The outer try/catch will handle any synchronous errors
+          });
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } else if (this._map.style.sourceCaches) {
         // Old MapboxGL and MaplibreGL
@@ -582,8 +599,21 @@ class DynamicMapService {
         this._map.style.sourceCaches[this._sourceId].update(this._map.transform);
       }
     } catch (error) {
-      if (error instanceof DOMException && error.name === 'AbortError') {
-        // Ignore aborted tile refresh; map will request new tiles on next frame
+      // Comprehensive abort detection - check all possible error shapes
+      // MapLibre can throw various forms of AbortError
+      const errorName = error?.name;
+      const errorMessage = error?.message;
+      const errorConstructor = error?.constructor?.name;
+      let stringified = '';
+      try {
+        stringified = String(error);
+      } catch {
+        // ignore
+      }
+      // Check every possible way an error could represent AbortError
+      const isAbortError = error instanceof DOMException && error.name === 'AbortError' || error instanceof Error && error.name === 'AbortError' || errorName === 'AbortError' || errorConstructor === 'AbortError' || errorMessage?.toLowerCase().includes('abort') || stringified.toLowerCase().includes('abort') || errorMessage?.includes('AbortError') || stringified.includes('AbortError') || stringified === 'Error: AbortError' || error === 'AbortError';
+      if (isAbortError) {
+        // Silently ignore aborted tile operations - MapLibre will retry
         return;
       }
       // Swallow occasional transient errors that can happen during style reloads
@@ -1146,7 +1176,54 @@ class DynamicMapService {
     this._updateSource();
   }
   remove() {
-    this._map.removeSource(this._sourceId);
+    const map = this._map;
+    if (!map || typeof map.removeSource !== 'function') {
+      return;
+    }
+    try {
+      const mapWithStyle = map;
+      const mapLayerApi = map;
+      const mapSourceApi = map;
+      if (typeof mapWithStyle.getStyle === 'function') {
+        const style = mapWithStyle.getStyle();
+        const layers = style?.layers || [];
+        layers.forEach(layer => {
+          if (layer.source !== this._sourceId) return;
+          if (typeof mapLayerApi.getLayer !== 'function' || typeof mapLayerApi.removeLayer !== 'function') {
+            return;
+          }
+          let hasLayer = false;
+          try {
+            hasLayer = Boolean(mapLayerApi.getLayer(layer.id));
+          } catch {
+            hasLayer = false;
+          }
+          if (!hasLayer) return;
+          try {
+            mapLayerApi.removeLayer(layer.id);
+          } catch (error) {
+            console.warn(`Failed to remove layer ${layer.id} for source ${this._sourceId}:`, error);
+          }
+        });
+      }
+      if (typeof mapSourceApi.getSource === 'function') {
+        let hasSource = false;
+        try {
+          hasSource = Boolean(mapSourceApi.getSource(this._sourceId));
+        } catch {
+          hasSource = false;
+        }
+        if (hasSource) {
+          try {
+            map.removeSource(this._sourceId);
+          } catch (error) {
+            console.warn(`Failed to remove source ${this._sourceId}:`, error);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to remove source ${this._sourceId}:`, error);
+    }
   }
 }
 
@@ -1206,7 +1283,10 @@ class TiledMapService {
     };
   }
   _createSource() {
-    this._map.addSource(this._sourceId, this._source);
+    // Check if source already exists before adding
+    if (!this._map.getSource(this._sourceId)) {
+      this._map.addSource(this._sourceId, this._source);
+    }
   }
   setAttributionFromService() {
     if (this._serviceMetadata) {
@@ -1233,7 +1313,39 @@ class TiledMapService {
     this._map.getSource(this._sourceId);
   }
   remove() {
-    this._map.removeSource(this._sourceId);
+    // Guard against disposed or invalid map
+    if (!this._map || typeof this._map.removeSource !== 'function') {
+      return;
+    }
+    try {
+      // First, remove any layers that are using this source
+      const mapWithStyle = this._map;
+      if (mapWithStyle.getStyle && typeof mapWithStyle.getLayer === 'function') {
+        const style = mapWithStyle.getStyle();
+        const layers = style?.layers || [];
+        const getLayer = mapWithStyle.getLayer;
+        layers.forEach(layer => {
+          if (layer.source === this._sourceId) {
+            try {
+              if (getLayer(layer.id)) {
+                this._map.removeLayer(layer.id);
+              }
+            } catch {
+              // Layer may already be removed
+            }
+          }
+        });
+      }
+      // Then check if source exists before trying to remove it
+      if (typeof this._map.getSource === 'function') {
+        const source = this._map.getSource(this._sourceId);
+        if (source) {
+          this._map.removeSource(this._sourceId);
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to remove source ${this._sourceId}:`, error);
+    }
   }
 }
 
@@ -1294,7 +1406,11 @@ class ImageService {
     this.rasterSrcOptions = rasterSrcOptions;
     this.esriServiceOptions = esriServiceOptions;
     this._createSource();
-    if (this.options.getAttributionFromService) this.setAttributionFromService();
+    if (this.options.getAttributionFromService) {
+      this.setAttributionFromService().catch(() => {
+        // Silently handle attribution fetch errors to prevent unhandled rejections
+      });
+    }
   }
   get options() {
     return {
@@ -1332,11 +1448,18 @@ class ImageService {
     };
   }
   _createSource() {
-    this._map.addSource(this._sourceId, this._source);
+    // Check if source already exists before adding
+    if (!this._map.getSource(this._sourceId)) {
+      this._map.addSource(this._sourceId, this._source);
+    }
   }
   // This requires hooking into some undocumented methods
   _updateSource() {
     const src = this._map.getSource(this._sourceId);
+    if (!src) {
+      // Source not yet added to map, nothing to update
+      return;
+    }
     src.tiles[0] = this._source.tiles[0];
     src._options = this._source;
     if (src.setTiles) {
@@ -1411,7 +1534,27 @@ class ImageService {
     this._updateSource();
   }
   remove() {
-    this._map.removeSource(this._sourceId);
+    if (this._map && typeof this._map.removeSource === 'function') {
+      try {
+        // First, remove any layers that are using this source
+        const mapWithStyle = this._map;
+        if (mapWithStyle.getStyle) {
+          const style = mapWithStyle.getStyle();
+          const layers = style?.layers || [];
+          layers.forEach(layer => {
+            if (layer.source === this._sourceId && this._map.getLayer(layer.id)) {
+              this._map.removeLayer(layer.id);
+            }
+          });
+        }
+        // Then check if source exists before trying to remove it
+        if (this._map.getSource && this._map.getSource(this._sourceId)) {
+          this._map.removeSource(this._sourceId);
+        }
+      } catch (error) {
+        console.warn(`Failed to remove source ${this._sourceId}:`, error);
+      }
+    }
   }
 }
 
@@ -1659,7 +1802,10 @@ class VectorTileService {
     };
   }
   _createSource() {
-    this._map.addSource(this._sourceId, this._source);
+    // Check if source already exists before adding
+    if (!this._map.getSource(this._sourceId)) {
+      this._map.addSource(this._sourceId, this._source);
+    }
   }
   _mapToLocalSource(style) {
     return {
@@ -1720,7 +1866,54 @@ class VectorTileService {
     // Vector tile services don't need dynamic updates like dynamic services
   }
   remove() {
-    this._map.removeSource(this._sourceId);
+    const map = this._map;
+    if (!map || typeof map.removeSource !== 'function') {
+      return;
+    }
+    try {
+      const mapWithStyle = map;
+      const mapLayerApi = map;
+      const mapSourceApi = map;
+      if (typeof mapWithStyle.getStyle === 'function') {
+        const style = mapWithStyle.getStyle();
+        const layers = style?.layers || [];
+        layers.forEach(layer => {
+          if (layer.source !== this._sourceId) return;
+          if (typeof mapLayerApi.getLayer !== 'function' || typeof mapLayerApi.removeLayer !== 'function') {
+            return;
+          }
+          let hasLayer = false;
+          try {
+            hasLayer = Boolean(mapLayerApi.getLayer(layer.id));
+          } catch {
+            hasLayer = false;
+          }
+          if (!hasLayer) return;
+          try {
+            mapLayerApi.removeLayer(layer.id);
+          } catch (error) {
+            console.warn(`Failed to remove layer ${layer.id} for source ${this._sourceId}:`, error);
+          }
+        });
+      }
+      if (typeof mapSourceApi.getSource === 'function') {
+        let hasSource = false;
+        try {
+          hasSource = Boolean(mapSourceApi.getSource(this._sourceId));
+        } catch {
+          hasSource = false;
+        }
+        if (hasSource) {
+          try {
+            map.removeSource(this._sourceId);
+          } catch (error) {
+            console.warn(`Failed to remove source ${this._sourceId}:`, error);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to remove source ${this._sourceId}:`, error);
+    }
   }
 }
 
@@ -1762,6 +1955,18 @@ class FeatureService {
       writable: true,
       value: null
     });
+    Object.defineProperty(this, "_sourceReadyResolve", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: null
+    });
+    Object.defineProperty(this, "_sourceReadyReject", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: null
+    });
     Object.defineProperty(this, "vectorSrcOptions", {
       enumerable: true,
       configurable: true,
@@ -1774,6 +1979,32 @@ class FeatureService {
       writable: true,
       value: void 0
     });
+    /**
+     * Promise that resolves when the source has been successfully added to the map.
+     * This can be used to ensure the source exists before adding layers that reference it.
+     *
+     * @example
+     * ```typescript
+     * const service = new FeatureService('my-source', map, { url: '...' });
+     *
+     * // Wait for source to be ready before adding a layer
+     * await service.sourceReady;
+     * map.addLayer({
+     *   id: 'my-layer',
+     *   type: 'circle',
+     *   source: 'my-source',
+     *   paint: { 'circle-radius': 5, 'circle-color': '#007cbf' }
+     * });
+     * ```
+     *
+     * If source creation fails, the promise will reject with an error.
+     */
+    Object.defineProperty(this, "sourceReady", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
     if (!esriServiceOptions.url) {
       throw new Error('A url must be supplied as part of the esriServiceOptions object.');
     }
@@ -1800,49 +2031,48 @@ class FeatureService {
     if (this.esriServiceOptions.useBoundingBox === undefined) {
       this.esriServiceOptions.useBoundingBox = true;
     }
+    // Create the sourceReady promise that will resolve when the source is added to the map
+    this.sourceReady = new Promise((resolve, reject) => {
+      this._sourceReadyResolve = resolve;
+      this._sourceReadyReject = reject;
+    });
     this._createSource();
   }
   async _createSource() {
+    if (!this._map) {
+      if (this._sourceReadyReject) {
+        this._sourceReadyReject(new Error('Map not available'));
+      }
+      return;
+    }
     try {
       // Get service metadata
       this._serviceMetadata = await getServiceDetails(this.esriServiceOptions.url, this.esriServiceOptions.fetchOptions);
       // Check if vector tiles should be used (default behavior)
       // Note: Most FeatureServers don't support vector tiles, so we'll detect and fallback
-      const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
-      if (!isTestEnvironment) {
-        console.log('FeatureService: useVectorTiles setting:', this.esriServiceOptions.useVectorTiles);
-      }
       const vectorTileSupport = await this._checkVectorTileSupport();
-      if (!isTestEnvironment) {
-        console.log('FeatureService: Vector tile support detected:', vectorTileSupport);
-      }
       const useVectorTiles = this.esriServiceOptions.useVectorTiles !== false && vectorTileSupport;
-      if (!isTestEnvironment) {
-        console.log('FeatureService: Final decision - using vector tiles:', useVectorTiles);
-      }
       if (useVectorTiles) {
         // Create vector tile source
         const tileUrl = this._buildTileUrl();
-        if (!isTestEnvironment) {
-          console.log('FeatureService: Using vector tiles for FeatureService:', tileUrl);
+        // Add vector source to map if it doesn't already exist
+        if (!this._map.getSource(this._sourceId)) {
+          this._map.addSource(this._sourceId, {
+            type: 'vector',
+            tiles: [tileUrl],
+            maxzoom: 24,
+            ...this.vectorSrcOptions
+          });
         }
-        // Add vector source to map
-        this._map.addSource(this._sourceId, {
-          type: 'vector',
-          tiles: [tileUrl],
-          maxzoom: 24,
-          ...this.vectorSrcOptions
-        });
       } else {
         // Fallback to GeoJSON (most common for FeatureServers)
         const queryUrl = this._buildQueryUrl();
-        if (!isTestEnvironment) {
-          console.log('FeatureService: Using GeoJSON for FeatureService:', queryUrl);
+        if (!this._map.getSource(this._sourceId)) {
+          this._map.addSource(this._sourceId, {
+            type: 'geojson',
+            data: queryUrl
+          });
         }
-        this._map.addSource(this._sourceId, {
-          type: 'geojson',
-          data: queryUrl
-        });
       }
       // Update attribution after source is added if available in service metadata
       if (this._serviceMetadata?.copyrightText) {
@@ -1852,11 +2082,19 @@ class FeatureService {
       if (!useVectorTiles && this.esriServiceOptions.useBoundingBox) {
         this._setupBoundingBoxUpdates();
       }
+      // Resolve the sourceReady promise now that the source is successfully added
+      if (this._sourceReadyResolve) {
+        this._sourceReadyResolve();
+      }
     } catch (error) {
       const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
       if (!isTestEnvironment) {
         console.error('Error creating FeatureService source:', error);
       }
+      // Reject the sourceReady promise so callers can catch the error
+      if (this._sourceReadyReject && error instanceof Error) {
+        this._sourceReadyReject(error);
+      }
       // Don't rethrow - service should handle errors gracefully
       // The source just won't be created and the service will be in a degraded state
     }
@@ -1867,42 +2105,20 @@ class FeatureService {
       const vectorTileUrl = this.esriServiceOptions.url.replace('/FeatureServer/', '/VectorTileServer/');
       // Only check if the URL actually changed (meaning it was a FeatureServer URL)
       if (vectorTileUrl === this.esriServiceOptions.url) {
-        const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
-        if (!isTestEnvironment) {
-          console.log('FeatureService: Not a FeatureServer URL, falling back to GeoJSON');
-        }
         return false;
       }
-      const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
-      if (!isTestEnvironment) {
-        console.log('FeatureService: Checking vector tile support at:', vectorTileUrl);
-      }
       const response = await fetch(vectorTileUrl + '?f=json', this.esriServiceOptions.fetchOptions);
       if (response.ok) {
         const data = await response.json();
         if (data && !data.error) {
-          if (!isTestEnvironment) {
-            console.log('FeatureService: Vector tile endpoint found and working:', vectorTileUrl);
-            console.log('FeatureService: Vector tile service data:', data);
-          }
           return true;
         } else {
-          if (!isTestEnvironment) {
-            console.log('FeatureService: Vector tile endpoint returned error:', data?.error);
-          }
           return false;
         }
       } else {
-        if (!isTestEnvironment) {
-          console.log('FeatureService: Vector tile endpoint returned HTTP', response.status);
-        }
         return false;
       }
-    } catch (error) {
-      const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
-      if (!isTestEnvironment) {
-        console.log('FeatureService: Vector tile check failed, falling back to GeoJSON:', error);
-      }
+    } catch {
       return false;
     }
   }
@@ -2047,10 +2263,6 @@ class FeatureService {
       const source = this._map.getSource(this._sourceId);
       if (source && 'setData' in source && typeof source.setData === 'function') {
         const newQueryUrl = this._buildQueryUrl();
-        const isTestEnvironment = typeof process !== 'undefined' && process.env?.NODE_ENV === 'test';
-        if (!isTestEnvironment) {
-          console.log('Updating FeatureService data with new bounding box:', newQueryUrl);
-        }
         // @ts-ignore - GeoJSON source setData method not in generic Source type
         source.setData(newQueryUrl);
       }
@@ -2131,8 +2343,26 @@ class FeatureService {
   // Note: maxRecordCount is a server capability; not settable via query params
   remove() {
     this._removeBoundingBoxUpdates();
-    if (this._map.getSource(this._sourceId)) {
-      this._map.removeSource(this._sourceId);
+    if (this._map && typeof this._map.removeSource === 'function') {
+      try {
+        // First, remove any layers that are using this source
+        const mapWithStyle = this._map;
+        if (mapWithStyle.getStyle) {
+          const style = mapWithStyle.getStyle();
+          const layers = style?.layers || [];
+          layers.forEach(layer => {
+            if (layer.source === this._sourceId && this._map.getLayer && this._map.getLayer(layer.id)) {
+              this._map.removeLayer(layer.id);
+            }
+          });
+        }
+        // Then check if source exists before trying to remove it
+        if (this._map.getSource && this._map.getSource(this._sourceId)) {
+          this._map.removeSource(this._sourceId);
+        }
+      } catch (error) {
+        console.warn(`Failed to remove source ${this._sourceId}:`, error);
+      }
     }
   }
   async queryFeatures(options) {