fix(compile-vapor): optimize always close tag on rightmost

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 61f944aac4683df1101bb405012345519089076e..4ae24a007f1e4a16de9777066069a8c959d766bb 100644 (file)
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -215,7 +215,7 @@ export function render(_ctx) {
 exports[`compile > execution order > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
 "import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div>")
-const t1 = _template("<div><div></div><!><div></div><!><div><button></button>", true)
+const t1 = _template("<div><div></div><!><div></div><!><div><button>", true)
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")

diff --git a/packages/compiler-vapor/__tests__/abbreviation.spec.ts b/packages/compiler-vapor/__tests__/abbreviation.spec.ts
index 130c6202f407d495738e90d5df693639562c81f0..aed4bbfc29d96b6259dec7e235d18a9634a353d8 100644 (file)
--- a/packages/compiler-vapor/__tests__/abbreviation.spec.ts
+++ b/packages/compiler-vapor/__tests__/abbreviation.spec.ts
@@ -131,47 +131,77 @@ test('deeply nested', () => {
 })
 
 test('always close tags', () => {
-  // button always needs closing tag
+  // button always needs closing tag unless on rightmost path
   checkAbbr(
     '<div><button>click</button></div>',
-    '<div><button>click</button>',
+    '<div><button>click',
     '<div><button>click</button></div>',
   )
+  checkAbbr(
+    '<div><button>click</button><span>sibling</span></div>',
+    '<div><button>click</button><span>sibling',
+    '<div><button>click</button><span>sibling</span></div>',
+  )
 
-  // select always needs closing tag
+  // select always needs closing tag unless rightmost
   checkAbbr(
     '<div><select></select></div>',
-    '<div><select></select>',
+    '<div><select>',
     '<div><select></select></div>',
   )
+  checkAbbr(
+    '<div><select></select><span>sibling</span></div>',
+    '<div><select></select><span>sibling',
+    '<div><select></select><span>sibling</span></div>',
+  )
 
-  // table always needs closing tag
+  // table always needs closing tag unless rightmost
   checkAbbr(
     '<div><table></table></div>',
-    '<div><table></table>',
+    '<div><table>',
     '<div><table></table></div>',
   )
+  checkAbbr(
+    '<div><table></table><span>sibling</span></div>',
+    '<div><table></table><span>sibling',
+    '<div><table></table><span>sibling</span></div>',
+  )
 
-  // textarea always needs closing tag
+  // textarea always needs closing tag unless rightmost
   checkAbbr(
     '<div><textarea></textarea></div>',
-    '<div><textarea></textarea>',
+    '<div><textarea>',
     '<div><textarea></textarea></div>',
   )
+  checkAbbr(
+    '<div><textarea></textarea><span>sibling</span></div>',
+    '<div><textarea></textarea><span>sibling',
+    '<div><textarea></textarea><span>sibling</span></div>',
+  )
 
-  // template always needs closing tag
+  // template always needs closing tag unless rightmost
   checkAbbr(
     '<div><template></template></div>',
-    '<div><template></template>',
+    '<div><template>',
     '<div><template></template></div>',
   )
+  checkAbbr(
+    '<div><template></template><span>sibling</span></div>',
+    '<div><template></template><span>sibling',
+    '<div><template></template><span>sibling</span></div>',
+  )
 
-  // script always needs closing tag
+  // script always needs closing tag unless rightmost
   checkAbbr(
     '<div><script></script></div>',
-    '<div><script></script>',
+    '<div><script>',
     '<div><script></script></div>',
   )
+  checkAbbr(
+    '<div><script></script><span>sibling</span></div>',
+    '<div><script></script><span>sibling',
+    '<div><script></script><span>sibling</span></div>',
+  )
 
   // without always-close elements, normal abbreviation should work
   checkAbbr(

diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index ffa73a89db6eaa03845014505b9b94a8fc2207c2..d73e70edb88802b8541a0232cad14d5046eb7e54 100644 (file)
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -141,8 +141,8 @@ function canOmitEndTag(
   }
 
   // Elements in the alwaysClose list cannot have their end tags omitted
-  // because the browser's HTML parser has special handling for them
-  if (isAlwaysCloseTag(node.tag)) {
+  // unless they are on the rightmost path.
+  if (isAlwaysCloseTag(node.tag) && !context.isOnRightmostPath) {
     return false
   }