Migration of jsx files to tsx 3 (#851)

This is in continue to:
- #850
- #848

The last files should be converted as part of this PR, there are only a
handful left.

src/libs/apistore.ts

@@ -1,10 +1,11 @@
 import style from './style.js'
-import {StyleSpecification, format} from '@maplibre/maplibre-gl-style-spec'
+import {format} from '@maplibre/maplibre-gl-style-spec'
+import type {StyleSpecification} from 'maplibre-gl'
 import ReconnectingWebSocket from 'reconnecting-websocket'
 
 export type ApiStyleStoreOptions = {
-  port?: string
-  host?: string
+  port: string | null
+  host: string | null
   onLocalStyleChange?: (style: any) => void
 }
 

src/libs/diffmessage.ts

@@ -1,4 +1,5 @@
-import {StyleSpecification, diff} from '@maplibre/maplibre-gl-style-spec'
+import {diff} from '@maplibre/maplibre-gl-style-spec'
+import type {StyleSpecification} from 'maplibre-gl'
 
 function diffMessages(beforeStyle: StyleSpecification, afterStyle: StyleSpecification) {
   const changes = diff(beforeStyle, afterStyle)

src/libs/highlight.ts

@@ -2,40 +2,42 @@
 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'
+import type {FilterSpecification,LayerSpecification } from 'maplibre-gl'
 
-export function colorHighlightedLayer(layer: LayerSpecification) {
-  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
+export type HighlightedLayer = LayerSpecification & {filter?: FilterSpecification};
 
-  function changeLayer(l: LayerSpecification & {filter?: FilterSpecification}) {
-    if(l.type === 'circle') {
-      l.paint!['circle-radius'] = 3
-    } else if(l.type === 'line') {
-      l.paint!['line-width'] = 2
-    }
-
-    if("filter" in layer) {
-      l.filter = layer.filter
-    } else {
-      delete l['filter']
-    }
-    l.id = l.id + '_highlight'
-    return l
+function changeLayer(l: HighlightedLayer, layer: LayerSpecification) {
+  if(l.type === 'circle') {
+    l.paint!['circle-radius'] = 3
+  } else if(l.type === 'line') {
+    l.paint!['line-width'] = 2
   }
 
+  if("filter" in layer) {
+    l.filter = layer.filter
+  } else {
+    delete l['filter']
+  }
+  l.id = l.id + '_highlight'
+  return l
+}
+
+export function colorHighlightedLayer(layer?: LayerSpecification): HighlightedLayer | null {
+  if(!layer || layer.type === 'background' || layer.type === 'raster') return null
+
   const sourceLayerId = layer['source-layer'] || ''
   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']))
+    return changeLayer(stylegen.polygonLayer(color, color, layer.source, layer['source-layer']), layer)
   }
 
   if(layer.type === "symbol" || layer.type === 'circle') {
-    return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']))
+    return changeLayer(stylegen.circleLayer(color, layer.source, layer['source-layer']), layer)
   }
 
   if(layer.type === 'line') {
-    return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']))
+    return changeLayer(stylegen.lineLayer(color, layer.source, layer['source-layer']), layer)
   }
 
   return null

src/libs/layer.ts

@@ -27,7 +27,7 @@ export function changeType(layer: LayerSpecification, newType: string) {
 /** A {@property} in either the paint our layout {@group} has changed
  * to a {@newValue}.
  */
-export function changeProperty(layer: LayerSpecification, group: keyof LayerSpecification, property: string, newValue: any) {
+export function changeProperty(layer: LayerSpecification, group: keyof LayerSpecification | null, property: string, newValue: any) {
   // Remove the property if undefined
   if(newValue === undefined) {
     if(group) {

src/libs/revisions.ts

@@ -1,7 +1,7 @@
-import type {StyleSpecification} from "@maplibre/maplibre-gl-style-spec";
+import type {StyleSpecification} from "maplibre-gl";
 
 export class RevisionStore {
-  revisions: StyleSpecification[];
+  revisions: (StyleSpecification & {id: string})[];
   currentIdx: number;
 
 
@@ -18,7 +18,7 @@ export class RevisionStore {
     return this.revisions[this.currentIdx]
   }
 
-  addRevision(revision: StyleSpecification) {
+  addRevision(revision: StyleSpecification & {id: string}) {
     //TODO: compare new revision style id with old ones
     //and ensure that it is always the same id
     this.revisions.push(revision)

src/libs/source.ts

@@ -1,4 +1,4 @@
-import type {StyleSpecification, SourceSpecification} from "@maplibre/maplibre-gl-style-spec";
+import type {StyleSpecification, SourceSpecification} from "maplibre-gl";
 
 export function deleteSource(mapStyle: StyleSpecification, sourceId: string) {
   const remainingSources = { ...mapStyle.sources}

src/libs/style.ts

@@ -1,4 +1,5 @@
-import {derefLayers, StyleSpecification, LayerSpecification} from '@maplibre/maplibre-gl-style-spec'
+import {derefLayers} from '@maplibre/maplibre-gl-style-spec'
+import type {StyleSpecification, LayerSpecification} from 'maplibre-gl'
 import tokens from '../config/tokens.json'
 
 // Empty style is always used if no style could be restored or fetched

src/libs/stylestore.ts

@@ -1,7 +1,7 @@
 import style from './style'
 import {loadStyleUrl} from './urlopen'
 import publicSources from '../config/styles.json'
-import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
+import type {StyleSpecification} from 'maplibre-gl'
 
 const storagePrefix = "maputnik"
 const stylePrefix = 'style'