Open renatodeleao opened 1 year ago
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?
honestly I wish the leading and trailing whitespace were also removed for static content it's very inconvenient that code formatting affects layout.
I would much rather have that leading/trailing whitespace always removed. and if I need to guarantee a space, that's what either
is for, or margin or padding
Vue version
3.2.45
Link to minimal reproduction
https://sfc.vuejs.org/#eNqdUktu20AMvQo7XagFbI0dNEAqKAa6DNBV19qMZMoaw/PBcKQsBN2lZ8nJwpECRPkgQLIR+EjqvTckR/HH+3zoURSipCZoH4Ew9v5QWW28CxFGCNjCBG1wBjJuzSpb2cZZimDoBLep/iO7g6MD6yJ0akAgrxrcAA5oQbeg7RFtxOMGamxUTwgalAEFgwpa1Rf8lv2sbCkXB6zNIKLxFxWREUDZ7Q/3nY44ExeQsT5TEmbMyIra9aGU3DQ3EzZROzuDBL2yh7+qxkvBEgmsCy+Nq8X6qo/DFd3nuJcY4O4F+fMQ5rE8/fC+4tc1x/Hhf9rPNH0oADBn6gByqSnoeKG3lehi9FRIedKx6+u8cUby9s+UvlIT9Ujy99Xu5vscc9nwY7a/rne7/dX1/qYSh3/YYkCbxqmYvJSrnYqNWA5sa5TPz+Qsn+A4+3kqUCUKmDMpx6IJP9uitkmHe6bchVPylIfeRm0wRzLbOrh7wsDEldisOPjlYcCwZVtH9hY+4nzV+oY30fJwJzE9AvXCGTY=
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
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.
What is actually happening?
It outputs
Foo Bar
in the first example as expected andFooBar
in the second which is not expected.System Info
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
whitespace: 'preserve'
would work, but is not an option for me because it breaks a lot of other rather critical stuff
HTML entity, but damn this wholecondense
thing 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.