feat: Implement TS

Author: grodriguez85

addon/-private/mapbox-loader.js addon/-private/mapbox-loader.ts

@@ -1,32 +1,44 @@
-import { bind, next } from '@ember/runloop';
-import EmberObject, { set } from '@ember/object';
+import { next } from '@ember/runloop';
 import { Promise as RsvpPromise } from 'rsvp';
+import mapboxgl, { Map as MapboxMap, MapboxOptions, ErrorEvent } from 'mapbox-gl';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
-class MapboxLoaderCancelledError extends Error {}
-class MapboxSupportError extends Error {
+export type MapboxGL = typeof mapboxgl;
+export class MapboxLoaderCancelledError extends Error {}
+export class MapboxSupportError extends Error {
   isMapboxSupportError = true;
 }
-class MapboxError extends Error {
-  constructor(ev) {
+export class MapboxError extends Error {
+  event: ErrorEvent;
+  constructor(ev: ErrorEvent) {
     super(ev.error?.message ?? 'unknown mapbox error');
-
     this.event = ev;
   }
 }
 
-export default EmberObject.extend({
-  map: null,
-  error: null,
-  MapboxGl: null,
-  isLoaded: false,
-
-  _accessToken: null,
-  _mapOptions: null,
-  _extOnMapLoaded: null,
-  _isCancelled: false,
-  _isLoading: false,
-
-  load(accessToken, options, onMapLoaded) {
+export default class MapboxLoader {
+  map: MapboxMap | undefined;
+  MapboxGl: MapboxGL | undefined;
+
+  @tracked error:
+    | MapboxLoaderCancelledError
+    | MapboxSupportError
+    | MapboxError
+    | undefined;
+  @tracked isLoaded = false;
+
+  _accessToken: string | undefined;
+  _mapOptions: MapboxOptions | undefined;
+  _extOnMapLoaded: ((map: MapboxMap) => void) | undefined;
+  _isCancelled = false;
+  _isLoading = false;
+
+  load(
+    accessToken: string,
+    options: MapboxOptions,
+    onMapLoaded?: (map: MapboxMap) => void
+  ) {
     if (this.isLoaded || this._isLoading || this._isCancelled) {
       return;
     }
@@ -37,29 +49,30 @@ export default EmberObject.extend({
     this._extOnMapLoaded = onMapLoaded;
 
     import('mapbox-gl')
-      .then(bind(this, this._onModule))
-      .then(bind(this, this._onMapLoaded))
-      .then(bind(this, this._onComplete))
-      .catch(bind(this, this._onError));
-  },
+      .then(this._onModule)
+      .then(this._onMapLoaded)
+      .then(this._onComplete)
+      .catch(this._onError);
+  }
 
   cancel() {
     this._isCancelled = true;
 
-    if (this.map !== null) {
+    if (this.map !== undefined) {
       // some map users may be late doing cleanup (seen with mapbox-draw-gl),
       // so don't remove the map until the next tick
       next(this.map, this.map.remove);
     }
-  },
+  }
 
-  _onModule(MapboxGl) {
+  @action
+  _onModule({ default: MapboxModule }: { default: MapboxGL }) {
     if (this._isCancelled) {
       throw new MapboxLoaderCancelledError();
     }
 
-    this.MapboxGl = MapboxGl.default;
-    this.MapboxGl.accessToken = this._accessToken;
+    this.MapboxGl = MapboxModule;
+    this.MapboxGl.accessToken = this._accessToken!;
 
     if (!this.MapboxGl.supported()) {
       throw new MapboxSupportError(
@@ -76,7 +89,7 @@ export default EmberObject.extend({
           map.off('error', listeners.onError);
           resolve();
         },
-        onError(ev) {
+        onError(ev: ErrorEvent) {
           map.off('load', listeners.onLoad);
           map.off('error', listeners.onError);
 
@@ -87,42 +100,43 @@ export default EmberObject.extend({
       map.on('load', listeners.onLoad);
       map.on('error', listeners.onError);
     });
-  },
+  }
 
+  @action
   _onMapLoaded() {
     if (this._isCancelled) {
       throw new MapboxLoaderCancelledError();
     }
 
-    if (typeof this._extOnMapLoaded === 'function') {
+    if (typeof this._extOnMapLoaded === 'function' && this.map !== undefined) {
       return this._extOnMapLoaded(this.map);
     }
 
     return null;
-  },
+  }
 
+  @action
   _onComplete() {
     this._isLoading = false;
 
     if (this._isCancelled) {
       return;
     }
 
-    set(this, 'isLoaded', true);
-  },
+    this.isLoaded = true;
+  }
 
-  _onError(err) {
+  _onError(err: MapboxLoaderCancelledError | MapboxSupportError | MapboxError) {
     this._isLoading = false;
 
     if (err instanceof MapboxLoaderCancelledError) {
       return;
     }
 
     if (this._isCancelled) {
-      console.error(err); // eslint-disable-line no-console
       return;
     }
 
-    set(this, 'error', err);
-  },
-});
+    this.error = err;
+  }
+}

addon/components/mapbox-gl/index.js addon/components/mapbox-gl/index.ts

@@ -4,7 +4,8 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { getOwner } from '@ember/application';
-import { pick } from 'lodash-es';
+import { Map as MapboxMap } from 'mapbox-gl';
+import type MapCacheService from 'ember-mapbox-gl/services/map-cache';
 
 /**
  * Component that creates a new [mapbox-gl-js instance](https://www.mapbox.com/mapbox-gl-js/api/#map):
@@ -43,38 +44,53 @@ import { pick } from 'lodash-es';
  * @yield {Component} map.source
  */
 
-export default class MapboxGlComponent extends Component {
-  @service mapCache;
-  @tracked _loader;
+interface MapboxGlArgs {
+  initOptions: {};
+  mapLoaded?: (map: MapboxMap) => void;
+  mapReloaded?: (map: MapboxMap, metadata: {}) => void;
+  cacheKey?: string | false;
+  cacheMetadata?: {};
+}
+
+export default class MapboxGlComponent extends Component<MapboxGlArgs> {
+  @service declare mapCache: MapCacheService;
+
+  @tracked _loader: MapboxLoader;
 
-  constructor() {
-    super(...arguments);
-    this._loader = MapboxLoader.create();
+  constructor(owner: any, args: MapboxGlArgs) {
+    super(owner, args);
+    this._loader = new MapboxLoader();
   }
 
   @action
-  loadMap(element) {
+  loadMap(element: HTMLElement) {
     const cacheKey = this.args.cacheKey;
-    if (cacheKey && this.mapCache.has(cacheKey)) {
+
+    if (cacheKey && this.mapCache.hasMap(cacheKey)) {
       let {
-        map: mapLoader,
+        mapLoader: mapLoader,
         element: mapContainer,
         metadata,
-      } = this.mapCache.get(cacheKey);
+      } = this.mapCache.getMap(cacheKey)!;
       this._loader = mapLoader;
 
       // Append the map html element into component
       element.appendChild(mapContainer);
-      mapLoader.map.resize();
-      this.args.mapReloaded?.(mapLoader.map, metadata);
+
+      if (mapLoader.map) {
+        mapLoader.map.resize();
+        this.args.mapReloaded?.(mapLoader.map, metadata);
+      }
+
       // Save new options after sending mapReloaded event
-      this.mapCache.set(
+      this.mapCache.setMap(
         cacheKey,
         mapLoader,
         mapContainer,
         this.args.cacheMetadata
       );
     } else {
+      //@ts-expect-error
       let config = getOwner(this).resolveRegistration('config:environment');
       const { accessToken, map } = config['mapbox-gl'];
       const options = { ...map, ...this.args.initOptions };
@@ -88,14 +104,14 @@ export default class MapboxGlComponent extends Component {
   }
 
   @action
-  mapLoaded(map) {
+  mapLoaded(map: MapboxMap) {
     // Add map instance and DOM element to cache
     const cacheKey = this.args.cacheKey;
     if (cacheKey) {
-      this.mapCache.set(
+      this.mapCache.setMap(
         cacheKey,
         this._loader,
-        map._container,
+        map.getContainer(),
         this.args.cacheMetadata
       );
     }

addon/components/mapbox-gl/layer/index.js addon/components/mapbox-gl/layer/index.ts

@@ -4,10 +4,16 @@ import { guidFor } from '@ember/object/internals';
 import { helper } from '@ember/component/helper';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import type LayersCacheService from 'ember-mapbox-gl/services/layers-cache';
+import {
+  Map as MapboxMap,
+  AnyLayout,
+  AnyPaint,
+  CustomLayerInterface,
+  AnyLayer,
+} from 'mapbox-gl';
 
-const onUpdateArgsHelper = helper(function ([updateLayer, layer]) {
-  updateLayer(layer);
-});
+type SupportedLayers = Exclude<AnyLayer, CustomLayerInterface>;
 
 /**
  * Adds a data source to the map.
@@ -47,8 +53,26 @@ const onUpdateArgsHelper = helper(function ([updateLayer, layer]) {
  * If this argument is omitted, the layer will be appended to the end of the layers array.
  * @argument {string} before
  */
-export default class MapboxGlLayerComponent extends Component {
-  @service layersCache;
+
+const onUpdateArgsHelper = helper(function ([updateLayer, layer]: [
+  (layer: SupportedLayers) => boolean,
+  SupportedLayers
+]) {
+  return updateLayer(layer);
+});
+
+interface MapboxGlLayerArgs {
+  map: MapboxMap;
+  layer: SupportedLayers;
+  before?: string;
+  cacheKey?: string | false;
+  _sourceId?: string;
+  onDidInsert?: (layer: SupportedLayers) => void;
+  onDidUpdate?: (layer: SupportedLayers) => void;
+}
+
+export default class MapboxGlLayerComponent extends Component<MapboxGlLayerArgs> {
+  @service declare layersCache: LayersCacheService;
 
   onUpdateArgs = onUpdateArgsHelper;
 
@@ -78,7 +102,7 @@ export default class MapboxGlLayerComponent extends Component {
 
   get _layer() {
     // do this to pick up other properties like filter, re, metadata, source-layer, minzoom, maxzoom, etc
-    let layer = {
+    let layer: SupportedLayers = {
       ...this.args.layer,
       id: this._layerId,
       type: this._layerType,
@@ -88,16 +112,17 @@ export default class MapboxGlLayerComponent extends Component {
     };
     // Remove undefined keys
     Object.keys(layer).forEach(
-      (key) => layer[key] === undefined && delete layer[key]
+      (key: keyof SupportedLayers) =>
+        layer[key] === undefined && delete layer[key]
     );
     return layer;
   }
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: any, args: MapboxGlLayerArgs) {
+    super(owner, args);
 
     const layer = this._layer;
-    const { map, before, cacheKey } = this.args;
+    const { map, before, cacheKey } = args;
 
     if (cacheKey && map.getLayer(layer.id)) {
       map.setLayoutProperty(layer.id, 'visibility', 'visible');
@@ -106,31 +131,46 @@ export default class MapboxGlLayerComponent extends Component {
     }
 
     this.layersCache.push(map, layer.id);
+    this.args.onDidInsert?.(layer);
   }
 
   @action
-  updateLayer(layer) {
-    for (const k in layer.layout) {
-      this.args.map.setLayoutProperty(layer.id, k, layer.layout[k]);
+  updateLayer(layer: SupportedLayers): boolean {
+    if (layer.layout) {
+      Object.keys(layer.layout).forEach((key: keyof AnyLayout) => {
+        this.args.map.setLayoutProperty(layer.id, key, layer.layout![key]);
+      });
     }
 
-    for (const k in layer.paint) {
-      this.args.map.setPaintProperty(layer.id, k, layer.paint[k]);
+    if (layer.paint) {
+      Object.keys(layer.paint).forEach((key: keyof AnyPaint) => {
+        this.args.map.setPaintProperty(layer.id, key, layer.paint![key]);
+      });
     }
 
     if ('filter' in layer) {
       this.args.map.setFilter(layer.id, layer.filter);
     }
 
-    this.args.map.setLayerZoomRange(layer.id, layer.minzoom, layer.maxzoom);
+    if (layer.minzoom || layer.maxzoom) {
+      let mapLayer = this.args.map.getLayer(layer.id) as SupportedLayers;
+      this.args.map.setLayerZoomRange(
+        layer.id,
+        layer.minzoom ?? mapLayer.minzoom ?? 0,
+        layer.maxzoom ?? mapLayer.maxzoom ?? 24
+      );
+    }
+
+    this.args.onDidUpdate?.(layer);
+    return true;
   }
 
   willDestroy() {
-    super.willDestroy(...arguments);
+    super.willDestroy();
 
     let { map, cacheKey } = this.args;
 
-    let layerCounter = this.layersCache.get(map, this._layer.id);
+    let layerCounter = this.layersCache.getCounter(map, this._layer.id);
 
     // Only if there's one instance of the layer, remove it
     if (layerCounter === 1) {