Call fetch hook when retrieving external import maps. Resolves #2374. (…

…#2376)

* Call fetch hook when retrieving external import maps. Resolves #2374.

* Semicolon

* Fix build

.travis.yml

@@ -2,7 +2,8 @@ git:
   depth: 1
 language: node_js
 node_js:
-  - node
+  # ncc doesn't work with node 17 yet
+  - 16
 env:
   global:
     - MOZ_HEADLESS=1

docs/hooks.md

@@ -91,7 +91,7 @@ System.shouldFetch = function () { return true; };
 
 will enforce loading all JS files through `fetch`, allowing custom fetch hook implementation behaviours.
 
-#### fetch(url) -> Promise<Response>
+#### fetch(url, options) -> Promise<Response>
 
 The default fetch implementation used in SystemJS is simply `System.fetch = window.fetch`, which can be further hooked to enable
 arbitrary transformation.

src/extras/module-types.js

@@ -20,6 +20,9 @@ import { resolveUrl } from '../common.js';
   systemJSPrototype.fetch = function (url, options) {
     return fetch(url, options)
     .then(function (res) {
+      if (options.passThrough)
+        return res;
+
       if (!res.ok)
         return res;
       var contentType = res.headers.get('content-type');

src/features/import-maps.js

@@ -46,7 +46,8 @@ function processScripts () {
     }
     else if (script.type === 'systemjs-importmap') {
       script.sp = true;
-      var fetchPromise = script.src ? fetch(script.src, { integrity: script.integrity }).then(function (res) {
+      // The passThrough property is for letting the module types fetch implementation know that this is not a SystemJS module.
+      var fetchPromise = script.src ? (System.fetch || fetch)(script.src, { integrity: script.integrity, passThrough: true }).then(function (res) {
         if (!res.ok)
           throw Error(process.env.SYSTEM_PRODUCTION ? res.status : 'Invalid status code: ' + res.status);
         return res.text();

test/browser/core.js

@@ -318,6 +318,33 @@ suite('SystemJS Standard Tests', function() {
     );
   });
 
+  test('Calls the fetch hook when fetching import maps', function () {
+    const importMapSrc = 'https://example.com/importmap-test.js';
+    const scriptElement = document.createElement('script');
+    scriptElement.type = 'systemjs-importmap';
+    scriptElement.src = importMapSrc;
+    document.head.appendChild(scriptElement);
+
+    const originalFetch = System.constructor.prototype.fetch;
+
+    let fetchHookCalled = false;
+
+    System.constructor.prototype.fetch = function(url) {
+      if (url === importMapSrc) {
+        fetchHookCalled = true;
+      }
+
+      return originalFetch.apply(this, arguments);
+    }
+
+    // Reprocess import maps
+    System.prepareImport(true);
+
+    System.constructor.prototype.fetch = originalFetch;
+
+    assert.ok(fetchHookCalled);
+  });
+
   var isIE11 = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Trident') !== -1;
 
   function isCSSStyleSheet(obj) {