@versatiles/style 5.6.0 → 5.8.0

package/src/lib/utils.ts

@@ -15,13 +15,11 @@ export function deepClone<T>(obj: T): T {
 	}
 
 	if (isSimpleObject(obj)) {
-		// @ts-expect-error: Too complicated to handle
-		return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, deepClone(value)]));
+		return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, deepClone(value)])) as T;
 	}
 
 	if (obj instanceof Array) {
-		// @ts-expect-error: Too complicated to handle
-		return obj.map((e: unknown) => deepClone(e));
+		return obj.map((e: unknown) => deepClone(e)) as T;
 	}
 
 	if (obj instanceof Color) {
@@ -87,8 +85,7 @@ export function deepMerge<T extends object>(source0: T, ...sources: Partial<T>[]
 			}
 
 			if (sourceValue instanceof Color) {
-				// @ts-expect-error: Too complicated to handle
-				target[key] = sourceValue.clone();
+				target[key] = sourceValue.clone() as T[typeof key];
 				continue;
 			}
 

package/src/shortbread/layers.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import type { FillLayerSpecification, SymbolLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 import { getShortbreadLayers } from './layers.js';
 import { Language } from '../style_builder/types.js';

package/src/shortbread/properties.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import type { ShortbreadProperty } from './properties.js';
 import propertyLookup from './properties.js';
 

package/src/shortbread/template.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { VectorSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
 import { getShortbreadTemplate } from './template.js';
 

package/src/style_builder/decorator.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { decorate } from './decorator.js';
 import { Color } from '../color/index.js';
 import type { MaplibreLayer } from '../types/maplibre.js';

package/src/style_builder/recolor.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { Color } from '../color/index.js';
 import { CachedRecolor, getDefaultRecolorFlags, recolorArray, recolorObject } from './recolor.js';
 

package/src/style_builder/recolor.ts

@@ -22,22 +22,22 @@ import { Color } from '../color/index.js';
  *
  * ```typescript
  * const style = VersaTilesStyle.colorful({
- *    recolor: {
- *       rotate: 180,
- *       saturate: 0.5,
- *       brightness: 0.2,
- *    }
+ *   recolor: {
+ *     rotate: 180,
+ *     saturate: 0.5,
+ *     brightness: 0.2,
+ *   }
  * };
  * ```
  * 
  * If you want do make you map simply brighter or darker, you can use the `blend` option:
  * ```typescript
  * const style = VersaTilesStyle.colorful({
- *    recolor: {
- *       blend: 0.5,
- *       blendColor: '#000000', // to blend all colors with black
- *       // or blendColor: '#FFFFFF', // to blend all colors with white
- *    }
+ *   recolor: {
+ *     blend: 0.5,
+ *     blendColor: '#000000', // to blend all colors with black
+ *     // or blendColor: '#FFFFFF', // to blend all colors with white
+ *   }
  * };
  * ```
  * 

package/src/style_builder/style_builder.test.ts

@@ -1,4 +1,4 @@
-
+import { beforeEach, describe, expect, it } from 'vitest';
 import { Color } from '../color/index.js';
 import type { StyleRules, StyleRulesOptions } from './types.js';
 import { StyleBuilder } from './style_builder.js';

package/src/style_builder/style_builder.ts

@@ -4,7 +4,7 @@ import { decorate } from './decorator.js';
 import { CachedRecolor, getDefaultRecolorFlags } from './recolor.js';
 import { basename, deepClone, resolveUrl } from '../lib/utils.js';
 import type { MaplibreLayer, MaplibreLayerDefinition, StyleSpecification } from '../types/maplibre.js';
-import type { StyleBuilderColors, StyleBuilderColorsEnsured, StyleBuilderFonts, StyleBuilderOptions } from './types.js';
+import { styleBuilderColorKeys, type StyleBuilderColors, type StyleBuilderFonts, type StyleBuilderOptions } from './types.js';
 import type { StyleRules, StyleRulesOptions } from './types.js';
 import { SpriteSpecification } from '@maplibre/maplibre-gl-style-spec';
 
@@ -21,10 +21,9 @@ export abstract class StyleBuilder {
 	public abstract readonly defaultFonts: StyleBuilderFonts;
 
 	public build(options?: StyleBuilderOptions): StyleSpecification {
-
 		options ??= {};
 
-
+		// @ts-expect-error globalThis may be undefined in some environments
 		const baseUrl = options.baseUrl ?? globalThis?.document?.location?.origin ?? 'https://tiles.versatiles.org';
 		const glyphs = options.glyphs ?? '/assets/glyphs/{fontstack}/{range}.pbf';
 
@@ -37,7 +36,7 @@ export abstract class StyleBuilder {
 
 		const colors = this.getColors(this.defaultColors);
 		if (options.colors) {
-			let key: keyof StyleBuilderColorsEnsured;
+			let key: keyof StyleBuilderColors;
 			for (key in options.colors) {
 				const value = options.colors[key];
 				if (value != null) colors[key] = Color.parse(value);
@@ -104,9 +103,9 @@ export abstract class StyleBuilder {
 		return style;
 	}
 
-	public getColors(colors: StyleBuilderColors): StyleBuilderColorsEnsured {
+	public getColors(colors: StyleBuilderColors): StyleBuilderColors<Color> {
 		const entriesString = Object.entries(colors) as [keyof StyleBuilderColors, string | Color][];
-		const result = Object.fromEntries(entriesString.map(([key, value]) => [key, Color.parse(value)])) as StyleBuilderColorsEnsured;
+		const result = Object.fromEntries(entriesString.map(([key, value]) => [key, Color.parse(value)])) as StyleBuilderColors<Color>;
 		return result;
 	}
 
@@ -114,9 +113,9 @@ export abstract class StyleBuilder {
 		return {
 			baseUrl: '',
 			bounds: [
-				-180, 
-				-85.0511287798066, 
-				180, 
+				-180,
+				-85.0511287798066,
+				180,
 				85.0511287798066
 			],
 			glyphs: '',
@@ -132,8 +131,7 @@ export abstract class StyleBuilder {
 
 	protected transformDefaultColors(callback: (color: Color) => Color): void {
 		const colors = this.getColors(this.defaultColors);
-		let key: keyof StyleBuilderColorsEnsured;
-		for (key in colors) {
+		for (const key of styleBuilderColorKeys) {
 			this.defaultColors[key] = callback(colors[key]);
 		}
 	}

package/src/style_builder/types.ts

@@ -5,113 +5,78 @@ import { SpriteSpecification } from '@maplibre/maplibre-gl-style-spec';
 /** Represents language suffixes used in map styles. */
 export type Language = 'de' | 'en' | null;
 
-/** Options for configuring a style builder. */
+/**
+ * Options for configuring the style builder.
+ */
 export interface StyleBuilderOptions {
 	/**
 	 * The base URL for loading external resources like tiles, sprites, and fonts.
-	 * Default: document.location.origin (in the browser), or 'https://tiles.versatiles.org'
+	 * @default document.location.origin (in the browser), or 'https://tiles.versatiles.org'
 	 */
 	baseUrl?: string;
 
-  /**
-   * The bounding box for the map, formatted as [sw.lng, sw.lat, ne.lng, ne.lat].
-   * Default: [-180, -85.0511287798066, 180, 85.0511287798066]
-   */
-  bounds?: [number, number, number, number];
+	/**
+	 * The bounding box for the map, formatted as [sw.lng, sw.lat, ne.lng, ne.lat].
+	 * @default [-180, -85.0511287798066, 180, 85.0511287798066]
+	 */
+	bounds?: [number, number, number, number];
 
 	/**
 	 * The URL template for loading font glyphs, formatted with '{fontstack}' and '{range}' placeholders.
-	 * Default: '/assets/glyphs/{fontstack}/{range}.pbf'
+	 * @default '/assets/glyphs/{fontstack}/{range}.pbf'
 	 */
 	glyphs?: string;
 
 	/**
 	 * The URL for loading sprite images and metadata.
-	 * Default: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
+	 * @default [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
 	 */
 	sprite?: SpriteSpecification;
 
 	/**
 	 * An array of URL templates for loading map tiles, using '{z}', '{x}', and '{y}' placeholders.
-	 * Default: ['/tiles/osm/{z}/{x}/{y}']
+	 * @default ['/tiles/osm/{z}/{x}/{y}']
 	 */
 	tiles?: string[];
 
 	/**
 	 * If set to true, hides all map labels.
-	 * Default: false
+	 * @default false
 	 */
 	hideLabels?: boolean;
 
 	/**
 	 * Set the language ('en', 'de') of all map labels.
 	 * A null value means that the language of the country in which the label is drawn will be used.
-	 * Default: null
+	 * See also: {@link Language}
+	 * @default null
 	 */
 	language?: Language;
 
 	/**
 	 * An object specifying overrides for default color values, keyed by the color names.
+	 * See also: {@link StyleBuilderColors}
 	 */
 	colors?: Partial<StyleBuilderColors>;
 
 	/**
 	 * An object specifying overrides for default font names, keyed by the font names.
+	 * See also: {@link StyleBuilderFonts}
 	 */
 	fonts?: Partial<StyleBuilderFonts>;
 
 	/**
 	 * Options for color adjustments and transformations applied to the entire style.
+	 * See also: {@link RecolorOptions}
 	 */
 	recolor?: RecolorOptions;
 }
 
-/** Records string values for color properties in a style builder. */
-export interface StyleBuilderColors {
-	agriculture: Color | string;
-	boundary: Color | string;
-	building: Color | string;
-	buildingbg: Color | string;
-	burial: Color | string;
-	commercial: Color | string;
-	construction: Color | string;
-	cycle: Color | string;
-	danger: Color | string;
-	disputed: Color | string;
-	education: Color | string;
-	foot: Color | string;
-	glacier: Color | string;
-	grass: Color | string;
-	hospital: Color | string;
-	industrial: Color | string;
-	label: Color | string;
-	labelHalo: Color | string;
-	land: Color | string;
-	leisure: Color | string;
-	motorway: Color | string;
-	motorwaybg: Color | string;
-	park: Color | string;
-	parking: Color | string;
-	poi: Color | string;
-	prison: Color | string;
-	rail: Color | string;
-	residential: Color | string;
-	rock: Color | string;
-	sand: Color | string;
-	shield: Color | string;
-	street: Color | string;
-	streetbg: Color | string;
-	subway: Color | string;
-	symbol: Color | string;
-	trunk: Color | string;
-	trunkbg: Color | string;
-	waste: Color | string;
-	water: Color | string;
-	wetland: Color | string;
-	wood: Color | string;
-};
+export type StyleBuilderColorKey = 'agriculture' | 'boundary' | 'building' | 'buildingbg' | 'burial' | 'commercial' | 'construction' | 'cycle' | 'danger' | 'disputed' | 'education' | 'foot' | 'glacier' | 'grass' | 'hospital' | 'industrial' | 'label' | 'labelHalo' | 'land' | 'leisure' | 'motorway' | 'motorwaybg' | 'park' | 'parking' | 'poi' | 'prison' | 'rail' | 'residential' | 'rock' | 'sand' | 'shield' | 'street' | 'streetbg' | 'subway' | 'symbol' | 'trunk' | 'trunkbg' | 'waste' | 'water' | 'wetland' | 'wood';
+export const styleBuilderColorKeys: StyleBuilderColorKey[] = ['agriculture', 'boundary', 'building', 'buildingbg', 'burial', 'commercial', 'construction', 'cycle', 'danger', 'disputed', 'education', 'foot', 'glacier', 'grass', 'hospital', 'industrial', 'label', 'labelHalo', 'land', 'leisure', 'motorway', 'motorwaybg', 'park', 'parking', 'poi', 'prison', 'rail', 'residential', 'rock', 'sand', 'shield', 'street', 'streetbg', 'subway', 'symbol', 'trunk', 'trunkbg', 'waste', 'water', 'wetland', 'wood'] as const;
 
-export type StyleBuilderColorsEnsured = Record<keyof StyleBuilderColors, Color>;
+/** Records string values for color properties in a style builder. */
+export type StyleBuilderColors<T = Color | string> = Record<StyleBuilderColorKey, T>;
 
 /** Records string values for font properties in a style builder. */
 export type StyleBuilderFonts = {
@@ -124,7 +89,7 @@ export interface StyleRulesOptions {
 	/**
 	 * The set of colors used in the style builder.
 	 */
-	colors: StyleBuilderColorsEnsured;
+	colors: StyleBuilderColors<Color>;
 
 	/**
 	 * The set of fonts used in the style builder.

package/src/styles/index.ts

@@ -8,6 +8,7 @@ import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 import Colorful from './colorful.js';
 import Eclipse from './eclipse.js';
 import Graybeard from './graybeard.js';
+import Shadow from './shadow.js';
 import Neutrino from './neutrino.js';
 import Empty from './empty.js';
 
@@ -29,5 +30,6 @@ function getStyleBuilder(styleBuilder: new () => StyleBuilder): StyleBuilderFunc
 export const colorful = getStyleBuilder(Colorful);
 export const eclipse = getStyleBuilder(Eclipse);
 export const graybeard = getStyleBuilder(Graybeard);
+export const shadow = getStyleBuilder(Shadow);
 export const neutrino = getStyleBuilder(Neutrino);
 export const empty = getStyleBuilder(Empty);

package/src/styles/shadow.ts

@@ -0,0 +1,11 @@
+import Colorful from './colorful.js';
+
+export default class Shadow extends Colorful {
+	public readonly name: string = 'Shadow';
+
+	public constructor() {
+		super();
+
+		this.transformDefaultColors(color => color.saturate(-1).invert().brightness(0.2));
+	}
+}

package/src/types/tilejson.test.ts

@@ -1,5 +1,4 @@
- 
-
+import { describe, expect, it } from 'vitest'; 
 import { isTileJSONSpecification } from './tilejson.js';
 
 describe('isTileJSONSpecification', () => {

package/src/types/vector_layer.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import type { VectorLayer } from './vector_layer.js';
 import { isVectorLayer, isVectorLayers } from './vector_layer.js';