Merge pull request #40 from MIERUNE/shiki-oniguruma

docs: Update Shiki’s regex engine to use Oniguruma (Wasm)
MIERUNE · Nov 28, 2024 · dbd4b70 · dbd4b70
2 parents f3557eb + 65ecc3c
commit dbd4b70
Show file tree

Hide file tree

Showing 20 changed files with 52 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,20 +1,31 @@
 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;
 			};
 		};
 		return {
 			Content: post.default,
-			meta: { ...post.metadata, slug }
+			meta: { ...post.metadata, slug },
+			shiki
 		};
 	} catch {
 		error(404, `Example '${slug}' not found`);