fix(compiler-vapor): deal with formatting elements and ambiguous cases

Author: cyyynthia

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -1,5 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: element transform > b in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><b></b></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > MathML 1`] = `
 "import { template as _template } from 'vue';
 const t0 = _template("<math><mrow><mi>x</mi></mrow></math>", true, 2)
@@ -477,7 +487,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props + children 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span><main><b></b><div><div><span></span><span>", true)
+const t0 = _template("<div id=\\"foo\\"><span><b></b></span><main><b></b><div><div><span></span><span>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -520,6 +530,26 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > pure nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><div></div></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > span in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><span></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue';
 const t0 = _template("<div id=\\"foo\\" class=\\"bar\\">", true)

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -602,11 +602,47 @@ describe('compiler: element transform', () => {
 
   test('props + children', () => {
     const { code, ir } = compileWithElementTransform(
-      `<div id="foo"><span/><main><b/><div><div><span/><span/></div></div></main></div>`,
+      `<div id="foo"><span><b/></span><main><b/><div><div><span/><span/></div></div></main></div>`,
     )
 
     const template =
-      '<div id="foo"><span></span><main><b></b><div><div><span></span><span>'
+      '<div id="foo"><span><b></b></span><main><b></b><div><div><span></span><span>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('span in nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><span/></div><div/></div>`,
+    )
+
+    const template = '<div><div><span></div><div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('b in nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><b/></div><div/></div>`,
+    )
+
+    const template = '<div><div><b></b></div><div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('pure nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><div/></div><div/></div>`,
+    )
+
+    const template = '<div><div><div></div></div><div>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect([...ir.template.keys()]).toMatchObject([template])

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -21,6 +21,7 @@ import {
   capitalize,
   extend,
   isBuiltInDirective,
+  isFormattingTag,
   isVoidTag,
   makeMap,
 } from '@vue/shared'
@@ -77,14 +78,43 @@ export const transformElement: NodeTransform = (node, context) => {
       getEffectIndex,
     )
 
-    let { index, parent } = context
-    const isLastChild =
-      parent &&
-      parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
-        .length ===
-        index + 1
+    let { index, parent, block } = context
+    let isLastChild = true
+    const checkIsLastChild = () => {
+      isLastChild &&=
+        !!parent &&
+        (block !== parent.block ||
+          parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
+            .length ===
+            index + 1)
+    }
 
+    checkIsLastChild()
     const singleRoot = isSingleRoot(context)
+
+    // If it is a formatting tag, close tag is absolutely required if it's not on the right-most path of the tree
+    // => https://html.spec.whatwg.org/multipage/parsing.html#reconstruct-the-active-formatting-elements
+    // If the parent has the same tag, then close tag is required if it's not on the right-most path of the tree
+    // => The parent's close tag will close the child otherwise; disambiguation is needed
+    if (
+      isFormattingTag(node.tag) ||
+      (parent &&
+        parent.node.type === NodeTypes.ELEMENT &&
+        node.tag === parent.node.tag)
+    ) {
+      while (
+        isLastChild &&
+        parent &&
+        parent.parent &&
+        block === parent.parent.block &&
+        parent.node.type === NodeTypes.ELEMENT
+      ) {
+        index = parent.index
+        parent = parent.parent
+        checkIsLastChild()
+      }
+    }
+
     if (isComponent) {
       transformComponentElement(
         node as ComponentNode,

packages/shared/src/domTagConfig.ts

@@ -38,6 +38,9 @@ const MATH_TAGS =
 const VOID_TAGS =
   'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
 
+// https://html.spec.whatwg.org/multipage/parsing.html#formatting
+const FORMATTING_TAGS = 'a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,u'
+
 /**
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
@@ -62,3 +65,9 @@ export const isMathMLTag: (key: string) => boolean =
  */
 export const isVoidTag: (key: string) => boolean =
   /*@__PURE__*/ makeMap(VOID_TAGS)
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `__DEV__` flag.
+ */
+export const isFormattingTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(FORMATTING_TAGS)