Open TheJaredWilcurt opened 2 weeks ago
Was on vacation. Will pick this up next.
@TheJaredWilcurt. I was not able to allocate much time to work on this during the week. I'll try to work on it this weekend.
Also, if whiteSpacePreserved is set to true, shouldn't the result be same as the initial input. Line breaks after ul and li opening tags should also not be present.
I was considering using the sourceCodeLocationInfo attributes to solve this issue, but I'm unsure if this is the right approach. If you have any suggestions or thoughts on this, I'd appreciate your input.
The original indentation and returns shouldn't be touched if tagsWithWhitespacePreserved: true
. The only place where we would add returns and indentation would be on the HTML attributes.
So in the example, the input would be:
<div id="header" data-server-rendered>
<!--v-if-->
<label data-test="input" data-v-1ae75a9f="">
Void and Attributes per line Example:
<input>
<input type="range">
<input type="range" max="50">
<input type="range" max="50" id="slider">
</label>
<p class="">Empty attribute example</p>
<div></div>
<ul><li><a href="#">Link text on same line</a></li></ul>
</div>
and the output would be something like this:
<!-- globalThis.vueSnapshots.formatting.tagsWithWhitespacePreserved = true; -->
<div id="header">
<!-- v-if -->
<label>
Void and Attributes per line Example:
<input />
<input type="range" />
<input
type="range"
max="50"
/>
<input
type="range"
max="50"
id="slider"
/>
</label>
<p class="">Empty attribute example</p>
<div></div>
<ul><li><a href="#">Link text on same line</a></li></ul>
</div>
I'm not sure on implementation for this. It's mainly just skipping formatting. So that's easy, but then when we try to add in indentation on the attributes, you need to know how indented to make them. And that's when it gets complex. sourceCodeLocationInfo
may actually be the best approach.
A simpler way would be to continue counting tags and indent based on tag depth, but that would look weird. Example:
<div><div><div><div><div>
<a href="#" class="link">text</a>
</div></div></div></div></div>
<!-- Attribute indent based on tag depth, without indenting tags, looks like a bug -->
<div><div><div><div><div>
<a
href="#"
class="link"
>text</a>
</div></div></div></div></div>
So clearly the simpler way isn't going to work. I think sourceCodeLocationInfo
is worth a try.
When preserving whitespace in an element, the final return is removed.