Automatically download ResizeObserver polyfill when necessary

docs/browser-support.md

@@ -16,8 +16,8 @@ version range, please [open an issue]:
 
 <figure markdown>
 
-| Browser                              | Version[^2] | Release date |         |        |      Usage |
-| ------------------------------------ | ----------: | -----------: | ------: | -----: | ---------: |
+| Browser                              | Version | Release date |         |        |      Usage |
+| ------------------------------------ | ------: | -----------: | ------: | -----: | ---------: |
 |                                      |         |              | desktop | mobile |    overall |
 | :fontawesome-brands-chrome: Chrome   |     49+ |      03/2016 | 25.65%  | 38.33% |     63.98% |
 | :fontawesome-brands-safari: Safari   |     10+ |      09/2016 |  4.63%  | 14.96% |     19.59% |
@@ -40,23 +40,6 @@ Browser support matrix sourced from [caniuse.com].[^1]
     cumulated market share of less than 1% were not considered, but might still
     be fully or partially supported.
 
-  [^2]:
-      In Material for MkDocs 9.2.0, polyfills for ancient browsers were removed,
-      so make sure to add them back if you need to support the full version
-      range as mentioned in the [browser support] matrix. Add the following
-      lines to `mkdocs.yml`:
-
-      ``` yaml
-      config:
-        extra:
-          polyfills:
-            - https://unpkg.com/resize-observer-polyfill
-            - https://unpkg.com/array-flat-polyfill
-      ```
-
-      You can also download the files and self-host them, or use the
-      [built-in privacy plugin] to do it automatically.
-
 Note that the usage data is based on global browser market share, so it could
 in fact be entirely different for your target demographic. It's a good idea to
 check the distribution of browser types and versions among your users.

material/.overrides/main.html

@@ -23,5 +23,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'assets/javascripts/custom.99dda5c2.min.js' | url }}"></script>
+  <script src="{{ 'assets/javascripts/custom.a2f5d53d.min.js' | url }}"></script>
 {% endblock %}

material/base.html

@@ -250,7 +250,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.f11ae8b1.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.c1c13a0d.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         {% if path.endswith(".mjs") %}
           <script type="module" src="{{ path | url }}"></script>

src/assets/javascripts/browser/element/size/_/index.ts

@@ -36,6 +36,8 @@ import {
   tap
 } from "rxjs"
 
+import { watchScript } from "../../../script"
+
 /* ----------------------------------------------------------------------------
  * Types
  * ------------------------------------------------------------------------- */
@@ -65,15 +67,23 @@ const entry$ = new Subject<ResizeObserverEntry>()
  * It's quite important to centralize observation in a single `ResizeObserver`,
  * as the performance difference can be quite dramatic, as the link shows.
  *
+ * If the browser doesn't have a `ResizeObserver` implementation available, a
+ * polyfill is automatically downloaded from unpkg.com. This is also compatible
+ * with the built-in privacy plugin, which will download the polyfill and put
+ * it alongside the built site for self-hosting.
+ *
  * @see https://bit.ly/3iIYfEm - Google Groups on performance
  */
-const observer$ = defer(() => of(
-  new ResizeObserver(entries => {
-    for (const entry of entries)
-      entry$.next(entry)
-  })
+const observer$ = defer(() => (
+  typeof ResizeObserver === "undefined"
+    ? watchScript("https://unpkg.com/resize-observer-polyfill")
+    : of(undefined)
   ))
   .pipe(
+    map(() => new ResizeObserver(entries => {
+      for (const entry of entries)
+        entry$.next(entry)
+    })),
     switchMap(observer => merge(NEVER, of(observer))
       .pipe(
         finalize(() => observer.disconnect())