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
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5["renderAsyncComponent()"]
  439dcf36_0570_3186_196e_91c09d6d3ea6["render.ts"]
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 -->|defined in| 439dcf36_0570_3186_196e_91c09d6d3ea6
  51b378bf_731a_cea8_7ade_1275c8da637e["renderNode()"]
  51b378bf_731a_cea8_7ade_1275c8da637e -->|calls| 3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5
  76fb6501_9238_f973_a09b_d816dccd3853["renderComponent()"]
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 -->|calls| 76fb6501_9238_f973_a09b_d816dccd3853
  51b378bf_731a_cea8_7ade_1275c8da637e["renderNode()"]
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 -->|calls| 51b378bf_731a_cea8_7ade_1275c8da637e
  c25d0df8_742c_b09a_17fa_f3481184c969["next()"]
  3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 -->|calls| c25d0df8_742c_b09a_17fa_f3481184c969
  style 3b5f9da3_66f1_f97c_0fd0_c444c70ce9d5 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)
      }
    }
  }
}