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 90e3c5a8c8991958c18c7cc31a2b21c73ff70b99..7a2ed91f7300f7992ad4acf5693f56480a47b1bd 100644 (file)
--- 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 9ef7a97841b7a2715db733a57102ba7f0f8a49d8..14d9d669e953528c7a5870ab13049813aaee55a6 100644 (file)
--- 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 a7bd65e2b1af70f042c8ef685afb395f60a647ab..4d2bde95e82582b0ed2edfe2390bb788d1635751 100644 (file)
--- 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 5dbfb1f55b45188e39a5569d39745fa0931a8664..893205fc99dd5ecacd68f480d9dfdade11c60e2c 100644 (file)
--- 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>