From 65ecc3caa1b4b119f4b981ce57f2bf23f7acb636 Mon Sep 17 00:00:00 2001
From: Taku Fukada <naninunenor@gmail.com>
Date: Thu, 28 Nov 2024 15:27:05 +0900
Subject: [PATCH] Update regex engine of shiki to use Oniguruma

---
 src/content/CodeBlock.svelte                      | 14 ++++----------
 .../examples/animate-images/content.svelte.md     |  3 ++-
 src/content/examples/basestyle/content.svelte.md  |  3 ++-
 .../examples/canvas-source/content.svelte.md      |  3 ++-
 src/content/examples/clusters/content.svelte.md   |  3 ++-
 src/content/examples/complex/content.svelte.md    |  3 ++-
 src/content/examples/contour/content.svelte.md    |  3 ++-
 .../examples/deckgl-overlay/content.svelte.md     |  3 ++-
 .../examples/dynamic-image/content.svelte.md      |  3 ++-
 src/content/examples/fullscreen/content.svelte.md |  3 ++-
 src/content/examples/geolocate/content.svelte.md  |  3 ++-
 .../examples/hover-styles/content.svelte.md       |  3 ++-
 .../examples/image-loader/content.svelte.md       |  3 ++-
 .../examples/limit-interaction/content.svelte.md  |  3 ++-
 src/content/examples/plain/content.svelte.md      |  3 ++-
 .../examples/side-by-side/content.svelte.md       |  3 ++-
 src/content/examples/terrain/content.svelte.md    |  3 ++-
 .../examples/video-on-a-map/content.svelte.md     |  3 ++-
 src/routes/examples/[slug]/+page.svelte           |  2 +-
 src/routes/examples/[slug]/+page.ts               | 15 +++++++++++++--
 20 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/content/CodeBlock.svelte b/src/content/CodeBlock.svelte
index d469686..4849934 100644
--- a/src/content/CodeBlock.svelte
+++ b/src/content/CodeBlock.svelte
@@ -1,20 +1,14 @@
 <script lang="ts" module>
-	import { createHighlighterCoreSync, createJavaScriptRegexEngine } from 'shiki';
-	import svelte from 'shiki/langs/svelte.mjs';
-	import dark from 'shiki/themes/github-dark-default.mjs';
-
-	export const shiki = createHighlighterCoreSync({
-		themes: [dark],
-		langs: [svelte],
-		engine: createJavaScriptRegexEngine()
-	});
+	import type { HighlighterCore } from 'shiki';
 </script>
 
 <script lang="ts">
 	let {
-		content
+		content,
+		shiki
 	}: {
 		content: string;
+		shiki: HighlighterCore;
 	} = $props();
 
 	const highlighted = $derived.by(() => {
diff --git a/src/content/examples/animate-images/content.svelte.md b/src/content/examples/animate-images/content.svelte.md
index 558e40f..ea4636d 100644
--- a/src/content/examples/animate-images/content.svelte.md
+++ b/src/content/examples/animate-images/content.svelte.md
@@ -7,8 +7,9 @@ description: Use a series of image sources to create an animation.
   import Demo from "./AnimateImages.svelte";
   import demoRaw from "./AnimateImages.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/basestyle/content.svelte.md b/src/content/examples/basestyle/content.svelte.md
index 71fb44f..0af059a 100644
--- a/src/content/examples/basestyle/content.svelte.md
+++ b/src/content/examples/basestyle/content.svelte.md
@@ -7,8 +7,9 @@ description: Dynamic contents must be preserved when the base style is changed.
   import Demo from "./BaseStyle.svelte";
   import demoRaw from "./BaseStyle.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/canvas-source/content.svelte.md b/src/content/examples/canvas-source/content.svelte.md
index 7357529..8d386ae 100644
--- a/src/content/examples/canvas-source/content.svelte.md
+++ b/src/content/examples/canvas-source/content.svelte.md
@@ -7,8 +7,9 @@ description: Add a canvas source to the map.
   import Demo from "./Canvas.svelte";
   import demoRaw from "./Canvas.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/clusters/content.svelte.md b/src/content/examples/clusters/content.svelte.md
index c7d4959..5c1a732 100644
--- a/src/content/examples/clusters/content.svelte.md
+++ b/src/content/examples/clusters/content.svelte.md
@@ -7,8 +7,9 @@ description: Use MapLibre's built-in functions to visualize points as clusters.
   import Demo from "./Clusters.svelte";
   import demoRaw from "./Clusters.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/complex/content.svelte.md b/src/content/examples/complex/content.svelte.md
index 8313070..ba83425 100644
--- a/src/content/examples/complex/content.svelte.md
+++ b/src/content/examples/complex/content.svelte.md
@@ -7,8 +7,9 @@ description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu
   import Demo from "./Complex.svelte";
   import demoRaw from "./Complex.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/contour/content.svelte.md b/src/content/examples/contour/content.svelte.md
index 1200f2f..741b9fd 100644
--- a/src/content/examples/contour/content.svelte.md
+++ b/src/content/examples/contour/content.svelte.md
@@ -7,8 +7,9 @@ description: Render contour lines from a raster DEM source using maplibre-contou
   import Demo from "./Contour.svelte";
   import demoRaw from "./Contour.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/deckgl-overlay/content.svelte.md b/src/content/examples/deckgl-overlay/content.svelte.md
index 77eb286..eaabc88 100644
--- a/src/content/examples/deckgl-overlay/content.svelte.md
+++ b/src/content/examples/deckgl-overlay/content.svelte.md
@@ -7,8 +7,9 @@ description: Interleaving deck.gl with MapLibre layers
   import Demo from "./DeckGL.svelte";
   import demoRaw from "./DeckGL.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/dynamic-image/content.svelte.md b/src/content/examples/dynamic-image/content.svelte.md
index f12a8a5..1d2e474 100644
--- a/src/content/examples/dynamic-image/content.svelte.md
+++ b/src/content/examples/dynamic-image/content.svelte.md
@@ -7,8 +7,9 @@ description: Add an icon to the map that was generated at runtime.
   import Demo from "./DynamicImage.svelte";
   import demoRaw from "./DynamicImage.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/fullscreen/content.svelte.md b/src/content/examples/fullscreen/content.svelte.md
index a4e3470..2066150 100644
--- a/src/content/examples/fullscreen/content.svelte.md
+++ b/src/content/examples/fullscreen/content.svelte.md
@@ -7,8 +7,9 @@ description: View a fullscreen map
   import Demo from "./Fullscreen.svelte";
   import demoRaw from "./Fullscreen.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/geolocate/content.svelte.md b/src/content/examples/geolocate/content.svelte.md
index a6e6a9f..02dcbe5 100644
--- a/src/content/examples/geolocate/content.svelte.md
+++ b/src/content/examples/geolocate/content.svelte.md
@@ -7,8 +7,9 @@ description: Locate the User
   import Demo from "./Geolocate.svelte";
   import demoRaw from "./Geolocate.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/hover-styles/content.svelte.md b/src/content/examples/hover-styles/content.svelte.md
index b31be55..b46688d 100644
--- a/src/content/examples/hover-styles/content.svelte.md
+++ b/src/content/examples/hover-styles/content.svelte.md
@@ -7,8 +7,9 @@ description: Use events and feature states to create a per feature hover effect.
   import Demo from "./HoverStyles.svelte";
   import demoRaw from "./HoverStyles.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/image-loader/content.svelte.md b/src/content/examples/image-loader/content.svelte.md
index cd4c534..5d5ca2f 100644
--- a/src/content/examples/image-loader/content.svelte.md
+++ b/src/content/examples/image-loader/content.svelte.md
@@ -7,8 +7,9 @@ description: Utility for loading images from URLs
   import Demo from "./Images.svelte";
   import demoRaw from "./Images.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/limit-interaction/content.svelte.md b/src/content/examples/limit-interaction/content.svelte.md
index d4ff79f..f38af19 100644
--- a/src/content/examples/limit-interaction/content.svelte.md
+++ b/src/content/examples/limit-interaction/content.svelte.md
@@ -7,8 +7,9 @@ description: Set the zoom/pitch range and enable or disable UI handlers on the m
   import Demo from "./LimitInteraction.svelte";
   import demoRaw from "./LimitInteraction.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/plain/content.svelte.md b/src/content/examples/plain/content.svelte.md
index 4bb3739..47827be 100644
--- a/src/content/examples/plain/content.svelte.md
+++ b/src/content/examples/plain/content.svelte.md
@@ -7,8 +7,9 @@ description: Plain map.
   import Demo from "./Plain.svelte";
   import demoRaw from "./Plain.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/side-by-side/content.svelte.md b/src/content/examples/side-by-side/content.svelte.md
index 6dca4e3..b3ffdd8 100644
--- a/src/content/examples/side-by-side/content.svelte.md
+++ b/src/content/examples/side-by-side/content.svelte.md
@@ -7,8 +7,9 @@ description: Synchronize two maps.
   import Demo from "./SideBySide.svelte";
   import demoRaw from "./SideBySide.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/terrain/content.svelte.md b/src/content/examples/terrain/content.svelte.md
index 94e6129..aa9efc4 100644
--- a/src/content/examples/terrain/content.svelte.md
+++ b/src/content/examples/terrain/content.svelte.md
@@ -7,8 +7,9 @@ description: 3D terrain and the sky.
   import Demo from "./Terrain.svelte";
   import demoRaw from "./Terrain.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/content/examples/video-on-a-map/content.svelte.md b/src/content/examples/video-on-a-map/content.svelte.md
index 3a8d3a2..934e15b 100644
--- a/src/content/examples/video-on-a-map/content.svelte.md
+++ b/src/content/examples/video-on-a-map/content.svelte.md
@@ -7,8 +7,9 @@ description: Display a video.
   import Demo from "./Video.svelte";
   import demoRaw from "./Video.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} />
+<CodeBlock content={demoRaw} shiki={shiki} />
diff --git a/src/routes/examples/[slug]/+page.svelte b/src/routes/examples/[slug]/+page.svelte
index 5ad10d4..6eb8a08 100644
--- a/src/routes/examples/[slug]/+page.svelte
+++ b/src/routes/examples/[slug]/+page.svelte
@@ -11,7 +11,7 @@
 		</p>
 
 		<div class="prose max-w-none dark:prose-invert">
-			<data.Content />
+			<data.Content shiki={data.shiki} />
 		</div>
 	</div>
 	<aside class="sticky top-24 h-[calc(100vh-6rem)]">
diff --git a/src/routes/examples/[slug]/+page.ts b/src/routes/examples/[slug]/+page.ts
index c9f7758..d559a2c 100644
--- a/src/routes/examples/[slug]/+page.ts
+++ b/src/routes/examples/[slug]/+page.ts
@@ -1,12 +1,22 @@
 import { error } from '@sveltejs/kit';
 import type { Component } from 'svelte';
 
+import { createHighlighterCoreSync, createOnigurumaEngine, type HighlighterCore } from 'shiki';
+import svelte from 'shiki/langs/svelte.mjs';
+import dark from 'shiki/themes/github-dark-default.mjs';
+
 export const load = async ({ params }) => {
 	const { slug } = params;
 
+	const shiki = createHighlighterCoreSync({
+		themes: [dark],
+		langs: [svelte],
+		engine: await createOnigurumaEngine(import('shiki/wasm'))
+	});
+
 	try {
 		const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as {
-			default: Component;
+			default: Component<{ shiki: HighlighterCore }>;
 			metadata: {
 				title: string;
 				description: string;
@@ -14,7 +24,8 @@ export const load = async ({ params }) => {
 		};
 		return {
 			Content: post.default,
-			meta: { ...post.metadata, slug }
+			meta: { ...post.metadata, slug },
+			shiki
 		};
 	} catch {
 		error(404, `Example '${slug}' not found`);