[v8] Align type names across modules (#2468)

.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   check_branch:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     outputs:
       should_build: ${{ steps.permitted.outputs.result }}
 
@@ -30,7 +30,7 @@ jobs:
           echo "result=${result}" >> "$GITHUB_OUTPUT"
 
   release:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: check_branch
     permissions:
       contents: write

modules/main/src/mapbox-legacy/components/attribution-control.ts

@@ -1,32 +1,28 @@
 import * as React from 'react';
 import {useEffect, memo} from 'react';
 import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import {useControl} from './use-control';
 
-import type {ControlPosition, AttributionControlInstance} from '../types';
+import type {ControlPosition, AttributionControlOptions} from '../types/lib';
 
-export type AttributionControlProps<OptionsT> = OptionsT & {
+export type AttributionControlProps = AttributionControlOptions & {
   /** Placement of the control relative to the map. */
   position?: ControlPosition;
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 };
 
-function AttributionControl<AttributionControlOptions, ControlT extends AttributionControlInstance>(
-  props: AttributionControlProps<AttributionControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(
-    ({mapLib}) => new mapLib.AttributionControl(props) as ControlT,
-    {
-      position: props.position
-    }
-  );
+function _AttributionControl(props: AttributionControlProps) {
+  const ctrl = useControl(({mapLib}) => new mapLib.AttributionControl(props), {
+    position: props.position
+  });
 
   useEffect(() => {
+    // @ts-expect-error accessing private member
     applyReactStyle(ctrl._container, props.style);
   }, [props.style]);
 
   return null;
 }
 
-export default memo(AttributionControl);
+export const AttributionControl = memo(_AttributionControl);

modules/main/src/mapbox-legacy/components/fullscreen-control.ts

@@ -2,11 +2,11 @@
 import * as React from 'react';
 import {useEffect, memo} from 'react';
 import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import {useControl} from './use-control';
 
-import type {ControlPosition, FullscreenControlInstance} from '../types';
+import type {ControlPosition, FullscreenControlOptions} from '../types/lib';
 
-export type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {
+export type FullscreenControlProps = Omit<FullscreenControlOptions, 'container'> & {
   /** Id of the DOM element which should be made full screen. By default, the map container
    * element will be made full screen. */
   containerId?: string;
@@ -16,22 +16,21 @@ export type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {
   style?: React.CSSProperties;
 };
 
-function FullscreenControl<FullscreenControlOptions, ControlT extends FullscreenControlInstance>(
-  props: FullscreenControlProps<FullscreenControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(
+function _FullscreenControl(props: FullscreenControlProps) {
+  const ctrl = useControl(
     ({mapLib}) =>
       new mapLib.FullscreenControl({
         container: props.containerId && document.getElementById(props.containerId)
-      }) as ControlT,
+      }),
     {position: props.position}
   );
 
   useEffect(() => {
+    // @ts-expect-error accessing private member
     applyReactStyle(ctrl._controlContainer, props.style);
   }, [props.style]);
 
   return null;
 }
 
-export default memo(FullscreenControl);
+export const FullscreenControl = memo(_FullscreenControl);

modules/main/src/mapbox-legacy/components/geolocate-control.ts

@@ -1,74 +1,68 @@
 import * as React from 'react';
 import {useImperativeHandle, useRef, useEffect, forwardRef, memo} from 'react';
 import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import {useControl} from './use-control';
 
 import type {
   ControlPosition,
   GeolocateControlInstance,
-  GeolocateEvent,
-  GeolocateResultEvent,
-  GeolocateErrorEvent
-} from '../types';
+  GeolocateControlOptions
+} from '../types/lib';
+import type {GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent} from '../types/events';
 
-export type GeolocateControlProps<
-  OptionsT,
-  ControlT extends GeolocateControlInstance
-> = OptionsT & {
+export type GeolocateControlProps = GeolocateControlOptions & {
   /** Placement of the control relative to the map. */
   position?: ControlPosition;
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 
   /** Called on each Geolocation API position update that returned as success. */
-  onGeolocate?: (e: GeolocateResultEvent<ControlT>) => void;
+  onGeolocate?: (e: GeolocateResultEvent) => void;
   /** Called on each Geolocation API position update that returned as an error. */
-  onError?: (e: GeolocateErrorEvent<ControlT>) => void;
+  onError?: (e: GeolocateErrorEvent) => void;
   /** Called on each Geolocation API position update that returned as success but user position
    * is out of map `maxBounds`. */
-  onOutOfMaxBounds?: (e: GeolocateResultEvent<ControlT>) => void;
+  onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
   /** Called when the GeolocateControl changes to the active lock state. */
-  onTrackUserLocationStart?: (e: GeolocateEvent<ControlT>) => void;
+  onTrackUserLocationStart?: (e: GeolocateEvent) => void;
   /** Called when the GeolocateControl changes to the background state. */
-  onTrackUserLocationEnd?: (e: GeolocateEvent<ControlT>) => void;
+  onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
 
-function GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateControlInstance>(
-  props: GeolocateControlProps<GeolocateControlOptions, ControlT>,
-  ref: React.Ref<ControlT>
-) {
+function _GeolocateControl(props: GeolocateControlProps, ref: React.Ref<GeolocateControlInstance>) {
   const thisRef = useRef({props});
 
-  const ctrl = useControl<ControlT>(
+  const ctrl = useControl(
     ({mapLib}) => {
-      const gc = new mapLib.GeolocateControl(props) as ControlT;
+      const gc = new mapLib.GeolocateControl(props);
 
       // Hack: fix GeolocateControl reuse
       // When using React strict mode, the component is mounted twice.
       // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.
-      // @ts-expect-error private method
-      const setupUI = gc._setupUI;
-      // @ts-expect-error private method
+      // @ts-expect-error accessing private method
+      const setupUI = gc._setupUI.bind(gc);
+      // @ts-expect-error overriding private method
       gc._setupUI = args => {
+        // @ts-expect-error accessing private member
         if (!gc._container.hasChildNodes()) {
           setupUI(args);
         }
       };
 
       gc.on('geolocate', e => {
-        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent<ControlT>);
+        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent);
       });
       gc.on('error', e => {
-        thisRef.current.props.onError?.(e as GeolocateErrorEvent<ControlT>);
+        thisRef.current.props.onError?.(e as GeolocateErrorEvent);
       });
       gc.on('outofmaxbounds', e => {
-        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent<ControlT>);
+        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent);
       });
       gc.on('trackuserlocationstart', e => {
-        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent<ControlT>);
+        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent);
       });
       gc.on('trackuserlocationend', e => {
-        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent<ControlT>);
+        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent);
       });
 
       return gc;
@@ -81,10 +75,11 @@ function GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateCon
   useImperativeHandle(ref, () => ctrl, []);
 
   useEffect(() => {
+    // @ts-expect-error accessing private member
     applyReactStyle(ctrl._container, props.style);
   }, [props.style]);
 
   return null;
 }
 
-export default memo(forwardRef(GeolocateControl));
+export const GeolocateControl = memo(forwardRef(_GeolocateControl));

modules/main/src/mapbox-legacy/components/layer.ts

@@ -3,32 +3,29 @@ import {MapContext} from './map';
 import assert from '../utils/assert';
 import {deepEqual} from '../utils/deep-equal';
 
-import type {MapInstance, CustomLayerInterface, ILayer} from '../types';
+import type {MapInstance, CustomLayerInterface} from '../types/lib';
+import type {AnyLayer} from '../types/style-spec';
 
 // Omiting property from a union type, see
 // https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230
 type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: string} : T;
 type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> & {source?: string} : T;
 
-export type LayerProps<LayerT> = OptionalSource<OptionalId<LayerT>> & {
+export type LayerProps = (OptionalSource<OptionalId<AnyLayer>> | CustomLayerInterface) & {
   /** If set, the layer will be inserted before the specified layer */
   beforeId?: string;
 };
 
 /* eslint-disable complexity, max-statements */
-function updateLayer<LayerT extends ILayer>(
-  map: MapInstance,
-  id: string,
-  props: LayerProps<LayerT>,
-  prevProps: LayerProps<LayerT>
-) {
+function updateLayer(map: MapInstance, id: string, props: LayerProps, prevProps: LayerProps) {
   assert(props.id === prevProps.id, 'layer id changed');
   assert(props.type === prevProps.type, 'layer type changed');
 
   if (props.type === 'custom' || prevProps.type === 'custom') {
     return;
   }
 
+  // @ts-ignore filter does not exist in some Layer types
   const {layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId} = props;
 
   if (beforeId !== prevProps.beforeId) {
@@ -38,29 +35,30 @@ function updateLayer<LayerT extends ILayer>(
     const prevLayout = prevProps.layout || {};
     for (const key in layout) {
       if (!deepEqual(layout[key], prevLayout[key])) {
-        map.setLayoutProperty(id, key, layout[key]);
+        map.setLayoutProperty(id, key as any, layout[key]);
       }
     }
     for (const key in prevLayout) {
       if (!layout.hasOwnProperty(key)) {
-        map.setLayoutProperty(id, key, undefined);
+        map.setLayoutProperty(id, key as any, undefined);
       }
     }
   }
   if (paint !== prevProps.paint) {
     const prevPaint = prevProps.paint || {};
     for (const key in paint) {
       if (!deepEqual(paint[key], prevPaint[key])) {
-        map.setPaintProperty(id, key, paint[key]);
+        map.setPaintProperty(id, key as any, paint[key]);
       }
     }
     for (const key in prevPaint) {
       if (!paint.hasOwnProperty(key)) {
-        map.setPaintProperty(id, key, undefined);
+        map.setPaintProperty(id, key as any, undefined);
       }
     }
   }
 
+  // @ts-ignore filter does not exist in some Layer types
   if (!deepEqual(filter, prevProps.filter)) {
     map.setFilter(id, filter);
   }
@@ -69,14 +67,10 @@ function updateLayer<LayerT extends ILayer>(
   }
 }
 
-function createLayer<LayerT extends ILayer>(
-  map: MapInstance,
-  id: string,
-  props: LayerProps<LayerT>
-) {
+function createLayer(map: MapInstance, id: string, props: LayerProps) {
   // @ts-ignore
   if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {
-    const options: LayerProps<LayerT> = {...props, id};
+    const options: LayerProps = {...props, id};
     delete options.beforeId;
 
     // @ts-ignore
@@ -88,7 +82,7 @@ function createLayer<LayerT extends ILayer>(
 
 let layerCounter = 0;
 
-function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInterface>) {
+export function Layer(props: LayerProps) {
   const map = useContext(MapContext).map.getMap();
   const propsRef = useRef(props);
   const [, setStyleLoaded] = useState(0);
@@ -129,5 +123,3 @@ function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInte
 
   return null;
 }
-
-export default Layer;