Reduce startup time

Author: Thylane

src/Highlighter.ts

@@ -38,7 +38,7 @@ export class CodeHighlighter {
 
 ec!: ExpressiveCodeEngine;
 ecElements!: HTMLElement[];
-loadedLanguages!: string[];
+supportedLanguages!: string[];
 shiki!: Highlighter;
 customThemes!: CustomTheme[];
 customLanguages!: LanguageRegistration[];
@@ -55,7 +55,10 @@ export class CodeHighlighter {
 await this.loadEC();
 await this.loadShiki();
 
-this.loadedLanguages = this.shiki.getLoadedLanguages();
+this.supportedLanguages = [
+...Object.keys(bundledLanguages),
+...this.customLanguages.map(i => i.name)
+];
 }
 
 async unload(): Promise<void> {
@@ -143,7 +146,7 @@ export class CodeHighlighter {
 themes: [new ExpressiveCodeTheme(await this.themeMapper.getThemeForEC())],
 plugins: [
 pluginShiki({
-langs: this.getLoadedLanguageRegistrations(),
+langs: [...this.customLanguages],
 }),
 pluginCollapsibleSections(),
 pluginTextMarkers(),
@@ -179,7 +182,7 @@ export class CodeHighlighter {
 async loadShiki(): Promise<void> {
 this.shiki = await createHighlighter({
 themes: [await this.themeMapper.getTheme()],
-langs: this.getLoadedLanguageRegistrations(),
+langs: [...this.customLanguages],
 });
 }
 
@@ -198,7 +201,7 @@ export class CodeHighlighter {
  * All languages that are safe to use with Obsidian's `registerMarkdownCodeBlockProcessor`.
  */
 obsidianSafeLanguageNames(): string[] {
-return this.loadedLanguages.filter(lang => !languageNameBlacklist.has(lang) && !this.plugin.loadedSettings.disabledLanguages.includes(lang));
+return this.supportedLanguages.filter(lang => !languageNameBlacklist.has(lang) && !this.plugin.loadedSettings.disabledLanguages.includes(lang));
 // .concat(this.customLanguages.map(lang => lang.name));
 }
 
@@ -215,11 +218,16 @@ export class CodeHighlighter {
 container.innerHTML = toHtml(this.themeMapper.fixAST(result.renderedGroupAst));
 }
 
-getHighlightTokens(code: string, lang: string): TokensResult | undefined {
+async getHighlightTokens(code: string, lang: string): Promise<TokensResult | undefined> {
 if (!this.obsidianSafeLanguageNames().includes(lang)) {
 return undefined;
 }
-
+// load bundled language ​​when needed
+try {
+this.shiki.getLanguage(lang);
+} catch (e) {
+await this.shiki.loadLanguage(lang as BundledLanguage);
+}
 return this.shiki.codeToTokens(code, {
 lang: lang as BundledLanguage,
 theme: this.plugin.settings.theme,

src/codemirror/Cm6_ViewPlugin.ts

@@ -8,6 +8,15 @@ import { Cm6_Util } from 'src/codemirror/Cm6_Util';
 import { type ThemedToken } from 'shiki';
 import { editorLivePreviewField } from 'obsidian';
 
+interface DecoQueueNode {
+from: number;
+to: number;
+lang: string;
+content: string;
+hideLang?: boolean;
+hideTo?: number;
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createCm6Plugin(plugin: ShikiPlugin) {
 return ViewPlugin.fromClass(
@@ -58,9 +67,10 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
  * @param view
  * @param docChanged
  */
-updateWidgets(view: EditorView, docChanged: boolean = true): void {
+async updateWidgets(view: EditorView, docChanged: boolean = true): Promise<void> {
 let lang = '';
 let state: SyntaxNode[] = [];
+let decoQueue: DecoQueueNode[] = [];
 
 // const t1 = performance.now();
 
@@ -82,26 +92,14 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 if (match) {
 const hasSelectionOverlap = Cm6_Util.checkSelectionAndRangeOverlap(view.state.selection, node.from - 1, node.to + 1);
 
-// if there is selection overlap, the user has the inline code block selected, so we don't want to hide the language tag.
-// For this we just remove the decorations and rebuild them with the language tag visible.
-if (hasSelectionOverlap) {
-this.removeDecoration(node.from, node.to);
-}
-const hideTo = node.from + match[1].length + 3; // hide `{lang} `
-
-try {
-const decorations = this.buildDecorations(hideTo, node.to, match[1], match[2]);
-
-this.removeDecoration(node.from, node.to);
-// add the decoration that hides the language tag
-if (this.isLivePreview(view.state) && !hasSelectionOverlap) {
-decorations.unshift(Decoration.replace({}).range(node.from, hideTo));
-}
-// add the highlight decorations
-this.addDecoration(node.from, node.to, decorations);
-} catch (e) {
-console.error(e);
-}
+decoQueue.push({
+from: node.from,
+to: node.to,
+lang: match[1],
+content: match[2],
+hideLang: this.isLivePreview(view.state) && !hasSelectionOverlap,
+hideTo: node.from + match[1].length + 3 // hide `{lang} `
+});
 }
 } else {
 // we don't want to highlight normal inline code blocks, thus we remove any of our decorations
@@ -133,17 +131,12 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 const start = state[0].from;
 const end = state[state.length - 1].to;
 
-const content = Cm6_Util.getContent(view.state, start, end);
-
-try {
-const decorations = this.buildDecorations(start, end, lang, content);
-
-// when we have the decorations, we first remove all existing decorations in the range and then add the new ones
-this.removeDecoration(start, end);
-this.addDecoration(start, end, decorations);
-} catch (e) {
-console.error(e);
-}
+decoQueue.push({
+from: start,
+to: end,
+lang,
+content: Cm6_Util.getContent(view.state, start, end)
+});
 }
 
 lang = '';
@@ -152,6 +145,29 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 },
 });
 
+for (const node of decoQueue) {
+try {
+if (node.hideTo) { // inline decorations
+const decorations = await this.buildDecorations(node.hideTo, node.to, node.lang, node.content);
+
+this.removeDecoration(node.from, node.to);
+// add the decoration that hides the language tag
+if (node.hideLang) {
+decorations.unshift(Decoration.replace({}).range(node.from, node.hideTo));
+}
+// add the highlight decorations
+this.addDecoration(node.from, node.to, decorations);
+} else {
+const decorations = await this.buildDecorations(node.from, node.to, node.lang, node.content);
+
+// when we have the decorations, we first remove all existing decorations in the range and then add the new ones
+this.removeDecoration(node.from, node.to);
+this.addDecoration(node.from, node.to, decorations);
+}
+} catch (e) {
+console.error(e);
+}
+}
 // console.log('Traversed syntax tree in', performance.now() - t1, 'ms');
 }
 
@@ -201,12 +217,12 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
  * @param language
  * @param content
  */
-buildDecorations(from: number, to: number, language: string, content: string): Range<Decoration>[] {
+async buildDecorations(from: number, to: number, language: string, content: string): Promise<Range<Decoration>[]> {
 if (language === '') {
 return [];
 }
 
-const highlight = plugin.highlighter.getHighlightTokens(content, language);
+const highlight = await plugin.highlighter.getHighlightTokens(content, language);
 
 if (!highlight) {
 return [];

src/main.ts

@@ -115,12 +115,12 @@ export default class ShikiPlugin extends Plugin {
 }
 
 registerInlineCodeProcessor(): void {
-this.registerMarkdownPostProcessor((el, ctx) => {
+this.registerMarkdownPostProcessor(async (el, ctx) => {
 const inlineCodes = el.findAll(':not(pre) > code');
 for (let codeElm of inlineCodes) {
 let match = codeElm.textContent?.match(SHIKI_INLINE_REGEX); // format: `{lang} code`
 if (match) {
-const highlight = this.highlighter.getHighlightTokens(match[2], match[1]);
+const highlight = await this.highlighter.getHighlightTokens(match[2], match[1]);
 const tokens = highlight?.tokens.flat(1);
 if (!tokens?.length) {
 continue;

src/settings/SettingsTab.ts

@@ -135,7 +135,7 @@ export class ShikiSettingsTab extends PluginSettingTab {
 .setDesc('Configure language to exclude.')
 .addButton(button => {
 button.setButtonText('Add Language Rule').onClick(() => {
-const modal = new StringSelectModal(this.plugin, this.plugin.highlighter.loadedLanguages, language => {
+const modal = new StringSelectModal(this.plugin, this.plugin.highlighter.supportedLanguages, language => {
 this.plugin.settings.disabledLanguages.push(language);
 void this.plugin.saveSettings();
 this.display();