renderElement() — vue Function Reference

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

Function typescript ServerRenderer TemplateRenderer calls 2 called by 1

Entity Profile

ServerRenderer→ TemplateRenderer→ renderElement() — vue Function Reference

Dependency Diagram

graph TD
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0["renderElement()"]
  affe67c1_b5f5_cf58_e5d3_d3d820ab290f["render.ts"]
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0 -->|defined in| affe67c1_b5f5_cf58_e5d3_d3d820ab290f
  09a727a5_6777_1c56_897b_3604820d99ba["renderNode()"]
  09a727a5_6777_1c56_897b_3604820d99ba -->|calls| 5d214d01_e84c_efe3_20b5_5a79ec7eecb0
  debfef1c_8851_e4a1_8d4e_0e80ea40fef9["registerComponentForCache()"]
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0 -->|calls| debfef1c_8851_e4a1_8d4e_0e80ea40fef9
  fb398399_d926_3617_25c6_d6f4774a601b["renderStartingTag()"]
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0 -->|calls| fb398399_d926_3617_25c6_d6f4774a601b
  style 5d214d01_e84c_efe3_20b5_5a79ec7eecb0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 304–334

function renderElement(el, isRoot, context) {
  const { write, next } = context

  if (isTrue(isRoot)) {
    if (!el.data) el.data = {}
    if (!el.data.attrs) el.data.attrs = {}
    el.data.attrs[SSR_ATTR] = 'true'
  }

  if (el.fnOptions) {
    registerComponentForCache(el.fnOptions, write)
  }

  const startTag = renderStartingTag(el, context)
  const endTag = `</${el.tag}>`
  if (context.isUnaryTag(el.tag)) {
    write(startTag, next)
  } else if (isUndef(el.children) || el.children.length === 0) {
    write(startTag + endTag, next)
  } else {
    const children: Array<VNode> = el.children
    context.renderStates.push({
      type: 'Element',
      children,
      rendered: 0,
      total: children.length,
      endTag
    })
    write(startTag, next)
  }
}