Feature request: provide option for removing all spaces arround tag

[masquevil]

What problem does this feature solve?

For now, spaces around text tag will be kept at least one space:
https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options

<!-- source -->
<div>
  <span>
    foo
  </span>   <span>bar</span>
</div>

<!-- whitespace: 'preserve' -->
<div> <span>
  foo
  </span> <span>bar</span> </div>

<!-- whitespace: 'condense' -->
<div><span> foo </span> <span>bar</span></div>

Sometimes, it will keep some space we don't want:

<!-- source -->
<span>
  一段很长的文字………………，
<span>

<!-- become -->
<span> xx </span>

<!-- if we write source like this -->
<span>a_long_long_chinese_characters…<span>

<!-- it will be formatted by prettier or etc like this, very bad -->
<span
  >a_long_long_chinese_characters…</span
>

Our code standard always: build tool (webpack) will kill all spaces around tag. If we need a real space, use   like this:

<!-- source if no need for spaces -->
<span>
    <i class="icon"></i>
    文本
</span>
<!-- result -->
<span><i class="icon"></i>文本</span>

<!-- source if need for spaces -->
<span>
    &nbsp;
    <i class="icon"></i>
    &nbsp;文本&nbsp;
</span>
<!-- result -->
<span>&nbsp;<i class="icon"></i>&nbsp;文本&nbsp;</span>

In this way, we get a great experience with react and vue@1.x (compress html myself).

now we are using SFC, vue-loader haven't provide this option. Spaces around tag will be kept at least one space.
So we hope vue-loader can provide an option to remove these spaces.

What does the proposed API look like?

compilerOptions: {
  whitespace: 'collapse'
}

[Justineo]

As I understand the feature you are asking for is exactly the same with the original proposal here in #9208. Maybe we can add a new value for the whitespace option value like 'jsx'? @yyx990803

[posva]

the thing is, doing this conversion

<!-- source if need for spaces -->
<span>
    &nbsp;
    <i class="icon"></i>
    &nbsp;文本&nbsp;
</span>
<!-- result -->
<span>&nbsp;<i class="icon"></i>&nbsp;文本&nbsp;</span>

is not correct, it should condense the whitespace into one single space like we do now. If you want the non breakable space around, write them

<span>&nbsp;<i class="icon"></i>&nbsp;文本&nbsp;</span>

The reason we condense the whitespace instead of removing it is because it matters, I think having an option like this would cause trouble for people as the result would be different from the source in terms of rendering

[masquevil]

write them

<span>&nbsp;<i class="icon"></i>&nbsp;文本&nbsp;</span>

Yes, I have tried this. But in this case:

<!-- if we write source like this -->
<span>a_long_long_chinese_characters…<span>

<!-- the source code will be formatted by prettier or etc like this, very bad -->
<span
  >a_long_long_chinese_characters…</span
>

It is not what we want.

Some other tools have this feature (eg: html-loader has collapseInlineTagWhitespace and conservativeCollapse option), and we have use these feature as our company's standard. So I hope vue can offer one.

[posva]

but the formatting is not related to Vue, you can configure line length and eslint to not split up in lines, which is purely esthetic, while introducing the collapse is not, it does produce different renders.

So you are basically asking to add a feature that produces different results from what it's initially written, adds surface api and could be confusing to users only because the auto formatting setup in your project doesn't look good to you. And that's why I don't think this is a good idea

[masquevil]

I can list more example, but it is not what I'm requesting.
JSX has this feature, And I think there should be an ability for developer to choose which code style they prefer, rather than no choice.

eg1: Which one do you think is the best? We choose 3.

<!-- source code 1 -->
<p attr1="1" attr2="1" attr3="1" attr4="1" attr5="1" attr6="1" attr7="1" attr8="1">a_long_long_chinese_sentence………………………………</p>

<!-- source code 2 -->
<p
  attr1="1"
  attr2="1"
  attr3="1"
  attr4="1"
  attr5="1"
  attr6="1"
  attr7="1"
  attr8="1"
>a_long_long_chinese_sentence………………………………</p>

<!-- source code 3 -->
<p
  attr1="1"
  attr2="1"
  attr3="1"
  attr4="1"
  attr5="1"
  attr6="1"
  attr7="1"
  attr8="1"
>
  a_long_long_chinese_sentence………………………………
</p>

eg2: Which one do you think is better? We choose 1.

<!-- source code 1 -->
<router-link
  v-if="someCondition"
  class="link-type-a"
  to="an-long-long-url"
>
  <icon type="some-icon" />
  <span class="highlight-link">text</span>
</router-link>
<router-link
  v-else
  class="link-type-b"
  to="an-long-long-url"
>
  text
</router-link>

<!-- source code 2 -->
<router-link
  v-if="someCondition"
  class="link-type-a"
  to="an-long-long-url"
>
  <icon type="some-icon" />
  <span class="highlight-link">text</span>
</router-link>
<router-link
  v-else
  class="link-type-b"
  to="an-long-long-url"
>text</router-link>

[westonlast]

This is a good feature request. @posva, if you're concerned about the template's XML "implying" a different render to conform to ESLint rules, you shouldn't be.

Developers shouldn't be using templates to affect layout in the first place. That's HTML/CSS 101. Developers just want templates to look "readable." Adding extra spaces to a template/HTML in order to affect layout is semantically incorrect and always has been, regardless of how many people are blissfully unaware. And using HTML for layout makes other aspects of development even more difficult.

Honestly, I thought this feature already existed, until I read the fine print on whitespace. It's a shame, otherwise whitespace would be a useful option.