feat(compiler): improve parsing tolerance for language-tools

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

@@ -1918,6 +1918,29 @@ describe('compiler: parse', () => {
     expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
   })
 
+  // With standard HTML parsing, the following input would ignore the slash
+  // and treat "<" and "template" as attributes on the open tag of "Hello",
+  // causing `<template>` to fail to close, and `<script>` being parsed as its
+  // child. This is would never be intended in actual templates, but is a common
+  // intermediate state from user input when parsing for IDE support. We want
+  // the `<script>` to be at root-level to keep the SFC structure stable for
+  // Volar to do incremental computations.
+  test('tag termination handling for IDE', () => {
+    const spy = vi.fn()
+    const ast = baseParse(
+      `<template><Hello\n</template><script>console.log(1)</script>`,
+      {
+        onError: spy
+      }
+    )
+    //
+    expect(ast.children.length).toBe(2)
+    expect(ast.children[1]).toMatchObject({
+      type: NodeTypes.ELEMENT,
+      tag: 'script'
+    })
+  })
+
   describe('decodeEntities option', () => {
     test('use decode by default', () => {
       const ast: any = baseParse('&gt;&lt;&amp;&apos;&quot;&foo;')

packages/compiler-core/src/tokenizer.ts

@@ -301,6 +301,10 @@ export default class Tokenizer {
     }
   }
 
+  private peek() {
+    return this.buffer.charCodeAt(this.index + 1)
+  }
+
   private stateText(c: number): void {
     if (c === CharCodes.Lt) {
       if (this.index > this.sectionStart) {
@@ -627,12 +631,16 @@ export default class Tokenizer {
       this.sectionStart = this.index + 1
     } else if (c === CharCodes.Slash) {
       this.state = State.InSelfClosingTag
-      if (
-        (__DEV__ || !__BROWSER__) &&
-        this.buffer.charCodeAt(this.index + 1) !== CharCodes.Gt
-      ) {
+      if ((__DEV__ || !__BROWSER__) && this.peek() !== CharCodes.Gt) {
         this.cbs.onerr(ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG, this.index)
       }
+    } else if (c === CharCodes.Lt && this.peek() === CharCodes.Slash) {
+      // special handling for </ appearing in open tag state
+      // this is different from standard HTML parsing but makes practical sense
+      // especially for parsing intermedaite input state in IDEs.
+      this.cbs.onopentagend(this.index)
+      this.state = State.BeforeTagName
+      this.sectionStart = this.index
     } else if (!isWhitespace(c)) {
       if ((__DEV__ || !__BROWSER__) && c === CharCodes.Eq) {
         this.cbs.onerr(
@@ -644,10 +652,7 @@ export default class Tokenizer {
     }
   }
   private handleAttrStart(c: number) {
-    if (
-      c === CharCodes.LowerV &&
-      this.buffer.charCodeAt(this.index + 1) === CharCodes.Dash
-    ) {
+    if (c === CharCodes.LowerV && this.peek() === CharCodes.Dash) {
       this.state = State.InDirName
       this.sectionStart = this.index
     } else if (