Merge pull request #5684 from squidfunk/refactor/polyfills

Remove polyfills for ancient browsers from bundle

docs/browser-support.md

@@ -16,15 +16,15 @@ version range, please [open an issue]:
 
 <figure markdown>
 
-| 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% |
-| :fontawesome-brands-edge: Edge       |     79+ |      01/2020 |  3.95%  |    n/a |      3.95% |
-| :fontawesome-brands-firefox: Firefox |     53+ |      04/2017 |  3.40%  |   .30% |      3.70% |
-| :fontawesome-brands-opera: Opera     |     36+ |      03/2016 |  1.44%  |   .01% |      1.45% |
-|                                      |         |              |         |        | __92.67%__ |
+| Browser                              | Version[^2] | 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% |
+| :fontawesome-brands-edge: Edge       |         79+ |      01/2020 |  3.95%  |    n/a |      3.95% |
+| :fontawesome-brands-firefox: Firefox |         53+ |      04/2017 |  3.40%  |   .30% |      3.70% |
+| :fontawesome-brands-opera: Opera     |         36+ |      03/2016 |  1.44%  |   .01% |      1.45% |
+|                                      |             |              |         |        | __92.67%__ |
 
   <figcaption markdown>
 
@@ -40,6 +40,23 @@ 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.
@@ -47,6 +64,8 @@ check the distribution of browser types and versions among your users.
   [open an issue]: https://github.com/squidfunk/mkdocs-material/issues/new/choose
   [caniuse.com]: https://caniuse.com/
   [:is pseudo selector]: https://caniuse.com/css-matches-pseudo
+  [browser support]: #supported-browsers
+  [built-in privacy plugin]: setup/ensuring-data-privacy.md#built-in-privacy-plugin
 
 ## Other browsers
 

material/.overrides/main.html

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

material/base.html

@@ -51,7 +51,11 @@
       {% endif %}
       {% include "partials/icons.html" %}
     {% endblock %}
-    {% block libs %}{% endblock %}
+    {% block libs %}
+      {% for path in config.extra.polyfills %}
+        <script src="{{ path | url }}"></script>
+      {% endfor %}
+    {% endblock %}
     {% block fonts %}
       {% if config.theme.font != false %}
         {% set text = config.theme.font.text | d("Roboto", true) %}
@@ -244,7 +248,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.d7db711e.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f11ae8b1.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         {% if path.endswith(".mjs") %}
           <script type="module" src="{{ path | url }}"></script>

material/plugins/offline/plugin.py

@@ -40,6 +40,12 @@ class OfflinePlugin(BasePlugin[OfflineConfig]):
         # Ensure correct resolution of links
         config.use_directory_urls = False
 
+        # Append iframe-worker to polyfills/shims
+        config.extra.polyfills = config.extra.get("polyfills", [])
+        if not any("iframe-worker" in url for url in config.extra.polyfills):
+            worker = "https://unpkg.com/iframe-worker/shim"
+            config.extra.polyfills.append(worker)
+
     # Support offline search (run latest)
     @event_priority(-100)
     def on_post_build(self, *, config):

package.json

@@ -39,18 +39,13 @@
     "upgrade:install": "npm install"
   },
   "dependencies": {
-    "array-flat-polyfill": "^1.0.1",
     "clipboard": "^2.0.11",
     "escape-html": "^1.0.3",
     "focus-visible": "^5.2.0",
     "fuzzaldrin-plus": "^0.6.0",
-    "iframe-worker": "^1.0.3",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.12.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "rxjs": "^7.8.1",
-    "unfetch": "^5.0.0",
-    "url-polyfill": "^1.1.12"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",

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

@@ -20,7 +20,6 @@
  * IN THE SOFTWARE.
  */
 
-import ResizeObserver from "resize-observer-polyfill"
 import {
   NEVER,
   Observable,

src/assets/javascripts/bundle.ts

@@ -20,11 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import "array-flat-polyfill"
 import "focus-visible"
-import "iframe-worker/shim"
-import "unfetch/polyfill"
-import "url-polyfill"
 
 import {
   EMPTY,

src/base.html

@@ -115,7 +115,11 @@
     {% endblock %}
 
     <!-- JavaScript libraries -->
-    {% block libs %}{% endblock %}
+    {% block libs %}
+      {% for path in config.extra.polyfills %}
+        <script src="{{ path | url }}"></script>
+      {% endfor %}
+    {% endblock %}
 
     <!-- Webfonts -->
     {% block fonts %}

src/plugins/offline/plugin.py

@@ -40,6 +40,12 @@ class OfflinePlugin(BasePlugin[OfflineConfig]):
         # Ensure correct resolution of links
         config.use_directory_urls = False
 
+        # Append iframe-worker to polyfills/shims
+        config.extra.polyfills = config.extra.get("polyfills", [])
+        if not any("iframe-worker" in url for url in config.extra.polyfills):
+            worker = "https://unpkg.com/iframe-worker/shim"
+            config.extra.polyfills.append(worker)
+
     # Support offline search (run latest)
     @event_priority(-100)
     def on_post_build(self, *, config):