Using and requesting new external libraries

Developer
1

We have found a way to enable loading of external libraries. :grinning:

You can use this code to load further external libraries.

async function loadScripts(...urls) {
  for (const thisUrl of urls) {
    console.log(`Loading script "${thisUrl}"...`);

    const response = await fetch(thisUrl);
    const responseBody = await response.text();

    const scriptElm = document.createElement("script");
    const inlineCode = document.createTextNode(responseBody);
    scriptElm.appendChild(inlineCode);
    document.body.appendChild(scriptElm);

    console.log(`Script "${thisUrl}" successfully loaded`);
  }
}

Then load the scripts with:

loadScripts('https://cdn.plot.ly/plotly-2.9.0.min.js');

This example is for chart.js.

@parth.parmar @mellerbeck - per you question from the kick off yesterday

4 Likes
2

@EddyA – can you comment including an external CSS,

e.g.

image
image1060×135 8.52 KB

Some libraries have both a JS and CSS component to the library and ability to load the CSS would also be a great advantage.

3

You can run this through a minifier, too, and make something a little more compact to put on the top of all your widgets.

async function loadScripts(...e){for(const o of e){console.log(`Loading script "${o}"...`);const e=await fetch(o),t=await e.text(),c=document.createElement("script"),n=document.createTextNode(t);c.appendChild(n),document.body.appendChild(c),console.log(`Script "${o}" successfully loaded`)}}
4

@parth.parmar Did you see this thread?
I think you should be able to switch out the url in the first line for the toastify url.
Let us know how you get on.

1 Like
5

Thank you for this script. I was able to use this so that I can create a widget which uses React.

image
image2421×1156 139 KB

1 Like