Compatibility with Eleventy 1.0.0

[Antonio Laguna]

Hey @gfscott !

I've found that this and YouTube misbehave a lot with Eleventy 1.0.0-beta2 I'm unsure right now of what could be the root cause and will dig into it a bit.

To summarise what happens is that content just banishes between the embeds for some reason. I thought it could be malformed content but it's not that. The output is just not there.

See below.

This could obviously be something else but I only changed Eleventy's version. I'd need a much more narrowed-down test case to be certain of what the issue could be. I'm wondering if you've considered making it so tests run Eleventy instead of "just the function".

Eleventy 1.0.0

Eleventy 0.12.1

[Graham F. Scott]

Hey @Antonio-Laguna!

Thanks for filing this! The Eleventy 1.0 release has been on my mind and this is a good prompt to dig into it more.

Can you share the exact HTML markup that's generated with 0.12.1 and 1.0.0? And with the plugin both active and inactive? Since the plugin works using regular expressions on the HTML generated by Eleventy, I could imagine a scenario where the regex gets greedy with the HTML elements and removes a paragraph by mistake. But I think I'd need to see the markup.

I haven't been able to duplicate this issue yet (see below), but I definitely agree that it warrants more investigation. I would love to improve the testing setup so it more closely resembles a real Eleventy build environment, but I must admit I'm not sure how to go about it right now. I'll do some more research but suggestions definitely welcome!

Attempting to duplicate

Here's my attempt to duplicate on my own local environment, using 11ty 1.0-beta.2:

Markdown input

HTML output

As you can see, the paragraph between the two embeds is preserved in my setup. I also tested with YouTube URLs and got the same result.

[Antonio Laguna]

I've edited my previous comment since it's not the full story.

---

So I've narrowed it down to being a combination of things.

Whenever htmlmin is enabled like this:

eleventy.addTransform('htmlmin', function(content, outputPath) {
  if (outputPath.indexOf('.html') > -1) {
    return htmlmin.minify(content, {
      removeAttributeQuotes: true,
      collapseBooleanAttributes: true,
      collapseWhitespace: true,
      sortClassName: true,
      sortAttributes: true,
      html5: true,
      decodeEntities: true,
      minifyCSS: true
    });
  }

  return content;
});

You can reproduce the issue with this minimum Markdown:

One

https://twitter.com/ftrain/status/1392836004369866754

Two

You get this HTML

<p>One</p>
<p><a href="https://twitter.com/ftrain/status/1392836004369866754" target="_blank" rel="noreferrer">https://twitter.com/ftrain/status/1392836004369866754</a></p>
<p>Two</p>

And it goes through the minifier and comes back as:

<p>One</p><p><a href=https://twitter.com/ftrain/status/1392836004369866754 rel=noreferrer target=_blank>https://twitter.com/ftrain/status/1392836004369866754</a></p><p>Two</p>

The whole pipeline though outputs this:

<p>One</p><div class="eleventy-plugin-embed-twitter"><blockquote class="twitter-tweet" data-lang="es" data-dnt="true"><p lang="en" dir="ltr">We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>&mdash; Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote>
</div>

What's different on Eleventy 0.12.1 ? It looks like it's run before compression like this:

<p>One</p>
<div class="eleventy-plugin-embed-twitter"><blockquote class="twitter-tweet" data-lang="es" data-dnt="true"><p lang="en" dir="ltr">We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>&mdash; Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote>
</div>
<p>Two</p>

After compression:

<p>One</p><div class=eleventy-plugin-embed-twitter><blockquote class=twitter-tweet data-dnt=true data-lang=es><p dir=ltr lang=en>We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>— Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote></div><p>Two</p>

So I assume that somehow the order of transforms has changed between transforms and plugins and the regex is greedy indeed. Will dig more on the Eleventy side since I'm not confident on this change from Eleventy though. Let's see :)

[Antonio Laguna]

Definitely, the Regex is a bit greedy with subsequent paragraphs

A test case like this fails:

/**
 * TEST: Build script returns expected HTML string, given valid input and default options
 */
validStrings.forEach(function(obj) {
  test(
    `${obj.type} default embed behavior with subsequent paragraph.`,
    (t) => {
      const idealCase = `<p>${obj.str}</p><p>Foo</p>`;
      const tweetObj = extractMatch(idealCase);
      const output = buildEmbed(tweetObj, pluginDefaults, 0);
      const expected = '<div class="eleventy-plugin-embed-twitter"><blockquote id="tweet-1289865845053652994" class="twitter-tweet"><a href="https://twitter.com/SaraSoueidan/status/1289865845053652994"></a></blockquote></div><script src="https://platform.twitter.com/widgets.js" charset="utf-8" async></script><p>Foo</p>';
      t.is(output, expected);
    },
  );
});

[Graham F. Scott]

Got it — the plugin regex is too greedy right now, and if it runs after htmlmin, it'll consume and replace all trailing paragraph elements, since it's all one line.

Sounds pretty fixable — I'll look at refactoring ASAP. Thanks so much for investigating further!