From 949441255885d42ccdf4a9330402f6b01b18b759 Mon Sep 17 00:00:00 2001
From: Gerrit Birkeland <gerrit@gerritbirkeland.com>
Date: Sat, 18 Sep 2021 16:34:24 -0600
Subject: [PATCH] Refactor highlighter to improve performance

Previously, Shiki was taking 600ms to initialize on my box, this change makes it take 400ms instead.
---
 src/lib/output/renderer.ts    |  5 +++++
 src/lib/utils/highlighter.tsx | 17 +++++++----------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/lib/output/renderer.ts b/src/lib/output/renderer.ts
index 3df5cf83b..c29bfba61 100644
--- a/src/lib/output/renderer.ts
+++ b/src/lib/output/renderer.ts
@@ -195,7 +195,11 @@ export class Renderer extends ChildableComponent<
         project: ProjectReflection,
         outputDirectory: string
     ): Promise<void> {
+        const start = Date.now();
         await loadHighlighter(this.lightTheme, this.darkTheme);
+        this.application.logger.verbose(
+            `Renderer: Loading highlighter took ${Date.now() - start}ms`
+        );
         if (
             !this.prepareTheme() ||
             !(await this.prepareOutputDirectory(outputDirectory))
@@ -211,6 +215,7 @@ export class Renderer extends ChildableComponent<
         output.urls = this.theme!.getUrls(project);
 
         this.trigger(output);
+
         if (!output.isDefaultPrevented) {
             output.urls.forEach((mapping: UrlMapping) => {
                 this.renderDocument(output.createPageEvent(mapping));
diff --git a/src/lib/utils/highlighter.tsx b/src/lib/utils/highlighter.tsx
index aaaf1c109..852d7b3ce 100644
--- a/src/lib/utils/highlighter.tsx
+++ b/src/lib/utils/highlighter.tsx
@@ -15,11 +15,11 @@ const supportedLanguages = unique(["text", ...aliases.keys(), ...BUNDLED_LANGUAG
 class DoubleHighlighter {
     private schemes = new Map<string, string>();
 
-    constructor(private light: Highlighter, private dark: Highlighter) {}
+    constructor(private highlighter: Highlighter, private light: Theme, private dark: Theme) {}
 
     highlight(code: string, lang: string) {
-        const lightTokens = this.light.codeToThemedTokens(code, lang, void 0, { includeExplanation: false });
-        const darkTokens = this.dark.codeToThemedTokens(code, lang, void 0, { includeExplanation: false });
+        const lightTokens = this.highlighter.codeToThemedTokens(code, lang, this.light, { includeExplanation: false });
+        const darkTokens = this.highlighter.codeToThemedTokens(code, lang, this.dark, { includeExplanation: false });
 
         // If this fails... something went *very* wrong.
         assert(lightTokens.length === darkTokens.length);
@@ -88,8 +88,8 @@ class DoubleHighlighter {
             i++;
         }
 
-        style.push(`    --light-code-background: ${this.light.getTheme().bg};`);
-        style.push(`    --dark-code-background: ${this.dark.getTheme().bg};`);
+        style.push(`    --light-code-background: ${this.highlighter.getTheme(this.light).bg};`);
+        style.push(`    --dark-code-background: ${this.highlighter.getTheme(this.dark).bg};`);
         lightRules.push(`    --code-background: var(--light-code-background);`);
         darkRules.push(`    --code-background: var(--dark-code-background);`);
 
@@ -134,11 +134,8 @@ let highlighter: DoubleHighlighter | undefined;
 
 export async function loadHighlighter(lightTheme: Theme, darkTheme: Theme) {
     if (highlighter) return;
-    const [lightHl, darkHl] = await Promise.all([
-        getHighlighter({ theme: lightTheme }),
-        getHighlighter({ theme: darkTheme }),
-    ]);
-    highlighter = new DoubleHighlighter(lightHl, darkHl);
+    const hl = await getHighlighter({ themes: [lightTheme, darkTheme] });
+    highlighter = new DoubleHighlighter(hl, lightTheme, darkTheme);
 }
 
 export function isSupportedLanguage(lang: string) {