Streaming content into ContentRenderer

[danwritecode]

Hey All, I would love to use the ContentRenderer directly for LLM powered applications. Reason being, it's a really nice way to render custom components from markdown. I have a naive example here, however this is not efficient as it re-renders the entire time on watch. I'm wondering if there is an actual way to do this?

<script setup lang="ts">
const props = defineProps<{
  markdown: string
}>()

interface AstNode {
  type: string
  tag?: string
  props?: Record<string, any>
  value?: string
  children?: AstNode[]
}

const ast = ref<AstNode>()

async function generateAst(markdown: string) {
  const { body } = await parseMarkdown(markdown)
  return body as AstNode
}

onMounted(async () => {
  ast.value = await generateAst(props.markdown)
})

watch(
  () => props.markdown,
  async (newMarkdown) => {
    ast.value = await generateAst(newMarkdown)
  }
)
</script>

<template>
  <div v-if="ast">
    <ContentRenderer 
      :value="ast" 
    />
    </div>
</template>