Merge pull request #1250 from openlayers/transformrequest-response

Accept Response and Promise<Response> as transformRequest return

Author: ahocevar

examples/pmtiles.js

@@ -1,7 +1,7 @@
 import 'ol/ol.css';
 import {apply} from 'ol-mapbox-style';
-import {register as registerPMTiles} from 'pmtiles-protocol';
+import {fetch} from 'pmtiles-protocol';
 
-registerPMTiles();
-
-apply('map', 'data/protomaps-dark-style.json');
+apply('map', 'data/protomaps-dark-style.json', {
+  transformRequest: (url) => fetch(url),
+});

package-lock.json

@@ -74,7 +74,7 @@
     "mini-css-extract-plugin": "^2.4.4",
     "mocha": "^11.1.0",
     "nanoassert": "^2.0.0",
-    "pmtiles-protocol": "^1.0.1",
+    "pmtiles-protocol": "^1.0.5",
     "proj4": "^2.15.0",
     "puppeteer": "^23.10.4",
     "rollup": "^2.70.2",

package.json

@@ -66,10 +66,10 @@ import {
 /**
  * @typedef {Object} Options
  * @property {string} [accessToken] Access token for 'mapbox://' urls.
- * @property {function(string, import("./util.js").ResourceType): (Request|string|Promise<Request|string>|void)} [transformRequest]
+ * @property {function(string, import("./util.js").ResourceType): (Request|string|Response|Promise<Request|string|Response>|void)} [transformRequest]
  * Function for controlling how `ol-mapbox-style` fetches resources. Can be used for modifying
  * the url, adding headers or setting credentials options. Called with the url and the resource
- * type as arguments, this function is supposed to return a `Request` or a url `string`, or a promise tehereof.
+ * type as arguments, this function is supposed to return a `Request`, a url `string` or a `Response`, or a promise tehereof.
  * Without a return value the original request will not be modified.
  * @property {string} [projection='EPSG:3857'] Only useful when working with non-standard projections.
  * Code of a projection registered with OpenLayers. All sources of the style must be provided in this

src/apply.js

@@ -69,7 +69,7 @@ const mapboxSubdomains = ['a', 'b', 'c', 'd'];
  * @private
  */
 export function normalizeSourceUrl(url, token, tokenParam, styleUrl) {
-  const urlObject = new URL(url, styleUrl);
+  const urlObject = new URL(url, styleUrl || location.href);
   const mapboxPath = getMapboxPath(url);
   if (!mapboxPath) {
     if (!token) {

src/mapbox.js

@@ -111,45 +111,51 @@ const pendingRequests = {};
  * @param {ResourceType} resourceType Type of resource to load.
  * @param {string} url Url of the resource.
  * @param {Options} [options] Options.
- * @param {{request?: Request}} [metadata] Object to be filled with the request.
+ * @param {{url?: string}} [metadata] Object to be filled with the request.
  * @return {Promise<Object|Response>} Promise that resolves with the loaded resource
  * or rejects with the Response object.
  * @private
  */
 export function fetchResource(resourceType, url, options = {}, metadata) {
   if (url in pendingRequests) {
     if (metadata) {
-      metadata.request = pendingRequests[url][0];
+      metadata.url = pendingRequests[url][0].url;
     }
     return pendingRequests[url][1];
   }
   const transformedRequest = options.transformRequest
     ? options.transformRequest(url, resourceType) || url
     : url;
-  const pendingRequest = toPromise(() => transformedRequest).then(
-    (transformedRequest) => {
+  const handleError = function (error) {
+    delete pendingRequests[url];
+    return Promise.reject(new Error('Error fetching source ' + url));
+  };
+  const handleResponse = function (response) {
+    delete pendingRequests[url];
+    return response.ok
+      ? response.json()
+      : Promise.reject(new Error('Error fetching source ' + url));
+  };
+  const pendingRequest = toPromise(() => transformedRequest)
+    .then((transformedRequest) => {
+      if (transformedRequest instanceof Response) {
+        if (metadata) {
+          metadata.url = transformedRequest.url;
+        }
+        return handleResponse(transformedRequest);
+      }
       if (!(transformedRequest instanceof Request)) {
         transformedRequest = new Request(transformedRequest);
       }
       if (!transformedRequest.headers.get('Accept')) {
         transformedRequest.headers.set('Accept', 'application/json');
       }
       if (metadata) {
-        metadata.request = transformedRequest;
+        metadata.url = transformedRequest.url;
       }
-      return fetch(transformedRequest)
-        .then(function (response) {
-          delete pendingRequests[url];
-          return response.ok
-            ? response.json()
-            : Promise.reject(new Error('Error fetching source ' + url));
-        })
-        .catch(function (error) {
-          delete pendingRequests[url];
-          return Promise.reject(new Error('Error fetching source ' + url));
-        });
-    },
-  );
+      return fetch(transformedRequest).then(handleResponse).catch(handleError);
+    })
+    .catch(handleError);
   pendingRequests[url] = [transformedRequest, pendingRequest];
   return pendingRequest;
 }
@@ -191,38 +197,51 @@ export function getTileJson(glSource, styleUrl, options = {}) {
           : src;
         if (tile instanceof VectorTile) {
           tile.setLoader((extent, resolution, projection) => {
-            toPromise(() => transformedRequest).then((transformedRequest) => {
-              fetch(transformedRequest)
-                .then((response) => response.arrayBuffer())
-                .then((data) => {
-                  const format = tile.getFormat();
-                  const features = format.readFeatures(data, {
-                    extent: extent,
-                    featureProjection: projection,
-                  });
-                  // @ts-ignore
-                  tile.setFeatures(features);
-                })
-                .catch((e) => tile.setState(TileState.ERROR));
-            });
+            const handleResponse = function (response) {
+              response.arrayBuffer().then((data) => {
+                const format = tile.getFormat();
+                const features = format.readFeatures(data, {
+                  extent: extent,
+                  featureProjection: projection,
+                });
+                // @ts-ignore
+                tile.setFeatures(features);
+              });
+            };
+            toPromise(() => transformedRequest)
+              .then((transformedRequest) => {
+                if (transformedRequest instanceof Response) {
+                  return handleResponse(transformedRequest);
+                }
+                fetch(transformedRequest)
+                  .then(handleResponse)
+                  .catch((e) => tile.setState(TileState.ERROR));
+              })
+              .catch((e) => tile.setState(TileState.ERROR));
           });
         } else {
           const img = tile.getImage();
-          toPromise(() => transformedRequest).then((transformedRequest) => {
-            if (transformedRequest instanceof Request) {
-              fetch(transformedRequest)
-                .then((response) => response.blob())
-                .then((blob) => {
+          toPromise(() => transformedRequest)
+            .then((transformedRequest) => {
+              if (typeof transformedRequest === 'string') {
+                img.src = transformedRequest;
+                return;
+              }
+              const handleResponse = (response) =>
+                response.blob().then((blob) => {
                   const url = URL.createObjectURL(blob);
                   img.addEventListener('load', () => URL.revokeObjectURL(url));
                   img.addEventListener('error', () => URL.revokeObjectURL(url));
                   img.src = url;
-                })
+                });
+              if (transformedRequest instanceof Response) {
+                return handleResponse(transformedRequest);
+              }
+              fetch(transformedRequest)
+                .then(handleResponse)
                 .catch((e) => tile.setState(TileState.ERROR));
-            } else {
-              img.src = transformedRequest;
-            }
-          });
+            })
+            .catch((e) => tile.setState(TileState.ERROR));
         }
       };
     }
@@ -258,7 +277,7 @@ export function getTileJson(glSource, styleUrl, options = {}) {
               tileUrl,
               options.accessToken,
               options.accessTokenParam || 'access_token',
-              metadata.request.url,
+              metadata.url,
             )[0];
           });
           return Promise.resolve({tileJson, tileLoadFunction});

src/util.js

@@ -64,7 +64,7 @@ describe('util', function () {
         ),
       ])
         .then(() => {
-          should('request' in metadataPending).true();
+          should('url' in metadataPending).true();
           should(metadataPending.request).equal(metadataNotPending.request);
           done();
         })