fix: reactively load components when body changes (#3283)

---------

Co-authored-by: Farnabaz <farnabaz@gmail.com>

Author: danielroe

package.json

@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.16.1",
-    "@nuxtjs/mdc": "^0.16.1",
+    "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@cd1c4fd",
     "@shikijs/langs": "^3.2.1",
     "@sqlite.org/sqlite-wasm": "3.49.1-build2",
     "@webcontainer/env": "^1.1.1",

playground/components/TestA.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="text-red-500">
+    Test A <slot />
+  </span>
+</template>

playground/components/TestB.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="text-blue-500">
+    Test B <slot />
+  </span>
+</template>

playground/components/TestC.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="text-green-500">
+    Test C <slot />
+  </span>
+</template>

playground/components/playground.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <ContentRenderer
+      :value="value"
+    />
+    <UButton @click="randomize">
+      Change Component
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const body = ref({
+  type: 'root',
+  children: [
+    {
+      type: 'element', tag: 'p', props: {},
+      children: [
+        { type: 'text', value: 'Hello ' },
+        { type: 'element', tag: 'span', props: {}, children: [
+          { type: 'text', value: 'world' },
+        ] },
+        { type: 'text', value: '!' },
+      ],
+    },
+  ],
+})
+const value = computed(() => {
+  return { body: body.value }
+})
+
+const tags = ['TestA', 'TestB', 'TestC']
+const randomize = () => {
+  let tag = body.value.children[0].children[1].tag
+  while (tag === body.value.children[0].children[1].tag) {
+    tag = tags[Math.floor(Math.random() * tags.length)]
+  }
+  body.value.children[0].children[1].tag = tag
+  body.value.children[0].children[1].children![0]!.value = `world (${tag})`
+}
+</script>

pnpm-lock.yaml

@@ -100,27 +100,15 @@ const data = computed(() => {
 const proseComponentMap = Object.fromEntries(['p', 'a', 'blockquote', 'code', 'pre', 'code', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'img', 'ul', 'ol', 'li', 'strong', 'table', 'thead', 'tbody', 'td', 'th', 'tr', 'script'].map(t => [t, `prose-${t}`]))
 
 const { mdc } = useRuntimeConfig().public || {}
-const tags = {
+const tags = computed(() => ({
   ...mdc?.components?.prose && props.prose !== false ? proseComponentMap : {},
   ...mdc?.components?.map || {},
   ...toRaw(props.data?.mdc?.components || {}),
   ...props.components,
-}
-
-const key = computed(() => {
-  if (!import.meta.dev) {
-    return undefined
-  }
-  const res = Array.from(new Set(body.value ? loadComponents(body.value, { tags }) : []))
-    .filter(t => localComponents.includes(pascalCase(String(t))))
-    .sort()
-    .join('.')
-
-  return res
-})
+}))
 
 const componentsMap = computed(() => {
-  return body.value ? resolveContentComponents(body.value, { tags }) : {}
+  return body.value ? resolveContentComponents(body.value, { tags: tags.value }) : {}
 })
 
 function resolveVueComponent(component: string | Renderable) {
@@ -214,7 +202,6 @@ function findMappedTag(node: MDCElement, tags: Record<string, string>) {
 <template>
   <MDCRenderer
     v-if="!isEmpty"
-    :key="key"
     :body="body"
     :data="data"
     :class="props.class"