Defer breaks autoload (when loading page without having resources cached)

[BrainStone]

Information:

• Prism version: 1.17.1
• Plugins: autoloader
• Environment: Browser

Description
When the page is loaded without the JS resources being cached and the scripts are marked with defer then the syntax highlighting is not applied.

Example
Without defer (workking): https://jsfiddle.net/f5vj903e/
With defer (not working): https://jsfiddle.net/f5vj903e/1/

[RunDevelopment]

Cannot reproduce.
What browser are you using?

[BrainStone]

Very weird. I now also can't reproduce in a minimal example.
Would it help if I linked you a live page where the issue appears?

Also I am using FireFox 70.0 (64-Bit)

[BrainStone]

Well, in any case this is the page: https://dev.aura-dev.team/documentation/test
Reloading without the cache breaks the page in funny new ways every time.

[RunDevelopment]

Can kinda reproduce.
I don't see any "funny new ways every time", I just see that the Autoloader isn't configured correctly. Normally, the Autoloader will know from where to load languages by using its own file path. I'll fix that in a minute.

However, could you please describe what breaks? In both FF 70 and Chrome 77, I only see that the PHP code isn't highlighted because prism-markup-templating.min.js failed to load. Everything else seems to work fine.

[RunDevelopment]

Can we even fix this?
Right now, we use these lines to get the script element which contains the Autoloader. Because of defer, the Autoloader script might get executed after some additional scripts have been loaded meaning that it isn't the last script element in the collection anymore.

We could use document.currentScript but that isn't supported by IE11 and I don't want Autoloader behave differently depending on the browser.
Any ideas @mAAdhaTTah @Golmote ?

[BrainStone]

Sometimes just realoading will also create funky results like this:

(I scrolled them down but you can clearly see an additional line at the end but the box being resized to one less line (as it should be))

Occationally I also get that the toolbar extensions don't load properly (like just one or none at all). I couldn't replicate it at work. Probably due to the internet being a lot faster here. I'll try to capture some more funkyness at home.

[RunDevelopment]

This is probably because all the different Prism files have to be loaded in a specific order and the defer creates a race condition. Unfortunately, you can't specify defer-dependencies, so you have to either bundle them into one file or load them synchronously.

[BrainStone]

defer gurantuees that the scripts are executed in order.
See https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-defer for example

[RunDevelopment]

defer guarantees that the scripts are executed in order.

I didn't know that. That's for pointing that out.

I can reproduce the issue you describe now albeit each with a low probability of occurrence. Everything seems to be working fine in Chrome and Edge, so maybe it's a FireFox issue?
Since the issues occur non-deterministically, I'm pretty sure that we have ourselves a race condition but I don't know where.

I'll look more closely at this soon. If you find any hints or patterns, please share.

[BrainStone]

I'll be doing some additional testing myself.
If you need a page to test, let me know and I will make a more permanent page for this.

[RunDevelopment]

That would be great. Thanks!

[mAAdhaTTah]

I am seeing this in the console:

prism-autoloader.min.js:1 GET https://unpkg.com/mermaid@8.4.0/dist/components/prism-markup-templating.min.js net::ERR_ABORTED 404

What is mermaid and why are you serving Prism from it?

[mAAdhaTTah]

Ohhhh, I see, the autoloader is using the last script to get the path, and the path is wrong, because defer.