Add HtmlBasePlugin option to change posthtml-urls options

[lmestel]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @11ty/eleventy@2.0.1 for the project I'm working on.

I use a lazy image library, that converts data-src attributes on images to src attributes when the image scrolls into the viewport.
posthtml-urls doesn't handle data-src (or data-srcset) attributes, so it would be nice if I could add these additional attributes to the posthtml-urls filter option via plugin options:

// .eleventy.js

  eleventyConfig.addPlugin(EleventyHtmlBasePlugin, {
    urlsFilter: {
      img: { "data-src": true, "data-srcset": true },
      source: { "data-src": true, "data-srcset": true },
    },
  });

Here is the diff that solved my problem:

diff --git a/node_modules/@11ty/eleventy/src/Plugins/HtmlBasePlugin.js b/node_modules/@11ty/eleventy/src/Plugins/HtmlBasePlugin.js
index 49a5cb3..a1e1203 100644
--- a/node_modules/@11ty/eleventy/src/Plugins/HtmlBasePlugin.js
+++ b/node_modules/@11ty/eleventy/src/Plugins/HtmlBasePlugin.js
@@ -1,5 +1,6 @@
 const posthtml = require("posthtml");
 const urls = require("posthtml-urls");
+const { filter: defaultUrlsFilter } = require("posthtml-urls/lib/defaultOptions.js");
 const urlFilter = require("../Filters/Url.js");
 const PathPrefixer = require("../Util/PathPrefixer.js");
 const { DeepCopy } = require("../Util/Merge");
@@ -52,12 +53,13 @@ function transformUrl(url, base, opts = {}) {
   return urlFilter.call(this, url, base);
 }
 
-async function addToAllHtmlUrls(htmlContent, callback, processOptions = {}) {
+async function addToAllHtmlUrls(htmlContent, callback, opts, processOptions = {}) {
   let modifier = posthtml().use(
     urls({
       eachURL: function (url) {
         return callback(url);
       },
+      filter: opts.urlsFilter,
     })
   );
 
@@ -81,6 +83,7 @@ module.exports = function (eleventyConfig, defaultOptions = {}) {
         html: "transformWithHtmlBase",
         pathPrefix: "addPathPrefixToFullUrl",
       },
+      urlsFilter: Object.assign({}, defaultUrlsFilter),
     },
     defaultOptions
   );
@@ -127,7 +130,7 @@ module.exports = function (eleventyConfig, defaultOptions = {}) {
           pathPrefix: eleventyConfig.pathPrefix,
           pageUrl: pageUrlOverride || this.page?.url,
         });
-      });
+      }, opts);
     }
   );
 
@@ -148,7 +151,7 @@ module.exports = function (eleventyConfig, defaultOptions = {}) {
               pathPrefix: eleventyConfig.pathPrefix,
               pageUrl: this.url,
             });
-          });
+          }, opts);
         }
 
         return content;

This issue body was partially generated by patch-package.

[djedi]

+1

[zachleat]

Related: https://github.com/posthtml/posthtml-urls/blob/e0ea07b921b70f7406178bf8d848a06c45694c0d/lib/defaultOptions.js#L4

Is there a better way to do this besides merging from a file path in an external dep? require("posthtml-urls/lib/defaultOptions.js");

[lmestel]

It looks as if the postcss-url plugin merges the options itself. So there would be no reason to do this in the 11ty plugin.

https://github.com/posthtml/posthtml-urls/blob/master/lib/index.js#L22

I can't remember why I imported the properties in the 11ty plugin and merged them myself. I haven't tried that, but according to the code, it should work without it.

Edit:

ah wait.. Object.assign({}, DEFAULT_OPTIONS, options) will overwrite the filter property. It doesn't deep merge the options 😣

[zachleat]

Sorry for the accidental transfer. Conveniently we do own the posthtml-urls dependency now: https://github.com/11ty/eleventy-posthtml-urls though!