Dedupe script paths and/or how to inspect in-flight requests?

I’m using loadjs to async load the Select2 jQuery plugin (https://select2.github.io/) that I use for 2 different use cases: 1) search autocomplete 2) location suggestions. The location suggestions depends on another data adapter, but both cases need the same plugin files other than that:

loadjs([
  '/js/select2.js',
   '/css/select2-theme.css'
], 'select2', {
   success: initKeywordAutocomplete
});

loadjs([
  '/js/select2.js',
  '/js/select2-places.js',
  '/css/select2-theme.css'
], 'select2-places', {
  async: false,  // load in series to ensure select2 is available before the places data adapter
  success: initLocationAutocomplete
});

If I use the above code on a page, select2.js, select2-theme.css will both be added to the DOM twice, and select2-places.js will only be added once.

First, is it reasonable to add an enhancement to loadjs that dedupes the scripts added to the DOM? Currently only bundles are deduped by their id’s, but I’m thinking of saving the script paths too so they aren’t appended to the DOM more than once.

Second, I can see why it would be a bad idea to expose the bundle dependency tracker objects, and instead have the .reset() function to let users clear them out. But, is there a way to inspect the requests loadjs has initiated? Or should I just query the DOM for a script tag for the src I want to avoid downloading twice?

Thanks in advance!

[amorey]

Thanks for the feedback! It would return true after the bundle is registered. The .ready() method can be used to execute a callback after the dependencies have been loaded.

[amorey]

Hi @akrawchyk - sorry for the late response. I have a working version with a new isDefined() method:

<script>
  if (!loadjs.isDefined('my-bundle')) {
    loadjs(['1.js', '2.js'], 'my-bundle');
  }
</script>

Let me know if this would solve your problem and if you have any suggestions for the method name and syntax.