@versatiles/style 3.8.1 → 4.0.0

package/README.MD

@@ -35,12 +35,18 @@ Use it in:
 <script src="maplibre-gl.js"></script>
 <script src="versatiles-style.js"></script>
 <script>
-	const styleBuilder = new VersaTilesStyle.Colorful();
-  styleBuilder.tilesUrl = ['tiles/{z}/{x}/{y}'];
+  const style = VersaTilesStyle.styles.graybeard({
+    tiles: ['https://???.org/tiles/osm/{z}/{x}/{y}'],
+    sprite: 'https://???.org/assets/styles/swr-bright/sprite',
+    glyphs: 'https://???.org/assets/fonts/{fontstack}/{range}.pbf',
+    languageSuffix: '_de',
+    colors: { label: '#222' },
+    recolor: { gamma: 0.5 }
+  });
 
 	const map = new maplibregl.Map({
 		container: 'map',
-		style: styleBuilder.build()
+		style
 	});
 <script>
 ```
@@ -56,9 +62,10 @@ npm install versatiles-style
 Use it in Node.js:
 
 ```javascript
-import { Colorful } from 'versatiles-style';
-let style = new Colorful();
-style.language = 'de';
+import { styles } from 'versatiles-style';
+let style = styles.colorful({
+  languageSuffix: '_en',
+});
 writeFileSync('style.json', JSON.stringify(style.build()));
 ```
 

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import type { MaplibreStyle, StylemakerOptions } from './lib/types.js';
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './lib/types.js';
 import Colorful from './style/colorful.js';
-export declare function colorful(options?: StylemakerOptions<Colorful>): MaplibreStyle;
 import Graybeard from './style/graybeard.js';
-export declare function graybeard(options?: StylemakerOptions<Graybeard>): MaplibreStyle;
 import Neutrino from './style/neutrino.js';
-export declare function neutrino(options?: StylemakerOptions<Neutrino>): MaplibreStyle;
-export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './lib/types.js';
-export { default as guessStyle } from './lib/style_guesser.js';
+export declare const styles: {
+    colorful: (options?: StylemakerOptions<Colorful>) => MaplibreStyle;
+    graybeard: (options?: StylemakerOptions<Graybeard>) => MaplibreStyle;
+    neutrino: (options?: StylemakerOptions<Neutrino>) => MaplibreStyle;
+};
+export { default as guessStyle } from './lib/guess_style.js';

package/dist/index.js

@@ -1,13 +1,15 @@
 import Colorful from './style/colorful.js';
-export function colorful(options) {
-    return new Colorful().build(options);
-}
 import Graybeard from './style/graybeard.js';
-export function graybeard(options) {
-    return new Graybeard().build(options);
-}
 import Neutrino from './style/neutrino.js';
-export function neutrino(options) {
-    return new Neutrino().build(options);
-}
-export { default as guessStyle } from './lib/style_guesser.js';
+export const styles = {
+    colorful: function colorful(options) {
+        return new Colorful().build(options);
+    },
+    graybeard: function graybeard(options) {
+        return new Graybeard().build(options);
+    },
+    neutrino: function neutrino(options) {
+        return new Neutrino().build(options);
+    },
+};
+export { default as guessStyle } from './lib/guess_style.js';

package/dist/index.test.js

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import * as builders from './index.js';
-describe('Style Builders', () => {
-    const styles = [
-        { name: 'Colorful', builder: builders.colorful },
-        { name: 'Graybeard', builder: builders.graybeard },
-        { name: 'Neutrino', builder: builders.neutrino },
-    ];
-    styles.forEach(({ name, builder }) => {
+import { guessStyle, styles } from './index.js';
+describe('styles', () => {
+    it('should be all styles', () => {
+        expect(Array.from(Object.keys(styles)).sort())
+            .toStrictEqual(['colorful', 'graybeard', 'neutrino']);
+    });
+    Object.entries(styles).forEach(([name, builder]) => {
         it(`should create and test an instance of ${name}`, () => {
             expect(typeof builder).toBe('function');
             const style = builder({ baseUrl: 'https://example.org' });
             expect(JSON.stringify(style).length).toBeGreaterThan(50000);
-            expect(style.name).toBe('versatiles-' + name.toLowerCase());
+            expect(style.name).toBe('versatiles-' + name);
             expect(style.glyphs).toBe('https://example.org/assets/fonts/{fontstack}/{range}.pbf');
             expect(style.sprite).toBe('https://example.org/assets/sprites/sprites');
             expect(Object.keys(style.sources).join(',')).toBe('versatiles-shortbread');
@@ -20,7 +19,7 @@ describe('Style Builders', () => {
     });
 });
 describe('Colorful', () => {
-    const style = builders.colorful({
+    const style = styles.colorful({
         baseUrl: 'https://dev.null',
         colors: { commercial: '#f00' },
     });
@@ -38,7 +37,7 @@ describe('guessStyle', () => {
     const tiles = ['https://fancy.map/tiles/{z}/{x}/{y}'];
     const vectorLayers = [{ id: 'hallo', fields: { label: 'String' } }];
     it('should build raster styles', () => {
-        const style = builders.guessStyle({
+        const style = guessStyle({
             tiles,
             format: 'png',
         });
@@ -49,7 +48,7 @@ describe('guessStyle', () => {
         });
     });
     it('should build vector styles', () => {
-        const style = builders.guessStyle({
+        const style = guessStyle({
             tiles,
             format: 'pbf',
             vectorLayers,

package/dist/lib/{style_builder.test.js → build_style.test.js}

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import Color from 'color';
-import StyleBuilder from './style_builder.js';
+import StyleBuilder from './build_style.js';
 // Mock class for abstract class StyleBuilder
 class MockStyleBuilder extends StyleBuilder {
     name = 'mock';

package/dist/lib/decorator.js

@@ -98,7 +98,7 @@ function processColor(value) {
     if (typeof value === 'string')
         value = Color(value);
     if (value instanceof Color) {
-        value = (value.alpha() === 1) ? value.hex() : value.hexa();
+        value = (value.alpha() === 1) ? value.hex() : value.string();
         return value.toLowerCase();
     }
     throw new Error(`unknown color type "${typeof value}"`);

package/dist/lib/decorator.test.js

@@ -27,7 +27,7 @@ describe('decorate function', () => {
                 expect(layer.layout).toHaveProperty('visibility', 'none');
             }
             if (layer.id === 'layer2') {
-                expect(layer.paint).toHaveProperty('line-color', '#00ff0080');
+                expect(layer.paint).toHaveProperty('line-color', 'rgba(0, 255, 0, 0.5)');
                 expect(layer.layout).toHaveProperty('visibility', 'visible');
             }
         });

package/dist/lib/{style_guesser.test.js → guess_style.test.js}

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import getTemplate from './shortbread/template.js';
-import guessStyle from './style_guesser.js';
+import guessStyle from './guess_style.js';
 describe('guessStyle', () => {
     const tiles = ['https://example.com/tiles/{z}/{x}/{y}'];
     const vectorLayersSomething = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
@@ -121,4 +121,22 @@ describe('guessStyle', () => {
             });
         });
     });
+    describe('absolute tile urls override baseUrl', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                const style = guessStyle({ ...options, tiles: ['https://example1.org/tiles/{z}/{x}/{y}'], baseUrl: 'https://example2.org/' });
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                expect(Object.values(style.sources)[0].tiles).toEqual(['https://example1.org/tiles/{z}/{x}/{y}']);
+            });
+        });
+    });
+    describe('relative tile urls are resolved with baseUrl', () => {
+        cases.forEach(({ type, options }) => {
+            it(type, () => {
+                const style = guessStyle({ ...options, tiles: ['./{z}/{x}/{y}'], baseUrl: 'https://example2.org/tiles/' });
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                expect(Object.values(style.sources)[0].tiles).toEqual(['https://example2.org/tiles/{z}/{x}/{y}']);
+            });
+        });
+    });
 });

package/dist/lib/recolor.d.ts

@@ -1,4 +1,4 @@
 import type { RecolorOptions, StylemakerColors } from './types.js';
-import type StyleBuilder from './style_builder.ts';
+import type StyleBuilder from './build_style.ts';
 export declare function getDefaultRecolorFlags(): RecolorOptions;
 export declare function recolor<Subclass extends StyleBuilder<Subclass>>(colors: StylemakerColors<Subclass>, opt?: RecolorOptions): void;

package/dist/lib/recolor.test.d.ts

@@ -1,5 +1,5 @@
 import type { StyleRules, StyleRulesOptions } from './types.js';
-import StyleBuilder from './style_builder.js';
+import StyleBuilder from './build_style.js';
 export default class TestStyle extends StyleBuilder<TestStyle> {
     readonly name: string;
     defaultFonts: {};

package/dist/lib/recolor.test.js

@@ -1,5 +1,5 @@
 import { getDefaultRecolorFlags, recolor } from './recolor.js';
-import StyleBuilder from './style_builder.js';
+import StyleBuilder from './build_style.js';
 describe('colorTransformer', () => {
     describe('getDefaultRecolorFlags', () => {
         it('should return the default color transformer flags', () => {

package/dist/lib/types.d.ts

@@ -1,6 +1,6 @@
 import type { BackgroundLayerSpecification, FillLayerSpecification, FilterSpecification, LineLayerSpecification, StyleSpecification, SymbolLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 import type Color from 'color';
-import type StyleBuilder from './style_builder.ts';
+import type StyleBuilder from './build_style.ts';
 /** Represents the available tile formats. */
 export type TileFormat = 'avif' | 'bin' | 'geojson' | 'jpg' | 'json' | 'pbf' | 'png' | 'svg' | 'topojson' | 'webp';
 /** Type for Maplibre layers, including background, fill, line, and symbol specifications. */

package/dist/style/colorful.d.ts

@@ -1,4 +1,4 @@
-import StyleBuilder from '../lib/style_builder.js';
+import StyleBuilder from '../lib/build_style.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
 export default class Colorful extends StyleBuilder<Colorful> {
     readonly name: string;

package/dist/style/colorful.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import StyleBuilder from '../lib/style_builder.js';
+import StyleBuilder from '../lib/build_style.js';
 export default class Colorful extends StyleBuilder {
     name = 'Colorful';
     defaultFonts = {

package/dist/style/neutrino.d.ts

@@ -1,4 +1,4 @@
-import StyleBuilder from '../lib/style_builder.js';
+import StyleBuilder from '../lib/build_style.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
 export default class Neutrino extends StyleBuilder<Neutrino> {
     readonly name: string;

package/dist/style/neutrino.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import StyleBuilder from '../lib/style_builder.js';
+import StyleBuilder from '../lib/build_style.js';
 export default class Neutrino extends StyleBuilder {
     name = 'Neutrino';
     defaultFonts = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "3.8.1",
+  "version": "4.0.0",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
     "build-styles": "tsx scripts/build-styles.ts",
     "doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '# API'",
     "lint": "npm run build-browser && eslint --color .",
-    "release": "tsx scripts/release.ts",
+    "release": "npx vrt release-npm",
     "test": "npm run test-typescript && npm run test-node && npm run test-browser",
     "test-browser": "npm run build-browser && jest -c=jest.config.browser.ts",
     "test-coverage": "NODE_OPTIONS=--experimental-vm-modules jest -c=jest.config.coverage.ts",
@@ -37,29 +37,29 @@
     "dist/**/*.d.ts"
   ],
   "devDependencies": {
-    "@maplibre/maplibre-gl-style-spec": "^19.3.3",
+    "@maplibre/maplibre-gl-style-spec": "^20.1.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.6",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
-    "@versatiles/release-tool": "^1.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@versatiles/release-tool": "^1.2.1",
     "eslint": "^8.56.0",
-    "inquirer": "^9.2.12",
+    "inquirer": "^9.2.14",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
-    "npm-check-updates": "^16.14.12",
-    "rollup": "^4.9.3",
+    "npm-check-updates": "^16.14.15",
+    "rollup": "^4.11.0",
     "rollup-plugin-dts": "^6.1.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsx": "^4.7.0",
+    "tsx": "^4.7.1",
     "typescript": "^5.3.3"
   }
 }