From 804bedb6d0ca0c1180e60e26c70622b45bc1a433 Mon Sep 17 00:00:00 2001
From: Taku Fukada <naninunenor@gmail.com>
Date: Thu, 28 Nov 2024 16:04:36 +0900
Subject: [PATCH] docs: Use Oniguruma only on browsers

---
 src/routes/components/[slug]/+page.svelte |  2 +-
 src/routes/components/[slug]/+page.ts     | 26 +++++++++++++++++++----
 src/routes/examples/[slug]/+page.ts       | 11 ++++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/routes/components/[slug]/+page.svelte b/src/routes/components/[slug]/+page.svelte
index 5ad10d4..6eb8a08 100644
--- a/src/routes/components/[slug]/+page.svelte
+++ b/src/routes/components/[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/components/[slug]/+page.ts b/src/routes/components/[slug]/+page.ts
index 2fc67d6..466ee91 100644
--- a/src/routes/components/[slug]/+page.ts
+++ b/src/routes/components/[slug]/+page.ts
@@ -1,12 +1,29 @@
 import { error } from '@sveltejs/kit';
 import type { Component } from 'svelte';
 
+import {
+	createHighlighterCoreSync,
+	createOnigurumaEngine,
+	createJavaScriptRegexEngine,
+	type HighlighterCore
+} from 'shiki';
+import svelte from 'shiki/langs/svelte.mjs';
+import dark from 'shiki/themes/github-dark-default.mjs';
+import { browser } from '$app/environment';
+
 export const load = async ({ params }) => {
 	const { slug } = params;
 
+	const shiki = createHighlighterCoreSync({
+		themes: [dark],
+		langs: [svelte],
+		// Use the WASM version of Oniguruma on the browser, and the JS engine on the server
+		engine: browser ? await createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
+	});
+
 	try {
-		const post = (await import(`$content/components/${slug}/content.svelte.md`)) as {
-			default: Component;
+		const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as {
+			default: Component<{ shiki: HighlighterCore }>;
 			metadata: {
 				title: string;
 				description: string;
@@ -14,9 +31,10 @@ export const load = async ({ params }) => {
 		};
 		return {
 			Content: post.default,
-			meta: { ...post.metadata, slug }
+			meta: { ...post.metadata, slug },
+			shiki
 		};
 	} catch {
-		error(404, `Component '${slug}' not found`);
+		error(404, `Example '${slug}' not found`);
 	}
 };
diff --git a/src/routes/examples/[slug]/+page.ts b/src/routes/examples/[slug]/+page.ts
index d559a2c..466ee91 100644
--- a/src/routes/examples/[slug]/+page.ts
+++ b/src/routes/examples/[slug]/+page.ts
@@ -1,9 +1,15 @@
 import { error } from '@sveltejs/kit';
 import type { Component } from 'svelte';
 
-import { createHighlighterCoreSync, createOnigurumaEngine, type HighlighterCore } from 'shiki';
+import {
+	createHighlighterCoreSync,
+	createOnigurumaEngine,
+	createJavaScriptRegexEngine,
+	type HighlighterCore
+} from 'shiki';
 import svelte from 'shiki/langs/svelte.mjs';
 import dark from 'shiki/themes/github-dark-default.mjs';
+import { browser } from '$app/environment';
 
 export const load = async ({ params }) => {
 	const { slug } = params;
@@ -11,7 +17,8 @@ export const load = async ({ params }) => {
 	const shiki = createHighlighterCoreSync({
 		themes: [dark],
 		langs: [svelte],
-		engine: await createOnigurumaEngine(import('shiki/wasm'))
+		// Use the WASM version of Oniguruma on the browser, and the JS engine on the server
+		engine: browser ? await createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
 	});
 
 	try {