From a4f958d8c4a80949394373e0dd579ee50d861f9f Mon Sep 17 00:00:00 2001
From: sup39 <dev@sup39.dev>
Date: Tue, 23 Jan 2024 07:18:42 +0900
Subject: [PATCH] feat: auto load MkCode syntax highlight

---
 .../client/src/components/MkCode.core.vue     | 23 +++++++++++++---
 packages/client/src/scripts/prism.ts          | 26 +++++++++++++++++++
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 packages/client/src/scripts/prism.ts

diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/MkCode.core.vue
index 00cded28..11720b4f 100644
--- a/packages/client/src/components/MkCode.core.vue
+++ b/packages/client/src/components/MkCode.core.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-import Prism from "prismjs";
+import { computed, ref } from "vue";
+import Prism, { loadLanguage } from "@/scripts/prism";
 import "prismjs/themes/prism-okaidia.css";
 
 const props = defineProps<{
@@ -17,9 +17,24 @@ const props = defineProps<{
 	inline?: boolean;
 }>();
 
-const prismLang = computed(() =>
-	Prism.languages[props.lang] ? props.lang : "plaintext",
+// fallback to "plaintext" if language not loaded
+const prismLang = ref(
+	props.lang != null && props.lang in Prism.languages
+		? props.lang
+		: "plaintext",
 );
+
+// try to load language asynchronously
+if (props.lang != null && !(props.lang in Prism.languages)) {
+	const { lang } = props;
+	loadLanguage(props.lang).then(
+		// onLoaded
+		() => (prismLang.value = lang),
+		// onError
+		() => {},
+	);
+}
+
 const html = computed(() =>
 	Prism.highlight(
 		props.code,
diff --git a/packages/client/src/scripts/prism.ts b/packages/client/src/scripts/prism.ts
new file mode 100644
index 00000000..dbae8eac
--- /dev/null
+++ b/packages/client/src/scripts/prism.ts
@@ -0,0 +1,26 @@
+import Prism from "prismjs";
+import "prismjs/plugins/autoloader/prism-autoloader.js";
+
+// TODO
+Prism.plugins.autoloader.languages_path =
+	"https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/";
+
+const nonExistingLanguagesCache = new Set<string>();
+export const loadLanguage = (lang: string) =>
+	new Promise<void>((resolve, reject) => {
+		// cached non-existing language
+		if (nonExistingLanguagesCache.has(lang)) return reject();
+		// load language with autoloader
+		Prism.plugins.autoloader.loadLanguages(
+			lang,
+			// loaded
+			() => resolve(),
+			// failed
+			() => {
+				nonExistingLanguagesCache.add(lang);
+				reject();
+			},
+		);
+	});
+
+export default Prism;