Fix some whitespace issues

Some of our components generate inline(-*) elements which are affected by surrounding whitespace. We used a `{{~!~}}` comment for most of these cases, but it seems comments are stripped in production builds, even if the comment also has whitespace stripping enabled.

As a workaround we now remove the actual whitespace from the source code, even though it makes things harder to read.

Once we convert to a v2 addon we can strip the whitespace at build time.

Author: Windvis

addon/components/au-badge.gts

@@ -37,8 +37,9 @@ export default class AuBadge extends Component<AuBadgeSignature> {
     return '';
   }
 
-  <template>
-    <span
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><span
       class="au-c-badge {{this.skin}} {{this.size}}"
       aria-hidden={{if @iconVisible "false" "true"}}
       ...attributes
@@ -49,6 +50,5 @@ export default class AuBadge extends Component<AuBadgeSignature> {
       {{#if @number}}
         <span class="au-c-badge__number">{{@number}}</span>
       {{/if}}
-    </span>
-  </template>
+    </span></template>
 }

addon/components/au-brand.gts

@@ -18,7 +18,7 @@ export default class AuBrand extends Component<AuBrandSignature> {
   }
 
   <template>
-    {{#if @link}}
+    {{~#if @link~}}
       <a
         href={{@link}}
         class="au-c-brand au-c-brand--link {{this.tagline}}"
@@ -52,7 +52,7 @@ export default class AuBrand extends Component<AuBrandSignature> {
           {{/if}}
         </p>
       </a>
-    {{else}}
+    {{~else~}}
       <div class="au-c-brand {{this.tagline}}" ...attributes>
         <div class="au-c-brand__logo">
           <svg
@@ -78,6 +78,6 @@ export default class AuBrand extends Component<AuBrandSignature> {
           {{/if}}
         </p>
       </div>
-    {{/if}}
+    {{~/if~}}
   </template>
 }

addon/components/au-button.gts

@@ -117,8 +117,9 @@ More info in the migration guide: https://github.com/appuniversum/ember-appunive
     return '';
   }
 
-  <template>
-    <button
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><button
       class="au-c-button
         {{this.widthClass}}
         {{this.sizeClass}}
@@ -161,6 +162,5 @@ More info in the migration guide: https://github.com/appuniversum/ember-appunive
           <AuIcon @icon={{@icon}} />
         {{/if}}
       {{/unless}}
-    </button>
-  </template>
+    </button></template>
 }

addon/components/au-checkbox.gts

@@ -64,9 +64,9 @@ export default class AuCheckbox extends Component<AuCheckboxSignature> {
     }
   }
 
-  <template>
-    {{~!~}}
-    <label
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><label
       class="au-c-control au-c-control--checkbox
         {{if (and (not @inGroup) (not (has-block))) 'au-c-control--labelless'}}
         {{if @disabled 'is-disabled'}}"
@@ -84,7 +84,5 @@ export default class AuCheckbox extends Component<AuCheckboxSignature> {
       />
       <span class="au-c-control__indicator"></span>
       {{yield}}
-    </label>
-    {{~!~}}
-  </template>
+    </label></template>
 }

addon/components/au-date-input.gts

@@ -19,9 +19,9 @@ export interface AuDateInputSignature {
 }
 
 export default class AuDateInput extends Component<AuDateInputSignature> {
-  <template>
-    {{~!~}}
-    <AuInput
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><AuInput
       @disabled={{@disabled}}
       @error={{@error}}
       @icon={{CalendarIcon}}
@@ -31,7 +31,5 @@ export default class AuDateInput extends Component<AuDateInputSignature> {
       placeholder="DD-MM-JJJJ"
       {{auDateInput value=@value prefillYear=@prefillYear onChange=@onChange}}
       ...attributes
-    />
-    {{~!~}}
-  </template>
+    /></template>
 }

addon/components/au-dropdown.gts

@@ -104,9 +104,9 @@ export default class AuDropdown extends Component<AuDropdownSignature> {
     };
   }
 
-  <template>
-    {{~!~}}
-    <div class="au-c-dropdown" ...attributes>
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><div class="au-c-dropdown" ...attributes>
       <AuButton
         {{this.reference}}
         @skin={{this.skin}}
@@ -153,7 +153,5 @@ export default class AuDropdown extends Component<AuDropdownSignature> {
           </div>
         </div>
       {{/if}}
-    </div>
-    {{~!~}}
-  </template>
+    </div></template>
 }

addon/components/au-icon.gts

@@ -45,15 +45,15 @@ export default class AuIcon extends Component<AuIconSignature> {
   }
 
   <template>
-    {{#if this.iconComponent}}
-      {{#let this.iconComponent as |Icon|}}
+    {{~#if this.iconComponent~}}
+      {{~#let this.iconComponent as |Icon|~}}
         <Icon
           class="au-c-icon {{this.alignment}} {{this.size}}"
           aria-hidden={{this.ariaHidden}}
           ...attributes
         />
       {{/let}}
-    {{else}}
+    {{~else~}}
       <svg
         role="img"
         class="au-c-icon au-c-icon--{{@icon}} {{this.alignment}} {{this.size}}"
@@ -64,6 +64,6 @@ export default class AuIcon extends Component<AuIconSignature> {
           xlink:href="{{this.iconPrefix}}@appuniversum/ember-appuniversum/appuniversum-symbolset.svg#{{@icon}}"
         ></use>
       </svg>
-    {{/if}}
+    {{~/if~}}
   </template>
 }

addon/components/au-link-external.gts

@@ -61,9 +61,9 @@ export default class AuLinkExternal extends Component<AuLinkExternalSignature> {
     return '';
   }
 
-  <template>
-    {{~!~}}
-    <a
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><a
       class="{{this.skinClass}} {{this.widthClass}} {{this.iconOnlyClass}}"
       target="_blank"
       rel="noopener noreferrer"
@@ -83,7 +83,5 @@ export default class AuLinkExternal extends Component<AuLinkExternalSignature> {
         {{! @glint-expect-error: this.isIconLeft ensures that @icon is set }}
         <AuIcon @icon={{@icon}} />
       {{/if}}
-    </a>
-    {{~!~}}
-  </template>
+    </a></template>
 }

addon/components/au-link.gts

@@ -82,9 +82,9 @@ export default class AuLink extends Component<AuLinkSignature> {
     return '';
   }
 
-  <template>
-    {{~!~}}
-    <LinkTo
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><LinkTo
       @route={{@route}}
       @models={{linkToModels @model @models}}
       @query={{this.queryParams}}
@@ -94,7 +94,7 @@ export default class AuLink extends Component<AuLinkSignature> {
         {{this.iconOnlyClass}}"
       ...attributes
     >
-      {{#if this.isIconLeft}}
+      {{~#if this.isIconLeft~}}
         {{! @glint-expect-error: this.isIconLeft ensures that @icon is set }}
         <AuIcon @icon={{@icon}} />
       {{/if}}
@@ -106,8 +106,6 @@ export default class AuLink extends Component<AuLinkSignature> {
       {{#if this.isIconRight}}
         {{! @glint-expect-error: this.isIconRight ensures that @icon is set }}
         <AuIcon @icon={{@icon}} />
-      {{/if}}
-    </LinkTo>
-    {{~!~}}
-  </template>
+      {{~/if~}}
+    </LinkTo></template>
 }

addon/components/au-pill.gts

@@ -72,7 +72,7 @@ export default class AuPill extends Component<AuPillSignature> {
   }
 
   <template>
-    {{#if @onClickAction}}
+    {{~#if @onClickAction~}}
       <span class="au-c-pill-container">
         <span
           class="au-c-pill {{this.skin}} {{this.size}} {{this.draft}}"
@@ -93,8 +93,8 @@ export default class AuPill extends Component<AuPillSignature> {
           <span class="au-u-hidden-visually">{{@actionText}}</span>
         </button>
       </span>
-    {{else}}
-      {{#if @route}}
+    {{~else~}}
+      {{~#if @route~}}
         <LinkTo
           class="au-c-pill au-c-pill--hover
             {{this.skin}}
@@ -111,7 +111,7 @@ export default class AuPill extends Component<AuPillSignature> {
             @hideText={{@hideText}}
           >{{yield}}</Inner>
         </LinkTo>
-      {{else if @href}}
+      {{~else if @href~}}
         <a
           href={{@href}}
           class="au-c-pill au-c-pill--hover
@@ -126,7 +126,7 @@ export default class AuPill extends Component<AuPillSignature> {
             @hideText={{@hideText}}
           >{{yield}}</Inner>
         </a>
-      {{else}}
+      {{~else~}}
         <span
           class="au-c-pill {{this.skin}} {{this.size}} {{this.draft}}"
           ...attributes
@@ -137,8 +137,8 @@ export default class AuPill extends Component<AuPillSignature> {
             @hideText={{@hideText}}
           >{{yield}}</Inner>
         </span>
-      {{/if}}
-    {{/if}}
+      {{~/if~}}
+    {{~/if~}}
   </template>
 }
 

addon/components/au-radio.gts

@@ -43,9 +43,9 @@ export default class AuRadio extends Component<AuRadioSignature> {
     }
   }
 
-  <template>
-    {{~!~}}
-    <label
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><label
       class="au-c-control au-c-control--radio
         {{if (and (not @inGroup) (not (has-block))) 'au-c-control--labelless'}}
         {{if @disabled 'is-disabled'}}"
@@ -62,7 +62,5 @@ export default class AuRadio extends Component<AuRadioSignature> {
       />
       <span class="au-c-control__indicator"></span>
       {{yield}}
-    </label>
-    {{~!~}}
-  </template>
+    </label></template>
 }

addon/components/au-textarea.gts

@@ -34,9 +34,9 @@ export default class AuTextarea extends Component<AuTextareaSignature> {
     else return '';
   }
 
-  <template>
-    {{~!~}}
-    <textarea
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><textarea
       class="au-c-textarea
         {{this.error}}
         {{this.warning}}
@@ -46,7 +46,5 @@ export default class AuTextarea extends Component<AuTextareaSignature> {
       ...attributes
     >
       {{~yield~}}
-    </textarea>
-    {{~!~}}
-  </template>
+    </textarea></template>
 }

addon/components/au-toggle-switch.gts

@@ -39,9 +39,9 @@ export default class AuToggleSwitch extends Component<AuToggleSwitchSignature> {
     }
   }
 
-  <template>
-    {{~!~}}
-    <label
+  // We don't want whitespace between our component and the outer template tag since that's visible in the app (inline element): https://github.com/emberjs/rfcs/issues/982
+  // prettier-ignore
+  <template><label
       for={{@identifier}}
       class="au-c-toggle-switch
         {{this.alignmentClass}}
@@ -63,7 +63,5 @@ export default class AuToggleSwitch extends Component<AuToggleSwitchSignature> {
       />
       <span class="au-c-toggle-switch__toggle"></span>
       {{yield}}
-    </label>
-    {{~!~}}
-  </template>
+    </label></template>
 }