Add support for async transformRequest (internal-8378)

GitOrigin-RevId: 1c5576c0e0bffc0613a2eff6475e025aa9502d87

Author: stepankuzmin

3d-style/render/model_manager.ts

@@ -45,22 +45,20 @@ class ModelManager extends Evented {
         this.numModelsLoading = Object.create(null) as ModelManager['numModelsLoading'];
     }
 
-    loadModel(id: string, url: string): Promise<Model | null | undefined> {
-        return loadGLTF(this.requestManager.transformRequest(url, ResourceType.Model).url)
-            .then(gltf => {
-                const nodes = convertModel(gltf);
-                const model = new Model(id, url, undefined, undefined, nodes);
-                model.computeBoundsAndApplyParent();
-                return model;
-            })
-            .catch((err) => {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                if (err && err.status === 404) {
-                    return null;
-                }
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                this.fire(new ErrorEvent(new Error(`Could not load model ${id} from ${url}: ${err.message}`)));
-            });
+    async loadModel(id: string, url: string): Promise<Model | null | undefined> {
+        try {
+            const request = await this.requestManager.transformRequest(url, ResourceType.Model);
+            if (!this.modelByURL[url]) return null;
+
+            const gltf = await loadGLTF(request.url);
+            const nodes = convertModel(gltf);
+            const model = new Model(id, url, undefined, undefined, nodes);
+            model.computeBoundsAndApplyParent();
+            return model;
+        } catch (e) {
+            if ((e as {status?: number}).status === 404) return null;
+            this.fire(new ErrorEvent(new Error(`Could not load model ${id} from ${url}`, {cause: e})));
+        }
     }
 
     load(modelUris: {

3d-style/source/model_source.ts

@@ -99,8 +99,9 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
         }
     }
 
-    private loadGLTFFromURI(uri: string, signal?: AbortSignal): Promise<GLTF> {
-        return loadGLTF(this.map._requestManager.transformRequest(uri, ResourceType.Model).url, signal);
+    private async loadGLTFFromURI(uri: string, signal?: AbortSignal): Promise<GLTF> {
+        const request = await this.map._requestManager.transformRequest(uri, ResourceType.Model, signal);
+        return loadGLTF(request.url, signal);
     }
 
     private async loadModel(modelId: string, modelSpec: ModelSourceModelSpecification, signal: AbortSignal): Promise<void> {
@@ -120,9 +121,8 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
             this.models.push(model);
             modelInfo.model = model;
         } catch (err: unknown) {
-            if (err instanceof Error && err.name === 'AbortError') return;
-            const message = err instanceof Error ? err.message : 'Unknown error';
-            this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${message}`)));
+            if (signal.aborted) return;
+            this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}`, {cause: err})));
         }
     }
 

3d-style/source/tiled_3d_model_source.ts

@@ -137,43 +137,21 @@ class Tiled3DModelSource extends Evented<SourceEvents> implements ISource {
         return this._loaded;
     }
 
-    loadTile(tile: Tile, callback: Callback<undefined>) {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    async loadTile(tile: Tile, callback: Callback<undefined>): Promise<void> {
         const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, this.scheme));
-        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
-        const params: WorkerSourceTiled3dModelRequest = {
-            request,
-            data: undefined,
-            uid: tile.uid,
-            tileID: tile.tileID,
-            tileZoom: tile.tileZoom,
-            zoom: tile.tileID.overscaledZ,
-            tileSize: this.tileSize * tile.tileID.overscaleFactor(),
-            type: this.type,
-            source: this.id,
-            scope: this.scope,
-            showCollisionBoxes: this.map.showCollisionBoxes,
-            renderSourceType: tile.renderSourceType,
-            brightness: this.map.style ? (this.map.style.getBrightness() || 0.0) : 0.0,
-            pixelRatio: browser.devicePixelRatio,
-            promoteId: this.promoteId,
-        };
-
-        const done = (err?: AJAXError | null, data?: WorkerSourceVectorTileResult | null) => {
-            if (tile.aborted) return callback(null);
-            if (err && !isHttpNotFound(err)) return callback(err);
-            if (this.map._refreshExpiredTiles && data) tile.setExpiryData(parseExpiryData(data.headers));
-            tile.loadModelData(data, this.map.painter);
-            tile.state = 'loaded';
-            callback(null);
-        };
 
-        if (!tile.actor || tile.state === 'expired') {
+        // The actor/state branch stays synchronous so a re-entrant loadTile dedupes correctly.
+        const isFresh = !tile.actor || tile.state === 'expired';
+        if (isFresh) {
             tile.actor = this.dispatcher.getActor();
-            tile.request = tile.actor.sendCancelable('loadTile', params, {}, done);
-        } else if (tile.state === 'loading') {
-            // schedule tile reloading after it has been loaded
-            tile.reloadCallback = callback;
         } else {
+            if (tile.state === 'loading') {
+                // schedule tile reloading after it has been loaded
+                tile.reloadCallback = callback;
+                return;
+            }
+
             // If the tile has already been parsed we may just need to reevaluate
             if (tile.buckets) {
                 const buckets = Object.values(tile.buckets) as Tiled3dModelBucket[];
@@ -183,8 +161,54 @@ class Tiled3DModelSource extends Evented<SourceEvents> implements ISource {
                 tile.state = 'loaded';
                 return;
             }
+        }
+
+        const messageType = isFresh ? 'loadTile' : 'reloadTile';
+        const controller = new AbortController();
+        tile.request = controller;
+
+        const done = (err?: AJAXError | null, data?: WorkerSourceVectorTileResult | null) => {
+            delete tile.request;
+            if (tile.aborted) return callback(null);
+            if (err && !isHttpNotFound(err)) return callback(err);
+            if (this.map._refreshExpiredTiles && data) tile.setExpiryData(parseExpiryData(data.headers));
+            tile.loadModelData(data, this.map.painter);
+            tile.state = 'loaded';
+            callback(null);
+
+            if (tile.reloadCallback) {
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                this.loadTile(tile, tile.reloadCallback);
+                tile.reloadCallback = null;
+            }
+        };
 
-            tile.request = tile.actor.sendCancelable('reloadTile', params, {}, done);
+        try {
+            const request = await this.map._requestManager.transformRequest(url, ResourceType.Tile, controller.signal);
+            if (controller.signal.aborted) return callback(null);
+
+            const params: WorkerSourceTiled3dModelRequest = {
+                request,
+                data: undefined,
+                uid: tile.uid,
+                tileID: tile.tileID,
+                tileZoom: tile.tileZoom,
+                zoom: tile.tileID.overscaledZ,
+                tileSize: this.tileSize * tile.tileID.overscaleFactor(),
+                type: this.type,
+                source: this.id,
+                scope: this.scope,
+                showCollisionBoxes: this.map.showCollisionBoxes,
+                renderSourceType: tile.renderSourceType,
+                brightness: this.map.style ? (this.map.style.getBrightness() || 0.0) : 0.0,
+                pixelRatio: browser.devicePixelRatio,
+                promoteId: this.promoteId,
+            };
+
+            tile.request = tile.actor.sendCancelable(messageType, params, {}, done);
+        } catch (err) {
+            if (controller.signal.aborted) return callback(null);
+            callback(err as Error);
         }
     }
 

debug/session-tokens.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" href="../dist/mapbox-gl.css" />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id="map"></div>
+
+<script type="module">
+import * as mapboxgl from '../dist/esm-dev/mapbox-gl.js';
+import {getAccessToken} from './access_token_generated.js';
+
+let session = null;
+function authenticate(signal) {
+    if (signal) {
+        signal.addEventListener('abort', () => console.log('request aborted'), {once: true});
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    if (!session || now >= session.exp) {
+        session = {token: Date.now().toString(), exp: now + 30};
+    }
+
+    return session;
+}
+
+const map = window.map = new mapboxgl.Map({
+    accessToken: getAccessToken(),
+    container: 'map',
+    hash: true,
+    zoom: 12.5,
+    center: [-122.4194, 37.7749],
+    transformRequest: async (url, resourceType, {signal}) => {
+        const {token} = await authenticate(signal);
+
+        const u = new URL(url);
+        u.searchParams.set('ts', token);
+
+        return {url: u.toString()};
+    }
+});
+
+</script>
+</body>
+</html>

src/source/canvas_source.ts

@@ -111,7 +111,8 @@ class CanvasSource extends ImageSource<'canvas'> {
      * @memberof CanvasSource
      */
 
-    override load() {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    override async load() {
         this._loaded = true;
         if (!this.canvas) {
             this.canvas = (this.options.canvas instanceof HTMLCanvasElement) ?
@@ -166,6 +167,7 @@ class CanvasSource extends ImageSource<'canvas'> {
 
     override onAdd(map: Map) {
         this.map = map;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.load();
         if (this.canvas) {
             if (this.animate) this.play();

src/source/custom_source.ts

@@ -10,7 +10,6 @@ import type Dispatcher from '../util/dispatcher';
 import type {Callback} from '../types/callback';
 import type {OverscaledTileID} from './tile_id';
 import type {ISource, SourceEvents} from './source';
-import type {AJAXError} from '../util/ajax';
 import type {TextureImage} from '../render/texture';
 
 type DataType = 'raster';
@@ -261,22 +260,14 @@ class CustomSource<T> extends Evented<SourceEvents> implements ISource {
         return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
     }
 
-    loadTile(tile: Tile, callback: Callback<undefined>): void {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    async loadTile(tile: Tile, callback: Callback<undefined>): Promise<void> {
         const {x, y, z} = tile.tileID.canonical;
         const controller = new AbortController();
         tile.request = controller;
 
-        Promise
-            .resolve(this._implementation.loadTile({x, y, z}, {signal: controller.signal}))
-            .then(tileLoaded.bind(this))
-            .catch((error?: Error | DOMException | AJAXError) => {
-                // silence AbortError
-                if (error.name === 'AbortError') return;
-                tile.state = 'errored';
-                callback(error);
-            });
-
-        function tileLoaded(this: CustomSource<T>, data?: T | null) {
+        try {
+            const data = await this._implementation.loadTile({x, y, z}, {signal: controller.signal});
             delete tile.request;
 
             if (tile.aborted) {
@@ -310,6 +301,10 @@ class CustomSource<T> extends Evented<SourceEvents> implements ISource {
             this.loadTileData(tile, data);
             tile.state = 'loaded';
             callback(null);
+        } catch (error) {
+            if (controller.signal.aborted) return;
+            tile.state = 'errored';
+            callback(error as Error);
         }
     }
 

src/source/geojson_source.ts

@@ -402,38 +402,42 @@ class GeoJSONSource extends Evented<SourceEvents> implements ISource {
 
         options.scope = this.scope;
         const data = this._data;
-        if (typeof data === 'string') {
-            options.request = this.map._requestManager.transformRequest(browser.resolveURL(data), ResourceType.Source);
-            options.request.collectResourceTiming = this._collectResourceTiming;
-        } else {
-            options.data = JSON.stringify(data);
-        }
 
-        // target {this.type}.loadData rather than literally geojson.loadData,
-        // so that other geojson-like source types can easily reuse this
-        // implementation
+        // Register _pendingLoad before any await, so a same-tick _updateWorkerData hits the coalesce guard.
         const controller = new AbortController();
         this._pendingLoad = controller;
 
         try {
+            if (typeof data === 'string') {
+                options.request = await this.map._requestManager.transformRequest(browser.resolveURL(data), ResourceType.Source, controller.signal);
+                if (controller.signal.aborted) {
+                    this._pendingLoad = null;
+                    this._coalesce = false;
+                    return;
+                }
+                options.request.collectResourceTiming = this._collectResourceTiming;
+            } else {
+                options.data = JSON.stringify(data);
+            }
+
             // The runtime type is `${this.type}.loadData` so geojson-like source types can reuse
             // this path, but every variant returns a LoadGeoJSONResult-shaped reply.
             const result = await this.actor.send(`${this.type}.loadData` as 'geojson.loadData', options, {signal: controller.signal});
             this._loaded = true;
             this._pendingLoad = null;
             // although GeoJSON sources contain no metadata, we fire this event at first
             // to let the SourceCache know its ok to start requesting tiles.
-            const data: MapSourceDataEvent = {dataType: 'source', sourceDataType: this._metadataFired ? 'content' : 'metadata'};
+            const dataEvent: MapSourceDataEvent = {dataType: 'source', sourceDataType: this._metadataFired ? 'content' : 'metadata'};
             const geojsonResult = result;
             if (this._collectResourceTiming && geojsonResult && geojsonResult.resourceTiming && geojsonResult.resourceTiming[this.id]) {
-                data.resourceTiming = geojsonResult.resourceTiming[this.id];
+                dataEvent.resourceTiming = geojsonResult.resourceTiming[this.id];
             }
             if (append) this._partialReload = true;
-            this.fire(new Event('data', data));
+            this.fire(new Event('data', dataEvent));
             this._partialReload = false;
             this._metadataFired = true;
         } catch (err) {
-            if ((err as Error).name === 'AbortError') {
+            if (controller.signal.aborted) {
                 this._pendingLoad = null;
                 // the load was cancelled (e.g. source removed); drop any queued coalesced update
                 this._coalesce = false;