inconsistent behaviour of `whitespace: 'condense'` handling if second element text is an interpolated var
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
N/A
What is expected?
As described by Evan's words, indenting the subsequent element will add a space between text content of the two nodes
<template>
<span>Foo</span>
<span>
Bar
</span>
</template>
<!-- outputs Foo Bar -->
When the second element's content is a variable (not hardcoded text) the template compiler does not recognize it as text and removes the space.
<script setup>
const bar = ref('Bar')
</script>
<template>
<span>Foo</span>
<span>
{{ bar }}
</span>
</template>
<!-- expect to output Foo Bar, but outputs FooBar -->
What is actually happening?
It outputs Foo Bar in the first example as expected and FooBar in the second which is not expected.
System Info
N/A it's vue's SFC playground env, which uses `whitespace: 'condense'` (default), the only requirement to reproduce
Any additional comments?
The behaviour is inconsistent, and it's especially problematic when you're dealing with dynamic content — a classic real-world scenario is looping through a key/value object and outputting a definition list of things for example.
Known workarounds
- Setting compilers
whitespace: 'preserve'would work, but is not an option for me because it breaks a lot of other rather critical stuff - Manually Adding
HTML entity, but damn this wholecondensething is not aligned with the last 20 years of HTML (that I can remember of) and I would rather not go down that rabbit hole.
3
It is inconsistent with vue2. so I feel this should be a bug.
Also being blocked by this while trying to migrate a codebase from Vue 2 to Vue 3. Most of the existing snapshot tests are breaking because of a couple whitespaces missing.
Not sure if it's the same issue, but I'm mapping through a list of words to create clickable spans. Each word should be separated by various "before" and "after" text that does not need to be in its own node. Leading and trailing whitespace is elided in these cases.
Running into the same issue while migrating from Vue 2 to Vue 3. Are there any known workarounds yet?