HTML script tags are async by default

Hi, I’m using Flems for some code examples on a project’s documentation. Recently my examples broke, apparently because some script tags added in HTML don’t appear to be blocking anymore (the second one executes when the first one is still loading). For example:

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
<script>
  console.log(window.$); 
</script>

This logs a function in both a test webpage and on editors like jsfiddle or similar. However on Flems it logs undefined (I actually got the expected result once or twice, I assume it’s not 100% consistent since it looks like a race condition).

(I’m not saying that this is a reasonable way to use jquery, it’s just to provide a minimal case where the issue is reproduced)

I think this is caused by commit 7620dcb4d7c2784a4929d04053b4d0d205044a96 and in particular by this change:

@@ -339,7 +340,7 @@ function create(tag, options) {
   const el = document.createElement(tag)
 
   for (const key in options)
-    el[key] = options[key]
+    options[key] && (el[key] = options[key])
 
   return el
 }

This means the async attribute is not added to the generated script tag anymore when it’s false and, since (if I’m not mistaken) all script tags created via js are async by default, it causes script tags to load/execute out of order (which causes the above behaviour). I tried building my own version of Flems with this slight change (key === 'async' || options[key]) && (el[key] = options[key]) and it fixes the issue.

Can you take a look to validate if that’s an issue or not? If more info are needed feel free to ask. Thanks!

[porsager]

Yeah, if you upgrade to latest that should solve your issues 😊

[porsager]

Fix also pushed to flems.io 🙂