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
  c2f595b4_afdd_12e0_bb68_ce636e8e6952["renderAsyncComponent()"]
  53230fed_d564_80ea_bf1f_8c413f7b736f["renderNode()"]
  53230fed_d564_80ea_bf1f_8c413f7b736f -->|calls| c2f595b4_afdd_12e0_bb68_ce636e8e6952
  97ceaa96_dc73_11db_99c0_3dfa1b31b53f["createComponent()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| 97ceaa96_dc73_11db_99c0_3dfa1b31b53f
  f98325d3_a650_0f85_8573_d782ecc5b533["renderComponent()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| f98325d3_a650_0f85_8573_d782ecc5b533
  53230fed_d564_80ea_bf1f_8c413f7b736f["renderNode()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| 53230fed_d564_80ea_bf1f_8c413f7b736f
  aa8bd4ea_fa85_d5ae_4a66_dfaa11bbbedf["next()"]
  c2f595b4_afdd_12e0_bb68_ce636e8e6952 -->|calls| aa8bd4ea_fa85_d5ae_4a66_dfaa11bbbedf
  style c2f595b4_afdd_12e0_bb68_ce636e8e6952 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)
      }
    }
  }
}