Add preserveWhitespace on a per-component basis

[martynchamberlin]

What problem does this feature solve?

Take this component:

<template>
  <div>
    <span>Mark</span>
    <span>down</span>
  </div>
</template>

If preserveWhitespace is enabled in vue-template-compiler then this will get rendered on the page as this:

Mark down

I would have to resort to some sort of CSS to get around this, so that it instead renders as:

Markdown

What I would instead like is the ability to have preserveWhitespace enabled by default but have the ability to override this on a per-component basis. If that were an option then I could disable it for the above component and then it would render in HTML as this:

<div><span>Mark</span><span>down</span></div>

What does the proposed API look like?

I'm envisioning maybe a new top level property for the exported function within a single-file Vue component. E.g.:

export default {
  name: 'Markdown'
  preserveWhitespace: true
}

[yyx990803]

I personally think this should be consistent across each project, which is why it's a global compile-time-only option in the first place. Since this can be solved by CSS, I'd avoid adding yet another option to the runtime API.

[martynchamberlin]

Since this can be solved by CSS, I'd avoid adding yet another option to the runtime API.

I respect your decision (esp. because of the performance implications), but for full clarity, white space cannot always be solved in the CSS. I will give an example.

<div class="footnote"><span>Here's a footnote</span><span>↩︎</span></div>

In that HTML, the ↩︎ will be "glued" to the word "footnote". That is, if the browser width is narrow enough that ↩︎ is forced to go to the proceeding line, the word "footnote" will travel with it. However, in the following HTML, that will not occur: ↩︎ will move on its own and the word "footnote" will appear on the preceding line.

<div class="footnote"><span>Here's a footnote</span> <span>↩︎</span></div>

As far as I have seen, there is not CSS that can get around this without unintended side effects. Setting the parent's font size to zero and then having the child font sizes reset, using floating elements, using flexbox — all of these things introduce complexities and unintentional side effects.

On the project that brought up this issue, I ultimately decided to just remove all whitespace manually. It's not pretty but it gets the job done.

Anyway, just thought I'd weigh in and mention this. Thanks!