From c8ee1e98662cf23cd8b06316b6aa097cd65d544c Mon Sep 17 00:00:00 2001
From: Voltra <Voltra@users.noreply.github.com>
Date: Sat, 12 Aug 2023 20:09:35 +0000
Subject: [PATCH 1/2] Make component entirely reactive

---
 src/index.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/index.js b/src/index.js
index 1f4a872..6daa2cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, computed } from 'vue'
 import Prism from 'prismjs'
 
 export default defineComponent({
@@ -16,26 +16,26 @@ export default defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const defaultSlot = (slots && slots.default && slots.default()) || []
-    const code =
-      props.code || (defaultSlot && defaultSlot.length)
-        ? defaultSlot[0].children
-        : ''
-    const inline = props.inline
-    const language = props.language
-    const prismLanguage = Prism.languages[language]
-    const className = `language-${language}`
+    const defaultSlot = computed(() => (slots && slots.default && slots.default()) || []);
+    const code = computed(() => props.code || (defaultSlot.value && defaultSlot.value.length)
+      ? defaultSlot.value[0].children
+      : '');
+    const prismLanguage = computed(() => Prism.languages[props.language]);
+    const className = computed(() => `language-${props.language}`);
 
     if (process.env.NODE_ENV === 'development' && !prismLanguage) {
       throw new Error(
         `Prism component for language "${language}" was not found, did you forget to register it? See all available ones: https://cdn.jsdelivr.net/npm/prismjs/components/`
       )
     }
+
+    const highlightedCode = computed(() => Prism.highlight(code.value, prismLanguage.value));
+
     return () => {
-      if (inline) {
+      if (props.inline) {
         return h('code', {
-          class: [className],
-          innerHTML: Prism.highlight(code, prismLanguage)
+          class: [className.value],
+          innerHTML: highlightedCode.value
         })
       }
 
@@ -43,13 +43,13 @@ export default defineComponent({
         'pre',
         {
           ...attrs,
-          class: [attrs.class, className]
+          class: [attrs.class, className.value]
         },
         [
           h('code', {
             ...attrs,
-            class: [attrs.class, className],
-            innerHTML: Prism.highlight(code, prismLanguage)
+            class: [attrs.class, className.value],
+            innerHTML: highlightedCode.value
           })
         ]
       )

From 9e495f151e5c24beed4337b976c3f7fcd2311d49 Mon Sep 17 00:00:00 2001
From: Voltra <Voltra@users.noreply.github.com>
Date: Sat, 12 Aug 2023 20:13:31 +0000
Subject: [PATCH 2/2] Ensure conditionals are properly executed

---
 src/index.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 6daa2cb..2d50473 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,9 +17,14 @@ export default defineComponent({
   },
   setup(props, { slots, attrs }) {
     const defaultSlot = computed(() => (slots && slots.default && slots.default()) || []);
-    const code = computed(() => props.code || (defaultSlot.value && defaultSlot.value.length)
-      ? defaultSlot.value[0].children
-      : '');
+    const code = computed(() => {
+      return props.code
+      || (
+        defaultSlot.value && defaultSlot.value.length
+          ? defaultSlot.value[0].children
+          : ''
+      )
+    );
     const prismLanguage = computed(() => Prism.languages[props.language]);
     const className = computed(() => `language-${props.language}`);