html-bundler-webpack-plugin: Resolve custom attributes, wrong type of `value` argument in filter()

The another edge.

<a
    href="../img.png?as=webp-xl"
    data-pswp-width="990"
    data-pswp-height="1320"
    data-pswp-srcset="../img.png?as=webp-xs 540w, ../img.png?as=webp-sm 720w, ../img.png?as=webp-md 960w, ../img.png?as=webp-lg 1140w, ../img.png?as=webp-xl 1320w"
    data-cropped="true"
    target="_blank"
><img class="card-img-top" src="../img.png?as=webp-xs" alt="..."></a>

The HTML markup for Photoswipe.js. The data-pswp-srcset is simular to srcset. The queries are processed by the custom generators in image-minimizer-webpack-plugin

The plugin configuration:

...
loaderOptions: {
    sources: [
      {
        tag: 'a',
        attributes: ['href'],
        filter({ value }) {
          const path = value.split('?')[0];
          const imgRegex = new RegExp('\\.(avif|gif|heif|jp[2x]|j2[kc]|jpe?g|jpe|jxl|png|raw|tiff?|webp|svg)(?:[\\W].*)?$', 'i');

          return imgRegex.test(path)
        }
      },
      {
        tag: 'a',
        attributes: ['data-pswp-srcset'],
      },
    ],
  },
...

Now I have error: split is not a function; I’m surprised…

New config:

...
loaderOptions: {
    sources: [
      {
        tag: 'a',
        attributes: ['href'],
        filter({ value }) {
          if (typeof(value) !== 'string') {
            console.log(typeof (value), value);

            return false;
          }
          const path = value.split('?')[0];
          const imgRegex = new RegExp('\\.(avif|gif|heif|jp[2x]|j2[kc]|jpe?g|jpe|jxl|png|raw|tiff?|webp|svg)([?:\\W].*)?$', 'i');

          return imgRegex.test(path)
        }
      },
      {
        tag: 'a',
        attributes: ['data-pswp-srcset'],
      },
    ],
  },
...

Terminal:

...
object [
  '../img.png?as=webp-xs',
  '../img.png?as=webp-sm',
  '../img.png?as=webp-md ',
  '../img.png?as=webp-lg',
  '../img.png?as=webp-xl'
]
...

Object is data-pswp-srcset And now it lost the width values. I’m realy surprised…

_Originally posted by @vralle in https://github.com/webdiscus/html-bundler-webpack-plugin/discussions/34#discussioncomment-7277639_

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 20 (11 by maintainers)

Commits related to this issue

release v2.15.0 - feat: add `parsedValue` argument as an array of parsed filenames w/o URL query, in the `filter()` function of the `sources` - fix(BREAKING CHANGE): for `srcset` attribute the type o... — committed to webdiscus/html-bundler-webpack-plugin by webdiscus 8 months ago
release v2.15.0 - feat: add `parsedValue` argument as an array of parsed filenames w/o URL query, in the `filter()` function of the `sources` - fix(BREAKING CHANGE): for `srcset` attribute the type o... — committed to webdiscus/html-bundler-webpack-plugin by webdiscus 8 months ago

Most upvoted comments

@vralle

The issue with type of value argument is done. For another question or issue please create new issue.

webdiscus on Oct 18, 2023

@vralle

v2.15.0 has fixed type of value for srcset. Now it’s original string. Added parsedValue as Array<string> contains parsed filenames, w/o URL query.

webdiscus on Oct 18, 2023

the value type of srcset is always Array<string>

webdiscus on Oct 13, 2023

you can check the attribute by name or by type:

         {
            tag: 'img',
            attributes: ['srcset'],
            filter: ({ tag, attribute, value, attributes, resourcePath }) => {
              // ignore srcset when containig `somefile.png`
              if (attribute.includes('srcset') && !value.find((item) => item.endsWith('somefile.png'))) return false;
            },
          },

It’s type export)

ah, yo, I do it 😃 I will exend the value type as string | Array<string>

webdiscus on Oct 13, 2023

...
{
        tag: 'a',
        attributes: ['href', 'data-pswp-srcset'],
        filter({ attributes }) {
          if (attributes.href) {
            const path = attributes.href.split('?')[0];
            const imgRegex = new RegExp('\\.(avif|gif|heif|jp[2x]|j2[kc]|jpe?g|jpe|jxl|png|raw|tiff?|webp|svg)$', 'i');

            return imgRegex.test(path)
          }

          if (attributes['data-pswp-srcset']) {
            return true;
          }

          return false;
        }
      },
...

This way works perfect.

Problem’s with value.

vralle on Oct 13, 2023