@astrojs/markdown-remark 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/markdown-remark
 
+## 0.6.3
+
+### Patch Changes
+
+- [#2697](https://github.com/withastro/astro/pull/2697) [`91765d79`](https://github.com/withastro/astro/commit/91765d79b1ec1181417fb6a4604a9e20564bb10e) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Improve performance by optimizing calls to `getHighlighter`
+
 ## 0.6.2
 
 ### Patch Changes

package/dist/remark-shiki.js

@@ -1,7 +1,13 @@
 import { getHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
+const highlighterCache = new Map();
 const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
-  const highlighter = await getHighlighter({ theme });
+  const cacheID = typeof theme === "string" ? theme : theme.name;
+  let highlighter = highlighterCache.get(cacheID);
+  if (!highlighter) {
+    highlighter = await getHighlighter({ theme });
+    highlighterCache.set(cacheID, highlighter);
+  }
   for (const lang of langs) {
     await highlighter.loadLanguage(lang);
   }
@@ -26,4 +32,4 @@ var remark_shiki_default = remarkShiki;
 export {
   remark_shiki_default as default
 };
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL3JlbWFyay1zaGlraS50cyJdLAogICJtYXBwaW5ncyI6ICJBQUNBO0FBQ0E7QUE4QkEsTUFBTSxjQUFjLE9BQU8sRUFBRSxRQUFRLElBQUksUUFBUSxlQUFlLE9BQU8sWUFBeUI7QUFDL0YsUUFBTSxjQUFjLE1BQU0sZUFBZSxFQUFFO0FBRTNDLGFBQVcsUUFBUSxPQUFPO0FBQ3pCLFVBQU0sWUFBWSxhQUFhO0FBQUE7QUFHaEMsU0FBTyxNQUFNLENBQUMsU0FBYztBQUMzQixVQUFNLE1BQU0sUUFBUSxDQUFDLFNBQVM7QUF4Q2hDO0FBeUNHLFVBQUksT0FBTyxZQUFZLFdBQVcsS0FBSyxPQUFPLEVBQUUsTUFBTSxXQUFLLFNBQUwsWUFBYTtBQUduRSxhQUFPLEtBQUssUUFBUSxzQkFBc0I7QUFFMUMsYUFBTyxLQUFLLFFBQVEsOENBQThDO0FBR2xFLFVBQUksU0FBUyxPQUFPO0FBQ25CLGVBQU8sS0FBSyxRQUFRLGlCQUFpQjtBQUFBLGlCQUMzQixTQUFTLE1BQU07QUFDekIsZUFBTyxLQUFLLFFBQVEsaUJBQWlCO0FBQUE7QUFHdEMsV0FBSyxPQUFPO0FBQ1osV0FBSyxRQUFRO0FBQ2IsV0FBSyxXQUFXO0FBQUE7QUFBQTtBQUFBO0FBS25CLElBQU8sdUJBQVE7IiwKICAibmFtZXMiOiBbXQp9Cg==
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vc3JjL3JlbWFyay1zaGlraS50cyJdLAogICJtYXBwaW5ncyI6ICJBQUNBO0FBQ0E7QUFrQ0EsTUFBTSxtQkFBbUIsSUFBSTtBQUU3QixNQUFNLGNBQWMsT0FBTyxFQUFFLFFBQVEsSUFBSSxRQUFRLGVBQWUsT0FBTyxZQUF5QjtBQUMvRixRQUFNLFVBQWtCLE9BQU8sVUFBVSxXQUFXLFFBQVEsTUFBTTtBQUNsRSxNQUFJLGNBQWMsaUJBQWlCLElBQUk7QUFDdkMsTUFBSSxDQUFDLGFBQWE7QUFDakIsa0JBQWMsTUFBTSxlQUFlLEVBQUU7QUFDckMscUJBQWlCLElBQUksU0FBUztBQUFBO0FBRS9CLGFBQVcsUUFBUSxPQUFPO0FBQ3pCLFVBQU0sWUFBWSxhQUFhO0FBQUE7QUFFaEMsU0FBTyxNQUFNLENBQUMsU0FBYztBQUMzQixVQUFNLE1BQU0sUUFBUSxDQUFDLFNBQVM7QUFqRGhDO0FBa0RHLFVBQUksT0FBTyxZQUFhLFdBQVcsS0FBSyxPQUFPLEVBQUUsTUFBTSxXQUFLLFNBQUwsWUFBYTtBQUdwRSxhQUFPLEtBQUssUUFBUSxzQkFBc0I7QUFFMUMsYUFBTyxLQUFLLFFBQVEsOENBQThDO0FBR2xFLFVBQUksU0FBUyxPQUFPO0FBQ25CLGVBQU8sS0FBSyxRQUFRLGlCQUFpQjtBQUFBLGlCQUMzQixTQUFTLE1BQU07QUFDekIsZUFBTyxLQUFLLFFBQVEsaUJBQWlCO0FBQUE7QUFHdEMsV0FBSyxPQUFPO0FBQ1osV0FBSyxRQUFRO0FBQ2IsV0FBSyxXQUFXO0FBQUE7QUFBQTtBQUFBO0FBS25CLElBQU8sdUJBQVE7IiwKICAibmFtZXMiOiBbXQp9Cg==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "type": "module",
   "author": "withastro",
   "license": "MIT",

package/src/remark-shiki.ts

@@ -30,16 +30,25 @@ export interface ShikiConfig {
 	wrap?: boolean | null;
 }
 
-const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
-	const highlighter = await getHighlighter({ theme });
+/**
+ * getHighlighter() is the most expensive step of Shiki. Instead of calling it on every page,
+ * cache it here as much as possible. Make sure that your highlighters can be cached, state-free.
+ */
+const highlighterCache = new Map<string, shiki.Highlighter>();
 
+const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
+	let highlighter = highlighterCache.get(cacheID);
+	if (!highlighter) {
+		highlighter = await getHighlighter({ theme });
+		highlighterCache.set(cacheID, highlighter);
+	}
 	for (const lang of langs) {
 		await highlighter.loadLanguage(lang);
 	}
-
 	return () => (tree: any) => {
 		visit(tree, 'code', (node) => {
-			let html = highlighter.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
+			let html = highlighter!.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
 
 			// Replace "shiki" class naming with "astro" and add "data-astro-raw".
 			html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"');