fix: self closing tag

packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap

@@ -4,7 +4,7 @@ exports[`basic 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { watchEffect } from 'vue'
 import { template, insert, setText, on, setHtml } from 'vue/vapor'
-const t0 = template(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div/>\`)
+const t0 = template(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div></div><input type=\\"text\\">\`)
 import { ref, computed } from 'vue'
 
 const html = '<b>HTML</b>'

packages/compiler-vapor/__tests__/fixtures/counter.vue

@@ -15,4 +15,5 @@ const html = '<b>HTML</b>'
   <p>Double: {{ double }}</p>
   <button @click="increment">Increment</button>
   <div v-html="html" />
+  <input type="text" />
 </template>

packages/compiler-vapor/src/transform.ts

@@ -16,6 +16,7 @@ import {
   type RootIRNode,
   IRNodeTypes,
 } from './ir'
+import { isVoidTag } from '@vue/shared'
 
 export interface TransformContext<T extends Node = Node> {
   node: T
@@ -211,13 +212,14 @@ function transformElement(ctx: TransformContext<ElementNode>) {
   ctx.template += `<${tag}`
 
   props.forEach((prop) => transformProp(prop, ctx))
-  ctx.template += node.isSelfClosing ? '/>' : `>`
+  ctx.template += `>`
 
   if (children.length) transformChildren(ctx)
 
-  // TODO remove unnecessary close tag
-  // TODO: [bug] self closing <div />
-  if (!node.isSelfClosing) ctx.template += `</${tag}>`
+  // TODO remove unnecessary close tag, e.g. if it's the last element of the template
+  if (!node.isSelfClosing || !isVoidTag(tag)) {
+    ctx.template += `</${tag}>`
+  }
 }
 
 function transformInterpolation(

playground/src/App.vue

@@ -29,8 +29,8 @@ globalThis.html = html
       <button @click="inc">inc</button>
       <button @click="dec">dec</button>
     </div>
-    <div v-html="html"></div>
-    <div v-text="html"></div>
+    <div v-html="html" />
+    <div v-text="html" />
   </div>
 </template>