maplibre-gl 2.1.0 → 2.1.4

package/build/{banner.js → banner.ts}

@@ -1,4 +1,4 @@
 import fs from 'fs';
 
-const version = JSON.parse(fs.readFileSync('package.json')).version;
+const version = JSON.parse(fs.readFileSync('package.json').toString()).version;
 export default `/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v${version}/LICENSE.txt */`;

package/build/generate-query-test-fixtures.ts

@@ -0,0 +1,123 @@
+import path from 'path';
+import fs from 'fs';
+import glob from 'glob';
+import localizeURLs from '../test/integration/lib/localize-urls';
+
+const OUTPUT_FILE = 'fixtures.json';
+const rootFixturePath = 'test/integration/query/';
+const suitePath = 'tests';
+
+/**
+ * Analyzes the contents of the specified `path.join(rootDirectory, suiteDirectory)`, and inlines
+ * the contents into a single json file which can then be imported and built into a bundle
+ * to be shipped to the browser.
+ * @param rootDirectory - The root directory
+ * @param suiteDirectory - The suite directory
+ * @param outputDirectory - The output directory
+ * @param includeImages - Flag to include images
+ */
+function generateFixtureJson(rootDirectory: string, suiteDirectory: string, outputDirectory: string = 'test/integration/query/dist', includeImages:boolean = false) {
+    const globs = getAllFixtureGlobs(rootDirectory, suiteDirectory);
+    const jsonPaths = globs[0];
+    const imagePaths = globs[1];
+    //Extract the filedata into a flat dictionary
+    const allFiles = {};
+    let allPaths = glob.sync(jsonPaths);
+    if (includeImages) {
+        allPaths = allPaths.concat(glob.sync(imagePaths));
+    }
+
+    //A Set that stores test names that are malformed so they can be removed later
+    const malformedTests = {};
+
+    for (const fixturePath of allPaths) {
+        const testName = path.dirname(fixturePath);
+        const fileName = path.basename(fixturePath);
+        const extension = path.extname(fixturePath);
+        try {
+            if (extension === '.json') {
+                let json = parseJsonFromFile(fixturePath);
+
+                //Special case for style json which needs some preprocessing
+                if (fileName === 'style.json') {
+                    json = processStyle(testName, json);
+                }
+
+                allFiles[fixturePath] = json;
+            } else if (extension === '.png') {
+                allFiles[fixturePath] = pngToBase64Str(fixturePath);
+            } else {
+                throw new Error(`${extension} is incompatible , file path ${fixturePath}`);
+            }
+        } catch (e) {
+            console.log(`Error parsing file: ${fixturePath}`);
+            malformedTests[testName] = true;
+        }
+    }
+
+    // Re-nest by directory path, each directory path defines a testcase.
+    const result = {};
+    for (const fullPath in allFiles) {
+        const testName = path.dirname(fullPath).replace(rootDirectory, '');
+        //Skip if test is malformed
+        if (malformedTests[testName]) { continue; }
+
+        //Lazily initaialize an object to store each file wihin a particular testName
+        if (result[testName] == null) {
+            result[testName] = {};
+        }
+        //Trim extension from filename
+        const fileName = path.basename(fullPath, path.extname(fullPath));
+        result[testName][fileName] = allFiles[fullPath];
+    }
+
+    const outputStr = JSON.stringify(result, null, 4);
+    const outputPath = path.join(outputDirectory, OUTPUT_FILE);
+
+    return new Promise<void>((resolve, reject) => {
+        fs.writeFile(outputPath, outputStr, {encoding: 'utf8'}, (err) => {
+            if (err) { reject(err); }
+
+            resolve();
+        });
+    });
+}
+
+function getAllFixtureGlobs(rootDirectory, suiteDirectory) {
+    const basePath = path.join(rootDirectory, suiteDirectory);
+    const jsonPaths = path.join(basePath, '/**/*.json');
+    const imagePaths = path.join(basePath, '/**/*.png');
+
+    return [jsonPaths, imagePaths];
+}
+
+function parseJsonFromFile(filePath) {
+    return JSON.parse(fs.readFileSync(filePath, {encoding: 'utf8'}));
+}
+
+function pngToBase64Str(filePath) {
+    return fs.readFileSync(filePath).toString('base64');
+}
+
+function processStyle(testName, style) {
+    const clone = JSON.parse(JSON.stringify(style));
+
+    localizeURLs(clone, 7357);
+
+    clone.metadata = clone.metadata || {};
+
+    // eslint-disable-next-line no-restricted-properties
+    clone.metadata.test = Object.assign({
+        testName,
+        width: 512,
+        height: 512,
+        pixelRatio: 1,
+        recycleMap: false,
+        allowed: 0.00015
+    }, clone.metadata.test);
+
+    return clone;
+}
+
+// @ts-ignore
+await generateFixtureJson(rootFixturePath, suitePath);

package/build/generate-shaders.ts

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import glob from 'glob';
+
+console.log('Generating shaders');
+
+/**
+ * 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/shaders/*.glsl', null, (_err, files) => {
+    for (const file of files) {
+        const code = fs.readFileSync(file, 'utf8');
+        const content = glslToTs(code);
+        const fileName = `./src/shaders/${file.split('/').splice(-1)}.g.ts`;
+        fs.writeFileSync(fileName, content);
+    }
+    console.log(`Finished converting ${files.length} glsl files`);
+});
+
+function glslToTs(code: string): string {
+    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 `// This file is generated. Edit build/generate-shaders.ts, then run \`npm run codegen\`.
+export default ${JSON.stringify(code).replaceAll('"', '\'')};\n`;
+}

package/build/generate-struct-arrays.ts

@@ -166,26 +166,26 @@ createStructArrayType('symbol_line_vertex', lineVertex, true);
 // feature index array
 createStructArrayType('feature_index', createLayout([
     // the index of the feature in the original vectortile
-    { type: 'Uint32', name: 'featureIndex' },
+    {type: 'Uint32', name: 'featureIndex'},
     // the source layer the feature appears in
-    { type: 'Uint16', name: 'sourceLayerIndex' },
+    {type: 'Uint16', name: 'sourceLayerIndex'},
     // the bucket the feature appears in
-    { type: 'Uint16', name: 'bucketIndex' }
+    {type: 'Uint16', name: 'bucketIndex'}
 ]), true);
 
 // triangle index array
 createStructArrayType('triangle_index', createLayout([
-    { type: 'Uint16', name: 'vertices', components: 3 }
+    {type: 'Uint16', name: 'vertices', components: 3}
 ]));
 
 // line index array
 createStructArrayType('line_index', createLayout([
-    { type: 'Uint16', name: 'vertices', components: 2 }
+    {type: 'Uint16', name: 'vertices', components: 2}
 ]));
 
 // line strip index array
 createStructArrayType('line_strip_index', createLayout([
-    { type: 'Uint16', name: 'vertices', components: 1 }
+    {type: 'Uint16', name: 'vertices', components: 1}
 ]));
 
 // paint vertex arrays
@@ -422,7 +422,7 @@ register('${structArrayClass}', ${structArrayClass});
     return output.join('\n');
 }
 
-fs.writeFileSync('src/data/array_types.ts',
+fs.writeFileSync('src/data/array_types.g.ts',
     `// This file is generated. Edit build/generate-struct-arrays.ts, then run \`npm run codegen\`.
 
 import assert from 'assert';

package/build/generate-style-code.ts

@@ -5,13 +5,13 @@ 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();
+    return str.replace(/-(.)/g, (_, x) => {
+        return x.toUpperCase();
     });
 }
 
 function pascalCase(str: string): string {
-    let almostCamelized = camelCase(str);
+    const almostCamelized = camelCase(str);
     return almostCamelized[0].toUpperCase() + almostCamelized.slice(1);
 }
 
@@ -37,7 +37,7 @@ function nativeType(property) {
             } else {
                 return `Array<${nativeType({type: property.value, values: property.values})}>`;
             }
-        default: throw new Error(`unknown type for ${property.name}`)
+        default: throw new Error(`unknown type for ${property.name}`);
     }
 }
 
@@ -97,7 +97,7 @@ function runtimeType(property) {
             } else {
                 return `array(${runtimeType({type: property.value})})`;
             }
-        default: throw new Error(`unknown type for ${property.name}`)
+        default: throw new Error(`unknown type for ${property.name}`);
     }
 }
 
@@ -146,7 +146,7 @@ const layers = Object.keys(spec.layer.type.values).map((type) => {
         return memo;
     }, []);
 
-    return { type, layoutProperties, paintProperties };
+    return {type, layoutProperties, paintProperties};
 });
 
 function emitlayerProperties(locals) {
@@ -264,12 +264,12 @@ const paint: Properties<${layerType}PaintProps> = new Properties({`);
         `});
 
 export default ({ paint${layoutProperties.length ? ', layout' : ''} } as {
-    paint: Properties<${layerType}PaintProps>${layoutProperties.length ? ',\n    layout: Properties<' + layerType + 'LayoutProps>' : ''}
+    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))
+    fs.writeFileSync(`src/style/style_layer/${layer.type.replace('-', '_')}_style_layer_properties.g.ts`, emitlayerProperties(layer));
 }

package/build/generate-style-spec.ts

@@ -24,13 +24,14 @@ function propertyType(property) {
                 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)
+            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':
@@ -67,7 +68,7 @@ ${Object.keys(properties)
         .filter(k => k !== '*')
         .map(k => `    ${indent}${propertyDeclaration(k, properties[k])}`)
         .join(',\n')}
-${indent}}`
+${indent}}`;
 }
 
 function sourceTypeName(key) {
@@ -114,7 +115,7 @@ function layerType(key) {
 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.
+    `// Generated code; do not edit. Edit build/generate-style-spec.ts instead.
 /* eslint-disable */
 
 export type ColorSpecification = string;

package/build/generate-typings.ts

@@ -0,0 +1,16 @@
+
+import fs from 'fs';
+import childProcess from 'child_process';
+
+if (!fs.existsSync('dist')) {
+    fs.mkdirSync('dist');
+}
+
+console.log('Starting bundling types');
+const outputFile = './dist/maplibre-gl.d.ts';
+childProcess.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');
+fs.writeFileSync(outputFile, types);
+console.log('Finished bundling types');

package/build/readme.md

@@ -1,38 +1,31 @@
 # Build Scripts
 This folder holds common build scripts accessed via the various `npm run` commands.
-
+Codegen is executed when calling `npm install` in order to generate all artifacts needed for the build to pass
 ## 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
+`banner.ts` 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_plugins.ts` 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
+`rollup_plugin_minify_style_spec.ts` 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. 
+`index.ts` 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.
+`shared.ts` 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.
+`worker.ts` 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.
 
@@ -55,8 +48,5 @@ Generates `style-spec/types.ts` based on the content of `v8.json`. This provides
 <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
+`release-notes.js` Used to generate release notes when releasing a new version

package/build/release-notes.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 
 import * as fs from 'fs';
-import * as ejs from 'ejs';
 import semver from 'semver';
 
 const changelogPath = 'CHANGELOG.md';
@@ -32,18 +31,15 @@ while (match = regex.exec(changelog)) {
 const latest = releaseNotes[0];
 const previous = releaseNotes[1];
 
-/*
-  Fill and print the release notes template.
-*/
-let templatedReleaseNotes;
 
-templatedReleaseNotes = ejs.render(fs.readFileSync('build/release-notes.md.ejs', 'utf8'), {
-    'CURRENTVERSION': latest.version,
-    'PREVIOUSVERSION': previous.version,
-    'CHANGELOG': latest.changelog,
-    'isPrerelease': semver.prerelease(latest.version)
-});
-templatedReleaseNotes = templatedReleaseNotes.trimEnd();
+//  Print the release notes template.
+
+const templatedReleaseNotes = `https://github.com/maplibre/maplibre-gl-js
+[Changes](https://github.com/maplibre/maplibre-gl-js/compare/v${previous.version}...v${latest.version}) since [MapLibre GL JS v${previous.version}](https://github.com/maplibre/releases/tag/v${previous.version}):
+
+${latest.changelog}
+
+${semver.prerelease(latest.version) ? 'Pre-release version' : ''}`;
 
 // eslint-disable-next-line eol-last
-process.stdout.write(templatedReleaseNotes);
+process.stdout.write(templatedReleaseNotes.trimEnd());

package/build/{rollup_plugin_minify_style_spec.js → rollup_plugin_minify_style_spec.ts}

@@ -1,9 +1,10 @@
+import {Plugin} from 'rollup';
 
-function replacer(k, v) {
-    return (k === 'doc' || k === 'example' || k === 'sdk-support') ? undefined : v;
+function replacer(key: string, value: any) {
+    return (key === 'doc' || key === 'example' || key === 'sdk-support') ? undefined : value;
 }
 
-export default function minifyStyleSpec() {
+export default function minifyStyleSpec(): Plugin {
     return {
         name: 'minify-style-spec',
         transform: (source, id) => {

package/build/{rollup_plugins.js → rollup_plugins.ts}

@@ -6,19 +6,23 @@ import commonjs from '@rollup/plugin-commonjs';
 import unassert from 'rollup-plugin-unassert';
 import json from '@rollup/plugin-json';
 import {terser} from 'rollup-plugin-terser';
-import minifyStyleSpec from './rollup_plugin_minify_style_spec.js';
-import {createFilter} from 'rollup-pluginutils';
+import minifyStyleSpec from './rollup_plugin_minify_style_spec';
 import strip from '@rollup/plugin-strip';
-import glsl_to_js from './glsl_to_js.js';
-
+import {Plugin} from 'rollup';
 // Common set of plugins/transformations shared across different rollup
 // builds (main maplibre bundle, style-spec package, benchmarks bundle)
 
-export const plugins = (minified, production, watch) => [
+export const nodeResolve = resolve({
+    browser: true,
+    preferBuiltins: false
+});
+
+export const plugins = (minified: boolean, production: boolean): Plugin[] => [
     minifyStyleSpec(),
     json(),
     // https://github.com/zaach/jison/issues/351
     replace({
+        preventAssignment: true,
         include: /\/jsonlint-lines-primitives\/lib\/jsonlint.js/,
         delimiters: ['', ''],
         values: {
@@ -29,9 +33,9 @@ export const plugins = (minified, production, watch) => [
         sourceMap: true,
         functions: ['PerformanceUtils.*', 'Debug.*']
     }) : false,
-    glsl('**/*.glsl', production),
     minified ? terser({
         compress: {
+            // eslint-disable-next-line camelcase
             pure_getters: true,
             passes: 3
         }
@@ -39,29 +43,11 @@ export const plugins = (minified, production, watch) => [
     production ? unassert({
         include: ['**/*'], // by default, unassert only includes .js files
     }) : false,
-    resolve({
-        browser: true,
-        preferBuiltins: false
-    }),
-    watch ? typescript() : false,
+    nodeResolve,
+    typescript(),
     commonjs({
         // global keyword handling causes Webpack compatibility issues, so we disabled it:
         // https://github.com/mapbox/mapbox-gl-js/pull/6956
         ignoreGlobal: true
     })
 ].filter(Boolean);
-
-// Using this instead of rollup-plugin-string to add minification
-function glsl(include, minify) {
-    const filter = createFilter(include);
-    return {
-        name: 'glsl',
-        transform(code, id) {
-            if (!filter(id)) return;
-            return {
-                code: glsl_to_js(code, minify),
-                map: {mappings: ''}
-            };
-        }
-    };
-}