Default template parser setting "condense" breaks valid HTML

[paulmer]

Vue version

3.x

Link to minimal reproduction

https://play.vuejs.org/#eNp9kc1OwzAQhF/F2nOVip9TFVUC1AMcAAFHX1J3CS6ObXnXJVKVd8d2SMmhqk87M9/KY/kId95Xh4iwgppU0J4FIUe/lrZejkYak2DsvGkYkxKizrlIpybf2HVzldg8/OntpAu7zPC5resZNZnbuTmuCpG7zO6HBTApZz91W+3J2dT9WDBQrvPaYHjxrJ0lCStRkpw1xrifp+JxiLiYfPWF6vuMv6c+exJeAxKGA0o4ZdyEFnmMN+/P2Kf5FHZuF02iL4RvSM7E3HHE7qPdpdozrrR97LwLrG37QZue0dL0qFw0k0PhJaQPfLjw9P+6N9Vt2ZN2gOEXlFSkLA==

Steps to reproduce

No additional steps necessary.

What is expected?

The second paragraph in the example should have exactly the same spacing as the first. "a1 b1" and "a2 b2".

What is actually happening?

Because the whitespace between the spans in the second paragraph includes a line break it is being stripped.

System Info

Any additional comments?

The logic behind treating whitespace with line breaks differently from other whitespace is unique to Vue, and this default behavior is surprising to someone copying HTML into a Vue template. It's an overly aggressive optimization that doesn't properly consider that whitespace can be removed between block HTML elements, but is significant between inline elements. The Since Vue cannot know which elements are block and which are inline without knowing the details of the styles applied to the elements, it's not possible for it to perform this optimization in this way without the risk of breaking some HTML. This leaves developers with the unfortunate choice between potentially introducing an unexpected formatting problem when reformatting code, or omitting any kind of optimization of the template.

I suggest modifying "condense" to reduce all sequences of whitespace to a single space. Although this will not achieve as large a size reduction as removing the whitespace it still has to potential for considerable savings while maintaining the expected HTML behavior.

If modifying "condense" is undesirable, then offering an additional option that has the described behavior is desirable. In either case, the default setting should not be one which has the potential to alter the meaning of the source file.

[edison1105]

1. Leading / ending whitespace characters inside an element are condensed into a single space.
2. Whitespace characters between elements that contain newlines are removed.
3. Consecutive whitespace characters in text nodes are condensed into a single space.

This is the documented behavior. https://vuejs.org/api/application.html#app-config-compileroptions-whitespace
Perhaps offering an additional option is better.

[Justineo]

I believe it's not unique to Vue. React JSX does something similar.

[paulmer]

1. Leading / ending whitespace characters inside an element are condensed into a single space.
2. Whitespace characters between elements that contain newlines are removed.
3. Consecutive whitespace characters in text nodes are condensed into a single space.

This is the documented behavior. https://vuejs.org/api/application.html#app-config-compileroptions-whitespace Perhaps offering an additional option is better.

I certainly understand it is documented behavior and has been present for half a decade or more. But that doesn't make it necessary correct or desirable. The ideal would be to fully analyze the markup and only remove spaces between block elements, condensing the rest into a single space, however, that's simply not possible, let alone practical. It would be useful and straightforward to implement a behavior that provides some optimization while preserving the semantics of the original source.

For backwards compatibility, adding this as an additional option certainly makes sense.

It's not relevant, but I do admit to failing to understand the logic behind entirely stripping whitespace that contains new lines given that it alters spacing in inline elements. Certainly it reduces file sizes when the source code makes extensive use of whitespace for readability, but it precludes using line breaks to make inline elements readable. Maybe it was as @Justineo pointed out it was simply to replicate some other framework's behavior?