Upgrade Shiki to the latest version

.gitignore

@@ -117,3 +117,6 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .pnp.*
+
+# IntelliJ
+.idea

package.json

@@ -12,7 +12,8 @@
         "prepublish": "yarn lint && yarn test"
     },
     "files": [
-        "dist/**/*"
+        "dist/**/*",
+        "!dist/**/__tests__/**/*"
     ],
     "author": "Morsby",
     "repository": {
@@ -35,20 +36,20 @@
         "eslint": "^7.0.0",
         "eslint-config-prettier": "^6.11.0",
         "eslint-plugin-prettier": "^3.1.3",
-        "estree-walker": "^2.0.1",
         "husky": "^4.2.5",
         "jest": "^25.3.0",
         "magic-string": "^0.25.7",
         "mdsvex": "^0.4.0",
         "prettier": "^2.0.5",
         "shiki-languages": "^0.1.6",
         "shiki-themes": "^0.1.7",
-        "svelte": "^3.22.2",
+        "svelte": "^3.59.1",
         "ts-jest": "^25.3.1",
         "typescript": "^3.8.3"
     },
     "dependencies": {
-        "shiki": "^0.1.7"
+        "estree-walker": "^2.0.1",
+        "shiki": "^0.14.2"
     },
     "peerDependencies": {
         "svelte": "^3.0.0"

src/__tests__/highlighter.ts

@@ -7,10 +7,10 @@ console.log(foo)
 `.trim();
 
     const expected = `
-<pre class="shiki" style="background-color: #2e3440"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #88C0D0">bar</span><span style="color: #D8DEE9FF">()</span><span style="color: #81A1C1">;</span>
-<span style="color: #8FBCBB">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span></code></pre>
+<pre class="shiki" style="background-color: #2e3440ff"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #88C0D0">bar</span><span style="color: #D8DEE9FF">()</span><span style="color: #81A1C1">;</span>
+<span style="color: #D8DEE9">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span></code></pre>
 `.trim();
     const highlighter = await initHighlighter();
-    const tokens = highlighter.codeToThemedTokens(codeToHighlight, "js");
+    const tokens = highlighter.instance.codeToThemedTokens(codeToHighlight, "js");
     expect(renderToHtml(tokens, { bg: highlighter.theme.bg })).toBe(expected);
 });

src/__tests__/preprocessor.ts

@@ -20,8 +20,8 @@ describe("end-to-end", () => {
         });
 
         expect(preprocessed.code).toBe(
-            `<pre class="shiki" style="background-color: #2e3440"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span>
-<span style="color: #8FBCBB">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></code></pre>\n`,
+            `<pre class="shiki" style="background-color: #2e3440ff"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span>
+<span style="color: #D8DEE9">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></code></pre>\n`,
         );
     });
 
@@ -31,7 +31,7 @@ describe("end-to-end", () => {
         });
 
         expect(preprocessed.code).toBe(
-            `<code class="shiki" style="background-color: #2e3440"><span style="color: #D8DEE9">confirm</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">\'</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">\'</span><span style="color: #D8DEE9FF">)</span></code>\n`,
+            `<code class="shiki" style="background-color: #2e3440ff"><span style="color: #D8DEE9">confirm</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">\'</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">\'</span><span style="color: #D8DEE9FF">)</span></code>\n`,
         );
     });
 
@@ -41,7 +41,7 @@ describe("end-to-end", () => {
         });
 
         expect(preprocessed.code).toBe(
-            '<script>\n    let name = "Johnny";\n</script>\n\n<style>\n    h1 {\n        color: red;\n    }\n</style>\n\n<h1>Well done, {name}!</h1>\n<img alt="Happy kid, yo" src="successkid.jpg" />\n\n<p>\n    <strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong>\n</p>\n<pre class="shiki" style="background-color: #2e3440"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #88C0D0">bar</span><span style="color: #D8DEE9FF">()</span></code></pre>\n',
+            '<script>\n    let name = "Johnny";\n</script>\n\n<style>\n    h1 {\n        color: red;\n    }\n</style>\n\n<h1>Well done, {name}!</h1>\n<img alt="Happy kid, yo" src="successkid.jpg" />\n\n<p>\n    <strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong>\n</p>\n<pre class="shiki" style="background-color: #2e3440ff"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #88C0D0">bar</span><span style="color: #D8DEE9FF">()</span></code></pre>\n',
         );
     });
 });
@@ -53,8 +53,8 @@ describe("mdsvex / markdown", () => {
         });
 
         expect(preprocessed.code).toBe(
-            `<pre class="shiki" style="background-color: #2e3440"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span>
-<span style="color: #8FBCBB">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></code></pre>\n`,
+            `<pre class="shiki" style="background-color: #2e3440ff"><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">&#8199;</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span>
+<span style="color: #D8DEE9">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">foo</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></code></pre>\n`,
         );
     });
 
@@ -64,7 +64,7 @@ describe("mdsvex / markdown", () => {
         });
 
         expect(preprocessed.code).toBe(
-            `<p>This is inline javascript code: <code class="shiki" style="background-color: #2e3440"><span style="color: #D8DEE9">confirm</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">\'</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">\'</span><span style="color: #D8DEE9FF">)</span></code>.</p>\n`,
+            `<p>This is inline javascript code: <code class="shiki" style="background-color: #2e3440ff"><span style="color: #D8DEE9">confirm</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">log</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">\'</span><span style="color: #A3BE8C">svelte-shiki</span><span style="color: #ECEFF4">\'</span><span style="color: #D8DEE9FF">)</span></code>.</p>\n`,
         );
     });
 });

src/highlighter.ts

@@ -1,6 +1,5 @@
-import { getHighlighter, IThemedToken, getTheme } from "shiki";
-import { HighlighterOptions } from "shiki/dist/highlighter";
-import { IShikiTheme } from "shiki-themes";
+import { getHighlighter, IThemedToken, HighlighterOptions } from "shiki";
+import { TLang } from "shiki-languages";
 import { SvelteHighlighter, RendererOptions } from "./types";
 import { escapeHtml } from "./utils";
 
@@ -47,28 +46,20 @@ const isPlaintext = (lang: string): boolean => {
     return ["plaintext", "txt", "text"].indexOf(lang) !== -1;
 };
 
-export const initHighlighter = async (options?: HighlighterOptions): Promise<SvelteHighlighter> => {
-    const defaultOptions: HighlighterOptions = {
-        theme: "nord",
-    };
+const defaultOptions: HighlighterOptions = {
+    theme: "nord",
+};
 
+export const initHighlighter = async (options?: HighlighterOptions): Promise<SvelteHighlighter> => {
     options = { ...defaultOptions, ...options };
 
-    // get theme
-    let theme: IShikiTheme;
-    if (typeof options.theme === "string") {
-        theme = getTheme(options.theme);
-    } else if (options.theme.name) {
-        theme = options.theme;
-    } else {
-        theme = getTheme("nord");
-    }
-
-    const highlighter = (await getHighlighter({
+    const highlighter = await getHighlighter({
         theme: options.theme,
-    })) as SvelteHighlighter;
+    });
 
-    highlighter.highlight = (code, lang, inline = false): string => {
+    const theme = highlighter.getTheme();
+
+    const highlight = (code: string, lang: TLang, inline = false): string => {
         code = code.trim();
         if (isPlaintext(lang)) {
             return renderToHtml([[{ content: code }]], {
@@ -84,6 +75,9 @@ export const initHighlighter = async (options?: HighlighterOptions): Promise<Sve
         });
     };
 
-    highlighter.theme = theme;
-    return highlighter;
+    return {
+        instance: highlighter,
+        highlight,
+        theme,
+    };
 };

src/preprocessor.ts

@@ -5,8 +5,7 @@ import { SvelteNode, SvelteAst } from "./types";
 import { initHighlighter } from "./highlighter";
 import { getProp, replaceContents } from "./utils";
 import { PreprocessorGroup, Processed } from "svelte/types/compiler/preprocess";
-
-import { HighlighterOptions } from "shiki/dist/highlighter";
+import { HighlighterOptions } from "shiki";
 
 const highlightCode = async (content: string, options?: HighlighterOptions): Promise<string> => {
     // if no code elements, return

src/types.ts

@@ -1,8 +1,7 @@
 import { Ast } from "svelte/types/compiler/interfaces";
-import { Highlighter } from "shiki/dist/highlighter";
+import { Highlighter, HtmlRendererOptions } from "shiki";
 import { IShikiTheme } from "shiki-themes";
 import { TLang } from "shiki-languages";
-import { HtmlRendererOptions } from "shiki/dist/renderer";
 
 // AST/Nodes
 export interface Value {
@@ -39,7 +38,8 @@ export interface SvelteAst extends Ast {
 // Highlighter
 
 // Extend the Highlighter to include the custom renderer and a theme prop
-export interface SvelteHighlighter extends Highlighter {
+export interface SvelteHighlighter {
+    instance: Highlighter;
     theme: IShikiTheme;
     highlight(code: string, lang: TLang, inline?: boolean): string;
 }

tsconfig.json

@@ -5,7 +5,7 @@
     "declaration": true,
     "outDir": "dist",
     "strict": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "esModuleInterop": true
   },
   "include": ["src/**/*"],