Help/Guidance Wanted: Script Tag guaranteed insertion/load order

Highlighted

Hey folks,

 

TL;DR; Is there anyway to load 2 script tags from the same app, in a specific order?

 

I'm dabbling with Script Tags for the first time, and am hoping to get some guidance from people more proficient/experienced in JS and Script Tags.

 

I'm developing a "widget" (using Web Components for style encapsulation) that get's loaded into the online stores front-end, using Script Tags. I only want to use Script Tags and not make changes to the merchants theme files. However, with Script Tags we can only execute on the "onload" event, and so performance should be heavily optimized.

 

Shopify also provide a nice Theme Browser Support table, which does include IE11, and so my widget should have the same browser support.

 

Now, the problem. In some browsers the widget will require polyfills, which must to be loaded before my own code runs. I could add a script tag from within my own code to load the polyfill, like so:

 

(function () {
  'use strict'

  function lazyLoadWCPolyfills () {
    var script = document.createElement('script')
    script.async = true
    script.src='https://unpkg.com/@webcomponents/webcomponentsjs@2.4.1/webcomponents-loader.js'
    document.head.appendChild(script)
  }
  
  document.addEventListener('WebComponentsReady', function (e) {
    ...do my thing
  })

  lazyLoadWCPolyfills()
})()

 

This works fine, however it does slow things down as we only request and load the polyfill script once my main script is executed on the "onload" event. This doesn't seem like an efficient way to do it (due to extra network requests), but it ensures the event listener is setup before the polyfills are loaded.

 

Could another way to do it be:

 

Add 2 Script Tag resources to the storefront, one for the Polyfill and one for my main script. That way they are both downloaded and ready to run when the "onload" event finally comes.

 

I'm just not sure about load order, and being certain that my main script doesn't miss the "WebComponentsReady" event that the polyfill emits once it's setup, if load order is not guaranteed. There doesn't seem to be a way to add Script Tags in a specific load order via the API either.

 

I understand that Script Tags are injected with the defer attribute, and so insertion order would determine execution order, but we don't know what that insertion order is.

 

Maybe I just don't understand what the actual browser or Script Tag sequence is, and it's a non-issue. Any help would be much appreciated.

 

Just for info: The polyfill script does have documentation here: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs (I'm just finding it hard to follow for the case of needing IE11 support, in es5)

 

Many thanks,

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
1 Like
Highlighted
Shopify Staff
Shopify Staff
481 62 72

Hey @Bjorn_Forsberg_,

 

Interesting problem. There are a few approaches, each with their own trade offs (additional network requests or loading polyfills for browsers that don't need them). What's your widget doing / which polyfills are you anticipating you'll need?

0 Likes
Highlighted
Excursionist
22 3 4

Relying on the hoisting characteristic of JavaScript, i made a test, loaded two script tags, one with:

 

 

var coragem = 1;

 

 

The second one:

 

 

setInterval(function(){ console.log(coragem) }, 500);

 

 

i exchange the order of script, everything works fine ( since you do not encapsulate the variable  ), you can set a variable ( using var ) where you're loading the stuff while the other script keep checking the variable for a "go" while waiting for the polyfill load.

 

i'm not sure if i was clear, reply if you have any questions or to tell that my idea will not work xD

1 Like
Highlighted

Thanks for the reply :) It's for WebComponents support, for a language switcher. I'm looking at the official polyfill library (https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs) and would use the webcomponents-loader.js version, which does feature detection before loading individual polyfills.

 

I have found a working solution, which involves merging the webcomponents-loader.js code into my own script. That way I only load a single script, and do the feature detection. In most cases (non IE11) it will then execute the main script right away, and only add additional requests on IE11.

 

It's working well, the only thing I don't like is now I have rolled external library code into my own (which is different for each store).. but it shouldn't need changing that often so I can live with it.

 

If you have any other ideas, they would be much appreciated.

 

Thanks,

Bjorn

 

 

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes

Thanks for the idea, that does make sense :) One of the scripts is a polyfill library, so I don't want to keep a forked version of it to set a variable or function. So I'm trying to do it based on the event the polyfill emits once done. Which is where the order of scripts comes into play. I'll keep testing, appreciate the help!

 

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
1 Like