fix(Build): Load modernizr early and non-asynchronously.

thet · thet · commit 263a337a7d33 · 2022-12-21T20:11:33.000+01:00
Include the modernizr bundle by injecting a script tag. This ensures
modernizr is loaded synchronously and executing early and sets it's
feature detection classes before the layout is done by the browser.

This reverts the breaking change from the previous Patternslib 9.8.0-beta.2
release. The separate modernizr.min.js build file is still kept, but
modernizr is included by the main Patternslib bundle. There is no need
to add another script tag to include modernizr.

You can disable loading of modernizr by setting the following before the
Patternslib bundle.min.js is included:

&lt;script&gt;window.__patternslib_disable_modernizr = true;&lt;/script&gt;

Since Patternslib 9.0.0-alpha.0 where we introduced webpack module
federation for our bundles, Modernizr is loaded asynchronously and
applying it's CSS classes a tick too late. For example, the change from
the "no-js" to the "js" class was done while the tiles have already been
drawn and visible on the screen, resulting in screen flickering. There
are a number of projects which depend on Modernizr being applied early.
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
         <title>Patterns demo pages</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="/style/common.css" />
-        <script src="/modernizr.min.js"></script>
         <script src="/bundle.min.js"></script>
     </head>
     <body class="component-index">
diff --git a/src/feature-detection.js b/src/feature-detection.js
@@ -0,0 +1,30 @@
+(function () {
+    // Do not load modernizr if disabled. It's enabled by default.
+    // You might want to disable it for your project by setting:
+    // window.__patternslib_disable_modernizr = true;
+    if (window.__patternslib_disable_modernizr) {
+        return;
+    }
+
+    // Add JavaScript feature as class to the <html> element, just like Modernizr.
+    // This is needed for accessibility reasons, to support browsers and situations
+    // where JavaScript is not available or disabled.
+    var html = document.getElementsByTagName("html")[0];
+    if (html.classList.contains("no-js")) {
+        html.classList.remove("no-js");
+        html.classList.add("js");
+    }
+
+    // Get this one's script src.
+    // See: https://stackoverflow.com/a/984656/1337474
+    var scripts = document.getElementsByTagName("script");
+    var script = scripts[scripts.length - 1];
+    var script_url = script.src;
+    // Get the base URL of this script.
+    script_url = script_url.substring(0, script_url.lastIndexOf("/")) + "/";
+
+    // Inject a new one with the modernizr bundle.
+    var script_tag = document.createElement("script");
+    script_tag.src = script_url + "modernizr.min.js";
+    document.getElementsByTagName("head")[0].appendChild(script_tag);
+})();
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,9 @@
+// Load modernizr and the `html.js` feature class.
+import "./feature-detection";
+
 // Webpack entry point for module federation.
 import "@patternslib/dev/webpack/module_federation";
+
 // The next import needs to be kept with parentheses, otherwise we get this error:
 // "Shared module is not available for eager consumption."
 import("./patterns");
diff --git a/src/pat/clone-code/index.html b/src/pat/clone-code/index.html
@@ -4,6 +4,7 @@
         <title>pat-clone demo page</title>
         <meta charset="utf-8">
         <link rel="stylesheet" href="/style/common.css" />
+        <script>window.__patternslib_disable_modernizr = true;</script>
         <script src="/bundle.min.js"></script>
     </head>
     <body>
