Files
paseo/packages/highlight/src/parsers.ts
T
a7f7405c04 fix(highlight): highlight Vue (.vue) files (#6205)
* fix(highlight): add syntax highlighting support for Vue (.vue) files

* fix(highlight): use Vue-aware mixed-language parsing for .vue SFCs

* fix(highlight): make Vue interpolation boundary quote-aware and brace-balanced

The interpolation scanner matched the closing '}}' with a plain
indexOf, so expressions containing '}}' inside strings or nested
object literals ({{ { a: 1 }}}) cut the expression short. Find the
closing delimiter only at brace depth 0, skipping strings, comments,
and regexes like the existing block scanners do.

* fix(highlight): satisfy lint complexity limits in vue parser

Split nestedLanguage into templateOverlay/directiveOverlay/scriptOverlay
and drop the unused findClosingBrace helper. Behavior unchanged.

* fix(highlight): keep an empty {{}} from breaking Vue highlighting

An empty interpolation gave the expression parser a zero-length range,
which Lezer rejects, so the whole file fell back to plain text.

Co-authored-by: Davin <128177533+Davnn1@users.noreply.github.com>

* fix(highlight): color quoted Vue directive values and nested template strings

A quoted directive value went to the expression parser with its quotes,
so it parsed as one string. A template string nested inside ${} ended at
its inner backtick, so a }} inside it closed the interpolation early.

Co-authored-by: Davin <128177533+Davnn1@users.noreply.github.com>

---------

Co-authored-by: davnn <davinvin744@gmail.com>
Co-authored-by: Davnn1 <128177533+Davnn1@users.noreply.github.com>
Co-authored-by: paseo-bot[bot] <266920839+paseo-bot[bot]@users.noreply.github.com>
2026-10-06 11:00:38 +02:00

110 lines
3.5 KiB
TypeScript

import { defineLanguageFacet, Language, StreamLanguage } from "@codemirror/language";
import { dart } from "@codemirror/legacy-modes/mode/clike";
import { swift } from "@codemirror/legacy-modes/mode/swift";
import { parser as jsParser } from "@lezer/javascript";
import { parser as jsonParser } from "@lezer/json";
import { parser as cssParser } from "@lezer/css";
import { parser as cppParser } from "@lezer/cpp";
import { parser as goParser } from "@lezer/go";
import { parser as htmlParser } from "@lezer/html";
import { parser as javaParser } from "@lezer/java";
import { parser as pythonParser } from "@lezer/python";
import { parser as markdownParser } from "@lezer/markdown";
import { parser as phpParser } from "@lezer/php";
import { parser as rustParser } from "@lezer/rust";
import { parser as xmlParser } from "@lezer/xml";
import { parser as yamlParser } from "@lezer/yaml";
import { parser as elixirParser } from "lezer-elixir";
import type { Parser } from "@lezer/common";
import { csharpLanguage } from "./csharp/language.js";
import { astroParser } from "./astro/parser.js";
import { vueParser } from "./vue/parser.js";
import { nixLanguage } from "./nix/language.js";
import { parser as svelteBaseParser } from "./svelte/parser.js";
import { configureNesting, defaultNesting } from "./svelte/nesting.js";
function language(parser: Parser): Language {
return new Language(defineLanguageFacet(), parser);
}
const languagesByExtension: Record<string, Language> = {
// JavaScript/TypeScript
js: language(jsParser),
jsx: language(jsParser.configure({ dialect: "jsx" })),
ts: language(jsParser.configure({ dialect: "ts" })),
tsx: language(jsParser.configure({ dialect: "ts jsx" })),
mjs: language(jsParser),
cjs: language(jsParser),
// C / C++ / Objective-C
c: language(cppParser),
h: language(cppParser),
cc: language(cppParser),
cpp: language(cppParser),
cxx: language(cppParser),
hpp: language(cppParser),
hxx: language(cppParser),
m: language(cppParser),
mm: language(cppParser),
// JSON
json: language(jsonParser),
// CSS
css: language(cssParser),
scss: language(cssParser),
// HTML
html: language(htmlParser),
htm: language(htmlParser),
// Svelte
svelte: language(svelteBaseParser.configure({ wrap: configureNesting(defaultNesting) })),
// Astro
astro: language(astroParser),
// Vue
vue: language(vueParser),
// XML
xml: language(xmlParser),
// Java
java: language(javaParser),
// Python
py: language(pythonParser),
// Go
go: language(goParser),
// PHP
php: language(phpParser),
// YAML
yaml: language(yamlParser),
yml: language(yamlParser),
// Rust
rs: language(rustParser),
// Swift
swift: StreamLanguage.define(swift),
// Dart
dart: StreamLanguage.define(dart),
// C#
cs: csharpLanguage,
// Nix
nix: nixLanguage,
// Elixir
ex: language(elixirParser),
exs: language(elixirParser),
// Markdown
md: language(markdownParser),
mdx: language(markdownParser),
};
export function getLanguageForFile(filename: string): Language | null {
const ext = filename.split(".").pop()?.toLowerCase();
if (!ext) return null;
return languagesByExtension[ext] ?? null;
}
export function getParserForFile(filename: string): Parser | null {
return getLanguageForFile(filename)?.parser ?? null;
}
export function isLanguageSupported(filename: string): boolean {
return getParserForFile(filename) !== null;
}
export function getSupportedExtensions(): string[] {
return Object.keys(languagesByExtension);
}