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>