Repository navigation
perf: highlight with fewer grammars by default #1235
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@doc-kit/core': minor | ||
| --- | ||
|
|
||
| Code is highlighted with fewer grammars by default, as each one takes its own memory on every thread: JavaScript (`js`, `mjs`, `cjs`, `javascript`) with TypeScript's grammar, which already highlights types, and C++ (`cpp`, `c++`) with C's. The Shiki plugin's `langAlias` option takes precedence over these defaults, so `{ cpp: 'cpp', 'c++': 'cpp' }` brings back C++'s own grammar, and aliases now keep working once a grammar with the same aliases is registered. A highlighter's `resolveLanguage` now returns the language code is highlighted as, as its Shiki instance names it (`typescript` for `mjs`): highlight with what it returns. Transformers see that language too. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| 'use strict'; | ||
|
|
||
| // What code in an unknown language is highlighted as | ||
| export const FALLBACK_LANGUAGE = 'text'; | ||
|
|
||
| // What code in these languages is highlighted as, unless configured otherwise. | ||
| // Every grammar takes its own memory on each thread, and time to register, and | ||
| // TypeScript's highlights JavaScript (types are highlighted as TypeScript | ||
| // anyway), as C's does most of C++ | ||
| export const DEFAULT_ALIASES = new Map([ | ||
| ['javascript', 'typescript'], | ||
| ['js', 'typescript'], | ||
| ['mjs', 'typescript'], | ||
| ['cjs', 'typescript'], | ||
|
Comment on lines
+11
to
+14
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are these being aliased, what's wrong with the JS type?
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nothing wrong with it, it's just heavy. JavaScript's grammar is ~60MB on every thread, and TypeScript's highlights JS just fine (we already use it for types and signatures). Together with C++ going to C, that's ~190MB less peak memory on the Node.js docs and a 2-7% faster build. In the light theme JS looks the same, except for one console output block tagged as |
||
| ['cpp', 'c'], | ||
| ['c++', 'c'], | ||
| ]); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,6 +12,8 @@ import { importFromURL } from '#utils/loaders.mjs'; | |
| import { getMarkdownPlugins } from '#utils/markdown/plugins.mjs'; | ||
| import { lazy } from '#utils/misc.mjs'; | ||
|
|
||
| import { DEFAULT_ALIASES, FALLBACK_LANGUAGE } from './constants.mjs'; | ||
|
|
||
| const require = createRequire(import.meta.url); | ||
|
|
||
| /** | ||
|
|
@@ -25,7 +27,7 @@ const require = createRequire(import.meta.url); | |
| * | ||
| * @typedef {Object} SyntaxHighlighter | ||
| * @property {import('shiki').HighlighterCore} shiki - The Shiki instance | ||
| * @property {(languageId?: string) => string} resolveLanguage - Resolves a language, falling back to plain text for unknown ones | ||
| * @property {(languageId?: string) => string} resolveLanguage - Resolves the language code is highlighted as, falling back to plain text for unknown ones | ||
| * @property {(code: string, lang: string, meta?: Record<string, unknown>) => string} highlightToHtml - Highlights code, returning the inner HTML of its `<code>` element | ||
| * @property {(code: string, lang: string, meta?: Record<string, unknown>) => ReturnType<import('shiki').HighlighterCore['codeToHast']>} highlightToHast - Highlights code, returning a HAST tree | ||
| * @property {Array<Language>} langs - The languages it highlights | ||
|
|
@@ -64,9 +66,6 @@ let engine; | |
| // The highlighters of the options given, by their JSON | ||
| const highlighters = new Map(); | ||
|
|
||
| // What code in an unknown language is highlighted as | ||
| const FALLBACK_LANGUAGE = 'text'; | ||
|
|
||
| // The languages Shiki bundles. Registering a grammar takes time and memory, | ||
| // and slows down every highlight after it, so each one is only imported and | ||
| // registered once code in it is highlighted (see `resolveLanguage`). | ||
|
|
@@ -220,10 +219,14 @@ const importHighlighter = async ({ | |
| engine: regexEngine, | ||
| // The bundled languages are registered as code uses them | ||
| langs: withEmbeddedLanguages(importedLangs), | ||
| // A copy, as Shiki adds the aliases of the languages it registers to it | ||
| langAlias: { ...langAlias }, | ||
| }; | ||
|
|
||
| // Resolved here, as Shiki replaces an alias with a grammar's own as it | ||
| // registers. Keyed in lowercase, as they're matched in any case | ||
| const aliases = new Map( | ||
| Object.entries(langAlias).map(([from, to]) => [from.toLowerCase(), to]) | ||
| ); | ||
|
|
||
| // Without themes of its own, the highlighter has a default light and dark one | ||
| if (themes) { | ||
| const [light, dark] = await Promise.all([ | ||
|
|
@@ -256,8 +259,9 @@ const importHighlighter = async ({ | |
| }); | ||
|
|
||
| /** | ||
| * Resolves a language, falling back to plain text for unknown ones. A | ||
| * bundled language is registered the first time it's resolved. | ||
| * Resolves the language code is highlighted as, through the aliases, falling | ||
| * back to plain text for unknown ones. A bundled language is registered the | ||
| * first time it's resolved. | ||
| * | ||
| * @param {string} [languageId] | ||
| * @returns {string} | ||
|
|
@@ -267,20 +271,39 @@ const importHighlighter = async ({ | |
| return FALLBACK_LANGUAGE; | ||
| } | ||
|
|
||
| const followed = new Set(); | ||
|
|
||
| let language = languageId; | ||
|
|
||
| // Each configured alias once, so circular ones end | ||
| while (aliases.has(language.toLowerCase()) && !followed.has(language)) { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this while loop have a chance of infinite recursion? e.g. if an alias -> another alias -> back to itself? |
||
| followed.add(language); | ||
| language = aliases.get(language.toLowerCase()); | ||
| } | ||
|
|
||
| if (followed.size === 0) { | ||
| language = DEFAULT_ALIASES.get(language.toLowerCase()) ?? language; | ||
| } | ||
|
|
||
| const instance = load().shiki; | ||
| const name = instance.resolveLangAlias(languageId.toLowerCase()); | ||
| const loaded = instance.getLoadedLanguages(); | ||
|
|
||
| if (isSpecialLang(name) || instance.getLoadedLanguages().includes(name)) { | ||
| return languageId; | ||
| // Shiki has bundled languages' names and aliases in lowercase | ||
| for (const name of [language, language.toLowerCase()]) { | ||
| if (isSpecialLang(name) || loaded.includes(name)) { | ||
| return name; | ||
| } | ||
| } | ||
|
|
||
| const name = language.toLowerCase(); | ||
|
|
||
| if (!BUNDLED_NAMES.has(name)) { | ||
| return FALLBACK_LANGUAGE; | ||
| } | ||
|
|
||
| instance.loadLanguageSync(importBundledLanguage(name)); | ||
|
|
||
| return languageId; | ||
| return name; | ||
| }; | ||
|
|
||
| /** | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is rust here? do we have this in the codebase? its not in the release note or PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's just a stand-in tbh. The test checks that a bundled language gets registered the first time it's highlighted, through one of its own aliases. It used
mjsbefore, but that goes to TypeScript now, so I picked something nothing aliases (rs). Added a comment so the next person doesn't wonder too :)