tjw-lint / vue3-snapshot-serializer

Vitest/Jest Snapshot Serializer for Vue 3 components
https://TheJaredWilcurt.com/vue-snapshot-serializer
MIT License
3 stars 2 forks source link

Preserve Whitespace bug, missing final returns #39

Open TheJaredWilcurt opened 2 weeks ago

TheJaredWilcurt commented 2 weeks ago

When preserving whitespace in an element, the final return is removed.

preserve-whitespace-bug

mauryapari commented 1 week ago

Was on vacation. Will pick this up next.

mauryapari commented 1 week ago

@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.

mauryapari commented 1 week ago

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.

TheJaredWilcurt commented 1 week ago

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.