Initial migration to typescript (#845)

This migrates some utilities classes from javascript to typescript.
Nothing special about the migration, mainly added types and made sure
the code adheres to the strict mode.

I have picked some small files so git doesn't think they are the same
since they are "very different".
I hope that in later PRs, when migrating lager files this won't be an
issues.

package-lock.json

@@ -68,6 +68,7 @@
         "@storybook/react-vite": "^7.6.5",
         "@storybook/theming": "^7.6.5",
         "@types/cors": "^2.8.17",
+        "@types/lodash.throttle": "^4.1.9",
         "@types/react": "^16.14.52",
         "@types/react-dom": "^16.9.24",
         "@types/uuid": "^9.0.7",
@@ -4695,6 +4696,21 @@
       "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.throttle": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.9.tgz",
+      "integrity": "sha512-PCPVfpfueguWZQB7pJQK890F2scYKoDUL3iM522AptHWn7d5NQmeS/LTEHIcLr5PaTzl3dK2Z0xSUHHTHwaL5g==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mapbox__point-geometry": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",

package.json

@@ -97,6 +97,7 @@
     "@storybook/react-vite": "^7.6.5",
     "@storybook/theming": "^7.6.5",
     "@types/cors": "^2.8.17",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^16.14.52",
     "@types/react-dom": "^16.9.24",
     "@types/uuid": "^9.0.7",

src/components/Collapse.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Collapse as ReactCollapse } from 'react-collapse'
-import accessibility from '../../libs/accessibility'
+import {reducedMotionEnabled} from '../../libs/accessibility'
 
 
 export default class Collapse extends React.Component {
@@ -15,7 +15,7 @@ export default class Collapse extends React.Component {
   }
 
   render() {
-    if (accessibility.reducedMotionEnabled()) {
+    if (reducedMotionEnabled()) {
       return (
         <div style={{display: this.props.isActive ? "block" : "none"}}>
           {this.props.children}

src/components/FilterEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { combiningFilterOps } from '../libs/filterops.js'
+import {combiningFilterOps} from '../libs/filterops'
 import {mdiTableRowPlusAfter} from '@mdi/js';
 import {isEqual} from 'lodash';
 

src/components/SingleFilterEditor.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { otherFilterOps } from '../libs/filterops.js'
+import {otherFilterOps} from '../libs/filterops'
 import InputString from './InputString'
 import InputAutocomplete from './InputAutocomplete'
 import InputSelect from './InputSelect'

src/libs/accessibility.js

@@ -1,12 +0,0 @@
-import throttle from 'lodash.throttle'
-
-
-// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
-const reducedMotionEnabled = throttle(() => {
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-}, 3000);
-
-
-export default {
-  reducedMotionEnabled
-}

src/libs/accessibility.ts

@@ -0,0 +1,8 @@
+import throttle from 'lodash.throttle'
+
+export default {
+  // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
+  reducedMotionEnabled: throttle(() => {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }, 3000)
+}

src/libs/diffmessage.js

@@ -1,13 +0,0 @@
-import {diff} from '@maplibre/maplibre-gl-style-spec'
-
-export function diffMessages(beforeStyle, afterStyle) {
-  const changes = diff(beforeStyle, afterStyle)
-  return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
-}
-
-export function undoMessages(beforeStyle, afterStyle) {
-  return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m)
-}
-export function redoMessages(beforeStyle, afterStyle) {
-  return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m)
-}

src/libs/diffmessage.ts

@@ -0,0 +1,13 @@
+import {StyleSpecification, diff} from '@maplibre/maplibre-gl-style-spec'
+
+function diffMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
+  const changes = diff(beforeStyle, afterStyle)
+  return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
+}
+
+export function undoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
+  return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m)
+}
+export function redoMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
+  return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m)
+}

src/libs/document-uid.ts

@@ -3,7 +3,7 @@
  */
 let REF = 0;
 
-export default function(prefix="") {
+export default function generateUniqueId(prefix="") {
   REF++;
   return prefix+REF;
 }

src/libs/filterops.js

@@ -1,6 +0,0 @@
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-export const combiningFilterOps = ['all', 'any', 'none']
-export const setFilterOps = ['in', '!in']
-export const otherFilterOps = Object
-  .keys(latest.filter_operator.values)
-  .filter(op => combiningFilterOps.indexOf(op) < 0)

src/libs/filterops.ts

@@ -0,0 +1,7 @@
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+
+export const combiningFilterOps = ['all', 'any', 'none'];
+export const setFilterOps = ['in', '!in'];
+export const otherFilterOps = Object
+  .keys(latest.filter_operator.values)
+  .filter(op => combiningFilterOps.indexOf(op) < 0);

src/libs/query-util.js

@@ -1,12 +0,0 @@
-function asBool(queryObj, key) {
-  if(queryObj.hasOwnProperty(key)) {
-    return !queryObj[key].match(/^false|0$/);
-  }
-  else {
-    return false;
-  }
-}
-
-module.exports = {
-  asBool
-}

src/libs/sort-numerically.js

@@ -1,14 +0,0 @@
-export default function(a, b) {
-  a = parseFloat(a);
-  b = parseFloat(b);
-
-  if(a < b) {
-    return -1
-  }
-  else if(a > b) {
-    return 1
-  }
-  else {
-    return 0;
-  }
-}

src/libs/sort-numerically.ts

@@ -0,0 +1,14 @@
+export default function(num1: string | number, num2: string| number) {
+  const a = +num1;
+  const b = +num2;
+
+  if(a < b) {
+    return -1
+  }
+  else if(a > b) {
+    return 1
+  }
+  else {
+    return 0;
+  }
+}

src/libs/zoomcontrol.ts

@@ -1,5 +1,11 @@
+import {Map} from 'maplibre-gl';
+
 export default class ZoomControl {
-  onAdd(map) {
+  _map: Map| undefined = undefined;
+  _container: HTMLDivElement | undefined = undefined;
+  _textEl: HTMLSpanElement | null = null;
+
+  onAdd(map: Map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
@@ -15,17 +21,17 @@ export default class ZoomControl {
   }
   
   updateZoomLevel() {
-    this._textEl.innerHTML = this._map.getZoom().toFixed(2);
+    this._textEl!.innerHTML = this._map!.getZoom().toFixed(2);
   }
   
   addEventListeners (){
-    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map!.on('render', () => this.updateZoomLevel());
-    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map!.on('zoomIn', () => this.updateZoomLevel());
-    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+    this._map!.on('zoomOut', () => this.updateZoomLevel());
   }
 
   onRemove() {
-    this._container.parentNode.removeChild(this._container);
+    this._container!.parentNode!.removeChild(this._container!);
     this._map = undefined;
   }
 }