renderAsyncComponent() — vue Function Reference

Architecture documentation for the renderAsyncComponent() function in render.ts from the vue codebase.

Function typescript ServerRenderer TemplateRenderer calls 3 called by 1

Entity Profile

ServerRenderer→ TemplateRenderer→ renderAsyncComponent() — vue Function Reference

Dependency Diagram

graph TD
  e37a9278_38b9_9843_639b_2e03afcc6e0c["renderAsyncComponent()"]
  affe67c1_b5f5_cf58_e5d3_d3d820ab290f["render.ts"]
  e37a9278_38b9_9843_639b_2e03afcc6e0c -->|defined in| affe67c1_b5f5_cf58_e5d3_d3d820ab290f
  09a727a5_6777_1c56_897b_3604820d99ba["renderNode()"]
  09a727a5_6777_1c56_897b_3604820d99ba -->|calls| e37a9278_38b9_9843_639b_2e03afcc6e0c
  73d8a225_abe4_207c_8ace_a53edec56ba1["renderComponent()"]
  e37a9278_38b9_9843_639b_2e03afcc6e0c -->|calls| 73d8a225_abe4_207c_8ace_a53edec56ba1
  09a727a5_6777_1c56_897b_3604820d99ba["renderNode()"]
  e37a9278_38b9_9843_639b_2e03afcc6e0c -->|calls| 09a727a5_6777_1c56_897b_3604820d99ba
  0548b39e_7a1b_1094_08ee_75e092985e56["next()"]
  e37a9278_38b9_9843_639b_2e03afcc6e0c -->|calls| 0548b39e_7a1b_1094_08ee_75e092985e56
  style e37a9278_38b9_9843_639b_2e03afcc6e0c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 222–285

function renderAsyncComponent(node, isRoot, context) {
  const factory = node.asyncFactory

  const resolve = comp => {
    if (comp.__esModule && comp.default) {
      comp = comp.default
    }
    const { data, children, tag } = node.asyncMeta
    const nodeContext = node.asyncMeta.context
    const resolvedNode: any = createComponent(
      comp,
      data,
      nodeContext,
      children,
      tag
    )
    if (resolvedNode) {
      if (resolvedNode.componentOptions) {
        // normal component
        renderComponent(resolvedNode, isRoot, context)
      } else if (!Array.isArray(resolvedNode)) {
        // single return node from functional component
        renderNode(resolvedNode, isRoot, context)
      } else {
        // multiple return nodes from functional component
        context.renderStates.push({
          type: 'Fragment',
          children: resolvedNode,
          rendered: 0,
          total: resolvedNode.length
        })
        context.next()
      }
    } else {
      // invalid component, but this does not throw on the client
      // so render empty comment node
      context.write(`<!---->`, context.next)
    }
  }

  if (factory.resolved) {
    resolve(factory.resolved)
    return
  }

  const reject = context.done
  let res
  try {
    res = factory(resolve, reject)
  } catch (e: any) {
    reject(e)
  }
  if (res) {
    if (typeof res.then === 'function') {
      res.then(resolve, reject).catch(reject)
    } else {
      // new syntax in 2.3
      const comp = res.component
      if (comp && typeof comp.then === 'function') {
        comp.then(resolve, reject).catch(reject)
      }
    }
  }
}