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
  cbb765a5_16f2_d102_c691_156f282d3846["renderComponentInner()"]
  f98325d3_a650_0f85_8573_d782ecc5b533["renderComponent()"]
  f98325d3_a650_0f85_8573_d782ecc5b533 -->|calls| cbb765a5_16f2_d102_c691_156f282d3846
  52c8eb6f_bc8d_0a16_cef4_069bbffe615e["renderComponentWithCache()"]
  52c8eb6f_bc8d_0a16_cef4_069bbffe615e -->|calls| cbb765a5_16f2_d102_c691_156f282d3846
  2d7d3012_61dc_d96c_e6ac_2793b75a662f["createComponentInstanceForVnode()"]
  cbb765a5_16f2_d102_c691_156f282d3846 -->|calls| 2d7d3012_61dc_d96c_e6ac_2793b75a662f
  c9350833_548a_8bf0_2285_11ffe157d7aa["normalizeRender()"]
  cbb765a5_16f2_d102_c691_156f282d3846 -->|calls| c9350833_548a_8bf0_2285_11ffe157d7aa
  5b855538_2046_796e_16f9_7327a61399cb["isDef()"]
  cbb765a5_16f2_d102_c691_156f282d3846 -->|calls| 5b855538_2046_796e_16f9_7327a61399cb
  53230fed_d564_80ea_bf1f_8c413f7b736f["renderNode()"]
  cbb765a5_16f2_d102_c691_156f282d3846 -->|calls| 53230fed_d564_80ea_bf1f_8c413f7b736f
  bf6152f6_1a44_2c23_e37f_b214afcd2746["waitForServerPrefetch()"]
  cbb765a5_16f2_d102_c691_156f282d3846 -->|calls| bf6152f6_1a44_2c23_e37f_b214afcd2746
  style cbb765a5_16f2_d102_c691_156f282d3846 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)
}