"<" in v-if directive might be treated as closing tag of elements using self-closing tags

[DawidKopys]

Steps to reproduce:

1. Create FooBar.vue file:

<template>
  <div>
    <img v-if="2 > 1"/>
    <p>I am a paragraph.</p>
  </div>
</template>

3. Attempt to modify FooBar.vue with FooBar.mod.ts:

import type { TemplateMod } from '@creativestyle/kombinator'

export default function (withComponent: TemplateMod) {
  const t = withComponent('FooBar')

  const elementCode = t.templateModificator
    .findByTag('img')
    .getElementCode()

  console.log('img elementCode :', elementCode)

  t.templateModificator
    .findByTag('img')
    .insertAfter('<h1>bajojajo</h1>')

  t.saveModifiedTemplate()
}

4. Run kombinator

Expected Result:

1. In the terminal when kombinator was ran, developer should see below console.log’s output:

img elementCode : <img v-if="2 > 1"/>

2. Kombinator should generate file FooBar.vue with below content:

<template>
  <div>
    <img v-if="2 > 1"/><h1>bajojajo</h1>
    <p>I am a paragraph.</p>
  </div>
</template><!-- Kombinator: FooBar.mod.ts:16:5 -->

Actual Result:

1. In the terminal when kombinator was ran, developer sees below console.log’s output:

img elementCode : <img v-if="2 > 1"/>                                                       15:06:40
    <p>I am a paragraph.</p>

2. Kombinator generates file FooBar.vue with below content:

<template>
<div>
    <img v-if="2 > 1"/>
    <p>I am a paragraph.</p><h1>bajojajo</h1>
  </div>
</template><!-- Kombinator: FooBar.mod.ts:16:5 -->

Technical hints:

1. it appears that the issue is only there for elements with self closing tags, eg:

<Badge v-if="2 > 1"/>
<img v-if="2 > 1"/>

2. it looks that elements without closing tags work fine, for example, if we tried modifying component with below markup:

<h6 v-if="2 > 1">test</h6>

… then the kombinator would handle it properly

3. this is most likely not only a problem for v-if directives