fix(ContentRendererMarkdown): preload components used in content (#1309)

nuxt · Jun 29, 2022 · a77bbd9 · a77bbd9
1 parent 9cebc36
commit a77bbd9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 16 deletions.
diff --git a/src/runtime/components/ContentRendererMarkdown.ts b/src/runtime/components/ContentRendererMarkdown.ts
@@ -46,9 +46,16 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup () {
+  async setup (props) {
     const { content: { tags = {} } } = useRuntimeConfig().public
 
+    await resolveContentComponents(props.value.body, {
+      tags: {
+        ...tags,
+        ...props.value?.tags || {}
+      }
+    })
+
     return { tags }
   },
   render (ctx) {
@@ -363,3 +370,28 @@ function mergeTextNodes (nodes: Array<VNode>) {
   }
   return mergedNodes
 }
+
+async function resolveContentComponents (body, meta) {
+  const components = Array.from(new Set(loadComponents(body, meta)))
+  await Promise.all(components.map(async (c) => {
+    const resolvedComponent = resolveComponent(c) as any
+    if (resolvedComponent?.__asyncLoader && !resolvedComponent.__asyncResolved) {
+      await resolvedComponent.__asyncLoader()
+    }
+  }))
+
+  function loadComponents (node, documentMeta) {
+    if (node.type === 'text' || node.tag === 'binding') {
+      return []
+    }
+    const renderTag: string = (typeof node.props?.__ignoreMap === 'undefined' && documentMeta.tags[node.tag!]) || node.tag!
+    const components: string[] = []
+    if (node.type !== 'root' && !htmlTags.includes(renderTag as any)) {
+      components.push(renderTag)
+    }
+    for (const child of (node.children || [])) {
+      components.push(...loadComponents(child, documentMeta))
+    }
+    return components
+  }
+}
diff --git a/src/runtime/plugins/documentDriven.ts b/src/runtime/plugins/documentDriven.ts
@@ -180,6 +180,18 @@ export default defineNuxtPlugin((nuxt) => {
       _page,
       _surround
     ]) => {
+      // Find used layout
+      const layoutName = findLayout(to, _page, _navigation, _globals)
+
+      // Prefetch layout component
+      const layout = layouts[layoutName]
+
+      if (layout && layout?.__asyncLoader && !layout.__asyncResolved) {
+        await layout.__asyncLoader()
+      }
+      // Apply layout
+      to.meta.layout = layoutName
+
       if (_navigation) {
         navigation.value = _navigation
       }
@@ -192,25 +204,13 @@ export default defineNuxtPlugin((nuxt) => {
         surround.value = _surround
       }
 
-      if (_page) {
-        // Use `redirect` key to redirect to another page
-        if (_page?.redirect) { return _page?.redirect }
+      // Use `redirect` key to redirect to another page
+      if (_page?.redirect) { return _page?.redirect }
 
+      if (_page) {
         // Update values
         page.value = _page
       }
-
-      // Find used layout
-      const layoutName = findLayout(to, _page, _navigation, _globals)
-
-      // Prefetch layout component
-      const layout = layouts[layoutName]
-      if (layout && layout?.__asyncLoader && !layout.__asyncResolved) {
-        await layout.__asyncLoader()
-      }
-
-      // Apply layout
-      to.meta.layout = layoutName
     })
   }