Migrate all the non react components code to typescript (#847)

This completes the migration to typescript of all the non react
components code.
The only changes introduced besides types are the type checks using
`"something" in object` which narrows down types in typescript.

package.json

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

src/components/ModalOpen.jsx

@@ -9,7 +9,7 @@ import InputUrl from './InputUrl'
 import {MdFileUpload} from 'react-icons/md'
 import {MdAddCircleOutline} from 'react-icons/md'
 
-import style from '../libs/style.js'
+import style from '../libs/style'
 import publicStyles from '../config/styles.json'
 
 class PublicStyle extends React.Component {

src/libs/apistore.js → src/libs/apistore.ts

@@ -1,10 +1,21 @@
 import style from './style.js'
-import {format} from '@maplibre/maplibre-gl-style-spec'
+import {StyleSpecification, format} from '@maplibre/maplibre-gl-style-spec'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
+export type ApiStyleStoreOptions = {
+  port?: string
+  host?: string
+  onLocalStyleChange?: (style: any) => void
+}
+
 export class ApiStyleStore {
 
-  constructor(opts) {
+  localUrl: string;
+  websocketUrl: string;
+  latestStyleId: string | undefined = undefined;
+  onLocalStyleChange: (style: any) => void;
+
+  constructor(opts: ApiStyleStoreOptions) {
     this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
     const port = opts.port || '8000'
     const host = opts.host || 'localhost'
@@ -13,7 +24,7 @@ export class ApiStyleStore {
     this.init = this.init.bind(this)
   }
 
-  init(cb) {
+  init(cb: (...args: any[]) => void) {
     fetch(this.localUrl + '/styles', {
       mode: 'cors',
     })
@@ -26,7 +37,7 @@ export class ApiStyleStore {
       this.notifyLocalChanges()
       cb(null)
     })
-    .catch(function(e) {
+    .catch(() => {
       cb(new Error('Can not connect to style API'))
     })
   }
@@ -47,7 +58,7 @@ export class ApiStyleStore {
     }
   }
 
-  latestStyle(cb) {
+  latestStyle(cb: (...args: any[]) => void) {
     if(this.latestStyleId) {
       fetch(this.localUrl + '/styles/' + this.latestStyleId, {
         mode: 'cors',
@@ -64,7 +75,7 @@ export class ApiStyleStore {
   }
 
   // Save current style replacing previous version
-  save(mapStyle) {
+  save(mapStyle: StyleSpecification & { id: string }) {
     const styleJSON = format(
       style.stripAccessTokens(
         style.replaceAccessTokens(mapStyle)

src/libs/highlight.js → src/libs/highlight.ts

@@ -1,17 +1,20 @@
+// @ts-ignore
 import stylegen from 'mapbox-gl-inspect/lib/stylegen'
+// @ts-ignore
 import colors from 'mapbox-gl-inspect/lib/colors'
+import {FilterSpecification,LayerSpecification } from '@maplibre/maplibre-gl-style-spec'
 
-export function colorHighlightedLayer(layer) {
+export function colorHighlightedLayer(layer: LayerSpecification) {
   if(!layer || layer.type === 'background' || layer.type === 'raster') return null
 
-  function changeLayer(l) {
+  function changeLayer(l: LayerSpecification & {filter?: FilterSpecification}) {
     if(l.type === 'circle') {
-      l.paint['circle-radius'] = 3
+      l.paint!['circle-radius'] = 3
     } else if(l.type === 'line') {
-      l.paint['line-width'] = 2
+      l.paint!['line-width'] = 2
     }
 
-    if(layer.filter) {
+    if("filter" in layer) {
       l.filter = layer.filter
     } else {
       delete l['filter']
@@ -21,8 +24,7 @@ export function colorHighlightedLayer(layer) {
   }
 
   const sourceLayerId = layer['source-layer'] || ''
-  const color = colors.brightColor(sourceLayerId, 1)
-  const layers = []
+  const color = colors.brightColor(sourceLayerId, 1);
 
   if(layer.type === "fill" || layer.type === 'fill-extrusion') {
     return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']))

src/libs/layer.js → src/libs/layer.ts

@@ -1,17 +1,18 @@
 import {latest} from '@maplibre/maplibre-gl-style-spec'
+import { LayerSpecification } from 'maplibre-gl'
 
-export function changeType(layer, newType) {
-  const changedPaintProps = { ...layer.paint }
+export function changeType(layer: LayerSpecification, newType: string) {
+  const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint }
   Object.keys(changedPaintProps).forEach(propertyName => {
     if(!(propertyName in latest['paint_' + newType])) {
-      delete changedPaintProps[propertyName]
+      delete changedPaintProps[propertyName as keyof LayerSpecification["paint"]]
     }
   })
 
-  const changedLayoutProps = { ...layer.layout }
+  const changedLayoutProps: LayerSpecification["layout"] = { ...layer.layout }
   Object.keys(changedLayoutProps).forEach(propertyName => {
     if(!(propertyName in latest['layout_' + newType])) {
-      delete changedLayoutProps[propertyName]
+      delete changedLayoutProps[propertyName as keyof LayerSpecification["layout"]]
     }
   })
 
@@ -26,15 +27,15 @@ export function changeType(layer, newType) {
 /** A {@property} in either the paint our layout {@group} has changed
  * to a {@newValue}.
  */
-export function changeProperty(layer, group, property, newValue) {
+export function changeProperty(layer: LayerSpecification, group: keyof LayerSpecification, property: string, newValue: any) {
   // Remove the property if undefined
   if(newValue === undefined) {
     if(group) {
-      const newLayer = {
+      const newLayer: any = {
         ...layer,
         // Change object so the diff works in ./src/components/map/MaplibreGlMap.jsx
         [group]: {
-          ...layer[group]
+          ...layer[group] as any
         }
       };
       delete newLayer[group][property];
@@ -45,7 +46,7 @@ export function changeProperty(layer, group, property, newValue) {
       }
       return newLayer;
     } else {
-      const newLayer = {
+      const newLayer: any = {
         ...layer
       };
       delete newLayer[property];
@@ -57,7 +58,7 @@ export function changeProperty(layer, group, property, newValue) {
       return {
         ...layer,
         [group]: {
-          ...layer[group],
+          ...layer[group] as any,
           [property]: newValue
         }
       }

src/libs/layerwatcher.js → src/libs/layerwatcher.ts

@@ -1,10 +1,22 @@
 import throttle from 'lodash.throttle'
 import isEqual from 'lodash.isequal'
+import { Map } from 'maplibre-gl';
+
+export type LayerWatcherOptions = {
+  onSourcesChange?: (sources: { [sourceId: string]: string[] }) => void;
+  onVectorLayersChange?: (vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } }) => void;
+}
 
 /** Listens to map events to build up a store of available vector
  * layers contained in the tiles */
 export default class LayerWatcher {
-  constructor(opts = {}) {
+  onSourcesChange: (sources: { [sourceId: string]: string[] }) => void;
+  onVectorLayersChange: (vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } }) => void;
+  throttledAnalyzeVectorLayerFields: (map: any) => void;
+  _sources: { [sourceId: string]: string[] };
+  _vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } };
+
+  constructor(opts: LayerWatcherOptions = {}) {
     this.onSourcesChange = opts.onSourcesChange || (() => {})
     this.onVectorLayersChange = opts.onVectorLayersChange || (() => {})
 
@@ -17,13 +29,13 @@ export default class LayerWatcher {
     this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000)
   }
 
-  analyzeMap(map) {
+  analyzeMap(map: Map) {
     const previousSources = { ...this._sources }
 
     Object.keys(map.style.sourceCaches).forEach(sourceId => {
       //NOTE: This heavily depends on the internal API of Maplibre GL
       //so this breaks between Maplibre GL JS releases
-      this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
+      this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds as string[];
     })
 
     if(!isEqual(previousSources, this._sources)) {
@@ -33,14 +45,14 @@ export default class LayerWatcher {
     this.throttledAnalyzeVectorLayerFields(map)
   }
 
-  analyzeVectorLayerFields(map) {
+  analyzeVectorLayerFields(map: Map) {
     const previousVectorLayers = { ...this._vectorLayers }
 
     Object.keys(this._sources).forEach(sourceId => {
       (this._sources[sourceId] || []).forEach(vectorLayerId => {
         const knownProperties = this._vectorLayers[vectorLayerId] || {}
         const params = { sourceLayer: vectorLayerId }
-        map.querySourceFeatures(sourceId, params).forEach(feature => {
+        map.querySourceFeatures(sourceId, params as any).forEach(feature => {
           Object.keys(feature.properties).forEach(propertyName => {
             const knownPropertyValues = knownProperties[propertyName] || {}
             knownPropertyValues[feature.properties[propertyName]] = {}

src/libs/maplibre-rtl.js → src/libs/maplibre-rtl.ts

@@ -1,3 +1,3 @@
 import MapLibreGl from "maplibre-gl"
 
-MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js');
+MapLibreGl.setRTLTextPlugin('https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js', () => {});

src/libs/metadata.js → src/libs/metadata.ts

@@ -1,6 +1,6 @@
 import npmurl from 'url'
 
-function loadJSON(url, defaultValue, cb) {
+function loadJSON(url: string, defaultValue: any, cb: (...args: any[]) => void) {
   fetch(url, {
     mode: 'cors',
     credentials: "same-origin"
@@ -17,7 +17,7 @@ function loadJSON(url, defaultValue, cb) {
   })
 }
 
-export function downloadGlyphsMetadata(urlTemplate, cb) {
+export function downloadGlyphsMetadata(urlTemplate: string, cb: (...args: any[]) => void) {
   if(!urlTemplate) return cb([])
 
   // Special handling because Tileserver GL serves the fontstacks metadata differently
@@ -27,14 +27,14 @@ export function downloadGlyphsMetadata(urlTemplate, cb) {
   if(urlObj.pathname === normPathPart) {
     urlObj.pathname = '/fontstacks.json';
   } else {
-    urlObj.pathname = urlObj.pathname.replace(normPathPart, '.json');
+    urlObj.pathname = urlObj.pathname!.replace(normPathPart, '.json');
   }
   let url = npmurl.format(urlObj);
 
   loadJSON(url, [], cb)
 }
 
-export function downloadSpriteMetadata(baseUrl, cb) {
+export function downloadSpriteMetadata(baseUrl: string, cb: (...args: any[]) => void) {
   if(!baseUrl) return cb([])
   const url = baseUrl + '.json'
   loadJSON(url, {}, glyphs => cb(Object.keys(glyphs)))

src/libs/revisions.js → src/libs/revisions.ts

@@ -1,4 +1,10 @@
+import type {StyleSpecification} from "@maplibre/maplibre-gl-style-spec";
+
 export class RevisionStore {
+  revisions: StyleSpecification[];
+  currentIdx: number;
+
+
   constructor(initialRevisions=[]) {
     this.revisions = initialRevisions
     this.currentIdx = initialRevisions.length - 1
@@ -12,7 +18,7 @@ export class RevisionStore {
     return this.revisions[this.currentIdx]
   }
 
-  addRevision(revision) {
+  addRevision(revision: StyleSpecification) {
     //TODO: compare new revision style id with old ones
     //and ensure that it is always the same id
     this.revisions.push(revision)
@@ -21,15 +27,15 @@ export class RevisionStore {
 
   undo() {
     if(this.currentIdx > 0) {
-      this.currentIdx--
+      this.currentIdx--;
     }
-    return this.current
+    return this.current;
   }
 
   redo() {
     if(this.currentIdx < this.revisions.length - 1) {
       this.currentIdx++
     }
-    return this.current
+    return this.current;
   }
 }

src/libs/source.ts

@@ -0,0 +1,27 @@
+import type {StyleSpecification, SourceSpecification} from "@maplibre/maplibre-gl-style-spec";
+
+export function deleteSource(mapStyle: StyleSpecification, sourceId: string) {
+  const remainingSources = { ...mapStyle.sources}
+  delete remainingSources[sourceId]
+  return {
+    ...mapStyle,
+    sources: remainingSources
+  }
+}
+
+
+export function addSource(mapStyle: StyleSpecification, sourceId: string, source: SourceSpecification) {
+  return changeSource(mapStyle, sourceId, source)
+}
+
+export function changeSource(mapStyle: StyleSpecification, sourceId: string, source: SourceSpecification) {
+  const changedSources = {
+    ...mapStyle.sources,
+    [sourceId]: source
+  }
+  return {
+    ...mapStyle,
+    sources: changedSources
+  }
+}
+