feat: introduce Vue language

.changeset/seven-hornets-jump.md

@@ -0,0 +1,6 @@
+---
+"@flint.fyi/vue-language": minor
+"@flint.fyi/vue": minor
+---
+
+Introduce Vue language.

cspell.json

@@ -43,6 +43,7 @@
 		"bday",
 		"BDFL",
 		"bradzacher",
+		"codegen",
 		"codemod",
 		"contentinfo",
 		"deoptimizations",

knip.json

@@ -19,6 +19,9 @@
 				"sharp",
 				"zod"
 			]
+		},
+		"packages/vue": {
+			"ignoreDependencies": ["vue"]
 		}
 	}
 }

packages/typescript-language/package.json

@@ -13,7 +13,7 @@
 		"name": "JoshuaKGoldberg",
 		"email": "npm@joshuakgoldberg.com"
 	},
-	"sideEffects": false,
+	"sideEffects": true,
 	"type": "module",
 	"exports": {
 		".": "./src/index.ts"

packages/typescript-language/src/convertTypeScriptDiagnosticToLanguageFileDiagnostic.ts

@@ -94,6 +94,7 @@ function displayFilename(name: string) {
 	if (name.startsWith("./")) {
 		return name.slice(2);
 	}
+	// TODO: use LinterHost.getCurrentDirectory()
 	return name.slice(process.cwd().length + 1);
 }
 

packages/volar-language/package.json

@@ -13,7 +13,7 @@
 		"name": "JoshuaKGoldberg",
 		"email": "npm@joshuakgoldberg.com"
 	},
-	"sideEffects": false,
+	"sideEffects": true,
 	"type": "module",
 	"exports": {
 		".": "./src/index.ts"

packages/vue-language/README.md

@@ -0,0 +1,9 @@
+<h1 align="center"><code>@flint.fyi/vue-language</code></h1>
+
+<p align="center">
+	[Experimental] Vue.js language for Flint.
+	❤️‍🔥
+</p>
+
+This is an internal package for Flint.
+Documentation will eventually be added.

packages/vue-language/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@flint.fyi/vue-language",
+	"version": "0.0.1",
+	"description": "[Experimental] Vue.js language for Flint.",
+	"homepage": "https://flint.fyi",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/flint-fyi/flint.git",
+		"directory": "packages/vue-language"
+	},
+	"license": "MIT",
+	"author": {
+		"name": "JoshuaKGoldberg",
+		"email": "npm@joshuakgoldberg.com"
+	},
+	"sideEffects": true,
+	"type": "module",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"files": [
+		"lib/",
+		"!lib/**/*.map"
+	],
+	"scripts": {
+		"test": "vitest --project vue-language"
+	},
+	"dependencies": {
+		"@flint.fyi/ts-patch": "workspace:^",
+		"@flint.fyi/typescript-language": "workspace:^",
+		"@flint.fyi/utils": "workspace:^",
+		"@flint.fyi/volar-language": "workspace:^",
+		"@volar/language-core": "2.4.28",
+		"@vue/compiler-dom": "^3.5.0",
+		"@vue/language-core": "3.2.1",
+		"typescript": "^5.9.0 || ^6.0.0"
+	},
+	"devDependencies": {
+		"@flint.fyi/core": "workspace:^",
+		"tsdown": "catalog:dev",
+		"vitest": "catalog:dev"
+	},
+	"engines": {
+		"node": ">=24.0.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"exports": {
+			".": "./lib/index.js"
+		}
+	}
+}

packages/vue-language/src/extractTemplateDirectives.ts

@@ -0,0 +1,56 @@
+import type { ExtractedDirective } from "@flint.fyi/typescript-language";
+import { nullThrows } from "@flint.fyi/utils";
+import {
+	NodeTypes,
+	type RootNode,
+	type TemplateChildNode,
+} from "@vue/compiler-dom";
+
+export function extractTemplateDirectives(ast: RootNode) {
+	const directives: ExtractedDirective[] = [];
+
+	function visitTemplate(elem: TemplateChildNode) {
+		if (elem.type === NodeTypes.ELEMENT) {
+			for (const child of elem.children) {
+				visitTemplate(child);
+			}
+			return;
+		}
+		if (elem.type !== NodeTypes.COMMENT) {
+			return;
+		}
+		const match = /\s*flint-(\S+)(?:\s+(.+))?/.exec(elem.content);
+		if (match == null) {
+			return;
+		}
+		const [, type, selection] = match;
+		directives.push({
+			range: {
+				begin: {
+					column: elem.loc.start.column - 1,
+					line: elem.loc.start.line - 1,
+					raw: elem.loc.start.offset,
+				},
+				end: {
+					column: elem.loc.end.column - 1,
+					line: elem.loc.end.line - 1,
+					raw: elem.loc.end.offset,
+				},
+			},
+			selection: nullThrows(
+				selection,
+				"Expected RegExp to provide second capturing group",
+			),
+			type: nullThrows(
+				type,
+				"Expected RegExp to provide first capturing group",
+			),
+		});
+	}
+
+	for (const child of ast.children) {
+		visitTemplate(child);
+	}
+
+	return directives;
+}

packages/vue-language/src/index.ts

@@ -0,0 +1 @@
+export { vueLanguage } from "./language.ts";

packages/vue-language/src/language.ts

@@ -0,0 +1,128 @@
+import { setTSExtraSupportedExtensions } from "@flint.fyi/ts-patch";
+import { assert, nullThrows } from "@flint.fyi/utils";
+import { createVolarBasedLanguage } from "@flint.fyi/volar-language";
+import type { Mapper as VolarMapper } from "@volar/language-core";
+import { NodeTypes, type RootNode, parse as vueParse } from "@vue/compiler-dom";
+import {
+	createVueLanguagePlugin,
+	createParsedCommandLine as createVueParsedCommandLine,
+	createParsedCommandLineByJson as createVueParsedCommandLineByJson,
+	tsCodegen,
+	VueVirtualCode,
+} from "@vue/language-core";
+
+import { extractTemplateDirectives } from "./extractTemplateDirectives.ts";
+import { vueParsingErrorsToLanguageDiagnostics } from "./vueParsingErrorsToLanguageDiagnostics.ts";
+
+setTSExtraSupportedExtensions([".vue"]);
+
+export interface VueServices {
+	vue: {
+		codegen: VueCodegen;
+		map: VolarMapper;
+		sfc: RootNode;
+		virtualCode: VueVirtualCode;
+	};
+}
+
+type VueCodegen =
+	typeof tsCodegen extends WeakMap<WeakKey, infer V> ? V : never;
+
+export const vueLanguage = createVolarBasedLanguage<VueServices>(
+	(ts, options) => {
+		const { configFilePath } = options.options;
+		const host = options.host
+			? {
+					...options.host,
+					useCaseSensitiveFileNames: options.host.useCaseSensitiveFileNames(),
+				}
+			: ts.sys;
+		const vueCompilerOptions = (
+			typeof configFilePath === "string"
+				? createVueParsedCommandLine(
+						ts,
+						host,
+						configFilePath.replaceAll("\\", "/"),
+					)
+				: createVueParsedCommandLineByJson(
+						ts,
+						host,
+						host.getCurrentDirectory(),
+						{},
+					)
+		).vueOptions;
+
+		return {
+			createFile({
+				data,
+				serviceScript,
+				sourceFile,
+				sourceScript,
+				volarLanguage,
+			}) {
+				const sourceText = sourceScript.snapshot.getText(
+					0,
+					sourceScript.snapshot.getLength(),
+				);
+				const virtualCode = sourceScript.generated.root;
+				assert(
+					virtualCode instanceof VueVirtualCode,
+					"Expected sourceScript.generated.root to be VueServiceCode",
+				);
+
+				const codegen = nullThrows(
+					tsCodegen.get(virtualCode.sfc),
+					`tsCodegen for ${data.filePathAbsolute} is undefined`,
+				);
+
+				const map = volarLanguage.maps.get(serviceScript.code, sourceScript);
+
+				const sfcAst = vueParse(sourceText, {
+					comments: true,
+					expressionPlugins: ["typescript"],
+					onError: () => {
+						// We ignore errors because virtual code already provides them,
+						// and it also provides them with sourceText-based locations,
+						// so we don't have to remap them. Oh, and it also contains errors from
+						// other blocks rather than only <template> as well.
+						// If we don't provide this callback, @vue/compiler-core will throw.
+					},
+					parseMode: "html",
+				});
+
+				return {
+					// TODO: extract directives from other blocks too
+					directives: extractTemplateDirectives(sfcAst),
+					extraContext: {
+						vue: {
+							codegen,
+							map,
+							sfc: sfcAst,
+							virtualCode,
+						},
+					},
+					firstStatementPosition:
+						sfcAst.children.find((c) => c.type !== NodeTypes.COMMENT)?.loc.start
+							.offset ?? sourceText.length,
+					getDiagnostics() {
+						return vueParsingErrorsToLanguageDiagnostics(
+							sourceFile.fileName.startsWith("./")
+								? sourceFile.fileName.slice(2)
+								: // TODO: use LinterHost.getCurrentDirectory()
+									sourceFile.fileName.slice(process.cwd().length + 1),
+							virtualCode.vueSfc?.errors ?? [],
+						);
+					},
+				};
+			},
+			languagePlugins: [
+				createVueLanguagePlugin<string>(
+					ts,
+					options.options,
+					vueCompilerOptions,
+					(id) => id,
+				),
+			],
+		};
+	},
+);

packages/vue-language/src/vueParsingErrorsToLanguageDiagnostics.ts

@@ -0,0 +1,23 @@
+import type { LanguageDiagnostics } from "@flint.fyi/core";
+import type { CompilerError } from "@vue/compiler-dom";
+
+export function vueParsingErrorsToLanguageDiagnostics(
+	fileName: string,
+	errors: (CompilerError | SyntaxError)[],
+): LanguageDiagnostics {
+	return errors.map((error) => {
+		let code = "VUE";
+		let loc = "";
+		if ("code" in error) {
+			code += error.code.toString();
+			loc =
+				error.loc != null
+					? `:${error.loc.start.line}:${error.loc.start.column}`
+					: "";
+		}
+		return {
+			code,
+			text: `${fileName}${loc} - ${code}: ${error.name} - ${error.message}`,
+		};
+	});
+}

packages/vue-language/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"include": [],
+	"references": [
+		{ "path": "./tsconfig.src.json" },
+		{ "path": "./tsconfig.test.json" }
+	]
+}

packages/vue-language/tsconfig.src.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "node_modules/.cache/tsbuild/info.src.json",
+		"rootDir": "src/",
+		"outDir": "lib/",
+		"types": ["node"]
+	},
+	"extends": "../../tsconfig.base.json",
+	"include": ["src"],
+	"exclude": ["src/**/*.test.ts"],
+	"references": [
+		{ "path": "../core" },
+		{ "path": "../ts-patch" },
+		{ "path": "../typescript-language" },
+		{ "path": "../utils" },
+		{ "path": "../volar-language" }
+	]
+}

packages/vue-language/tsconfig.test.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"tsBuildInfoFile": "node_modules/.cache/tsbuild/info.test.json",
+		"rootDir": "src/",
+		"outDir": "node_modules/.cache/tsbuild/test",
+		"types": ["node"],
+		"erasableSyntaxOnly": false
+	},
+	"extends": "../../tsconfig.base.json",
+	"include": ["src/**/*.test.ts"],
+	"references": [{ "path": "./tsconfig.src.json" }]
+}

packages/vue-language/tsdown.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+	attw: {
+		enabled: "ci-only",
+		profile: "esm-only",
+	},
+	clean: ["./node_modules/.cache/tsbuild/"],
+	dts: { build: true, incremental: true },
+	entry: ["src/index.ts"],
+	exports: {
+		devExports: true,
+		packageJson: false,
+	},
+	failOnWarn: true,
+	fixedExtension: false,
+	outDir: "lib",
+	unbundle: true,
+});

packages/vue/README.md

@@ -0,0 +1,9 @@
+<h1 align="center"><code>@flint.fyi/vue</code></h1>
+
+<p align="center">
+	[Experimental] Vue.js language plugin for Flint.
+	❤️‍🔥
+</p>
+
+This is an internal package for Flint.
+Documentation will eventually be added.