Removing whitespace with angle bracket syntax

Questions
1

With the curly brace syntax, you can do something like this:

<span>
  {{~#link-to 'my-page'}}text{{/link-to~}}
</span>

To remove unwanted whitespace. Is there a way to do the same with angle bracket syntax? I tried <~LinkTo> but that throws a compiler error.

2 Likes
2

No, there is no version of white space control for angle bracket invocation.

3

We found a hack where you can add a curly-braces comment to remove whitespace, like

<AngleBracket @thing={{thing}}>
  {{~! remove whitespace plz ~}}
</AngleBracket>
2 Likes
4

Interesting! Does seem a bit hacky, but on the other hand, if it works… :wink:

5

Can you elaborate on why you are looking to remove the whitespace? I think visually the whitespace is helpful so I’m assuming there is some special case where the whitespace actually matters more (e.g. invoking components inside a <pre>/<code>).

6

We use it to build comma separated lists with CSS, where we add a comma behind each element. Without whitespace control, you then end up with e.g. First , second , third insted of First, second, third.

It’s not the most important thing in the world, and there are for sure other ways to achieve this, but we’ve been using it quite successfully for some time now :slight_smile:

7

Gotcha! Thank you for explaining that! I was mostly trying to determine if this was more of a “feature request” or a “performance issue” type of thing.

RE: the performance issue side of things (which are mostly focused on template bloat introduced by extraneous whitespace) we have ideas for slimming the template size down considerably.

RE: your specific use case, I think the only options you have at the moment would be:

  • don’t rely on CSS for building comma separated lists, instead have your markup more closely match what is rendered (likely doesn’t sound appealing, but might be “okish”?)
  • add something like [ember-hbs-minifier] (GitHub - simplabs/ember-hbs-minifier: Stripping whitespace out of your Handlebars templates) to automatically strip this whitespace during a production build (this addon was built to address the “performance issue” I mention above, but would likely also work for your situation)
  • setup your templates to avoid the extraneous whitespace, I could imagine something like this working (though I’m not exactly sold that it looks decent :stuck_out_tongue_closed_eyes:) :
<span><LinkTo
  @route='my-page'>text</LinkTo
></span>
8

Yeah, there are for sure other ways to do this :slight_smile:

I wonder, is it on purpose that you can remove whitespace with comments? If so, I guess that is a decent solution for this problem - unless it is kind-of unintended and might go away at some point?

9

I’m running into the same issue with LinkTo, so what used to be as elegant as this:

{{#link-to ...args... ~}}
    {{text}}
{{~/link-to}}

Now becomes this:

<LinkTo ...args...>
    {{~! ~}}{{{text}}}{{~! ~}}
</LinkTo>

Yeah I don’t think that looks particularly well also. Especially when using a linter, which will reject that syntax (rightly so).

10

I was able to do this in pure CSS (flex): Edit fiddle - JSFiddle - Code Playground

HTML

<span class="comma-list">
  <span class="item">
    Foo
  </span>
  <span class="item">
    Bar
  </span>
  <span class="item">
    Baz
  </span>
</span>

CSS

.comma-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.item::before {
  content: ', ';
}

.item:first-child::before {
  content: '';
}

.item:last-child::before {
  content: ', and ';
}