mapbox-gl 1.13.2

package/src/util/actor.js

@@ -0,0 +1,212 @@
+// @flow
+
+import {bindAll, isWorker, isSafari} from './util';
+import window from './window';
+import {serialize, deserialize} from './web_worker_transfer';
+import ThrottledInvoker from './throttled_invoker';
+
+import type {Transferable} from '../types/transferable';
+import type {Cancelable} from '../types/cancelable';
+
+/**
+ * An implementation of the [Actor design pattern](http://en.wikipedia.org/wiki/Actor_model)
+ * that maintains the relationship between asynchronous tasks and the objects
+ * that spin them off - in this case, tasks like parsing parts of styles,
+ * owned by the styles
+ *
+ * @param {WebWorker} target
+ * @param {WebWorker} parent
+ * @param {string|number} mapId A unique identifier for the Map instance using this Actor.
+ * @private
+ */
+class Actor {
+    target: any;
+    parent: any;
+    mapId: ?number;
+    callbacks: { number: any };
+    name: string;
+    tasks: { number: any };
+    taskQueue: Array<number>;
+    cancelCallbacks: { number: Cancelable };
+    invoker: ThrottledInvoker;
+    globalScope: any;
+
+    constructor(target: any, parent: any, mapId: ?number) {
+        this.target = target;
+        this.parent = parent;
+        this.mapId = mapId;
+        this.callbacks = {};
+        this.tasks = {};
+        this.taskQueue = [];
+        this.cancelCallbacks = {};
+        bindAll(['receive', 'process'], this);
+        this.invoker = new ThrottledInvoker(this.process);
+        this.target.addEventListener('message', this.receive, false);
+        this.globalScope = isWorker() ? target : window;
+    }
+
+    /**
+     * Sends a message from a main-thread map to a Worker or from a Worker back to
+     * a main-thread map instance.
+     *
+     * @param type The name of the target method to invoke or '[source-type].[source-name].name' for a method on a WorkerSource.
+     * @param targetMapId A particular mapId to which to send this message.
+     * @private
+     */
+    send(type: string, data: mixed, callback: ?Function, targetMapId: ?string, mustQueue: boolean = false): ?Cancelable {
+        // We're using a string ID instead of numbers because they are being used as object keys
+        // anyway, and thus stringified implicitly. We use random IDs because an actor may receive
+        // message from multiple other actors which could run in different execution context. A
+        // linearly increasing ID could produce collisions.
+        const id = Math.round((Math.random() * 1e18)).toString(36).substring(0, 10);
+        if (callback) {
+            this.callbacks[id] = callback;
+        }
+        const buffers: ?Array<Transferable> = isSafari(this.globalScope) ? undefined : [];
+        this.target.postMessage({
+            id,
+            type,
+            hasCallback: !!callback,
+            targetMapId,
+            mustQueue,
+            sourceMapId: this.mapId,
+            data: serialize(data, buffers)
+        }, buffers);
+        return {
+            cancel: () => {
+                if (callback) {
+                    // Set the callback to null so that it never fires after the request is aborted.
+                    delete this.callbacks[id];
+                }
+                this.target.postMessage({
+                    id,
+                    type: '<cancel>',
+                    targetMapId,
+                    sourceMapId: this.mapId
+                });
+            }
+        };
+    }
+
+    receive(message: Object) {
+        const data = message.data,
+            id = data.id;
+
+        if (!id) {
+            return;
+        }
+
+        if (data.targetMapId && this.mapId !== data.targetMapId) {
+            return;
+        }
+
+        if (data.type === '<cancel>') {
+            // Remove the original request from the queue. This is only possible if it
+            // hasn't been kicked off yet. The id will remain in the queue, but because
+            // there is no associated task, it will be dropped once it's time to execute it.
+            delete this.tasks[id];
+            const cancel = this.cancelCallbacks[id];
+            delete this.cancelCallbacks[id];
+            if (cancel) {
+                cancel();
+            }
+        } else {
+            if (isWorker() || data.mustQueue) {
+                // In workers, store the tasks that we need to process before actually processing them. This
+                // is necessary because we want to keep receiving messages, and in particular,
+                // <cancel> messages. Some tasks may take a while in the worker thread, so before
+                // executing the next task in our queue, postMessage preempts this and <cancel>
+                // messages can be processed. We're using a MessageChannel object to get throttle the
+                // process() flow to one at a time.
+                this.tasks[id] = data;
+                this.taskQueue.push(id);
+                this.invoker.trigger();
+            } else {
+                // In the main thread, process messages immediately so that other work does not slip in
+                // between getting partial data back from workers.
+                this.processTask(id, data);
+            }
+        }
+    }
+
+    process() {
+        if (!this.taskQueue.length) {
+            return;
+        }
+        const id = this.taskQueue.shift();
+        const task = this.tasks[id];
+        delete this.tasks[id];
+        // Schedule another process call if we know there's more to process _before_ invoking the
+        // current task. This is necessary so that processing continues even if the current task
+        // doesn't execute successfully.
+        if (this.taskQueue.length) {
+            this.invoker.trigger();
+        }
+        if (!task) {
+            // If the task ID doesn't have associated task data anymore, it was canceled.
+            return;
+        }
+
+        this.processTask(id, task);
+    }
+
+    processTask(id: number, task: any) {
+        if (task.type === '<response>') {
+            // The done() function in the counterpart has been called, and we are now
+            // firing the callback in the originating actor, if there is one.
+            const callback = this.callbacks[id];
+            delete this.callbacks[id];
+            if (callback) {
+                // If we get a response, but don't have a callback, the request was canceled.
+                if (task.error) {
+                    callback(deserialize(task.error));
+                } else {
+                    callback(null, deserialize(task.data));
+                }
+            }
+        } else {
+            let completed = false;
+            const buffers: ?Array<Transferable> = isSafari(this.globalScope) ? undefined : [];
+            const done = task.hasCallback ? (err, data) => {
+                completed = true;
+                delete this.cancelCallbacks[id];
+                this.target.postMessage({
+                    id,
+                    type: '<response>',
+                    sourceMapId: this.mapId,
+                    error: err ? serialize(err) : null,
+                    data: serialize(data, buffers)
+                }, buffers);
+            } : (_) => {
+                completed = true;
+            };
+
+            let callback = null;
+            const params = (deserialize(task.data): any);
+            if (this.parent[task.type]) {
+                // task.type == 'loadTile', 'removeTile', etc.
+                callback = this.parent[task.type](task.sourceMapId, params, done);
+            } else if (this.parent.getWorkerSource) {
+                // task.type == sourcetype.method
+                const keys = task.type.split('.');
+                const scope = (this.parent: any).getWorkerSource(task.sourceMapId, keys[0], params.source);
+                callback = scope[keys[1]](params, done);
+            } else {
+                // No function was found.
+                done(new Error(`Could not find function ${task.type}`));
+            }
+
+            if (!completed && callback && callback.cancel) {
+                // Allows canceling the task as long as it hasn't been completed yet.
+                this.cancelCallbacks[id] = callback.cancel;
+            }
+        }
+    }
+
+    remove() {
+        this.invoker.remove();
+        this.target.removeEventListener('message', this.receive, false);
+    }
+}
+
+export default Actor;

package/src/util/ajax.js

@@ -0,0 +1,388 @@
+// @flow
+
+import window from './window';
+import {extend, warnOnce, isWorker} from './util';
+import {isMapboxHTTPURL, hasCacheDefeatingSku} from './mapbox';
+import config from './config';
+import assert from 'assert';
+import {cacheGet, cachePut} from './tile_request_cache';
+import webpSupported from './webp_supported';
+import offscreenCanvasSupported from './offscreen_canvas_supported';
+
+import type {Callback} from '../types/callback';
+import type {Cancelable} from '../types/cancelable';
+
+/**
+ * The type of a resource.
+ * @private
+ * @readonly
+ * @enum {string}
+ */
+const ResourceType = {
+    Unknown: 'Unknown',
+    Style: 'Style',
+    Source: 'Source',
+    Tile: 'Tile',
+    Glyphs: 'Glyphs',
+    SpriteImage: 'SpriteImage',
+    SpriteJSON: 'SpriteJSON',
+    Image: 'Image'
+};
+export {ResourceType};
+
+if (typeof Object.freeze == 'function') {
+    Object.freeze(ResourceType);
+}
+
+/**
+ * A `RequestParameters` object to be returned from Map.options.transformRequest callbacks.
+ * @typedef {Object} RequestParameters
+ * @property {string} url The URL to be requested.
+ * @property {Object} headers The headers to be sent with the request.
+ * @property {string} method Request method `'GET' | 'POST' | 'PUT'`.
+ * @property {string} body Request body.
+ * @property {string} type Response body type to be returned `'string' | 'json' | 'arrayBuffer'`.
+ * @property {string} credentials `'same-origin'|'include'` Use 'include' to send cookies with cross-origin requests.
+ * @property {boolean} collectResourceTiming If true, Resource Timing API information will be collected for these transformed requests and returned in a resourceTiming property of relevant data events.
+ * @example
+ * // use transformRequest to modify requests that begin with `http://myHost`
+ * transformRequest: function(url, resourceType) {
+ *  if (resourceType === 'Source' && url.indexOf('http://myHost') > -1) {
+ *    return {
+ *      url: url.replace('http', 'https'),
+ *      headers: { 'my-custom-header': true },
+ *      credentials: 'include'  // Include cookies for cross-origin requests
+ *    }
+ *   }
+ *  }
+ *
+ */
+export type RequestParameters = {
+    url: string,
+    headers?: Object,
+    method?: 'GET' | 'POST' | 'PUT',
+    body?: string,
+    type?: 'string' | 'json' | 'arrayBuffer',
+    credentials?: 'same-origin' | 'include',
+    collectResourceTiming?: boolean
+};
+
+export type ResponseCallback<T> = (error: ?Error, data: ?T, cacheControl: ?string, expires: ?string) => void;
+
+class AJAXError extends Error {
+    status: number;
+    url: string;
+    constructor(message: string, status: number, url: string) {
+        if (status === 401 && isMapboxHTTPURL(url)) {
+            message += ': you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes';
+        }
+        super(message);
+        this.status = status;
+        this.url = url;
+
+        // work around for https://github.com/Rich-Harris/buble/issues/40
+        this.name = this.constructor.name;
+        this.message = message;
+    }
+
+    toString() {
+        return `${this.name}: ${this.message} (${this.status}): ${this.url}`;
+    }
+}
+
+// Ensure that we're sending the correct referrer from blob URL worker bundles.
+// For files loaded from the local file system, `location.origin` will be set
+// to the string(!) "null" (Firefox), or "file://" (Chrome, Safari, Edge, IE),
+// and we will set an empty referrer. Otherwise, we're using the document's URL.
+/* global self */
+export const getReferrer = isWorker() ?
+    () => self.worker && self.worker.referrer :
+    () => (window.location.protocol === 'blob:' ? window.parent : window).location.href;
+
+// Determines whether a URL is a file:// URL. This is obviously the case if it begins
+// with file://. Relative URLs are also file:// URLs iff the original document was loaded
+// via a file:// URL.
+const isFileURL = url => /^file:/.test(url) || (/^file:/.test(getReferrer()) && !/^\w+:/.test(url));
+
+function makeFetchRequest(requestParameters: RequestParameters, callback: ResponseCallback<any>): Cancelable {
+    const controller = new window.AbortController();
+    const request = new window.Request(requestParameters.url, {
+        method: requestParameters.method || 'GET',
+        body: requestParameters.body,
+        credentials: requestParameters.credentials,
+        headers: requestParameters.headers,
+        referrer: getReferrer(),
+        signal: controller.signal
+    });
+    let complete = false;
+    let aborted = false;
+
+    const cacheIgnoringSearch = hasCacheDefeatingSku(request.url);
+
+    if (requestParameters.type === 'json') {
+        request.headers.set('Accept', 'application/json');
+    }
+
+    const validateOrFetch = (err, cachedResponse, responseIsFresh) => {
+        if (aborted) return;
+
+        if (err) {
+            // Do fetch in case of cache error.
+            // HTTP pages in Edge trigger a security error that can be ignored.
+            if (err.message !== 'SecurityError') {
+                warnOnce(err);
+            }
+        }
+
+        if (cachedResponse && responseIsFresh) {
+            return finishRequest(cachedResponse);
+        }
+
+        if (cachedResponse) {
+            // We can't do revalidation with 'If-None-Match' because then the
+            // request doesn't have simple cors headers.
+        }
+
+        const requestTime = Date.now();
+
+        window.fetch(request).then(response => {
+            if (response.ok) {
+                const cacheableResponse = cacheIgnoringSearch ? response.clone() : null;
+                return finishRequest(response, cacheableResponse, requestTime);
+
+            } else {
+                return callback(new AJAXError(response.statusText, response.status, requestParameters.url));
+            }
+        }).catch(error => {
+            if (error.code === 20) {
+                // silence expected AbortError
+                return;
+            }
+            callback(new Error(error.message));
+        });
+    };
+
+    const finishRequest = (response, cacheableResponse, requestTime) => {
+        (
+            requestParameters.type === 'arrayBuffer' ? response.arrayBuffer() :
+            requestParameters.type === 'json' ? response.json() :
+            response.text()
+        ).then(result => {
+            if (aborted) return;
+            if (cacheableResponse && requestTime) {
+                // The response needs to be inserted into the cache after it has completely loaded.
+                // Until it is fully loaded there is a chance it will be aborted. Aborting while
+                // reading the body can cause the cache insertion to error. We could catch this error
+                // in most browsers but in Firefox it seems to sometimes crash the tab. Adding
+                // it to the cache here avoids that error.
+                cachePut(request, cacheableResponse, requestTime);
+            }
+            complete = true;
+            callback(null, result, response.headers.get('Cache-Control'), response.headers.get('Expires'));
+        }).catch(err => {
+            if (!aborted) callback(new Error(err.message));
+        });
+    };
+
+    if (cacheIgnoringSearch) {
+        cacheGet(request, validateOrFetch);
+    } else {
+        validateOrFetch(null, null);
+    }
+
+    return {cancel: () => {
+        aborted = true;
+        if (!complete) controller.abort();
+    }};
+}
+
+function makeXMLHttpRequest(requestParameters: RequestParameters, callback: ResponseCallback<any>): Cancelable {
+    const xhr: XMLHttpRequest = new window.XMLHttpRequest();
+
+    xhr.open(requestParameters.method || 'GET', requestParameters.url, true);
+    if (requestParameters.type === 'arrayBuffer') {
+        xhr.responseType = 'arraybuffer';
+    }
+    for (const k in requestParameters.headers) {
+        xhr.setRequestHeader(k, requestParameters.headers[k]);
+    }
+    if (requestParameters.type === 'json') {
+        xhr.responseType = 'text';
+        xhr.setRequestHeader('Accept', 'application/json');
+    }
+    xhr.withCredentials = requestParameters.credentials === 'include';
+    xhr.onerror = () => {
+        callback(new Error(xhr.statusText));
+    };
+    xhr.onload = () => {
+        if (((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) && xhr.response !== null) {
+            let data: mixed = xhr.response;
+            if (requestParameters.type === 'json') {
+                // We're manually parsing JSON here to get better error messages.
+                try {
+                    data = JSON.parse(xhr.response);
+                } catch (err) {
+                    return callback(err);
+                }
+            }
+            callback(null, data, xhr.getResponseHeader('Cache-Control'), xhr.getResponseHeader('Expires'));
+        } else {
+            callback(new AJAXError(xhr.statusText, xhr.status, requestParameters.url));
+        }
+    };
+    xhr.send(requestParameters.body);
+    return {cancel: () => xhr.abort()};
+}
+
+export const makeRequest = function(requestParameters: RequestParameters, callback: ResponseCallback<any>): Cancelable {
+    // We're trying to use the Fetch API if possible. However, in some situations we can't use it:
+    // - IE11 doesn't support it at all. In this case, we dispatch the request to the main thread so
+    //   that we can get an accruate referrer header.
+    // - Safari exposes window.AbortController, but it doesn't work actually abort any requests in
+    //   some versions (see https://bugs.webkit.org/show_bug.cgi?id=174980#c2)
+    // - Requests for resources with the file:// URI scheme don't work with the Fetch API either. In
+    //   this case we unconditionally use XHR on the current thread since referrers don't matter.
+    if (!isFileURL(requestParameters.url)) {
+        if (window.fetch && window.Request && window.AbortController && window.Request.prototype.hasOwnProperty('signal')) {
+            return makeFetchRequest(requestParameters, callback);
+        }
+        if (isWorker() && self.worker && self.worker.actor) {
+            const queueOnMainThread = true;
+            return self.worker.actor.send('getResource', requestParameters, callback, undefined, queueOnMainThread);
+        }
+    }
+    return makeXMLHttpRequest(requestParameters, callback);
+};
+
+export const getJSON = function(requestParameters: RequestParameters, callback: ResponseCallback<Object>): Cancelable {
+    return makeRequest(extend(requestParameters, {type: 'json'}), callback);
+};
+
+export const getArrayBuffer = function(requestParameters: RequestParameters, callback: ResponseCallback<ArrayBuffer>): Cancelable {
+    return makeRequest(extend(requestParameters, {type: 'arrayBuffer'}), callback);
+};
+
+export const postData = function(requestParameters: RequestParameters, callback: ResponseCallback<string>): Cancelable {
+    return makeRequest(extend(requestParameters, {method: 'POST'}), callback);
+};
+
+function sameOrigin(url) {
+    const a: HTMLAnchorElement = window.document.createElement('a');
+    a.href = url;
+    return a.protocol === window.document.location.protocol && a.host === window.document.location.host;
+}
+
+const transparentPngUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
+
+function arrayBufferToImage(data: ArrayBuffer, callback: (err: ?Error, image: ?HTMLImageElement) => void, cacheControl: ?string, expires: ?string) {
+    const img: HTMLImageElement = new window.Image();
+    const URL = window.URL;
+    img.onload = () => {
+        callback(null, img);
+        URL.revokeObjectURL(img.src);
+        // prevent image dataURI memory leak in Safari;
+        // but don't free the image immediately because it might be uploaded in the next frame
+        // https://github.com/mapbox/mapbox-gl-js/issues/10226
+        img.onload = null;
+        window.requestAnimationFrame(() => { img.src = transparentPngUrl; });
+    };
+    img.onerror = () => callback(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
+    const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});
+    (img: any).cacheControl = cacheControl;
+    (img: any).expires = expires;
+    img.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
+}
+
+function arrayBufferToImageBitmap(data: ArrayBuffer, callback: (err: ?Error, image: ?ImageBitmap) => void) {
+    const blob: Blob = new window.Blob([new Uint8Array(data)], {type: 'image/png'});
+    window.createImageBitmap(blob).then((imgBitmap) => {
+        callback(null, imgBitmap);
+    }).catch((e) => {
+        callback(new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`));
+    });
+}
+
+let imageQueue, numImageRequests;
+export const resetImageRequestQueue = () => {
+    imageQueue = [];
+    numImageRequests = 0;
+};
+resetImageRequestQueue();
+
+export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement | ImageBitmap>): Cancelable {
+    if (webpSupported.supported) {
+        if (!requestParameters.headers) {
+            requestParameters.headers = {};
+        }
+        requestParameters.headers.accept = 'image/webp,*/*';
+    }
+
+    // limit concurrent image loads to help with raster sources performance on big screens
+    if (numImageRequests >= config.MAX_PARALLEL_IMAGE_REQUESTS) {
+        const queued = {
+            requestParameters,
+            callback,
+            cancelled: false,
+            cancel() { this.cancelled = true; }
+        };
+        imageQueue.push(queued);
+        return queued;
+    }
+    numImageRequests++;
+
+    let advanced = false;
+    const advanceImageRequestQueue = () => {
+        if (advanced) return;
+        advanced = true;
+        numImageRequests--;
+        assert(numImageRequests >= 0);
+        while (imageQueue.length && numImageRequests < config.MAX_PARALLEL_IMAGE_REQUESTS) { // eslint-disable-line
+            const request = imageQueue.shift();
+            const {requestParameters, callback, cancelled} = request;
+            if (!cancelled) {
+                request.cancel = getImage(requestParameters, callback).cancel;
+            }
+        }
+    };
+
+    // request the image with XHR to work around caching issues
+    // see https://github.com/mapbox/mapbox-gl-js/issues/1470
+    const request = getArrayBuffer(requestParameters, (err: ?Error, data: ?ArrayBuffer, cacheControl: ?string, expires: ?string) => {
+
+        advanceImageRequestQueue();
+
+        if (err) {
+            callback(err);
+        } else if (data) {
+            if (offscreenCanvasSupported()) {
+                arrayBufferToImageBitmap(data, callback);
+            } else {
+                arrayBufferToImage(data, callback, cacheControl, expires);
+            }
+        }
+    });
+
+    return {
+        cancel: () => {
+            request.cancel();
+            advanceImageRequestQueue();
+        }
+    };
+};
+
+export const getVideo = function(urls: Array<string>, callback: Callback<HTMLVideoElement>): Cancelable {
+    const video: HTMLVideoElement = window.document.createElement('video');
+    video.muted = true;
+    video.onloadstart = function() {
+        callback(null, video);
+    };
+    for (let i = 0; i < urls.length; i++) {
+        const s: HTMLSourceElement = window.document.createElement('source');
+        if (!sameOrigin(urls[i])) {
+            video.crossOrigin = 'Anonymous';
+        }
+        s.src = urls[i];
+        video.appendChild(s);
+    }
+    return {cancel: () => {}};
+};

package/src/util/browser/web_worker.js

@@ -0,0 +1,10 @@
+// @flow
+
+import window from '../window';
+import mapboxgl from '../../';
+
+import type {WorkerInterface} from '../web_worker';
+
+export default function (): WorkerInterface {
+    return (new window.Worker(mapboxgl.workerUrl): any);
+}

package/src/util/browser/window.js

@@ -0,0 +1,6 @@
+// @flow
+/* eslint-env browser */
+import type {Window} from '../../types/window';
+
+// shim window for the case of requiring the browser bundle in Node
+export default typeof self !== 'undefined' ? (self: Window) : (({}: any): Window);

package/src/util/browser.js

@@ -0,0 +1,70 @@
+// @flow strict
+
+import window from './window';
+import type {Cancelable} from '../types/cancelable';
+
+const now = window.performance && window.performance.now ?
+    window.performance.now.bind(window.performance) :
+    Date.now.bind(Date);
+
+const raf = window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.msRequestAnimationFrame;
+
+const cancel = window.cancelAnimationFrame ||
+    window.mozCancelAnimationFrame ||
+    window.webkitCancelAnimationFrame ||
+    window.msCancelAnimationFrame;
+
+let linkEl;
+
+let reducedMotionQuery: MediaQueryList;
+
+/**
+ * @private
+ */
+const exported = {
+    /**
+     * Provides a function that outputs milliseconds: either performance.now()
+     * or a fallback to Date.now()
+     */
+    now,
+
+    frame(fn: (paintStartTimestamp: number) => void): Cancelable {
+        const frame = raf(fn);
+        return {cancel: () => cancel(frame)};
+    },
+
+    getImageData(img: CanvasImageSource, padding?: number = 0): ImageData {
+        const canvas = window.document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('failed to create canvas 2d context');
+        }
+        canvas.width = img.width;
+        canvas.height = img.height;
+        context.drawImage(img, 0, 0, img.width, img.height);
+        return context.getImageData(-padding, -padding, img.width + 2 * padding, img.height + 2 * padding);
+    },
+
+    resolveURL(path: string) {
+        if (!linkEl) linkEl = window.document.createElement('a');
+        linkEl.href = path;
+        return linkEl.href;
+    },
+
+    hardwareConcurrency: window.navigator && window.navigator.hardwareConcurrency || 4,
+
+    get devicePixelRatio() { return window.devicePixelRatio; },
+    get prefersReducedMotion(): boolean {
+        if (!window.matchMedia) return false;
+        //Lazily initialize media query
+        if (reducedMotionQuery == null) {
+            reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        }
+        return reducedMotionQuery.matches;
+    },
+};
+
+export default exported;