From 30ba8daeb24e6d030610770dcb1f27a4246eaef2 Mon Sep 17 00:00:00 2001
From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 24 Nov 2023 14:59:10 +0800
Subject: [PATCH] fix: self closing tag

---
 .../__tests__/__snapshots__/basic.test.ts.snap         |  2 +-
 packages/compiler-vapor/__tests__/fixtures/counter.vue |  1 +
 packages/compiler-vapor/src/transform.ts               | 10 ++++++----
 playground/src/App.vue                                 |  4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap
index 90e3c5a8c8..7a2ed91f73 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/basic.test.ts.snap
+++ b/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>'
diff --git a/packages/compiler-vapor/__tests__/fixtures/counter.vue b/packages/compiler-vapor/__tests__/fixtures/counter.vue
index 9ef7a97841..14d9d669e9 100644
--- a/packages/compiler-vapor/__tests__/fixtures/counter.vue
+++ 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>
diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
index a7bd65e2b1..4d2bde95e8 100644
--- a/packages/compiler-vapor/src/transform.ts
+++ b/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(
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 5dbfb1f55b..893205fc99 100644
--- a/playground/src/App.vue
+++ b/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>
 
-- 
2.47.2