Dedupe script paths and/or how to inspect in-flight requests? about loadjs HOT 11 CLOSED

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.

from loadjs.

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.

from loadjs.

P.S. - what I'd really like to be able to do is use bundle id's in the paths array, like the following:

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

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

from loadjs.

Hi @akrawchyk!

You can use the .ready() method to use bundle ids as dependencies. For example, you can load select2.js and select2-places.js sequentially like this:

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

loadjs.ready(['select2', 'select2-places'], {
  success: function() {
    loadjs('/js/select2-places.js', {
      success: initLocationAutocomplete
    });
  }
});

If you want to load select2.js and select2-places.js in parallel and execute them in series this should work:

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

loadjs('/js/select2-places.js', 'select2-places', {async: false});

loadjs.ready(['select2', 'select2-places'], {
  success: initLocationAutocomplete
});

However, given my understanding of the problem I think I would just load all the files with async: false and run both init methods after load:

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

Hope that helps!

from loadjs.

@amorey thanks for the speedy response and the helpful examples!

I've been tinkering with this and was overlooking the ready function, I appreciate you pointing it out. This works well for a single script, and I have updated my code.

I might be spinning my wheels here, but what about detecting bundle loads across modules. For example, if 2 distinct modules that may or may not be loaded on the same page depend on select2:

<script>
    loadjs([
        'js/select2.js',
        'css/select2-theme.css'
    ], 'select2');
</script>
<script>
    try {
        loadjs([
            'js/select2.js',
            'css/select2-theme.css'
        ], 'select2');
    } catch (e) {
        // another module registered loading select2
    }
</script>

Is it possible to detect select2 being previously loaded without using try/catch or a global variable I set myself? If I were to assign a different bundle id to each loadjs call, the scripts would be added to the DOM twice...

edit: I know I can do a call to ready to determine when a bundle loads, but in the above example that would assume another script is responsible for initiating the select2 bundle load. This doesn't work in this case since the modules can be used independently and both either need to ensure select2 is loaded, or load select2.

from loadjs.

Currently it's not possible to inspect LoadJS's internal bundle cache without using try/except as in your example. Would exposing the bundle ids via a dictionary work for you?

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

from loadjs.

@amorey that would be all I would need, but that does expose the id's to be modified externally. Changing or removing them could lead to unexpected behavior. Your call on what's best for loadjs! 😄

from loadjs.

@akrawchyk I just wanted to check in. Do you have any thoughts on the proposed isDefined() method?

from loadjs.

@amorey this looks great! I think it's a good idea to avoid exposing the bundle registry as an object, so having an isDefined API method makes sense to me 👍

from loadjs.

Literally just thought of this as soon as I pressed "Comment"...

When are you thinking the call to isDefined would return true for a bundle? After it's initially registered, or after it's been loaded? I'd think returning true after a bundle is registered is a must, otherwise the same bundle could be registered twice while we wait for the bundle to load.

from loadjs.

Done! I added an isDefined() method to v3.4.0 and pushed the code to github/npm. Let me know if you run into any problems using the new method.

from loadjs.