Migrate to typescript

README.md

@@ -27,6 +27,8 @@ Use MapLibre GL JS bindings for React (https://visgl.github.io/react-map-gl/docs
 
 ### Roadmap
 
+Migrate to typescript
+
 This project's initial plans are outlined in the [Roadmap](https://github.com/maplibre/maplibre-gl-js/projects/2) project. The primary goal is consistency and backwards-compatability with previous releases and continued bug-fixes and maintenance going forward.
 
 ### Getting Involved

src/data/array_types.js → src/data/array_types.ts

@@ -1,6 +1,4 @@
 // This file is generated. Edit build/generate-struct-arrays.js, then run `yarn run codegen`.
-// @flow
-
 import assert from 'assert';
 import {Struct, StructArray} from '../util/struct_array';
 import {register} from '../util/web_worker_transfer';

src/data/bucket.js → src/data/bucket.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import type {CollisionBoxArray} from './array_types';
+import type { CollisionBoxArray } from './array_types';
 import type Style from '../style/style';
 import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
 import type FeatureIndex from './feature_index';
@@ -9,42 +7,48 @@ import type {FeatureStates} from '../source/source_state';
 import type {ImagePosition} from '../render/image_atlas';
 import type {CanonicalTileID} from '../source/tile_id';
 
-export type BucketParameters<Layer: TypedStyleLayer> = {
-    index: number,
-    layers: Array<Layer>,
-    zoom: number,
-    pixelRatio: number,
-    overscaling: number,
-    collisionBoxArray: CollisionBoxArray,
-    sourceLayerIndex: number,
-    sourceID: string
-}
+export type BucketParameters<Layer extends TypedStyleLayer> = {
+  index: number,
+  layers: Array<Layer>,
+  zoom: number,
+  pixelRatio: number,
+  overscaling: number,
+  collisionBoxArray: CollisionBoxArray,
+  sourceLayerIndex: number,
+  sourceID: string
+};
 
 export type PopulateParameters = {
-    featureIndex: FeatureIndex,
-    iconDependencies: {},
-    patternDependencies: {},
-    glyphDependencies: {},
-    availableImages: Array<string>
-}
+  featureIndex: FeatureIndex,
+  iconDependencies: {},
+  patternDependencies: {},
+  glyphDependencies: {},
+  availableImages: Array<string>
+};
 
 export type IndexedFeature = {
-    feature: VectorTileFeature,
-    id: number | string,
-    index: number,
-    sourceLayerIndex: number,
-}
+  feature: VectorTileFeature,
+  id: number | string,
+  index: number,
+  sourceLayerIndex: number
+};
 
-export type BucketFeature = {|
-    index: number,
-    sourceLayerIndex: number,
-    geometry: Array<Array<Point>>,
-    properties: Object,
-    type: 1 | 2 | 3,
-    id?: any,
-    +patterns: {[_: string]: {"min": string, "mid": string, "max": string}},
-    sortKey?: number
-|};
+export type BucketFeature = {
+  index: number,
+  sourceLayerIndex: number,
+  geometry: Array<Array<Point>>,
+  properties: any,
+  type: 1 | 2 | 3,
+  id?: any,
+  readonly patterns: {
+    [_: string]: {
+      "min": string,
+      "mid": string,
+      "max": string
+    }
+  },
+  sortKey?: number
+};
 
 /**
  * The `Bucket` interface is the single point of knowledge about turning vector
@@ -70,29 +74,39 @@ export type BucketFeature = {|
  * @private
  */
 export interface Bucket {
-    layerIds: Array<string>;
-    hasPattern: boolean;
-    +layers: Array<any>;
-    +stateDependentLayers: Array<any>;
-    +stateDependentLayerIds: Array<string>;
-    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID): void;
-    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}): void;
-    isEmpty(): boolean;
-
-    upload(context: Context): void;
-    uploadPending(): boolean;
-
-    /**
+  layerIds: Array<string>;
+  hasPattern: boolean;
+  readonly layers: Array<any>;
+  readonly stateDependentLayers: Array<any>;
+  readonly stateDependentLayerIds: Array<string>;
+  populate(
+    features: Array<IndexedFeature>,
+    options: PopulateParameters,
+    canonical: CanonicalTileID
+  ): void;
+  update(
+    states: FeatureStates,
+    vtLayer: VectorTileLayer,
+    imagePositions: {
+      [_: string]: ImagePosition
+    }
+  ): void;
+  isEmpty(): boolean;
+  upload(context: Context): void;
+  uploadPending(): boolean;
+  /**
      * Release the WebGL resources associated with the buffers. Note that because
      * buckets are shared between layers having the same layout properties, they
      * must be destroyed in groups (all buckets for a tile, or all symbol buckets).
      *
      * @private
      */
-    destroy(): void;
+  destroy(): void;
 }
 
-export function deserialize(input: Array<Bucket>, style: Style): {[_: string]: Bucket} {
+export function deserialize(input: Array<Bucket>, style: Style): {
+  [_: string]: Bucket
+} {
     const output = {};
 
     // Guard against the case where the map's style has been set to null while
@@ -110,9 +124,9 @@ export function deserialize(input: Array<Bucket>, style: Style): {[_: string]: B
 
         // look up StyleLayer objects from layer ids (since we don't
         // want to waste time serializing/copying them from the worker)
-        (bucket: any).layers = layers;
-        if ((bucket: any).stateDependentLayerIds) {
-            (bucket: any).stateDependentLayers = (bucket: any).stateDependentLayerIds.map((lId) => layers.filter((l) => l.id === lId)[0]);
+        (bucket as any).layers = layers;
+        if ((bucket as any).stateDependentLayerIds) {
+            (bucket as any).stateDependentLayers = (bucket as any).stateDependentLayerIds.map((lId) => layers.filter((l) => l.id === lId)[0]);
         }
         for (const layer of layers) {
             output[layer.id] = bucket;

src/data/bucket/fill_attributes.js → src/data/bucket/circle_attributes.ts

@@ -1,5 +1,4 @@
-// @flow
-import {createLayout} from '../../util/struct_array';
+import { createLayout } from '../../util/struct_array';
 
 const layout = createLayout([
     {name: 'a_pos', components: 2, type: 'Int16'}

src/data/bucket/circle_bucket.js → src/data/bucket/circle_bucket.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import {CircleLayoutArray} from '../array_types';
+import { CircleLayoutArray } from '../array_types';
 
 import {members as layoutAttributes} from './circle_attributes';
 import SegmentVector from '../segment';
@@ -42,7 +40,7 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
  * vector that is where it points.
  * @private
  */
-class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucket {
+class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> implements Bucket {
     index: number;
     zoom: number;
     overscaling: number;
@@ -85,7 +83,7 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
 
         // Heatmap layers are handled in this bucket and have no evaluated properties, so we check our access
         if (styleLayer.type === 'circle') {
-            circleSortKey = ((styleLayer: any): CircleStyleLayer).layout.get('circle-sort-key');
+            circleSortKey = (styleLayer as any as CircleStyleLayer).layout.get('circle-sort-key');
             sortFeaturesByKey = !circleSortKey.isConstant();
         }
 
@@ -118,7 +116,7 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
         if (sortFeaturesByKey) {
             bucketFeatures.sort((a, b) => {
                 // a.sortKey is always a number when in use
-                return ((a.sortKey: any): number) - ((b.sortKey: any): number);
+                return (a.sortKey as any as number) - (b.sortKey as any as number);
             });
         }
 
@@ -131,7 +129,9 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
         }
     }
 
-    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
     }

src/data/bucket/circle_attributes.js → src/data/bucket/fill_attributes.ts

@@ -1,5 +1,4 @@
-// @flow
-import {createLayout} from '../../util/struct_array';
+import { createLayout } from '../../util/struct_array';
 
 const layout = createLayout([
     {name: 'a_pos', components: 2, type: 'Int16'}

src/data/bucket/fill_bucket.js → src/data/bucket/fill_bucket.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import {FillLayoutArray} from '../array_types';
+import { FillLayoutArray } from '../array_types';
 
 import {members as layoutAttributes} from './fill_attributes';
 import SegmentVector from '../segment';
@@ -108,7 +106,7 @@ class FillBucket implements Bucket {
         if (sortFeaturesByKey) {
             bucketFeatures.sort((a, b) => {
                 // a.sortKey is always a number when in use
-                return ((a.sortKey: any): number) - ((b.sortKey: any): number);
+                return (a.sortKey as any as number) - (b.sortKey as any as number);
             });
         }
 
@@ -129,12 +127,16 @@ class FillBucket implements Bucket {
         }
     }
 
-    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
     }
 
-    addFeatures(options: PopulateParameters, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
+    addFeatures(options: PopulateParameters, canonical: CanonicalTileID, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         for (const feature of this.patternFeatures) {
             this.addFeature(feature, feature.geometry, feature.index, canonical, imagePositions);
         }
@@ -167,7 +169,9 @@ class FillBucket implements Bucket {
         this.segments2.destroy();
     }
 
-    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
+    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
             let numVertices = 0;
             for (const ring of polygon) {

src/data/bucket/fill_extrusion_attributes.js → src/data/bucket/fill_extrusion_attributes.ts

@@ -1,5 +1,4 @@
-// @flow
-import {createLayout} from '../../util/struct_array';
+import { createLayout } from '../../util/struct_array';
 
 const layout = createLayout([
     {name: 'a_pos',          components: 2, type: 'Int16'},

src/data/bucket/fill_extrusion_bucket.js → src/data/bucket/fill_extrusion_bucket.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import {FillExtrusionLayoutArray} from '../array_types';
+import { FillExtrusionLayoutArray } from '../array_types';
 
 import {members as layoutAttributes} from './fill_extrusion_attributes';
 import SegmentVector from '../segment';
@@ -119,14 +117,18 @@ class FillExtrusionBucket implements Bucket {
         }
     }
 
-    addFeatures(options: PopulateParameters, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
+    addFeatures(options: PopulateParameters, canonical: CanonicalTileID, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         for (const feature of this.features) {
             const {geometry} = feature;
             this.addFeature(feature, geometry, feature.index, canonical, imagePositions);
         }
     }
 
-    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         if (!this.stateDependentLayers.length) return;
         this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
     }
@@ -156,7 +158,9 @@ class FillExtrusionBucket implements Bucket {
         this.segments.destroy();
     }
 
-    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {[_: string]: ImagePosition}) {
+    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {
+      [_: string]: ImagePosition
+    }) {
         for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
             let numVertices = 0;
             for (const ring of polygon) {

src/data/bucket/heatmap_bucket.js → src/data/bucket/heatmap_bucket.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import CircleBucket from './circle_bucket';
 
 import {register} from '../../util/web_worker_transfer';

src/data/bucket/line_attributes.js → src/data/bucket/line_attributes.ts

@@ -1,5 +1,4 @@
-// @flow
-import {createLayout} from '../../util/struct_array';
+import { createLayout } from '../../util/struct_array';
 
 const lineLayoutAttributes = createLayout([
     {name: 'a_pos_normal', components: 2, type: 'Int16'},

src/data/bucket/line_attributes_ext.js → src/data/bucket/line_attributes_ext.ts

@@ -1,5 +1,4 @@
-// @flow
-import {createLayout} from '../../util/struct_array';
+import { createLayout } from '../../util/struct_array';
 
 const lineLayoutAttributesExt = createLayout([
     {name: 'a_uv_x', components: 1, type: 'Float32'},