Removed bindall, added some types, changed source.ts factory (#2707)

* Removed bindall, added some types, changed source factory

* Fix lint and tests

* Fix return value

* Remove global

src/source/canvas_source.ts

@@ -11,10 +11,10 @@ import type Dispatcher from '../util/dispatcher';
 import type {Evented} from '../util/evented';
 
 export type CanvasSourceSpecification = {
-    'type': 'canvas';
-    'coordinates': [[number, number], [number, number], [number, number], [number, number]];
-    'animate'?: boolean;
-    'canvas': string | HTMLCanvasElement;
+    type: 'canvas';
+    coordinates: [[number, number], [number, number], [number, number], [number, number]];
+    animate?: boolean;
+    canvas?: string | HTMLCanvasElement;
 };
 
 /**
@@ -107,7 +107,7 @@ class CanvasSource extends ImageSource {
      * @memberof CanvasSource
      */
 
-    load() {
+    load = () => {
         this._loaded = true;
         if (!this.canvas) {
             this.canvas = (this.options.canvas instanceof HTMLCanvasElement) ?
@@ -137,7 +137,7 @@ class CanvasSource extends ImageSource {
         };
 
         this._finishLoading();
-    }
+    };
 
     /**
      * Returns the HTML `canvas` element.
@@ -174,7 +174,7 @@ class CanvasSource extends ImageSource {
     // */
     // setCoordinates inherited from ImageSource
 
-    prepare() {
+    prepare = () => {
         let resize = false;
         if (this.canvas.width !== this.width) {
             this.width = this.canvas.width;
@@ -219,14 +219,14 @@ class CanvasSource extends ImageSource {
         if (newTilesLoaded) {
             this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
         }
-    }
+    };
 
-    serialize(): any {
+    serialize = (): CanvasSourceSpecification => {
         return {
             type: 'canvas',
             coordinates: this.coordinates
         };
-    }
+    };
 
     hasTransition() {
         return this._playing;

src/source/geojson_source.ts

@@ -16,7 +16,7 @@ import type {GeoJSONSourceDiff} from './geojson_source_diff';
 
 export type GeoJSONSourceOptions = GeoJSONSourceSpecification & {
     workerOptions?: any;
-    collectResourceTiming: boolean;
+    collectResourceTiming?: boolean;
 }
 
 export type GeoJsonSourceOptions = {
@@ -192,9 +192,9 @@ class GeoJSONSource extends Evented implements Source {
         }
     }
 
-    load() {
+    load = () => {
         this._updateWorkerData();
-    }
+    };
 
     onAdd(map: Map) {
         this.map = map;
@@ -419,12 +419,12 @@ class GeoJSONSource extends Evented implements Source {
         this.actor.send('removeSource', {type: this.type, source: this.id});
     }
 
-    serialize() {
+    serialize = (): GeoJSONSourceSpecification => {
         return extend({}, this._options, {
             type: this.type,
             data: this._data
         });
-    }
+    };
 
     hasTransition() {
         return false;

src/source/image_source.test.ts

@@ -11,6 +11,7 @@ import {OverscaledTileID} from './tile_id';
 import VertexBuffer from '../gl/vertex_buffer';
 import SegmentVector from '../data/segment';
 import Texture from '../render/texture';
+import type {ImageSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 
 function createSource(options) {
     options = extend({
@@ -177,7 +178,7 @@ describe('ImageSource', () => {
     test('serialize url and coordinates', () => {
         const source = createSource({url: '/image.png'});
 
-        const serialized = source.serialize();
+        const serialized = source.serialize() as ImageSourceSpecification;
         expect(serialized.type).toBe('image');
         expect(serialized.url).toBe('/image.png');
         expect(serialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);

src/source/image_source.ts

@@ -106,7 +106,7 @@ class ImageSource extends Evented implements Source {
         this.options = options;
     }
 
-    load(newCoordinates?: Coordinates, successCallback?: () => void) {
+    load = (newCoordinates?: Coordinates, successCallback?: () => void) => {
         this._loaded = false;
         this.fire(new Event('dataloading', {dataType: 'source'}));
 
@@ -129,7 +129,7 @@ class ImageSource extends Evented implements Source {
                 this._finishLoading();
             }
         });
-    }
+    };
 
     loaded(): boolean {
         return this._loaded;
@@ -231,7 +231,7 @@ class ImageSource extends Evented implements Source {
         return this;
     }
 
-    prepare() {
+    prepare = () => {
         if (Object.keys(this.tiles).length === 0 || !this.image) {
             return;
         }
@@ -265,7 +265,7 @@ class ImageSource extends Evented implements Source {
         if (newTilesLoaded) {
             this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
         }
-    }
+    };
 
     loadTile(tile: Tile, callback: Callback<void>) {
         // We have a single tile -- whose coordinates are this.tileID -- that
@@ -284,13 +284,13 @@ class ImageSource extends Evented implements Source {
         }
     }
 
-    serialize(): any {
+    serialize = (): ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification => {
         return {
             type: 'image',
             url: this.options.url,
             coordinates: this.coordinates
         };
-    }
+    };
 
     hasTransition() {
         return false;

src/source/source.ts

@@ -1,12 +1,21 @@
-import {bindAll} from '../util/util';
+import VectorTileSource from '../source/vector_tile_source';
+import RasterTileSource from '../source/raster_tile_source';
+import RasterDEMTileSource from '../source/raster_dem_tile_source';
+import GeoJSONSource from '../source/geojson_source';
+import VideoSource from '../source/video_source';
+import ImageSource from '../source/image_source';
+import CanvasSource from '../source/canvas_source';
 
+import type {SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type Dispatcher from '../util/dispatcher';
 import type {Event, Evented} from '../util/evented';
 import type Map from '../ui/map';
 import type Tile from './tile';
-import type {OverscaledTileID} from './tile_id';
+import type {OverscaledTileID, CanonicalTileID} from './tile_id';
 import type {Callback} from '../types/callback';
-import {CanonicalTileID} from './tile_id';
+import type {CanvasSourceSpecification} from '../source/canvas_source';
+
+const registeredSources = {} as {[key:string]: SourceClass};
 
 /**
  * The `Source` interface must be implemented by each source type, including "core" types (`vector`, `raster`,
@@ -72,29 +81,9 @@ type SourceStatics = {
 };
 
 export type SourceClass = {
-    new (...args: any): Source;
+    new (id: string, specification: SourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented): Source;
 } & SourceStatics;
 
-import vector from '../source/vector_tile_source';
-import raster from '../source/raster_tile_source';
-import rasterDem from '../source/raster_dem_tile_source';
-import geojson from '../source/geojson_source';
-import video from '../source/video_source';
-import image from '../source/image_source';
-import canvas from '../source/canvas_source';
-
-import type {SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
-
-const sourceTypes = {
-    vector,
-    raster,
-    'raster-dem': rasterDem,
-    geojson,
-    video,
-    image,
-    canvas
-};
-
 /*
  * Creates a tiled data source instance given an options object.
  *
@@ -105,25 +94,40 @@ const sourceTypes = {
  * @param {Dispatcher} dispatcher
  * @returns {Source}
  */
-export const create = function(id: string, specification: SourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
-    const source = new sourceTypes[specification.type](id, (specification as any), dispatcher, eventedParent);
+export const create = (id: string, specification: SourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) => {
+
+    const Class = getSourceType(specification.type);
+    const source = new Class(id, specification, dispatcher, eventedParent);
 
     if (source.id !== id) {
         throw new Error(`Expected Source id to be ${id} instead of ${source.id}`);
     }
 
-    bindAll(['load', 'abort', 'unload', 'serialize', 'prepare'], source);
     return source;
 };
 
-export const getSourceType = function (name: string) {
-    return sourceTypes[name];
+export const getSourceType = (name: string): SourceClass => {
+    switch (name) {
+        case 'geojson':
+            return GeoJSONSource;
+        case 'image':
+            return ImageSource;
+        case 'raster':
+            return RasterTileSource;
+        case 'raster-dem':
+            return RasterDEMTileSource;
+        case 'vector':
+            return VectorTileSource;
+        case 'video':
+            return VideoSource;
+        case 'canvas':
+            return CanvasSource;
+    }
+    return registeredSources[name];
 };
 
-export const setSourceType = function (name: string, type: {
-    new (...args: any): Source;
-}) {
-    sourceTypes[name] = type;
+export const setSourceType = (name: string, type: SourceClass) => {
+    registeredSources[name] = type;
 };
 
 export interface Actor {

src/source/vector_tile_source.ts

@@ -14,6 +14,10 @@ import type {Callback} from '../types/callback';
 import type {Cancelable} from '../types/cancelable';
 import type {VectorSourceSpecification, PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
 
+export type VectorTileSourceOptions = VectorSourceSpecification & {
+    collectResourceTiming?: boolean;
+}
+
 /**
  * A source containing vector tiles in [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/).
  * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
@@ -62,9 +66,7 @@ class VectorTileSource extends Evented implements Source {
     _tileJSONRequest: Cancelable;
     _loaded: boolean;
 
-    constructor(id: string, options: VectorSourceSpecification & {
-        collectResourceTiming: boolean;
-    }, dispatcher: Dispatcher, eventedParent: Evented) {
+    constructor(id: string, options: VectorTileSourceOptions, dispatcher: Dispatcher, eventedParent: Evented) {
         super();
         this.id = id;
         this.dispatcher = dispatcher;
@@ -90,7 +92,7 @@ class VectorTileSource extends Evented implements Source {
         this.setEventedParent(eventedParent);
     }
 
-    load() {
+    load = () => {
         this._loaded = false;
         this.fire(new Event('dataloading', {dataType: 'source'}));
         this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, (err, tileJSON) => {
@@ -110,7 +112,7 @@ class VectorTileSource extends Evented implements Source {
                 this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
             }
         });
-    }
+    };
 
     loaded(): boolean {
         return this._loaded;
@@ -171,9 +173,9 @@ class VectorTileSource extends Evented implements Source {
         }
     }
 
-    serialize() {
+    serialize = (): VectorSourceSpecification => {
         return extend({}, this._options);
-    }
+    };
 
     loadTile(tile: Tile, callback: Callback<void>) {
         const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);

src/source/video_source.ts

@@ -61,7 +61,7 @@ class VideoSource extends ImageSource {
         this.options = options;
     }
 
-    load() {
+    load = () => {
         this._loaded = false;
         const options = this.options;
 
@@ -91,7 +91,7 @@ class VideoSource extends ImageSource {
                 this._finishLoading();
             }
         });
-    }
+    };
 
     /**
      * Pauses the video.
@@ -153,7 +153,7 @@ class VideoSource extends ImageSource {
      */
     // setCoordinates inherited from ImageSource
 
-    prepare() {
+    prepare = () => {
         if (Object.keys(this.tiles).length === 0 || this.video.readyState < 2) {
             return; // not enough data for current position
         }
@@ -190,15 +190,15 @@ class VideoSource extends ImageSource {
         if (newTilesLoaded) {
             this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
         }
-    }
+    };
 
-    serialize() {
+    serialize = (): VideoSourceSpecification => {
         return {
             type: 'video',
             urls: this.urls,
             coordinates: this.coordinates
         };
-    }
+    };
 
     hasTransition() {
         return this.video && !this.video.paused;