renderAsyncComponent() — vue Function Reference

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

Function typescript ServerRenderer BundleRenderer calls 4 called by 1

Entity Profile

ServerRenderer→ BundleRenderer→ renderAsyncComponent() — vue Function Reference

Dependency Diagram

graph TD
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7["renderAsyncComponent()"]
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0["renderNode()"]
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0 -->|calls| dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7
  9f53d048_e9bd_bd7d_3ea7_71affe1529d8["createComponent()"]
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 9f53d048_e9bd_bd7d_3ea7_71affe1529d8
  9be52295_4e01_b6fd_a016_873e7cb61153["renderComponent()"]
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 9be52295_4e01_b6fd_a016_873e7cb61153
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0["renderNode()"]
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 41d8a2ed_7600_023d_56ff_e6bd2066a1b0
  1ffb05c8_3cc3_e1d5_cfe6_6c27dfbdebb4["next()"]
  dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 -->|calls| 1ffb05c8_3cc3_e1d5_cfe6_6c27dfbdebb4
  style dcf7cfe4_3738_9989_2f8a_38a12cfc6bf7 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)
      }
    }
  }
}