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
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b["renderElement()"]
  439dcf36_0570_3186_196e_91c09d6d3ea6["render.ts"]
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b -->|defined in| 439dcf36_0570_3186_196e_91c09d6d3ea6
  51b378bf_731a_cea8_7ade_1275c8da637e["renderNode()"]
  51b378bf_731a_cea8_7ade_1275c8da637e -->|calls| d9e88fbe_8aa3_df58_ea93_81e3ec0c817b
  916e77c4_6ed2_baeb_dd37_5bbdbfb0ce8c["registerComponentForCache()"]
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b -->|calls| 916e77c4_6ed2_baeb_dd37_5bbdbfb0ce8c
  97c5bc9c_0aa3_baf8_f9d0_ae63133eb395["renderStartingTag()"]
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b -->|calls| 97c5bc9c_0aa3_baf8_f9d0_ae63133eb395
  style d9e88fbe_8aa3_df58_ea93_81e3ec0c817b 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)
  }
}