From: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Date: Fri, 24 Nov 2023 06:59:10 +0000 (+0800)
Subject: fix: self closing tag
X-Git-Tag: v3.6.0-alpha.1~16^2~828
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=30ba8daeb24e6d030610770dcb1f27a4246eaef2;p=thirdparty%2Fvuejs%2Fcore.git

fix: self closing tag
---

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>