Looking for a fetch js/css solution

Question

I'm looking for a solution like fetch-inject or How do I include a JavaScript file in another JavaScript file?. I really like fetch-injec, because I can inject multiple files, even css. The only problem with it, that it doesn't support IE10 which is crucial for me unfortunately. Any ideas, suggested solutions? Oh, and no jquery too.

In fetch-inject works like this:

fetchInject([
    'assets/vendor/foo.js',
    'assets/vendor/bar.js',
    'assets/vendor/foo.css'
]).then(() => {
    // after load, do something        
});

The main code of fetch-inject:

const fetchInject = function (inputs, promise) {
if (!arguments.length) return Promise.reject(new ReferenceError("Failed to execute 'fetchInject': 1 argument required but only 0 present."))
if (arguments[0] && arguments[0].constructor !== Array) return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 1 must be of type 'Array'."))
if (arguments[1] && arguments[1].constructor !== Promise) return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 2 must be of type 'Promise'."))

const resources = [];
const deferreds = promise ? [].concat(promise) : [];
const thenables = [];

inputs.forEach(input => deferreds.push(
  window.fetch(input).then(res => {
    return [res.clone().text(), res.blob()]
  }).then(promises => {
    return Promise.all(promises).then(resolved => {
      resources.push({ text: resolved[0], blob: resolved[1] });
    })
  })
));

return Promise.all(deferreds).then(() => {
  resources.forEach(resource => {
    thenables.push({ then: resolve => {
      resource.blob.type.includes('text/css')
        ? head(window, document, 'style', resource, resolve)
        : head(window, document, 'script', resource, resolve);
    } });
  });
  return Promise.all(thenables)
})

};

Please explain why you need to support IE10. Every computer that can run IE10 can run IE11. And in fact, every computer that can run IE11 can also run the new Microsoft Edge browser based on Chromium. There's very few legitimate scenarios where IE10 is a target. — Dai, Jul 21 '20 at 09:39
@evolutionxbox IE10 doesn't, but neither does IE11 either - but you can polyfill it with a wrapper around XHR (but you also need a separate polyfill for `Promise`), such as https://github.com/github/fetch — Dai, Jul 21 '20 at 09:40
Why not use a build-time JS system like webpack or pre-rendering the ` — Dai, Jul 21 '20 at 09:41
@Dai thanks . I wasn’t questioning that. The OP said “fetch doesn’t support IE10”. — evolutionxbox, Jul 21 '20 at 09:42
I do polyfill Promise, but IE still complains, like `Object doesn't support property or method 'clone'` — levipadre, Jul 21 '20 at 09:44
Basically I have a ton of third party components and I only want to use if it's necessary. So far this fetch-inject solution seemed good, apart from the IE error. — levipadre, Jul 21 '20 at 10:02
@levipadre `clone` is not a member of `Promise`'s interface. — Dai, Jul 21 '20 at 10:15

score 2 · Accepted Answer · answered Jul 21 '20 at 12:57

It seems I needed to add a different polyfill, it called whatwg-fetch. It contains Response.clone() which caused the problem in IE. If anybody wants to use fetch-inject in IE10+, use this and string-includes-polyfill too. These will cover every cases.

score 1 · Answer 2 · answered Jul 21 '20 at 10:57

This is one way to do it. The drawback is that you don't know when the file is loaded, the good part is that it works everywhere and it doesn't interfere with other code:

function addScript(script) {
    var jsElement = document.createElement("script");
    jsElement.type = "application/javascript";
    jsElement.src = script;
    document.body.appendChild(jsElement);
}

function addScript("YOUR-SCRIPT-URL.js");

Looking for a fetch js/css solution

2 Answers2