Accidental whitespace after .gjs conversion

[Windvis]

Recently I gave ember-template-imports a try in our component library and I ran into an issue with accidental leading and trailing whitespace.

The .gjs example from the readme would look like this in the .hbs format:

<span>Hello, {{@name}}!</span>

.gjs version:

<template>
  <span>Hello, {{@name}}!</span>
</template>

The difference between the 2 is that the .gjs version will output the whitespace before and after the span element which can cause visual issues for "inline styled" elements.

The problem can be worked around in several ways:

Remove the whitespace in the source code

<template><span>Hello, {{@name}}!</span></template>

This works, but it's not as readable when the component becomes more complex, especially when it's a class based component.

While testing this on more complex components, it seems that prettier-plugin-ember-template-tag doesn't support it and it always inserts the newlines and indentation again.

Use handlebars' whitespace control functionality

// components/hello.gjs
<template>
  {{~!~}}<span>Hello, {{@name}}!</span>{{~!~}}
</template>

This works and the comment version isn't needed if you have other curlies in the template you can use. I'm not sure if this has runtime impact or if this is handled at template compile time. It also seems to trigger the following log for each occurrence when building: unexpectedly found "!~" when slicing source, but expected ""

Strip whitespace by default

I do wonder if it wouldn't be an option to strip this whitespace as part of ember-template-imports (and the v2 addon equivalent) so users don't have to think about it. Are there cases where we do want this whitespace to be present in the built template?

[chancancode]

See emberjs/rfcs#982

[Windvis]

Closing since this isn't a bug and the RFC is a better place to discuss things.