Expose TypeScript types from @mapbox/mapbox-gl-style-spec (internal-8754)

GitOrigin-RevId: 6fcbb016c646b72891ba7a9ff2d7d5912b97cd2f

Author: stepankuzmin

src/style-spec/style-spec.ts

@@ -17,6 +17,8 @@ import {eachSource, eachLayer, eachProperty} from './visit';
 import validate from './validate_style';
 import validateMapboxApiSupported from './validate_mapbox_api_supported';
 
+export type * from './types';
+
 type ExpressionType = 'data-driven' | 'color-ramp' | 'data-constant' | 'constant';
 
 type ExpressionParameter =
@@ -32,7 +34,7 @@ type ExpressionParameter =
     | 'distance-from-center'
     | 'raster-particle-speed';
 
-export type ExpressionSpecification = {
+export type PropertyExpressionSpecification = {
     interpolated: boolean,
     parameters?: ExpressionParameter[],
     relaxZoomRestriction?: boolean
@@ -43,7 +45,7 @@ export type ArrayPropertySpecification =
         type: 'array';
         'property-type': ExpressionType;
         value: 'enum';
-        expression?: ExpressionSpecification,
+        expression?: PropertyExpressionSpecification,
         transition?: boolean,
         default?: string[],
         length?: number,
@@ -59,7 +61,7 @@ export type ArrayPropertySpecification =
         type: 'array';
         'property-type': ExpressionType;
         value: 'number';
-        expression?: ExpressionSpecification;
+        expression?: PropertyExpressionSpecification;
         transition?: boolean;
         default?: number[];
         minimum?: number;
@@ -77,7 +79,7 @@ export type ArrayPropertySpecification =
         type: 'array';
         'property-type': ExpressionType;
         value: 'string';
-        expression?: ExpressionSpecification;
+        expression?: PropertyExpressionSpecification;
         transition?: boolean;
         default?: string[];
         length?: number;
@@ -94,7 +96,7 @@ export type ArrayPropertySpecification =
 export type BooleanPropertySpecification = {
     type: 'boolean';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: boolean;
     overridable?: boolean;
@@ -108,7 +110,7 @@ export type BooleanPropertySpecification = {
 export type ColorPropertySpecification = {
     type: 'color';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: string;
     'use-theme'?: boolean;
@@ -123,7 +125,7 @@ export type ColorPropertySpecification = {
 export type EnumPropertySpecification = {
     type: 'enum';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: string;
     values?: {[_: string]: unknown};
@@ -137,7 +139,7 @@ export type EnumPropertySpecification = {
 export type FormattedPropertySpecification = {
     type: 'formatted';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: string;
     tokens?: boolean;
@@ -150,7 +152,7 @@ export type FormattedPropertySpecification = {
 export type NumberPropertySpecification = {
     type: 'number';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: number;
     minimum?: number;
@@ -167,7 +169,7 @@ export type NumberPropertySpecification = {
 export type ResolvedImagePropertySpecification = {
     type: 'resolvedImage';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: string;
     tokens?: boolean;
@@ -181,7 +183,7 @@ export type ResolvedImagePropertySpecification = {
 export type StringPropertySpecification = {
     type: 'string';
     'property-type': ExpressionType;
-    expression?: ExpressionSpecification;
+    expression?: PropertyExpressionSpecification;
     transition?: boolean;
     default?: string;
     tokens?: boolean;

src/style-spec/util/properties.ts

@@ -1,9 +1,9 @@
-import type {ExpressionSpecification, StylePropertySpecification} from '../style-spec';
+import type {PropertyExpressionSpecification, StylePropertySpecification} from '../style-spec';
 
-type ExpressionParameter = ExpressionSpecification['parameters'][number];
+type ExpressionParameter = PropertyExpressionSpecification['parameters'][number];
 
 function expressionHasParameter(
-    expression: ExpressionSpecification | null | undefined,
+    expression: PropertyExpressionSpecification | null | undefined,
     parameter: ExpressionParameter,
 ): boolean {
     return !!expression && !!expression.parameters && expression.parameters.indexOf(parameter) > -1;

test/build/typings/mapbox__mapbox-gl-style-spec.test.ts

@@ -1 +1,168 @@
-import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec.ts';
+/* eslint-disable */
+
+import type {
+    StyleSpecification,
+    SourceSpecification,
+    LayerSpecification,
+    FilterSpecification,
+    ExpressionSpecification,
+    TransitionSpecification,
+    VectorSourceSpecification,
+    RasterSourceSpecification,
+    GeoJSONSourceSpecification,
+    FillLayerSpecification,
+    LineLayerSpecification,
+    SymbolLayerSpecification,
+    CircleLayerSpecification,
+    BackgroundLayerSpecification,
+    DataDrivenPropertyValueSpecification,
+    PropertyValueSpecification,
+} from '@mapbox/mapbox-gl-style-spec';
+
+//
+// StyleSpecification
+//
+
+const style: StyleSpecification = {
+    version: 8,
+    sources: {
+        'vector-source': {
+            type: 'vector',
+            url: 'mapbox://mapbox.mapbox-streets-v8'
+        }
+    },
+    layers: [
+        {
+            id: 'background',
+            type: 'background',
+            paint: {
+                'background-color': '#000'
+            }
+        }
+    ]
+};
+
+style.version satisfies 8;
+style.sources satisfies Record<string, SourceSpecification> | undefined;
+style.layers satisfies LayerSpecification[];
+
+//
+// SourceSpecification
+//
+
+const vectorSource: VectorSourceSpecification = {
+    type: 'vector',
+    url: 'mapbox://mapbox.mapbox-streets-v8'
+};
+vectorSource satisfies SourceSpecification;
+
+const rasterSource: RasterSourceSpecification = {
+    type: 'raster',
+    url: 'mapbox://mapbox.satellite',
+    tileSize: 256
+};
+rasterSource satisfies SourceSpecification;
+
+const geojsonSource: GeoJSONSourceSpecification = {
+    type: 'geojson',
+    data: {
+        type: 'FeatureCollection',
+        features: []
+    }
+};
+geojsonSource satisfies SourceSpecification;
+
+//
+// LayerSpecification
+//
+
+const fillLayer: FillLayerSpecification = {
+    id: 'fill-layer',
+    type: 'fill',
+    source: 'vector-source',
+    paint: {
+        'fill-color': '#ff0000',
+        'fill-opacity': 0.5
+    }
+};
+fillLayer satisfies LayerSpecification;
+
+const lineLayer: LineLayerSpecification = {
+    id: 'line-layer',
+    type: 'line',
+    source: 'vector-source',
+    paint: {
+        'line-color': '#0000ff',
+        'line-width': 2
+    }
+};
+lineLayer satisfies LayerSpecification;
+
+const symbolLayer: SymbolLayerSpecification = {
+    id: 'symbol-layer',
+    type: 'symbol',
+    source: 'vector-source',
+    layout: {
+        'text-field': ['get', 'name'],
+        'text-size': 12
+    }
+};
+symbolLayer satisfies LayerSpecification;
+
+const circleLayer: CircleLayerSpecification = {
+    id: 'circle-layer',
+    type: 'circle',
+    source: 'vector-source',
+    paint: {
+        'circle-radius': 5,
+        'circle-color': '#00ff00'
+    }
+};
+circleLayer satisfies LayerSpecification;
+
+const backgroundLayer: BackgroundLayerSpecification = {
+    id: 'background',
+    type: 'background',
+    paint: {
+        'background-color': '#ffffff'
+    }
+};
+backgroundLayer satisfies LayerSpecification;
+
+//
+// FilterSpecification
+//
+
+const legacyFilter: FilterSpecification = ['==', 'type', 'residential'];
+const expressionFilter: FilterSpecification = ['all', ['==', ['get', 'type'], 'residential'], ['>', ['get', 'area'], 1000]];
+
+//
+// ExpressionSpecification
+//
+
+const getExpr: ExpressionSpecification = ['get', 'name'];
+const interpolateExpr: ExpressionSpecification = ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 5];
+const caseExpr: ExpressionSpecification = ['case', ['has', 'name'], ['get', 'name'], 'unnamed'];
+
+//
+// TransitionSpecification
+//
+
+const transition: TransitionSpecification = {
+    duration: 300,
+    delay: 0
+};
+
+//
+// DataDrivenPropertyValueSpecification
+//
+
+const dataDrivenColor: DataDrivenPropertyValueSpecification<string> = ['get', 'color'];
+const staticColor: DataDrivenPropertyValueSpecification<string> = '#ff0000';
+
+//
+// PropertyValueSpecification
+//
+
+const zoomBasedOpacity: PropertyValueSpecification<number> = ['interpolate', ['linear'], ['zoom'], 10, 0, 15, 1];
+const staticOpacity: PropertyValueSpecification<number> = 0.8;