renderComponentInner() — vue Function Reference

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

Function typescript ServerRenderer BundleRenderer calls 5 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ renderComponentInner() — vue Function Reference

Dependency Diagram

graph TD
  b912b998_19db_0074_fde6_8126c7f548f0["renderComponentInner()"]
  9be52295_4e01_b6fd_a016_873e7cb61153["renderComponent()"]
  9be52295_4e01_b6fd_a016_873e7cb61153 -->|calls| b912b998_19db_0074_fde6_8126c7f548f0
  6b211741_5417_3681_068b_2bcb38fded30["renderComponentWithCache()"]
  6b211741_5417_3681_068b_2bcb38fded30 -->|calls| b912b998_19db_0074_fde6_8126c7f548f0
  c5559841_2093_4676_fd3e_0f3485fc8a40["createComponentInstanceForVnode()"]
  b912b998_19db_0074_fde6_8126c7f548f0 -->|calls| c5559841_2093_4676_fd3e_0f3485fc8a40
  f2ea83ff_0435_4be8_87ac_f6ab0b96233a["normalizeRender()"]
  b912b998_19db_0074_fde6_8126c7f548f0 -->|calls| f2ea83ff_0435_4be8_87ac_f6ab0b96233a
  2be3818d_a4f3_495c_543c_ee071b428982["isDef()"]
  b912b998_19db_0074_fde6_8126c7f548f0 -->|calls| 2be3818d_a4f3_495c_543c_ee071b428982
  41d8a2ed_7600_023d_56ff_e6bd2066a1b0["renderNode()"]
  b912b998_19db_0074_fde6_8126c7f548f0 -->|calls| 41d8a2ed_7600_023d_56ff_e6bd2066a1b0
  3fd16487_5069_75b0_842d_3d4d3393df69["waitForServerPrefetch()"]
  b912b998_19db_0074_fde6_8126c7f548f0 -->|calls| 3fd16487_5069_75b0_842d_3d4d3393df69
  style b912b998_19db_0074_fde6_8126c7f548f0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 192–220

function renderComponentInner(node, isRoot, context) {
  const prevActive = context.activeInstance
  // expose userContext on vnode
  node.ssrContext = context.userContext
  const child = (context.activeInstance = createComponentInstanceForVnode(
    node,
    context.activeInstance
  ))
  normalizeRender(child)

  const resolve = () => {
    const childNode = child._render()
    childNode.parent = node
    context.renderStates.push({
      type: 'Component',
      prevActive
    })
    if (isDef(node.data) && isDef(node.data.directives)) {
      childNode.data = childNode.data || {}
      childNode.data.directives = node.data.directives
      childNode.isComponentRootElement = true
    }
    renderNode(childNode, isRoot, context)
  }

  const reject = context.done

  waitForServerPrefetch(child, resolve, reject)
}