dont load nomodule if browser understands preload

README.md

@@ -82,7 +82,7 @@ those resources will only be fetched if browser understands es6
 those resources will only be fetched if browser cant understand es6
 
 ```html
-<link rel="preload" nomodule as="script" href="app.legacy.js" />
+<link rel="nomodule" as="script" href="app.legacy.js" />
 ```
 
 

example/index.html

@@ -28,6 +28,6 @@ <h1>webfont</h1>
 
         <!-- module/nomodule -->
         <link rel="preload" critical as="script" module href="module.js" />
-        <link rel="preload" critical as="script" nomodule href="nomodule.js" />
+        <link rel="nomodule" critical as="script" href="nomodule.js" />
     </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalkaoz/preload-polyfill",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "",
   "main": "dist/preload-polyfill.js",
   "scripts": {

src/dom.js

@@ -64,10 +64,11 @@ export const skipNonMatchingModules = element => {
   if (
     (element.getAttribute("as") === "script" ||
       element.getAttribute("as") === "worker") &&
-    (element.hasAttribute("nomodule") || element.hasAttribute("module"))
+    (element.getAttribute("rel") === "nomodule" ||
+      element.hasAttribute("module"))
   ) {
     //check for type="module" / nomodule (load es6 or es5) depending on browser capabilties
-    const nm = element.hasAttribute("nomodule");
+    const nm = element.getAttribute("rel") === "nomodule";
     const m = element.hasAttribute("module");
 
     if ((m && !ES6) || (nm && ES6)) {

src/invoke.js

@@ -29,7 +29,7 @@ export const invokePreloads = () => {
   let interval;
 
   const preloads = getPreloads(
-    "link[rel='preload'][as='script'],link[rel='preload'][as='worker']"
+    "link[rel='nomodule'],link[rel='preload'][as='script'],link[rel='preload'][as='worker']"
   );
 
   let criticals = preloads.filter(

src/loaders.js

@@ -99,6 +99,10 @@ const loadScript = element => {
     return;
   }
 
+  if (element.getAttribute("rel") === "nomodule") {
+    element.setAttribute("rel", "preload");
+  }
+
   return loadWithXhr(element);
 };
 

src/observe.js

@@ -82,9 +82,9 @@ export const observeMutations = (
       subtree: true
     });
   } else {
-    const searchIntervall = setInterval(function() {
+    const searchInterval = setInterval(() => {
       if (document.readyState == "complete") {
-        clearInterval(searchIntervall);
+        clearInterval(searchInterval);
         scanPreloads(selector, eventOnly);
       }
     }, 20);

src/polyfill.js

@@ -5,18 +5,14 @@ import { invokePreloads } from "./invoke";
  * entrypoint, also binds DOMContentLoaded to the invocation of preloaded scripts
  */
 const preloadPolyfill = () => {
-  // check if preload should be loaded
-  let polyfilled = false;
-
   try {
     if (!document.createElement("link").relList.supports("preload")) {
       throw Error;
     }
     observeMutations('link[rel="preload"]', true);
   } catch (error) {
     console.warn("invoking preload-polyfill");
-    polyfilled = true;
-    polyfill('link[rel="preload"]');
+    polyfill('link[rel="preload"],link[rel="nomodule"]');
   }
 
   document.addEventListener("DOMContentLoaded", invokePreloads);