Is there a way to control space around WebC components?

[saneef]

Here is a case where I don't want extra space.

<!-- time.webc -->
<script webc:setup>
  function dateToAttribute(date) {
    return new Date(date).toISOString();
  }
  function readableDate(date, locale) {
    return new Date(date).toLocaleString(locale || "en-GB");
  }
</script>
<time
  :datetime="dateToAttribute(date)"
  :title="readableDate(date)"
  @text="readableDate(date)"
></time>

I'm using the <time> component in another file:

<!-- ... -->

<p>Last updated on <time :@date="metadata.now"></time>.</p>

<!-- ... -->

The compiled output is:

<!-- ... -->

<p>Last updated on 
<time datetime="2024-02-07T09:15:18.399Z" title="07/02/2024, 14:45:18">07/02/2024, 14:45:18</time>
.</p>

<!-- ... -->

i.e. Last updated on 07/02/2024, 14:45:18 ., with a space before the period.

Though I use the whitespace control when using Nunjucks, I'm not expecting such a feature in WebC.

What would be a workaround for such scenarios?

[rothsandro]

Does your time.webc file have a blank line at the end of the file?

[saneef]

Yes, it does. My .editorconfig adds newlines to end of all files (including all webc).

My time.webc is a shorter version of tugboat/.../time-difference.webc, and that component also have similar problem when using inline.

[rothsandro]

I tested it and the space before the period is gone without the blank line (with your code). The complete code doesn't have a blank line at the end but after the time element, which will likely be kept after extracting the style + script tags.

[saneef]

Thanks, @rothsandro, for looking into it. But, I was looking for a more generic solution.

You know, when working with projects configured with Prettier and EditorConfig, especially when many people are contributing, it is difficult to keep a file or two without a newline at the end.

I know this a rare problem, though I have encountered a handful of times in the past, and Nunjucks's whitespace control came handy.

At this time, I'm using with Eleventy Transforms to go around this issue. Probably an over-engineered solution. 😄

// eleventy.config.js

eleventyConfig.addTransform("trim-whitespace", function (content) {
  const trimCommentsRegex =
    /\s*<!---*\s*trim-whitespace(?:="(?<count>\d+)")?\s*-*-->\s*/gim;

  return content.replaceAll(trimCommentsRegex, function (_match, countStr) {
    const count = +countStr;
    if (!isNaN(count)) {
      return " ".repeat(count);
    }
    return "";
  });
});

Then, in places where I want to trim white spaces, I can insert an HTML comment, <!-- trim-whitespace -->. The transform will replace the comment together with the white spaces around it.

<!-- sample.webc -->

<p>
  Last updated on
  <time :@date="metadata.now"></time>
  <!-- trim-whitespace -->.
</p>

<!-- Output HTML file -->

<p>
  Last updated on
  <time datetime="2024-02-21T14:16:56.311Z" title="21/02/2024, 19:46:56">21/02/2024, 19:46:56</time>.
</p>