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

thet · thet · commit 8bc9b66e9628 · 2022-12-22T13:24:22.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;

Also, the "js" class is set on the HTML root tag when a "no-js" class
was present regardless of the "__patternslib_disable_modernizr" setting.

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/core/feature-detection.js b/src/core/feature-detection.js
@@ -0,0 +1,32 @@
+(function () {
+    // Add JavaScript feature as class to the <html> element, just like
+    // Modernizr does. This is needed for accessibility reasons, to support
+    // browsers and situations where JavaScript is not available or disabled.
+    // The HTML root tag needs to have the `no-js` class set which is then
+    // replaced by `js`.
+    const html = document.getElementsByTagName("html")[0];
+    if (html.classList.contains("no-js")) {
+        html.classList.remove("no-js");
+        html.classList.add("js");
+    }
+
+    // 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;
+    }
+
+    // Get the current script tag's URL.
+    // See: https://stackoverflow.com/a/984656/1337474
+    const scripts = document.getElementsByTagName("script");
+    const script = scripts[scripts.length - 1];
+    let script_url = script.src;
+    // Get the base URL of the current script tag's URL.
+    script_url = script_url.substring(0, script_url.lastIndexOf("/")) + "/";
+
+    // Inject a new one with the modernizr bundle.
+    const script_tag = document.createElement("script");
+    script_tag.src = script_url + "modernizr.min.js";
+    document.getElementsByTagName("head")[0].appendChild(script_tag);
+})();
diff --git a/src/core/feature-detection.md b/src/core/feature-detection.md
@@ -0,0 +1,71 @@
+# Feature detection
+
+This module adds the `js` class to the HTML root node and loads Modernizr for more feature detection.
+
+---
+** Note **
+
+If you create own bundles based on Patternslib, you would need to import the `src/core/feature-detection` module for these features to be available.
+
+---
+
+
+## Adding the "js" class for accessibility styles
+
+There are situations where web browsers do not have JavaScript available or when it is disabled.
+In situations where no JavaScript is available you might want to show certain elements where in JavaScript situations you might want to hide them until a JavaScript functionality is showing them.
+
+In the Media Query Level 5 specification there is a CSS media feature to detect JavaScript via a [`scripting` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting).
+But at time of this writing this is [not available in any of the major browsers](https://caniuse.com/mdn-css_at-rules_media_scripting).
+
+Therefore Patternslib adds a `js` class to the HTML root node, if the HTML root node already has a `no-js` class.
+The `js` class is set very early before any browser layout is done if you include the Patternslib script in the HEAD of your site.
+
+Markup:
+
+```
+    <html class="no-js">
+        <head>
+            <script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
+        </head>
+        <body>
+        </body>
+    </html>
+```
+
+When the JavaScript is loaded, the `no-js` class is removed and the `js` class is set:
+
+```
+    <html class="js">
+        <head>
+            <script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
+        </head>
+        <body>
+        </body>
+    </html>
+```
+
+
+## Loading Modernizr
+
+Modernizr is loaded for more feature detection.
+
+To disable Modernizr you can set `window.__patternslib_disable_modernizr = true;` just before you load the Patternslib bundle:
+
+```
+    <html class="no-js">
+        <head>
+            <script>window.__patternslib_disable_modernizr = true;</script>
+            <script src="https://cdn.jsdelivr.net/npm/@patternslib/patternslib@9.8.0-beta.3/dist/bundle.min.js"></script>
+        </head>
+        <body>
+        </body>
+    </html>
+```
+
+---
+** Note **
+
+The Modernizr feature detection is being phased out and might be removed in a future version of Patternslib.
+
+---
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,9 @@
+// Load modernizr and the `html.js` feature class.
+import "./core/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>
