perf(compiler-vapor): template abbreviation of end tag

packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap

@@ -2399,6 +2399,7 @@ exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></templa
     {
       "children": [],
       "codegenNode": undefined,
+      "isShouldSelfClosing": true,
       "loc": {
         "end": {
           "column": 25,
@@ -4549,6 +4550,7 @@ exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></templat
         },
       ],
       "codegenNode": undefined,
+      "isShouldSelfClosing": true,
       "loc": {
         "end": {
           "column": 27,

packages/compiler-core/__tests__/parse.spec.ts

@@ -476,6 +476,7 @@ describe('compiler: parse', () => {
         type: NodeTypes.ELEMENT,
         ns: Namespaces.HTML,
         tag: 'div',
+        isShouldSelfClosing: true,
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],

packages/compiler-core/src/ast.ts

@@ -70,6 +70,7 @@ export enum ElementTypes {
 export interface Node {
   type: NodeTypes
   loc: SourceLocation
+  isShouldSelfClosing?: boolean
 }
 
 // The node's range. The `start` is inclusive and `end` is exclusive.

packages/compiler-core/src/parser.ts

@@ -151,14 +151,17 @@ const tokenizer = new Tokenizer(stack, {
     endOpenTag(end)
   },
 
-  onclosetag(start, end) {
+  onclosetag(start, end, isLastElement) {
     const name = getSlice(start, end)
     if (!currentOptions.isVoidTag(name)) {
       let found = false
       for (let i = 0; i < stack.length; i++) {
         const e = stack[i]
         if (e.tag.toLowerCase() === name.toLowerCase()) {
           found = true
+          if (isLastElement) {
+            e.isShouldSelfClosing = true
+          }
           if (i > 0) {
             emitError(ErrorCodes.X_MISSING_END_TAG, stack[0].loc.start.offset)
           }

packages/compiler-core/src/tokenizer.ts

@@ -186,7 +186,7 @@ export interface Callbacks {
   onopentagname(start: number, endIndex: number): void
   onopentagend(endIndex: number): void
   onselfclosingtag(endIndex: number): void
-  onclosetag(start: number, endIndex: number): void
+  onclosetag(start: number, endIndex: number, isLastElement: boolean): void
 
   onattribdata(start: number, endIndex: number): void
   onattribentity(char: string, start: number, end: number): void
@@ -246,6 +246,8 @@ export default class Tokenizer {
   public inVPre = false
   /** Record newline positions for fast line / column calculation */
   private newlines: number[] = []
+  // Record current stage
+  private currentStage = ''
 
   private readonly entityDecoder?: EntityDecoder
 
@@ -311,6 +313,7 @@ export default class Tokenizer {
     if (c === CharCodes.Lt) {
       if (this.index > this.sectionStart) {
         this.cbs.ontext(this.sectionStart, this.index)
+        this.currentStage = 'stateText'
       }
       this.state = State.BeforeTagName
       this.sectionStart = this.index
@@ -608,8 +611,13 @@ export default class Tokenizer {
   }
   private stateInClosingTagName(c: number): void {
     if (c === CharCodes.Gt || isWhitespace(c)) {
-      this.cbs.onclosetag(this.sectionStart, this.index)
+      this.cbs.onclosetag(
+        this.sectionStart,
+        this.index,
+        this.currentStage === 'stateInTagName',
+      )
       this.sectionStart = -1
+      this.currentStage = 'InClosingTagName'
       this.state = State.AfterClosingTagName
       this.stateAfterClosingTagName(c)
     }
@@ -619,6 +627,7 @@ export default class Tokenizer {
     if (c === CharCodes.Gt) {
       this.state = State.Text
       this.sectionStart = this.index + 1
+      this.currentStage = 'stateAfterClosingTagName'
     }
   }
   private stateBeforeAttrName(c: number): void {
@@ -927,78 +936,97 @@ export default class Tokenizer {
       switch (this.state) {
         case State.Text: {
           this.stateText(c)
+
           break
         }
         case State.InterpolationOpen: {
           this.stateInterpolationOpen(c)
+          this.currentStage = 'stateInterpolationOpen'
           break
         }
         case State.Interpolation: {
           this.stateInterpolation(c)
+          this.currentStage = 'stateInterpolation'
           break
         }
         case State.InterpolationClose: {
           this.stateInterpolationClose(c)
+          this.currentStage = 'stateInterpolationClose'
           break
         }
         case State.SpecialStartSequence: {
           this.stateSpecialStartSequence(c)
+          this.currentStage = 'stateSpecialStartSequence'
           break
         }
         case State.InRCDATA: {
           this.stateInRCDATA(c)
+          this.currentStage = 'stateInRCDATA'
           break
         }
         case State.CDATASequence: {
           this.stateCDATASequence(c)
+          this.currentStage = 'stateCDATASequence'
           break
         }
         case State.InAttrValueDq: {
           this.stateInAttrValueDoubleQuotes(c)
+          this.currentStage = 'stateInAttrValueDoubleQuotes'
           break
         }
         case State.InAttrName: {
           this.stateInAttrName(c)
+          this.currentStage = 'stateInAttrName'
           break
         }
         case State.InDirName: {
           this.stateInDirName(c)
+          this.currentStage = 'stateInDirName'
           break
         }
         case State.InDirArg: {
           this.stateInDirArg(c)
+          this.currentStage = 'stateInDirArg'
           break
         }
         case State.InDirDynamicArg: {
           this.stateInDynamicDirArg(c)
+          this.currentStage = 'stateInDynamicDirArg'
           break
         }
         case State.InDirModifier: {
           this.stateInDirModifier(c)
+          this.currentStage = 'stateInDirModifier'
           break
         }
         case State.InCommentLike: {
           this.stateInCommentLike(c)
+          this.currentStage = 'stateInCommentLike'
           break
         }
         case State.InSpecialComment: {
           this.stateInSpecialComment(c)
+          this.currentStage = 'stateInSpecialComment'
           break
         }
         case State.BeforeAttrName: {
           this.stateBeforeAttrName(c)
+          this.currentStage = 'stateBeforeAttrName'
           break
         }
         case State.InTagName: {
           this.stateInTagName(c)
+          this.currentStage = 'stateInTagName'
           break
         }
         case State.InSFCRootTagName: {
           this.stateInSFCRootTagName(c)
+          this.currentStage = 'stateInSFCRootTagName'
           break
         }
         case State.InClosingTagName: {
           this.stateInClosingTagName(c)
+
           break
         }
         case State.BeforeTagName: {
@@ -1007,14 +1035,17 @@ export default class Tokenizer {
         }
         case State.AfterAttrName: {
           this.stateAfterAttrName(c)
+          this.currentStage = 'stateAfterAttrName'
           break
         }
         case State.InAttrValueSq: {
           this.stateInAttrValueSingleQuotes(c)
+          this.currentStage = 'stateInAttrValueSingleQuotes'
           break
         }
         case State.BeforeAttrValue: {
           this.stateBeforeAttrValue(c)
+          this.currentStage = 'stateBeforeAttrValue'
           break
         }
         case State.BeforeClosingTagName: {
@@ -1023,42 +1054,52 @@ export default class Tokenizer {
         }
         case State.AfterClosingTagName: {
           this.stateAfterClosingTagName(c)
+
           break
         }
         case State.BeforeSpecialS: {
           this.stateBeforeSpecialS(c)
+          this.currentStage = 'stateBeforeSpecialS'
           break
         }
         case State.BeforeSpecialT: {
           this.stateBeforeSpecialT(c)
+          this.currentStage = 'stateBeforeSpecialT'
           break
         }
         case State.InAttrValueNq: {
           this.stateInAttrValueNoQuotes(c)
+          this.currentStage = 'stateInAttrValueNoQuotes'
           break
         }
         case State.InSelfClosingTag: {
           this.stateInSelfClosingTag(c)
+          this.currentStage = 'stateInSelfClosingTag'
           break
         }
         case State.InDeclaration: {
           this.stateInDeclaration(c)
+          this.currentStage = 'stateInDeclaration'
           break
         }
         case State.BeforeDeclaration: {
           this.stateBeforeDeclaration(c)
+          this.currentStage = 'stateBeforeDeclaration'
           break
         }
         case State.BeforeComment: {
           this.stateBeforeComment(c)
+          this.currentStage = 'stateBeforeComment'
           break
         }
         case State.InProcessingInstruction: {
           this.stateInProcessingInstruction(c)
+          this.currentStage = 'stateInProcessingInstruction'
           break
         }
         case State.InEntity: {
           this.stateInEntity()
+          this.currentStage = 'stateInEntity'
           break
         }
       }

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -11,6 +11,16 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > close tag 1`] = `
+"import { template as _template } from 'vue/vapor';
+const t0 = _template("<div><span><div /></span></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compile > custom directive > basic 1`] = `
 "import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, template as _template } from 'vue/vapor';
 const t0 = _template("<div></div>")
@@ -206,3 +216,23 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compile > two close tag  1`] = `
+"import { template as _template } from 'vue/vapor';
+const t0 = _template("<div><span /><span /></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compile > two close tag with text 1`] = `
+"import { template as _template } from 'vue/vapor';
+const t0 = _template("<div><span>ddd</span><span /></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;

packages/compiler-vapor/__tests__/abbreviation.spec.ts

@@ -1,15 +1,32 @@
+/*
+ * @Date: 2024-04-21 15:29:37
+ * @Description:
+ */
 /**
  * @vitest-environment jsdom
  */
-
+import {
+  compile as _compile,
+  transformChildren,
+  transformElement,
+  transformText,
+} from '../src'
+import { makeCompile } from './transforms/_utils'
 const parser = new DOMParser()
 
 function parseHTML(html: string) {
   return parser.parseFromString(html, 'text/html').body.innerHTML
 }
 
+const compileWithElementTransform = makeCompile({
+  nodeTransforms: [transformElement, transformChildren, transformText],
+})
+
 function checkAbbr(template: string, abbrevation: string, expected: string) {
   // TODO do some optimzations to make sure template === abbrevation
+  const { ir } = compileWithElementTransform(template)
+  const templateOfIr = ir.template
+  abbrevation = templateOfIr.reduce((cur, next) => cur + next)
   expect(parseHTML(abbrevation)).toBe(expected)
 }
 

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -22,6 +22,23 @@ describe('compile', () => {
     expect(code).matchSnapshot()
   })
 
+  test('close tag', () => {
+    const code = compile(`<div><span><div></div></span></div>`)
+    expect(code).matchSnapshot()
+    expect(code).contains(JSON.stringify('<div><span><div /></span></div>'))
+  })
+  test('two close tag ', () => {
+    const code = compile(`<div><span></span><span></span></div>`)
+    expect(code).matchSnapshot()
+    expect(code).contains(JSON.stringify('<div><span /><span /></div>'))
+  })
+
+  test('two close tag with text', () => {
+    const code = compile(`<div><span>ddd</span><span></span></div>`)
+    expect(code).matchSnapshot()
+    expect(code).contains(JSON.stringify('<div><span>ddd</span><span /></div>'))
+  })
+
   test('dynamic root', () => {
     const code = compile(`{{ 1 }}{{ 2 }}`)
     expect(code).matchSnapshot()

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

@@ -159,11 +159,21 @@ function transformNativeElement(
       }
     }
   }
+  const { node } = context
+
+  if (node.isShouldSelfClosing) {
+    template += context.childrenTemplate.join('')
+  } else {
+    template += `>` + context.childrenTemplate.join('')
+  }
 
-  template += `>` + context.childrenTemplate.join('')
   // TODO remove unnecessary close tag, e.g. if it's the last element of the template
   if (!isVoidTag(tag)) {
-    template += `</${tag}>`
+    if (node.isShouldSelfClosing) {
+      template += ` />`
+    } else {
+      template += `</${tag}>`
+    }
   }
 
   if (