Importing external libraries

A lot of really cool and/or powerful JavaScript libraries and frameworks exist out there that you might want to leverage in a character sheet. Instead of trying to copy-paste their entire codebase into the JavaScript field of a character sheet, you can import them by adding a script element to the DOM with its source pointing to a content delivery network. Just keep in mind that your plugin might not be approved if it uses obscure libraries or loads them from dubious sources!

The code below is copied almost verbatim from Aaron Smith’s blog, so kudos to him. The function he came up with will let you chain multiple script imports very cleanly and run your code only if and when they have all been loaded successfully. This last part is important because while your JS runs as soon as the page is loaded, external imports like this can take a couple extra seconds to load and get added to the DOM. If you go and call functions that haven’t been defined yet, you won’t get far without a fatal error!

/**
 * Loads a JavaScript file and returns a Promise for when it is loaded
 * https://aaronsmith.online/articles/easily-load-an-external-script-using-javascript/
 */
const loadScript = src => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.onload = resolve
    script.onerror = reject
    script.src = src
    document.head.append(script)
  })
}
loadScript('script1.js')
  .then(() => loadScript('script2.js'))
  .then(() => loadScript('script3.min.js'))
  .then(() => {
  
  // Execute library-dependent code here
  // Consider using function(s) to keep the code more legible

})
  .catch(() => console.error('Failed to load external libraries.'))

Simply replace the script’s URL on line 15, remove the others on lines 16-17 if you don’t need more than one, or replace their URLs as well as needed. Place your code after (within) the last then(), or call one or several functions defined elsewhere so your main logic isn’t in the middle of loadScript(), for clarity.