[JS] Load scripts dynamically

load-script.js

// Function to load a JS file
async function loadScript(url) {
    return await new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.addEventListener('load', () => resolve());
        script.addEventListener('error', () => reject());
        document.body.appendChild(script);
    });
}

// Example: Loading 2 libraries
const scripts = [
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js'
];

await Promise.all(scripts.map(url => loadScript(url)));

// 2023 UPDATE:
// If the library supports ESM, you can import it like this:
const {default: dayjs} = await import('https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js/+esm')

Here's an update where it supports attrs like async, deferetc...

async function loadScript(url, attributes = {}) {
  return await new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;

    Object.keys(attributes).forEach(key => {
      script[key] = attributes[key];
    });

    script.addEventListener('load', () => resolve());
    script.addEventListener('error', () => reject());

    document.body.appendChild(script);
  });
}