Switch back to shiki

Now that `shikiji` is merged back into `shiki`, we
can switch back to using it.

Author: banga

package-lock.json

@@ -30,13 +30,13 @@
         "ansi-regex": "^6.0.1",
         "chalk": "^5.3.0",
         "diff": "^5.1.0",
-        "shikiji": "^0.9.13",
+        "shiki": "^1.10.1",
         "terminal-size": "^4.0.0",
         "wcwidth": "^1.0.1"
     },
     "scripts": {
         "clean": "rimraf './build'",
-        "build": "npm run clean && patch-package && node ./scripts/build.mjs",
+        "build": "npm run clean && node ./scripts/build.mjs",
         "build:dev": "npm run build -- --watch",
         "build:publish": "npm run build -- --prod",
         "test": "cross-env ./node_modules/.bin/tsc && cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" ./node_modules/.bin/jest",
@@ -55,7 +55,6 @@
         "esbuild": "^0.17.18",
         "jest": "^29.7.0",
         "nodemon": "^2.0.7",
-        "patch-package": "^8.0.0",
         "prettier": "^2.2.1",
         "rimraf": "^5.0.5",
         "ts-jest": "^29.1.0",

package.json

@@ -1,4 +1,4 @@
-import * as shikiji from 'shikiji';
+import * as shiki from 'shiki';
 import { Config } from './getConfig';
 import { FormattedString, T } from './formattedString';
 import { ChalkInstance } from 'chalk';
@@ -11,7 +11,7 @@ export type Context = Config & {
     CHALK: ChalkInstance;
     SCREEN_WIDTH: number;
     HORIZONTAL_SEPARATOR: FormattedString;
-    HIGHLIGHTER?: shikiji.Highlighter;
+    HIGHLIGHTER?: shiki.Highlighter;
 };
 
 export async function getContextForConfig(
@@ -27,7 +27,7 @@ export async function getContextForConfig(
 
     let HIGHLIGHTER = undefined;
     if (config.SYNTAX_HIGHLIGHTING_THEME) {
-        HIGHLIGHTER = await shikiji.getHighlighter({
+        HIGHLIGHTER = await shiki.createHighlighter({
             themes: [config.SYNTAX_HIGHLIGHTING_THEME],
             langs: [],
         });

patches/shikiji-core+0.9.13.patch

@@ -67,11 +67,12 @@ export async function* formatAndFitHunkLine(
     let isFirstLine = true;
     const formattedLine = T().appendString(lineText);
     highlightChangesInLine(context, linePrefix, formattedLine, changes);
-    if (context.HIGHLIGHTER) {
+    if (context.HIGHLIGHTER && context.SYNTAX_HIGHLIGHTING_THEME) {
         await highlightSyntaxInLine(
             formattedLine,
             fileName,
-            context.HIGHLIGHTER
+            context.HIGHLIGHTER,
+            context.SYNTAX_HIGHLIGHTING_THEME
         );
     }
 

src/context.ts

@@ -1,6 +1,6 @@
 import { GitConfig } from './getGitConfig';
 import { Theme, loadTheme } from './themes';
-import * as shikiji from 'shikiji';
+import * as shiki from 'shiki';
 
 export type Config = Theme & {
     MIN_LINE_WIDTH: number;
@@ -24,6 +24,6 @@ export function getConfig(gitConfig: GitConfig): Config {
         ...theme,
         ...gitConfig,
         SYNTAX_HIGHLIGHTING_THEME: (theme.SYNTAX_HIGHLIGHTING_THEME ??
-            gitConfig.SYNTAX_HIGHLIGHTING_THEME) as shikiji.BundledTheme,
+            gitConfig.SYNTAX_HIGHLIGHTING_THEME) as shiki.BundledTheme,
     };
 }

src/formatAndFitHunkLine.ts

@@ -1,12 +1,12 @@
-import * as shikiji from 'shikiji';
+import * as shiki from 'shiki';
 import { T } from './formattedString';
 import { highlightSyntaxInLine } from './highlightSyntaxInLine';
 
 test('highlighting should load languages on-demand', async () => {
     const string = 'int main {}';
     const referenceString = T().appendString(string);
 
-    const highlighter = await shikiji.getHighlighter({
+    const highlighter = await shiki.createHighlighter({
         themes: ['dark-plus'],
         langs: [],
     });

src/getConfig.ts

@@ -1,28 +1,30 @@
 import path from 'path';
-import * as shikiji from 'shikiji';
+import * as shiki from 'shiki';
 import { FormattedString } from './formattedString';
 import { parseColorDefinition, ThemeColor } from './themes';
 export type HighlightedText = [string, ThemeColor | null];
 
 export async function highlightSyntaxInLine(
     line: FormattedString,
     fileName: string,
-    highlighter: shikiji.Highlighter
+    highlighter: shiki.Highlighter,
+    theme: shiki.BundledTheme
 ): Promise<void> {
-    const language = path.extname(fileName).slice(1) as shikiji.BundledLanguage;
-    if (!shikiji.bundledLanguages[language]) {
+    const language = path.extname(fileName).slice(1) as shiki.BundledLanguage;
+    if (!shiki.bundledLanguages[language]) {
         return;
     }
 
     await highlighter.loadLanguage(language);
 
-    const [tokens] = highlighter.codeToThemedTokens(line.getString(), {
+    const { tokens } = highlighter.codeToTokens(line.getString(), {
         includeExplanation: false,
         lang: language,
+        theme,
     });
 
     let index = 0;
-    for (const { content, color } of tokens) {
+    for (const { content, color } of tokens.flat()) {
         if (color) {
             const syntaxColor = parseColorDefinition({
                 color: color,

src/highlightSyntaxInLine.test.ts

@@ -2,7 +2,7 @@ import * as assert from 'assert';
 import * as path from 'path';
 import * as fs from 'fs';
 import { fileURLToPath } from 'url';
-import * as shikiji from 'shikiji';
+import * as shiki from 'shiki';
 
 const THEMES_DIR = path.resolve(
     path.dirname(fileURLToPath(import.meta.url)),
@@ -55,7 +55,7 @@ export enum ThemeColorName {
 }
 
 export type ThemeDefinition = {
-    SYNTAX_HIGHLIGHTING_THEME?: shikiji.BundledTheme;
+    SYNTAX_HIGHLIGHTING_THEME?: shiki.BundledTheme;
 } & {
     [key in ThemeColorName]: ColorDefinition;
 };
@@ -147,7 +147,7 @@ export function reduceThemeColors(colors: ThemeColor[]): ThemeColor {
 }
 
 export type Theme = {
-    SYNTAX_HIGHLIGHTING_THEME?: shikiji.BundledTheme;
+    SYNTAX_HIGHLIGHTING_THEME?: shiki.BundledTheme;
 } & {
     [key in ThemeColorName]: ThemeColor;
 };