From a297c3b41e17651e062248ec80f37a6800c310fa Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 6 Feb 2024 16:12:27 +0100
Subject: [PATCH] docs: move shiki highlighter to composable (#1325)

---
 docs/components/content/ComponentCard.vue    | 22 +++-------------
 docs/components/content/ComponentExample.vue | 22 +++-------------
 docs/composables/useShikiHighlighter.ts      | 27 ++++++++++++++++++++
 3 files changed, 33 insertions(+), 38 deletions(-)
 create mode 100644 docs/composables/useShikiHighlighter.ts

diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index 46072124..dd233129 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -52,14 +52,8 @@
 
 <script setup lang="ts">
 import { transformContent } from '@nuxt/content/transformers'
-import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
 import { upperFirst, camelCase, kebabCase } from 'scule'
-import MaterialTheme from 'shiki/themes/material-theme.mjs'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 // eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
@@ -273,18 +267,8 @@ function renderObject (obj: any) {
   return obj
 }
 
-const highlighter = createShikiHighlighter({
-  bundledThemes: {
-    'material-theme': MaterialTheme,
-    'material-theme-lighter': MaterialThemeLighter,
-    'material-theme-palenight': MaterialThemePalenight
-  },
-  bundledLangs: {
-    html: HtmlLang,
-    mdc: MdcLang,
-    vue: VueLang
-  }
-})
+const highlighter = useShikiHighlighter()
+
 const { data: ast } = await useAsyncData(
   `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
   async () => {
diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index 232f6db2..647aea92 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -22,13 +22,8 @@
 import { camelCase } from 'scule'
 import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
 import { transformContent } from '@nuxt/content/transformers'
-import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
-import MaterialTheme from 'shiki/themes/material-theme.mjs'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
+import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
+
 
 const props = defineProps({
   component: {
@@ -85,18 +80,7 @@ const data = await fetchContentExampleCode(camelName)
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
 
-const highlighter = createShikiHighlighter({
-  bundledThemes: {
-    'material-theme': MaterialTheme,
-    'material-theme-lighter': MaterialThemeLighter,
-    'material-theme-palenight': MaterialThemePalenight
-  },
-  bundledLangs: {
-    html: HtmlLang,
-    mdc: MdcLang,
-    vue: VueLang
-  }
-})
+const highlighter = useShikiHighlighter()
 const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
   markdown: {
     highlight: {
diff --git a/docs/composables/useShikiHighlighter.ts b/docs/composables/useShikiHighlighter.ts
new file mode 100644
index 00000000..39f684e5
--- /dev/null
+++ b/docs/composables/useShikiHighlighter.ts
@@ -0,0 +1,27 @@
+import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
+import MaterialTheme from 'shiki/themes/material-theme.mjs'
+import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
+import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
+import HtmlLang from 'shiki/langs/html.mjs'
+import MdcLang from 'shiki/langs/mdc.mjs'
+import VueLang from 'shiki/langs/vue.mjs'
+
+let highlighter
+export const useShikiHighlighter = () => {
+  if (!highlighter) {
+    highlighter = createShikiHighlighter({
+      bundledThemes: {
+        'material-theme': MaterialTheme,
+        'material-theme-lighter': MaterialThemeLighter,
+        'material-theme-palenight': MaterialThemePalenight
+      },
+      bundledLangs: {
+        html: HtmlLang,
+        mdc: MdcLang,
+        vue: VueLang
+      }
+    })
+  }
+
+  return highlighter
+}
\ No newline at end of file