Change to determine parser by extension when parsing non-vue files using multiple parser

Author: ota-meshi

src/common/parser-options.ts

@@ -47,42 +47,40 @@ export function isSFCFile(parserOptions: ParserOptions) {
 }
 
 /**
- * Gets the script parser name from the given SFC document fragment.
+ * Gets the script parser name from the given parser lang.
  */
 export function getScriptParser(
     parser: boolean | string | Record<string, string | undefined> | undefined,
-    doc: VDocumentFragment | null,
-    block: "script" | "template",
+    getParserLang: () => string | null | Iterable<string | null>,
 ): string | undefined {
     if (parser && typeof parser === "object") {
-        if (block === "template") {
-            const parserForTemplate = parser["<template>"]
-            if (typeof parserForTemplate === "string") {
-                return parserForTemplate
-            }
-        }
-        const lang = getScriptLang()
-        if (lang) {
-            const parserForLang = parser[lang]
+        const parserLang = getParserLang()
+        const parserLangs =
+            parserLang == null
+                ? []
+                : typeof parserLang === "string"
+                ? [parserLang]
+                : parserLang
+        for (const lang of parserLangs) {
+            const parserForLang = lang && parser[lang]
             if (typeof parserForLang === "string") {
                 return parserForLang
             }
         }
         return parser.js
     }
     return typeof parser === "string" ? parser : undefined
+}
 
-    function getScriptLang() {
-        if (doc) {
-            const scripts = doc.children.filter(isScriptElement)
-            const script =
-                scripts.length === 2
-                    ? scripts.find(isScriptSetupElement)
-                    : scripts[0]
-            if (script) {
-                return getLang(script)
-            }
+export function getParserLangFromSFC(doc: VDocumentFragment): string | null {
+    if (doc) {
+        const scripts = doc.children.filter(isScriptElement)
+        const script =
+            (scripts.length === 2 && scripts.find(isScriptSetupElement)) ||
+            scripts[0]
+        if (script) {
+            return getLang(script)
         }
-        return null
     }
+    return null
 }

src/html/parser.ts

@@ -46,7 +46,11 @@ import type {
 import { IntermediateTokenizer } from "./intermediate-tokenizer"
 import type { Tokenizer } from "./tokenizer"
 import type { ParserOptions } from "../common/parser-options"
-import { isSFCFile, getScriptParser } from "../common/parser-options"
+import {
+    isSFCFile,
+    getScriptParser,
+    getParserLangFromSFC,
+} from "../common/parser-options"
 
 const DIRECTIVE_NAME = /^(?:v-|[.:@#]).*[^.:@#]$/u
 const DT_DD = /^d[dt]$/u
@@ -279,20 +283,24 @@ export class Parser {
         this.popElementStackUntil(0)
         propagateEndLocation(this.document)
 
+        const doc = this.document
+
         const parserOptions = {
             ...this.baseParserOptions,
             parser: getScriptParser(
                 this.baseParserOptions.parser,
-                this.document,
-                "template",
+                function* () {
+                    yield "<template>"
+                    yield getParserLangFromSFC(doc)
+                },
             ),
         }
         for (const proc of this.postProcessesForScript) {
             proc(parserOptions)
         }
         this.postProcessesForScript = []
 
-        return this.document
+        return doc
     }
 
     /**

src/index.ts

@@ -10,7 +10,7 @@ import { HTMLParser, HTMLTokenizer } from "./html"
 import { parseScript, parseScriptElement } from "./script"
 import * as services from "./parser-services"
 import type { ParserOptions } from "./common/parser-options"
-import { getScriptParser } from "./common/parser-options"
+import { getScriptParser, getParserLangFromSFC } from "./common/parser-options"
 import { parseScriptSetupElements } from "./script-setup"
 import { LinesAndColumns } from "./common/lines-and-columns"
 import type { VElement } from "./ast"
@@ -64,7 +64,11 @@ export function parseForESLint(
         result = parseScript(code, {
             ...options,
             ecmaVersion: options.ecmaVersion || DEFAULT_ECMA_VERSION,
-            parser: getScriptParser(options.parser, null, "script"),
+            parser: getScriptParser(options.parser, () =>
+                (path.extname(options.filePath || "unknown.js") || "")
+                    // remove dot
+                    .slice(1),
+            ),
         })
         document = null
         locationCalculator = null
@@ -94,7 +98,9 @@ export function parseForESLint(
                 ? Object.assign(template, concreteInfo)
                 : undefined
 
-        const scriptParser = getScriptParser(options.parser, rootAST, "script")
+        const scriptParser = getScriptParser(options.parser, () =>
+            getParserLangFromSFC(rootAST),
+        )
         let scriptSetup: VElement | undefined
         if (skipParsingScript || !scripts.length) {
             result = parseScript("", {
@@ -126,7 +132,10 @@ export function parseForESLint(
             const styles = rootAST.children.filter(isStyleElement)
             parseStyleElements(styles, locationCalculator, {
                 ...options,
-                parser: getScriptParser(options.parser, rootAST, "template"),
+                parser: getScriptParser(options.parser, function* () {
+                    yield "<template>"
+                    yield getParserLangFromSFC(rootAST)
+                }),
             })
         }
 

test/fixtures/typed.ts

@@ -0,0 +1,9 @@
+interface Data {
+    greeting: string
+}
+
+export default {
+    data(): Data {
+        return {greeting: "Hello"}
+    },
+}

test/index.js

@@ -291,6 +291,27 @@ describe("Basic tests", () => {
 
                 assert.deepStrictEqual(messages, [])
             })
+
+            it("should notify no error with multiple parser with '@typescript-eslint/parser'", async () => {
+                const cli = new ESLint({
+                    cwd: FIXTURE_DIR,
+                    overrideConfig: {
+                        env: { es6: true, node: true },
+                        parser: PARSER_PATH,
+                        parserOptions: {
+                            parser: {
+                                ts: "@typescript-eslint/parser",
+                            },
+                        },
+                        rules: { semi: ["error", "never"] },
+                    },
+                    useEslintrc: false,
+                })
+                const report = await cli.lintFiles(["typed.ts"])
+                const messages = report[0].messages
+
+                assert.deepStrictEqual(messages, [])
+            })
         }
     })