Fix exported typescript typings for version 2.0 (#623)

* Improve camera options and export some types

* Fix lint

* Comment out exports to see if it fixes the failing tests

* Export some stuff and don't export the others

* More exports

* small fixes - still far from working...

* Allow running dts-bundle-generator

* Added missing type declaration for grid-index

* Fix lint

* Rename duplicate grid index class

* Improve typings for exported classes

* Improve event types and map `on` signature

* Added dts-builder-generator

* Added changelog and renamed glsl

* Fix typo

* Rename es.js to mjs to allow import to know that this is an ES module

Author: HarelM

CHANGELOG.md

@@ -3,8 +3,6 @@
 ### Features and improvements
 
 - *...Add new stuff here...*
-- Improve attribution controls accessibility. See [#359](https://github.com/maplibre/maplibre-gl-js/issues/359)
-- Allow maxPitch value up to 85, use values greater than 60 at your own risk (#574)
 
 ### 🐞 Bug fixes
 
@@ -19,8 +17,22 @@
 - ** Breaking Change ** stopped supporting IE (internet explorer)
 - ** Breaking Change ** removed all code related to `accessToken` and mapbox specific urls, including telemetry etc.  Please do not use mapbox servers with this library.
 - ** Breaking Change ** removed `baseApiUrl` as it was used only for mapbox related urls
-- Added redraw function to map (#206)
-- Fix padding-top of the popup to improve readability of popup text (#354).
+- ** Breaking Change ** typescript typings have changed:
+  - `Style` => `StypeSpecification`
+  - `AnyLayer` => `LayerSpecification`
+  - `AnySourceData` => `SourceSpecification`
+  - `MapboxEvent` => `MapLibreEvent`
+  - `MapboxOptions` => `MapOptions`
+  - `MapBoxZoomEvent` => `MapLibreZoomEvent`
+  - `*SourceRaw` + `*SourceOptions` => `*SourceSpecification`
+  - `*Source` (source implementation definition) were removed 
+  - `*Layer` => `*LayerSpecification` 
+  - `*Paint` => `*LayerSpecification['paint']`
+  - `*Layout` => `*LayerSpecification['layout']`
+  - `MapboxGeoJSONFeature` => `GeoJSONFeature`
+- Added `redraw` function to map (#206)
+- Improve attribution controls accessibility. See [#359](https://github.com/maplibre/maplibre-gl-js/issues/359)
+- Allow maxPitch value up to 85, use values greater than 60 at your own risk (#574)
 - *...Add new stuff here...*
 
 ### 🐞 Bug fixes
@@ -29,6 +41,7 @@
 - Fix tile placeholder replacement to allow for placeholders to be in a URL more than once. (#348)
 - Fix type check for non dom environment. (#334)
 - Fix precision problem in patterns when overzoomed in OpenGL ES devices.
+- Fix padding-top of the popup to improve readability of popup text (#354).
 
 ## 1.15.2
 

build/copy-glsl-files.js build/post-ts-build.jsbuild/copy-glsl-files.js renamed to build/post-ts-build.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import glob from 'glob';
+import child_process from 'child_process';
 
 let args = process.argv.slice(2);
 let outputBaseDir = args[0];
@@ -11,6 +12,8 @@ console.log(`Copying glsl files to ${outputBaseDir}, minify: ${minify}`);
  * This script is intended to copy the glsl file to the compilation output folder,
  * change their extension to .js and export the shaders as strings in javascript.
  * It will also minify them a bit if needed and change the extension to .js
+ * After that it will create a combined typescript definition file and manipulate it a bit
+ * It will also create a simple package.json file to allow importing this package in webpack
  */
 
 glob("./src/**/*.glsl", null, (err, files) => {
@@ -32,3 +35,17 @@ glob("./src/**/*.glsl", null, (err, files) => {
     }
     console.log(`Finished converting ${files.length} glsl files`);
 });
+
+if (!fs.existsSync("dist")) {
+    fs.mkdirSync("dist");
+}
+
+console.log(`Starting bundling types`);
+const outputFile = "./dist/maplibre-gl.d.ts";
+child_process.execSync(`dts-bundle-generator --no-check --umd-module-name=maplibregl -o ${outputFile} ./src/index.ts`);
+let types = fs.readFileSync(outputFile, 'utf8');
+types = types.replace(/declare class/g, "export declare class");
+fs.writeFileSync(outputFile, types);
+console.log(`Finished bundling types`);
+
+fs.writeFileSync("./dist/package.json", '{ "type": "commonjs" }');

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "2.0.0-pre.5",
+  "version": "2.0.0-pre.6",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -12,7 +12,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "types": "types/index.d.ts",
+  "types": "dist/maplibre-gl.d.ts",
   "type": "module",
   "dependencies": {
     "@mapbox/geojson-rewind": "^0.5.0",
@@ -101,6 +101,7 @@
     "d3": "^4.12.0",
     "diff": "^4.0.1",
     "documentation": "~12.1.1",
+    "dts-bundle-generator": "^6.0.0",
     "ejs": "^3.1.6",
     "eslint": "^7.32.0",
     "eslint-config-mourner": "^3.0.0",
@@ -172,10 +173,10 @@
     "./rollup/build/tsc/src/util/web_worker.js": "./build/web_worker_replacement.js"
   },
   "scripts": {
-    "build-glsl": "node build/copy-glsl-files.js ./rollup/build/tsc/src/shaders",
-    "build-glsl-min": "node build/copy-glsl-files.js ./rollup/build/tsc/src/shaders true",
-    "build-tsc": "tsc && npm run build-glsl",
-    "build-tsc-min": "tsc && npm run build-glsl-min",
+    "build-post-ts": "node build/post-ts-build.js ./rollup/build/tsc/src/shaders",
+    "build-post-ts-min": "node build/post-ts-build.js ./rollup/build/tsc/src/shaders true",
+    "build-tsc": "tsc && npm run build-post-ts",
+    "build-tsc-min": "tsc && npm run build-post-ts-min",
     "build-dev": "npm run build-tsc && rollup -c --environment BUILD:dev",
     "watch-dev": "npm run build-tsc && rollup -c --environment BUILD:dev --watch",
     "build-prod": "npm run build-tsc && rollup -c --environment BUILD:production",
@@ -214,7 +215,6 @@
     "build/",
     "dist/maplibre-gl*",
     "dist/style-spec/",
-    "types/",
     "src/"
   ]
 }

package.json

@@ -12,7 +12,7 @@ const config = [{
     input: 'rollup/build/tsc/src/style-spec/style-spec.js',
     output: {
         name: 'maplibreGlStyleSpecification',
-        file: `dist/style-spec/${esm ? 'index.es.js' : 'index.js'}`,
+        file: `dist/style-spec/${esm ? 'index.mjs' : 'index.js'}`,
         format: esm ? 'esm' : 'umd',
         sourcemap: true
     },

rollup.config.style-spec.js

@@ -3,7 +3,7 @@ import loadGeometry from './load_geometry';
 import toEvaluationFeature from './evaluation_feature';
 import EXTENT from './extent';
 import featureFilter from '../style-spec/feature_filter';
-import Grid from 'grid-index';
+import TransferableGridIndex from 'grid-index';
 import DictionaryCoder from '../util/dictionary_coder';
 import vt from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
@@ -45,8 +45,8 @@ class FeatureIndex {
     x: number;
     y: number;
     z: number;
-    grid: Grid;
-    grid3D: Grid;
+    grid: TransferableGridIndex;
+    grid3D: TransferableGridIndex;
     featureIndexArray: FeatureIndexArray;
     promoteId?: PromoteIdSpecification;
 
@@ -61,8 +61,8 @@ class FeatureIndex {
         this.x = tileID.canonical.x;
         this.y = tileID.canonical.y;
         this.z = tileID.canonical.z;
-        this.grid = new Grid(EXTENT, 16, 0);
-        this.grid3D = new Grid(EXTENT, 16, 0);
+        this.grid = new TransferableGridIndex(EXTENT, 16, 0);
+        this.grid3D = new TransferableGridIndex(EXTENT, 16, 0);
         this.featureIndexArray = new FeatureIndexArray();
         this.promoteId = promoteId;
     }

src/data/feature_index.ts

@@ -96,11 +96,41 @@ class EdgeInsets {
     }
 }
 
+/**
+ * Options for setting padding on calls to methods such as {@link Map#fitBounds}, {@link Map#fitScreenCoordinates}, and {@link Map#setPadding}. Adjust these options to set the amount of padding in pixels added to the edges of the canvas. Set a uniform padding on all edges or individual values for each edge. All properties of this object must be
+ * non-negative integers.
+ *
+ * @example
+ * var bbox = [[-79, 43], [-73, 45]];
+ * map.fitBounds(bbox, {
+ *   padding: {top: 10, bottom:25, left: 15, right: 5}
+ * });
+ *
+ * @example
+ * var bbox = [[-79, 43], [-73, 45]];
+ * map.fitBounds(bbox, {
+ *   padding: 20
+ * });
+ * @see [Fit to the bounds of a LineString](https://maplibre.org/maplibre-gl-js-docs/example/zoomto-linestring/)
+ * @see [Fit a map to a bounding box](https://maplibre.org/maplibre-gl-js-docs/example/fitbounds/)
+ */
 export type PaddingOptions = {
-  top: number;
-  bottom: number;
-  right: number;
-  left: number;
+    /**
+    * @property {number} top Padding in pixels from the top of the map canvas.
+    */
+    top: number;
+    /**
+     * @property {number} bottom Padding in pixels from the bottom of the map canvas.
+     */
+    bottom: number;
+    /**
+     * @property {number} left Padding in pixels from the left of the map canvas.
+     */
+    right: number;
+    /**
+     * @property {number} right Padding in pixels from the right of the map canvas.
+     */
+    left: number;
 };
 
 export default EdgeInsets;

src/geo/edge_insets.ts

@@ -1,3 +1,5 @@
+/// <reference path="./types/glsl.d.ts" />
+/// <reference path="./types/non-typed-modules.d.ts" />
 import assert from 'assert';
 import {supported} from '@mapbox/mapbox-gl-supported';
 
@@ -235,6 +237,5 @@ Debug.extend(exported, {isSafari, getPerformanceMetrics: PerformanceUtils.getPer
   */
 
 export default exported;
-
 // canary assert: used to confirm that asserts have been removed from production build
 assert(true, 'canary assert');

src/index.ts

@@ -488,7 +488,7 @@ class Painter {
         this.id = layer.id;
 
         this.gpuTimingStart(layer);
-        draw[layer.type](painter, sourceCache, layer, coords, this.style.placement.variableOffsets);
+        draw[layer.type](painter, sourceCache, layer as any, coords, this.style.placement.variableOffsets);
         this.gpuTimingEnd();
     }