@scoova/mgl 1.0.0

package/src/util/ajax.test.ts

@@ -0,0 +1,237 @@
+import {
+    getArrayBuffer,
+    getJSON,
+    AJAXError,
+    sameOrigin
+} from './ajax';
+
+import {fakeServer, type FakeServer} from 'nise';
+
+function readAsText(blob) {
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => resolve(fileReader.result);
+        fileReader.onerror = () => reject(fileReader.error);
+        fileReader.readAsText(blob);
+    });
+}
+
+describe('ajax', () => {
+    let server: FakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('getArrayBuffer, 404', async () => {
+        server.respondWith(request => {
+            request.respond(404, undefined, '404 Not Found');
+        });
+
+        try {
+            const promise =  getArrayBuffer({url: 'http://example.com/test.bin'}, new AbortController());
+            server.respond();
+            await promise;
+        } catch (error) {
+            const ajaxError = error as AJAXError;
+            const body = await readAsText(ajaxError.body);
+            expect(ajaxError.status).toBe(404);
+            expect(ajaxError.statusText).toBe('Not Found');
+            expect(ajaxError.url).toBe('http://example.com/test.bin');
+            expect(body).toBe('404 Not Found');
+        }
+    });
+
+    test('getJSON', async () => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+        });
+        const promise = getJSON({url: ''}, new AbortController());
+        server.respond();
+
+        const body = await promise;
+        expect(body.data).toEqual({foo: 'bar'});
+    });
+
+    test('getJSON, invalid syntax', async () => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, 'how do i even');
+        });
+        const promise = getJSON({url: ''}, new AbortController());
+        server.respond();
+        try {
+            await promise;
+        } catch (error) {
+            expect(error).toBeTruthy();
+        }
+    });
+
+    test('getJSON, 404', async () => {
+        server.respondWith(request => {
+            request.respond(404, undefined, '404 Not Found');
+        });
+        const promise = getJSON({url: 'http://example.com/test.json'}, new AbortController());
+        server.respond();
+
+        try {
+            await promise;
+        } catch (error) {
+            const ajaxError = error as AJAXError;
+            const body = await readAsText(ajaxError.body);
+            expect(ajaxError.status).toBe(404);
+            expect(ajaxError.statusText).toBe('Not Found');
+            expect(ajaxError.url).toBe('http://example.com/test.json');
+            expect(body).toBe('404 Not Found');
+        }
+    });
+
+    test('sameOrigin method', () => {
+        jest.spyOn(window, 'location', 'get').mockReturnValue({
+            protocol: 'https:',
+            host: 'somewhere.com'
+        } as any);
+
+        expect(sameOrigin('https://somewhere.com')).toBe(true);
+        expect(sameOrigin('https://somewhere.com/path')).toBe(true);
+        expect(sameOrigin('https://somewhere.com/path/?q=abc')).toBe(true);
+
+        expect(sameOrigin('https://somewhere.com:443/path')).toBe(true);
+
+        expect(sameOrigin('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=')).toBe(true);
+        expect(sameOrigin('blob:https://www.bing.com/09f36686-e57a-420f-9004-918548219b75')).toBe(true);
+
+        // relative URL is same origin for sure
+        expect(sameOrigin('/foo')).toBe(true);
+        expect(sameOrigin('foo')).toBe(true);
+
+        // empty string is considered as relative, and should be true
+        expect(sameOrigin('')).toBe(true);
+        expect(sameOrigin(null)).toBe(true);
+        expect(sameOrigin(undefined)).toBe(true);
+
+        expect(sameOrigin('HTTPS://somewhere.com')).toBe(true);
+
+        // different domain
+        expect(sameOrigin('httpS://www.somewhere.com')).toBe(false);
+
+        // different protocol
+        expect(sameOrigin('HTTP://somewhere.com')).toBe(false);
+        expect(sameOrigin('file:///c:/temp/foo.html')).toBe(false);
+
+        // file url
+        jest.spyOn(window, 'location', 'get').mockReturnValue({
+            protocol: 'file:',
+            host: ''
+        } as any);
+        expect(sameOrigin('file:///C:/Temp/abc.html')).toBe(true);
+        expect(sameOrigin('HTTP://somewhere.com')).toBe(false);
+
+        // relative URL (for file URL) is same origin as well
+        expect(sameOrigin('/foo')).toBe(true);
+        expect(sameOrigin('foo')).toBe(true);
+
+        // edge case
+        expect(sameOrigin('://foo')).toBe(true);
+    });
+
+    describe('requests parameters', () => {
+
+        test('should be provided to fetch API in getArrayBuffer function', async () => {
+            server.respondWith(new ArrayBuffer(1));
+
+            const promise = getArrayBuffer({url: 'http://example.com/test-params.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('http://example.com/test-params.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+        });
+
+        test('should be provided to fetch API in getJSON function', async () => {
+
+            server.respondWith(request => {
+                request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+            });
+
+            const promise = getJSON({url: 'http://example.com/test-params.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('http://example.com/test-params.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+        });
+
+        test('should preserve user-specified Accept header', async () => {
+            server.respondWith(request => {
+                // Note that PostgREST responds to this type of request with application/geo+json
+                request.respond(200, {'Content-Type': 'application/geo+json'}, '{"foo": "bar"}');
+            });
+
+            const promise = getJSON({url: 'http://example.com/test-params.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123', 'Accept': 'application/geo+json'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('http://example.com/test-params.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+            expect(server.requests[0].requestHeaders['Accept']).toBe('application/geo+json');
+        });
+
+        test('should add default Accept header when user has not specified one', async () => {
+            server.respondWith(request => {
+                request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+            });
+
+            const promise = getJSON({url: 'http://example.com/test-params.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('http://example.com/test-params.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+            expect(server.requests[0].requestHeaders['Accept']).toBe('application/json');
+        });
+
+        test('should add default Accept header when user has not specified one, even for file:// requests', async () => {
+            server.respondWith(request => {
+                request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+            });
+
+            const promise = getJSON({url: 'file:///C:/Temp/abc.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('file:///C:/Temp/abc.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+            expect(server.requests[0].requestHeaders['Accept']).toBe('application/json');
+        });
+
+        test('should not add default Accept header when user has already specified one, even for file:// requests', async () => {
+            server.respondWith(request => {
+                request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+            });
+
+            const promise = getJSON({url: 'file:///C:/Temp/abc.json', cache: 'force-cache', headers: {'Authorization': 'Bearer 123', 'Accept': 'application/geo+json'}}, new AbortController());
+            server.respond();
+            await promise;
+
+            expect(server.requests).toHaveLength(1);
+            expect(server.requests[0].url).toBe('file:///C:/Temp/abc.json');
+            expect(server.requests[0].method).toBe('GET');
+            expect(server.requests[0].requestHeaders['Authorization']).toBe('Bearer 123');
+            expect(server.requests[0].requestHeaders['Accept']).toBe('application/geo+json');
+        });
+
+    });
+});

package/src/util/ajax.ts

@@ -0,0 +1,297 @@
+import {extend, isWorker} from './util';
+import {createAbortError} from './abort_error';
+import {getProtocol} from '../source/protocol_crud';
+import {MessageType} from './actor_messages';
+
+/**
+ * This is used to identify the global dispatcher id when sending a message from the worker without a target map id.
+ */
+export const GLOBAL_DISPATCHER_ID = 'global-dispatcher';
+
+/**
+ * A type used to store the tile's expiration date and cache control definition
+ */
+export type ExpiryData = {cacheControl?: string | null; expires?: Date | string | null};
+
+/**
+ * A `RequestParameters` object to be returned from Map.options.transformRequest callbacks.
+ * @example
+ * ```ts
+ * // 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 = {
+    /**
+     * The URL to be requested.
+     */
+    url: string;
+    /**
+     * The headers to be sent with the request.
+     */
+    headers?: any;
+    /**
+     * Request method `'GET' | 'POST' | 'PUT'`.
+     */
+    method?: 'GET' | 'POST' | 'PUT';
+    /**
+     * Request body.
+     */
+    body?: string;
+    /**
+     * Response body type to be returned.
+     */
+    type?: 'string' | 'json' | 'arrayBuffer' | 'image';
+    /**
+     * `'same-origin'|'include'` Use 'include' to send cookies with cross-origin requests.
+     */
+    credentials?: 'same-origin' | 'include';
+    /**
+     * If `true`, Resource Timing API information will be collected for these transformed requests and returned in a resourceTiming property of relevant data events.
+     */
+    collectResourceTiming?: boolean;
+    /**
+     * Parameters supported only by browser fetch API. Property of the Request interface contains the cache mode of the request. It controls how the request will interact with the browser's HTTP cache. (https://developer.mozilla.org/en-US/docs/Web/API/Request/cache)
+     */
+    cache?: RequestCache;
+};
+
+/**
+ * The response object returned from a successful AJAx request
+ */
+export type GetResourceResponse<T> = ExpiryData & {
+    data: T;
+}
+
+/**
+ * The response callback used in various places
+ */
+export type ResponseCallback<T> = (
+    error?: Error | null,
+    data?: T | null,
+    cacheControl?: string | null,
+    expires?: string | Date | null
+) => void;
+
+/**
+ * An error thrown when a HTTP request results in an error response.
+ */
+export class AJAXError extends Error {
+    /**
+     * The response's HTTP status code.
+     */
+    status: number;
+
+    /**
+     * The response's HTTP status text.
+     */
+    statusText: string;
+
+    /**
+     * The request's URL.
+     */
+    url: string;
+
+    /**
+     * The response's body.
+     */
+    body: Blob;
+
+    /**
+     * @param status - The response's HTTP status code.
+     * @param statusText - The response's HTTP status text.
+     * @param url - The request's URL.
+     * @param body - The response's body.
+     */
+    constructor(status: number, statusText: string, url: string, body: Blob) {
+        super(`AJAXError: ${statusText} (${status}): ${url}`);
+        this.status = status;
+        this.statusText = statusText;
+        this.url = url;
+        this.body = body;
+    }
+}
+
+/**
+ * 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),
+ * and we will set an empty referrer. Otherwise, we're using the document's URL.
+ */
+export const getReferrer = () => isWorker(self) ?
+    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.
+ * @param url - The URL to check
+ * @returns `true` if the URL is a file:// URL, `false` otherwise
+ */
+const isFileURL = url => /^file:/.test(url) || (/^file:/.test(getReferrer()) && !/^\w+:/.test(url));
+
+async function makeFetchRequest(requestParameters: RequestParameters, abortController: AbortController): Promise<GetResourceResponse<any>> {
+    const request = new Request(requestParameters.url, {
+        method: requestParameters.method || 'GET',
+        body: requestParameters.body,
+        credentials: requestParameters.credentials,
+        headers: requestParameters.headers,
+        cache: requestParameters.cache,
+        referrer: getReferrer(),
+        signal: abortController.signal
+    });
+
+    // If the user has already set an Accept header, do not overwrite it here
+    if (requestParameters.type === 'json' && !request.headers.has('Accept')) {
+        request.headers.set('Accept', 'application/json');
+    }
+
+    const response = await fetch(request);
+    if (!response.ok) {
+        const body = await response.blob();
+        throw new AJAXError(response.status, response.statusText, requestParameters.url, body);
+    }
+    let parsePromise: Promise<any>;
+    if ((requestParameters.type === 'arrayBuffer' || requestParameters.type === 'image')) {
+        parsePromise = response.arrayBuffer();
+    } else if (requestParameters.type === 'json') {
+        parsePromise = response.json();
+    } else {
+        parsePromise = response.text();
+    }
+    const result = await parsePromise;
+    if (abortController.signal.aborted) {
+        throw createAbortError();
+    }
+    return {data: result, cacheControl: response.headers.get('Cache-Control'), expires: response.headers.get('Expires')};
+}
+
+function makeXMLHttpRequest(requestParameters: RequestParameters, abortController: AbortController): Promise<GetResourceResponse<any>> {
+    return new Promise((resolve, reject) => {
+        const xhr: XMLHttpRequest = new XMLHttpRequest();
+
+        xhr.open(requestParameters.method || 'GET', requestParameters.url, true);
+        if (requestParameters.type === 'arrayBuffer' || requestParameters.type === 'image') {
+            xhr.responseType = 'arraybuffer';
+        }
+        for (const k in requestParameters.headers) {
+            xhr.setRequestHeader(k, requestParameters.headers[k]);
+        }
+        if (requestParameters.type === 'json') {
+            xhr.responseType = 'text';
+            // Do not overwrite the user-provided Accept header
+            if (!requestParameters.headers?.Accept) {
+                xhr.setRequestHeader('Accept', 'application/json');
+            }
+        }
+        xhr.withCredentials = requestParameters.credentials === 'include';
+        xhr.onerror = () => {
+            reject(new Error(xhr.statusText));
+        };
+        xhr.onload = () => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            if (((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) && xhr.response !== null) {
+                let data: unknown = 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) {
+                        reject(err);
+                        return;
+                    }
+                }
+                resolve({data, cacheControl: xhr.getResponseHeader('Cache-Control'), expires: xhr.getResponseHeader('Expires')});
+            } else {
+                const body = new Blob([xhr.response], {type: xhr.getResponseHeader('Content-Type')});
+                reject(new AJAXError(xhr.status, xhr.statusText, requestParameters.url, body));
+            }
+        };
+        abortController.signal.addEventListener('abort', () => {
+            xhr.abort();
+            reject(createAbortError());
+        });
+        xhr.send(requestParameters.body);
+    });
+}
+
+/**
+ * We're trying to use the Fetch API if possible. However, requests for resources with the file:// URI scheme don't work with the Fetch API.
+ * In this case we unconditionally use XHR on the current thread since referrers don't matter.
+ * This method can also use the registered method if `addProtocol` was called.
+ * @param requestParameters - The request parameters
+ * @param abortController - The abort controller allowing to cancel the request
+ * @returns a promise resolving to the response, including cache control and expiry data
+ */
+export const makeRequest = function(requestParameters: RequestParameters, abortController: AbortController): Promise<GetResourceResponse<any>> {
+    if (/:\/\//.test(requestParameters.url) && !(/^https?:|^file:/.test(requestParameters.url))) {
+        const protocolLoadFn = getProtocol(requestParameters.url);
+        if (protocolLoadFn) {
+            return protocolLoadFn(requestParameters, abortController);
+        }
+        if (isWorker(self) && self.worker && self.worker.actor) {
+            return self.worker.actor.sendAsync({type: MessageType.getResource, data: requestParameters, targetMapId: GLOBAL_DISPATCHER_ID}, abortController);
+        }
+    }
+    if (!isFileURL(requestParameters.url)) {
+        if (fetch && Request && AbortController && Object.prototype.hasOwnProperty.call(Request.prototype, 'signal')) {
+            return makeFetchRequest(requestParameters, abortController);
+        }
+        if (isWorker(self) && self.worker && self.worker.actor) {
+            return self.worker.actor.sendAsync({type: MessageType.getResource, data: requestParameters, mustQueue: true, targetMapId: GLOBAL_DISPATCHER_ID}, abortController);
+        }
+    }
+    return makeXMLHttpRequest(requestParameters, abortController);
+};
+
+export const getJSON = <T>(requestParameters: RequestParameters, abortController: AbortController): Promise<{data: T} & ExpiryData> => {
+    return makeRequest(extend(requestParameters, {type: 'json'}), abortController);
+};
+
+export const getArrayBuffer = (requestParameters: RequestParameters, abortController: AbortController): Promise<{data: ArrayBuffer} & ExpiryData> => {
+    return makeRequest(extend(requestParameters, {type: 'arrayBuffer'}), abortController);
+};
+
+export function sameOrigin(inComingUrl: string) {
+    // A relative URL "/foo" or "./foo" will throw exception in URL's ctor,
+    // try-catch is expansive so just use a heuristic check to avoid it
+    // also check data URL
+    if (!inComingUrl ||
+        inComingUrl.indexOf('://') <= 0 || // relative URL
+        inComingUrl.indexOf('data:image/') === 0 || // data image URL
+        inComingUrl.indexOf('blob:') === 0) { // blob
+        return true;
+    }
+    const urlObj = new URL(inComingUrl);
+    const locationObj = window.location;
+    return urlObj.protocol === locationObj.protocol && urlObj.host === locationObj.host;
+}
+
+export const getVideo = (urls: Array<string>): Promise<HTMLVideoElement> => {
+    const video: HTMLVideoElement = window.document.createElement('video');
+    video.muted = true;
+    return new Promise((resolve) => {
+        video.onloadstart = () => {
+            resolve(video);
+        };
+        for (const url of urls) {
+            const s: HTMLSourceElement = window.document.createElement('source');
+            if (!sameOrigin(url)) {
+                video.crossOrigin = 'Anonymous';
+            }
+            s.src = url;
+            video.appendChild(s);
+        }
+    });
+};

package/src/util/browser.test.ts

@@ -0,0 +1,23 @@
+import {browser} from './browser';
+
+describe('browser', () => {
+    test('frameAsync', async () => {
+        const id = await browser.frameAsync(new AbortController());
+        expect(id).toBeTruthy();
+    });
+
+    test('now', () => {
+        expect(typeof browser.now()).toBe('number');
+    });
+
+    test('frameAsync', async () => {
+        const abortController = new AbortController();
+        const promise = browser.frameAsync(abortController);
+        abortController.abort();
+        await expect(promise).rejects.toThrow();
+    });
+
+    test('hardwareConcurrency', () => {
+        expect(typeof browser.hardwareConcurrency).toBe('number');
+    });
+});

package/src/util/browser.ts

@@ -0,0 +1,63 @@
+import {createAbortError} from './abort_error';
+
+const now = typeof performance !== 'undefined' && performance && performance.now ?
+    performance.now.bind(performance) :
+    Date.now.bind(Date);
+
+let linkEl;
+
+let reducedMotionQuery: MediaQueryList;
+
+/** */
+export const browser = {
+    /**
+     * Provides a function that outputs milliseconds: either performance.now()
+     * or a fallback to Date.now()
+     */
+    now,
+
+    frameAsync(abortController: AbortController): Promise<number> {
+        return new Promise((resolve, reject) => {
+            const frame = requestAnimationFrame(resolve);
+            abortController.signal.addEventListener('abort', () => {
+                cancelAnimationFrame(frame);
+                reject(createAbortError());
+            });
+        });
+    },
+
+    getImageData(img:  HTMLImageElement | ImageBitmap, padding: number = 0): ImageData {
+        const context = this.getImageCanvasContext(img);
+        return context.getImageData(-padding, -padding, img.width as number + 2 * padding, img.height as number + 2 * padding);
+    },
+
+    getImageCanvasContext(img: HTMLImageElement | ImageBitmap): CanvasRenderingContext2D {
+        const canvas = window.document.createElement('canvas') as HTMLCanvasElement;
+        const context = canvas.getContext('2d', {willReadFrequently: true});
+        if (!context) {
+            throw new Error('failed to create canvas 2d context');
+        }
+        canvas.width = img.width as number;
+        canvas.height = img.height as number;
+        context.drawImage(img, 0, 0, img.width as number, img.height as number);
+        return context;
+    },
+
+    resolveURL(path: string) {
+        if (!linkEl) linkEl = document.createElement('a');
+        linkEl.href = path;
+        return linkEl.href;
+    },
+
+    hardwareConcurrency: typeof navigator !== 'undefined' && navigator.hardwareConcurrency || 4,
+
+    get prefersReducedMotion(): boolean {
+        // In case your test crashes when checking matchMedia, call setMatchMedia from 'src/util/test/util'
+        if (!matchMedia) return false;
+        //Lazily initialize media query
+        if (reducedMotionQuery == null) {
+            reducedMotionQuery = matchMedia('(prefers-reduced-motion: reduce)');
+        }
+        return reducedMotionQuery.matches;
+    },
+};