maplibre-gl 2.0.0-pre.5 → 2.0.2

package/build/generate-style-code.ts

@@ -0,0 +1,275 @@
+'use strict';
+
+import * as fs from 'fs';
+
+import spec from '../src/style-spec/reference/v8.json';
+
+function camelCase(str: string): string {
+    return str.replace(/-(.)/g, function (_, x) {
+      return x.toUpperCase();
+    });
+}
+
+function pascalCase(str: string): string {
+    let almostCamelized = camelCase(str);
+    return almostCamelized[0].toUpperCase() + almostCamelized.slice(1);
+}
+
+function nativeType(property) {
+    switch (property.type) {
+        case 'boolean':
+            return 'boolean';
+        case 'number':
+            return 'number';
+        case 'string':
+            return 'string';
+        case 'enum':
+            return Object.keys(property.values).map(v => JSON.stringify(v)).join(' | ');
+        case 'color':
+            return 'Color';
+        case 'formatted':
+            return 'Formatted';
+        case 'resolvedImage':
+            return 'ResolvedImage';
+        case 'array':
+            if (property.length) {
+                return `[${new Array(property.length).fill(nativeType({type: property.value})).join(', ')}]`;
+            } else {
+                return `Array<${nativeType({type: property.value, values: property.values})}>`;
+            }
+        default: throw new Error(`unknown type for ${property.name}`)
+    }
+}
+
+function possiblyEvaluatedType(property)  {
+    const propType = nativeType(property);
+
+    switch (property['property-type']) {
+        case 'color-ramp':
+            return 'ColorRampProperty';
+        case 'cross-faded':
+            return `CrossFaded<${propType}>`;
+        case 'cross-faded-data-driven':
+            return `PossiblyEvaluatedPropertyValue<CrossFaded<${propType}>>`;
+        case 'data-driven':
+            return `PossiblyEvaluatedPropertyValue<${propType}>`;
+    }
+
+    return propType;
+}
+
+function propertyType(property) {
+    switch (property['property-type']) {
+        case 'data-driven':
+            return `DataDrivenProperty<${nativeType(property)}>`;
+        case 'cross-faded':
+            return `CrossFadedProperty<${nativeType(property)}>`;
+        case 'cross-faded-data-driven':
+            return `CrossFadedDataDrivenProperty<${nativeType(property)}>`;
+        case 'color-ramp':
+            return 'ColorRampProperty';
+        case 'data-constant':
+        case 'constant':
+            return `DataConstantProperty<${nativeType(property)}>`;
+        default:
+            throw new Error(`unknown property-type "${property['property-type']}" for ${property.name}`);
+    }
+}
+
+function runtimeType(property) {
+    switch (property.type) {
+        case 'boolean':
+            return 'BooleanType';
+        case 'number':
+            return 'NumberType';
+        case 'string':
+        case 'enum':
+            return 'StringType';
+        case 'color':
+            return 'ColorType';
+        case 'formatted':
+            return 'FormattedType';
+        case 'Image':
+            return 'ImageType';
+        case 'array':
+            if (property.length) {
+                return `array(${runtimeType({type: property.value})}, ${property.length})`;
+            } else {
+                return `array(${runtimeType({type: property.value})})`;
+            }
+        default: throw new Error(`unknown type for ${property.name}`)
+    }
+}
+
+function overrides(property) {
+    return `{ runtimeType: ${runtimeType(property)}, getOverride: (o) => o.${camelCase(property.name)}, hasOverride: (o) => !!o.${camelCase(property.name)} }`;
+}
+
+function propertyValue(property, type) {
+    const propertyAsSpec = `styleSpec["${type}_${property.layerType}"]["${property.name}"] as any as StylePropertySpecification`;
+
+    switch (property['property-type']) {
+        case 'data-driven':
+            if (property.overridable) {
+                return `new DataDrivenProperty(${propertyAsSpec}, ${overrides(property)})`;
+            } else {
+                return `new DataDrivenProperty(${propertyAsSpec})`;
+            }
+        case 'cross-faded':
+            return `new CrossFadedProperty(${propertyAsSpec})`;
+        case 'cross-faded-data-driven':
+            return `new CrossFadedDataDrivenProperty(${propertyAsSpec})`;
+        case 'color-ramp':
+            return `new ColorRampProperty(${propertyAsSpec})`;
+        case 'data-constant':
+        case 'constant':
+            return `new DataConstantProperty(${propertyAsSpec})`;
+        default:
+            throw new Error(`unknown property-type "${property['property-type']}" for ${property.name}`);
+    }
+}
+
+const layers = Object.keys(spec.layer.type.values).map((type) => {
+    const layoutProperties = Object.keys(spec[`layout_${type}`]).reduce((memo, name) => {
+        if (name !== 'visibility') {
+            spec[`layout_${type}`][name].name = name;
+            spec[`layout_${type}`][name].layerType = type;
+            memo.push(spec[`layout_${type}`][name]);
+        }
+        return memo;
+    }, []);
+
+    const paintProperties = Object.keys(spec[`paint_${type}`]).reduce((memo, name) => {
+        spec[`paint_${type}`][name].name = name;
+        spec[`paint_${type}`][name].layerType = type;
+        memo.push(spec[`paint_${type}`][name]);
+        return memo;
+    }, []);
+
+    return { type, layoutProperties, paintProperties };
+});
+
+function emitlayerProperties(locals) {
+    const output = [];
+    const layerType = pascalCase(locals.type);
+    const {
+        layoutProperties,
+        paintProperties
+    } = locals;
+
+    output.push(
+        `// This file is generated. Edit build/generate-style-code.ts, then run 'npm run codegen'.
+/* eslint-disable */
+
+import styleSpec from '../../style-spec/reference/latest';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty,
+    PossiblyEvaluatedPropertyValue,
+    CrossFaded
+} from '../properties';
+
+import type Color from '../../style-spec/util/color';
+
+import type Formatted from '../../style-spec/expression/types/formatted';
+
+import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
+import {StylePropertySpecification} from '../../style-spec/style-spec';
+`);
+
+    const overridables = paintProperties.filter(p => p.overridable);
+    if (overridables.length) {
+        output.push(
+            `import {
+    ${overridables.reduce((imports, prop) => { imports.push(runtimeType(prop)); return imports; }, []).join(',\n    ')}
+} from '../../style-spec/expression/types';
+`);
+    }
+
+    if (layoutProperties.length) {
+        output.push(
+            `export type ${layerType}LayoutProps = {`);
+
+        for (const property of layoutProperties) {
+            output.push(
+                `    "${property.name}": ${propertyType(property)},`);
+        }
+
+        output.push(
+            `};
+
+export type ${layerType}LayoutPropsPossiblyEvaluated = {`);
+
+        for (const property of layoutProperties) {
+            output.push(
+                `    "${property.name}": ${possiblyEvaluatedType(property)},`);
+        }
+
+        output.push(
+            `};
+
+const layout: Properties<${layerType}LayoutProps> = new Properties({`);
+
+        for (const property of layoutProperties) {
+            output.push(
+                `    "${property.name}": ${propertyValue(property, 'layout')},`);
+        }
+
+        output.push(
+            '});');
+    }
+
+    if (paintProperties.length) {
+        output.push(
+            `
+export type ${layerType}PaintProps = {`);
+
+        for (const property of paintProperties) {
+            output.push(
+                `    "${property.name}": ${propertyType(property)},`);
+        }
+
+        output.push(
+            `};
+
+export type ${layerType}PaintPropsPossiblyEvaluated = {`);
+
+        for (const property of paintProperties) {
+            output.push(
+                `    "${property.name}": ${possiblyEvaluatedType(property)},`);
+        }
+
+        output.push(
+            '};');
+    } else {
+        output.push(
+            `export type ${layerType}PaintProps = {};`);
+    }
+
+    output.push(
+        `
+const paint: Properties<${layerType}PaintProps> = new Properties({`);
+
+    for (const property of paintProperties) {
+        output.push(
+            `    "${property.name}": ${propertyValue(property, 'paint')},`);
+    }
+
+    output.push(
+        `});
+
+export default ({ paint${layoutProperties.length ? ', layout' : ''} } as {
+    paint: Properties<${layerType}PaintProps>${layoutProperties.length ? ',\n    layout: Properties<' + layerType + 'LayoutProps>' : ''}
+});`);
+
+    return output.join('\n');
+}
+
+for (const layer of layers) {
+    fs.writeFileSync(`src/style/style_layer/${layer.type.replace('-', '_')}_style_layer_properties.ts`, emitlayerProperties(layer))
+}

package/build/generate-style-spec.ts

@@ -0,0 +1,209 @@
+import * as fs from 'fs';
+import * as properties from '../src/style-spec/util/properties';
+
+import spec from '../src/style-spec/reference/v8.json';
+
+function unionType(values) {
+    if (Array.isArray(values)) {
+        return values.map(v => JSON.stringify(v)).join(' | ');
+    } else {
+        return Object.keys(values).map(v => JSON.stringify(v)).join(' | ');
+    }
+}
+
+function propertyType(property) {
+    if (typeof property.type === 'function') {
+        return property.type();
+    }
+
+    const baseType = (() => {
+        switch (property.type) {
+            case 'string':
+            case 'number':
+            case 'boolean':
+                return property.type;
+            case 'enum':
+                return unionType(property.values);
+            case 'array':
+                const elementType = propertyType(typeof property.value === 'string' ? {type: property.value, values: property.values} : property.value)
+                if (property.length) {
+                    return `[${Array(property.length).fill(elementType).join(', ')}]`;
+                } else {
+                    return `Array<${elementType}>`;
+                }
+            case 'light':
+                return 'LightSpecification';
+            case 'sources':
+                return '{[_: string]: SourceSpecification}';
+            case '*':
+                return 'unknown';
+            default:
+                return `${property.type.slice(0, 1).toUpperCase()}${property.type.slice(1)}Specification`;
+        }
+    })();
+
+    if (properties.supportsPropertyExpression(property)) {
+        return `DataDrivenPropertyValueSpecification<${baseType}>`;
+    } else if (properties.supportsZoomExpression(property)) {
+        return `PropertyValueSpecification<${baseType}>`;
+    } else if (property.expression) {
+        return 'ExpressionSpecificationArray';
+    } else {
+        return baseType;
+    }
+}
+
+function propertyDeclaration(key, property) {
+    return `"${key}"${property.required ? '' : '?'}: ${propertyType(property)}`;
+}
+
+function objectDeclaration(key, properties) {
+    return `export type ${key} = ${objectType(properties, '')};`;
+}
+
+function objectType(properties, indent) {
+    return `{
+${Object.keys(properties)
+        .filter(k => k !== '*')
+        .map(k => `    ${indent}${propertyDeclaration(k, properties[k])}`)
+        .join(',\n')}
+${indent}}`
+}
+
+function sourceTypeName(key) {
+    return key.replace(/source_(.)(.*)/, (_, _1, _2) => `${_1.toUpperCase()}${_2}SourceSpecification`)
+        .replace(/_dem/, 'DEM')
+        .replace(/Geojson/, 'GeoJSON');
+}
+
+function layerTypeName(key) {
+    return key.split('-').map(k => k.replace(/(.)(.*)/, (_, _1, _2) => `${_1.toUpperCase()}${_2}`)).concat('LayerSpecification').join('');
+}
+
+function layerType(key) {
+    const layer = spec.layer as any;
+
+    layer.type = {
+        type: 'enum',
+        values: [key],
+        required: true
+    };
+
+    delete layer.ref;
+    delete layer['paint.*'];
+
+    layer.paint.type = () => {
+        return objectType(spec[`paint_${key}`], '    ');
+    };
+
+    layer.layout.type = () => {
+        return objectType(spec[`layout_${key}`], '    ');
+    };
+
+    if (key === 'background') {
+        delete layer.source;
+        delete layer['source-layer'];
+        delete layer.filter;
+    } else {
+        layer.source.required = true;
+    }
+
+    return objectDeclaration(layerTypeName(key), layer);
+}
+
+const layerTypes = Object.keys(spec.layer.type.values);
+
+fs.writeFileSync('src/style-spec/types.ts',
+`// Generated code; do not edit. Edit build/generate-style-spec.ts instead.
+/* eslint-disable */
+
+export type ColorSpecification = string;
+
+export type FormattedSpecification = string;
+
+export type ResolvedImageSpecification = string;
+
+export type PromoteIdSpecification = {[_: string]: string} | string;
+
+export type FilterSpecificationInputType = string | number | boolean;
+export type FilterSpecification =
+    // Lookup
+    | ['at', number, (number |string)[]]
+    | ['get', string, Record<string, unknown>?]
+    | ['has', string, Record<string, unknown>?]
+    | ['in', ...FilterSpecificationInputType[], FilterSpecificationInputType | FilterSpecificationInputType[]]
+    | ['index-of', FilterSpecificationInputType, FilterSpecificationInputType | FilterSpecificationInputType[]]
+    | ['length', string | string[]]
+    | ['slice', string | string[], number]
+    // Decision
+    | ['!', FilterSpecification]
+    | ['!=', string | FilterSpecification, FilterSpecificationInputType]
+    | ['<', string | FilterSpecification, FilterSpecificationInputType]
+    | ['<=', string | FilterSpecification, FilterSpecificationInputType]
+    | ['==', string | FilterSpecification, FilterSpecificationInputType]
+    | ['>', string | FilterSpecification, FilterSpecificationInputType]
+    | ['>=', string | FilterSpecification, FilterSpecificationInputType]
+    | ["all", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["any", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["case", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["coalesce", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["match", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["within", ...FilterSpecification[], FilterSpecificationInputType]
+    // Used in convert.ts
+    | ["!in", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["!has", ...FilterSpecification[], FilterSpecificationInputType]
+    | ["none", ...FilterSpecification[], FilterSpecificationInputType]
+    // Fallbak for others
+    | Array<string | FilterSpecification>
+
+export type TransitionSpecification = {
+    duration?: number,
+    delay?: number
+};
+
+// Note: doesn't capture interpolatable vs. non-interpolatable types.
+
+export type CameraFunctionSpecification<T> =
+      { type: 'exponential', stops: Array<[number, T]> }
+    | { type: 'interval',    stops: Array<[number, T]> };
+
+export type SourceFunctionSpecification<T> =
+      { type: 'exponential', stops: Array<[number, T]>, property: string, default?: T }
+    | { type: 'interval',    stops: Array<[number, T]>, property: string, default?: T }
+    | { type: 'categorical', stops: Array<[string | number | boolean, T]>, property: string, default?: T }
+    | { type: 'identity', property: string, default?: T };
+
+export type CompositeFunctionSpecification<T> =
+      { type: 'exponential', stops: Array<[{zoom: number, value: number}, T]>, property: string, default?: T }
+    | { type: 'interval',    stops: Array<[{zoom: number, value: number}, T]>, property: string, default?: T }
+    | { type: 'categorical', stops: Array<[{zoom: number, value: string | number | boolean}, T]>, property: string, default?: T };
+
+export type ExpressionSpecificationArray = Array<unknown>;
+
+export type PropertyValueSpecification<T> =
+      T
+    | CameraFunctionSpecification<T>
+    | ExpressionSpecificationArray;
+
+export type DataDrivenPropertyValueSpecification<T> =
+      T
+    | CameraFunctionSpecification<T>
+    | SourceFunctionSpecification<T>
+    | CompositeFunctionSpecification<T>
+    | ExpressionSpecificationArray;
+
+${objectDeclaration('StyleSpecification', spec.$root)}
+
+${objectDeclaration('LightSpecification', spec.light)}
+
+${spec.source.map(key => objectDeclaration(sourceTypeName(key), spec[key])).join('\n\n')}
+
+export type SourceSpecification =
+${spec.source.map(key => `    | ${sourceTypeName(key)}`).join('\n')}
+
+${layerTypes.map(key => layerType(key)).join('\n\n')}
+
+export type LayerSpecification =
+${layerTypes.map(key => `    | ${layerTypeName(key)}`).join('\n')};
+
+`);

package/build/glsl_to_js.js

@@ -0,0 +1,12 @@
+export default function glsl_to_js(code, minify) {
+    if (minify) {
+        code = code.trim() // strip whitespace at the start/end
+            .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
+            .replace(/\n+/g, '\n') // collapse multi line breaks
+            .replace(/\n\s+/g, '\n') // strip identation
+            .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
+            .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
+
+    }
+    return `export default ${JSON.stringify(code)};`;
+}

package/build/post-ts-build.js

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import glob from 'glob';
+import child_process from 'child_process';
+import glsl_to_js from './glsl_to_js.js';
+
+let args = process.argv.slice(2);
+let outputBaseDir = args[0];
+let minify = args[1];
+
+console.log(`Copying glsl files to ${outputBaseDir}, minify: ${minify}`);
+
+/**
+ * This script is intended to copy the glsl file to the compilation output folder,
+ * change their extension to .js and export the shaders as strings in javascript.
+ * It will also minify them a bit if needed and change the extension to .js
+ * After that it will create a combined typescript definition file and manipulate it a bit
+ * It will also create a simple package.json file to allow importing this package in webpack
+ */
+
+glob("./src/**/*.glsl", null, (err, files) => {
+    for (let file of files) {
+        let code = fs.readFileSync(file, 'utf8');
+        let content = glsl_to_js(code, minify);
+        let fileName = outputBaseDir + '/' + file.split('/').splice(-1) + ".js";
+        fs.writeFileSync(fileName, content);
+    }
+    console.log(`Finished converting ${files.length} glsl files`);
+});
+
+if (!fs.existsSync("dist")) {
+    fs.mkdirSync("dist");
+}
+
+console.log(`Starting bundling types`);
+const outputFile = "./dist/maplibre-gl.d.ts";
+child_process.execSync(`dts-bundle-generator --no-check --umd-module-name=maplibregl -o ${outputFile} ./src/index.ts`);
+let types = fs.readFileSync(outputFile, 'utf8');
+// Classes are not exported but should be since this is exported as UMD - fixing...
+types = types.replace(/declare class/g, "export declare class");
+// Missing vector-tile types that are added to this file too
+let file = fs.readFileSync("./src/types/packages-types/vector-tile/index.d.ts", 'utf8');
+let lines = file.split("\n").filter(Boolean);
+lines.pop(); // last } is removed too.
+types = lines.join("\n") + "\n" + types;
+// remove imports of vector-tile and declare module lines
+types = types.split("\n")
+    .filter(l => !l.includes("@mapbox/vector-tile"))
+    .join("\n");
+fs.writeFileSync(outputFile, types);
+console.log(`Finished bundling types`);
+
+fs.writeFileSync("./dist/package.json", '{ "type": "commonjs" }');

package/build/readme.md

@@ -0,0 +1,62 @@
+# Build Scripts
+This folder holds common build scripts accessed via the various `npm run` commands.
+
+## Bundeling all the code
+
+The bundeling process can be split into several steps:
+
+`npx run tsc`
+This command will transpile all the typescript files into javascript files and place them in the `rollup/build` folder.
+
+`npm run build-glsl`
+This command will copy all the shader files to the build output and convert the shaders into strings that can be imported to javascript.
+
+`npm run build-css`
+This command will compile the css code and create the css file.
+
+`npm run build-prod` or `npm run build-prod-min` or `npm run build-dev`
+These commands will use rollup to bundle the code. This is where the magic happens and uses some files in this folder.
+
+`banner.js` is used to create a banner at the beginning of the output file
+
+`rollup_plugins.js` is used to define common plugins for rollup configurations
+
+`rollup_plugin_minify_style_spec.js` is used to specify the plugin used in style spec bundeling
+
+In the `rollup` folder there are some files that are used as linking files as they link to other files for rollup to pick when bundling.
+Rollup also has a configuration in the `package.json` file to signal which files it needs to replace when bundling for the browser, this is where `web_worker_replacement.js` is used - as it replaces the node mocking of web worker that is present in the source code.
+
+Rollup is generating 3 files throughout the process of bundling: 
+
+`index.js` a file containing all the code that will run in the main thread. 
+
+`shared.js` a file containing all the code shared between the main and worker code.
+
+`worker.js` a file containing all the code the will run in the worker threads.
+
+These 3 files are then referenced and used by the `bundle_prelude.js` file. It allows loading the web wroker code automatically in web workers without any extra effort from someone who would like to use the library, i.e. it simply works.
+
+### check-bundle-size.js
+This file is used by CI to make sure the bundle size is kept constant
+
+<hr>
+
+### `npm run codegen`
+The `codegen` command runs the following three scripts, to update the corresponding code files based on the `v8.json` style source, and other data files. Contributers should run this command manually when the underlying style data is modified. The generated code files are then commited to the repo.
+#### generate-struct-arrays.ts		
+Generates `data/array_types.ts`, which consists of:
+ - `StructArrayLayout_*` subclasses, one for each underlying memory layout
+ - Named exports mapping each conceptual array type (e.g., `CircleLayoutArray`) to its corresponding `StructArrayLayout` class
+ - Specific named `StructArray` subclasses, when type-specific struct accessors are needed (e.g., `CollisionBoxArray`)
+#### generate-style-code.ts			
+Generates the various `style/style_layer/[layer type]_style_layer_properties.ts` code files based on the content of `v8.json`. These files provide the type signatures for the paint and layout properties for each type of style layer.
+#### generate-style-spec.ts			
+Generates `style-spec/types.ts` based on the content of `v8.json`. This provides the type signatures for a style specification (sources, layers, etc.).
+<hr>
+
+### Generate Release Nodes
+The following files are being used to generate release notes:
+
+`release-notes.js` Used to generate release notes when releasing a new version
+
+`release-notes.md.ejs` Used for the generation as a template file

package/build/release-notes.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const execSync = require('child_process').execSync;
-const ejs = require('ejs');
-const _ = require('lodash');
-const semver = require('semver');
+import * as fs from 'fs';
+import {execSync} from 'child_process';
+import * as ejs from 'ejs';
+import _ from 'lodash';
+import semver from 'semver';
 
 const changelogPath = 'CHANGELOG.md';
 const changelog = fs.readFileSync(changelogPath, 'utf8');
@@ -36,6 +36,7 @@ let previousVersion = semver.maxSatisfying(gitTags, "<" + currentVersion, { incl
 const regex = /^## (\d+\.\d+\.\d+).*?\n(.+?)(?=\n^## \d+\.\d+\.\d+.*?\n)/gms;
 
 let releaseNotes = [];
+let match;
 // eslint-disable-next-line no-cond-assign
 while (match = regex.exec(changelog)) {
     releaseNotes.push({