renderStartingTag() — vue Function Reference

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

Function typescript ServerRenderer TemplateRenderer calls 2 called by 1

Entity Profile

ServerRenderer→ TemplateRenderer→ renderStartingTag() — vue Function Reference

Dependency Diagram

graph TD
  fb398399_d926_3617_25c6_d6f4774a601b["renderStartingTag()"]
  affe67c1_b5f5_cf58_e5d3_d3d820ab290f["render.ts"]
  fb398399_d926_3617_25c6_d6f4774a601b -->|defined in| affe67c1_b5f5_cf58_e5d3_d3d820ab290f
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0["renderElement()"]
  5d214d01_e84c_efe3_20b5_5a79ec7eecb0 -->|calls| fb398399_d926_3617_25c6_d6f4774a601b
  bd740f9a_5c1f_4435_53be_45cdf54e148b["hasAncestorData()"]
  fb398399_d926_3617_25c6_d6f4774a601b -->|calls| bd740f9a_5c1f_4435_53be_45cdf54e148b
  f3f6ba33_384b_d456_9f4b_374326fcad16["getVShowDirectiveInfo()"]
  fb398399_d926_3617_25c6_d6f4774a601b -->|calls| f3f6ba33_384b_d456_9f4b_374326fcad16
  style fb398399_d926_3617_25c6_d6f4774a601b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/render.ts lines 360–425

function renderStartingTag(node: VNode, context) {
  let markup = `<${node.tag}`
  const { directives, modules } = context

  // construct synthetic data for module processing
  // because modules like style also produce code by parent VNode data
  if (isUndef(node.data) && hasAncestorData(node)) {
    node.data = {}
  }
  if (isDef(node.data)) {
    // check directives
    const dirs = node.data.directives
    if (dirs) {
      for (let i = 0; i < dirs.length; i++) {
        const name = dirs[i].name
        if (name !== 'show') {
          const dirRenderer = resolveAsset(context, 'directives', name)
          if (dirRenderer) {
            // directives mutate the node's data
            // which then gets rendered by modules
            dirRenderer(
              node.isComponentRootElement ? node.parent : node,
              dirs[i]
            )
          }
        }
      }
    }

    // v-show directive needs to be merged from parent to child
    const vshowDirectiveInfo = getVShowDirectiveInfo(node)
    if (vshowDirectiveInfo) {
      directives.show(node, vshowDirectiveInfo)
    }

    // apply other modules
    for (let i = 0; i < modules.length; i++) {
      const res = modules[i](node)
      if (res) {
        markup += res
      }
    }
  }
  // attach scoped CSS ID
  let scopeId
  const activeInstance = context.activeInstance
  if (
    isDef(activeInstance) &&
    activeInstance !== node.context &&
    isDef((scopeId = activeInstance.$options._scopeId))
  ) {
    markup += ` ${scopeId as any}`
  }
  if (isDef(node.fnScopeId)) {
    markup += ` ${node.fnScopeId}`
  } else {
    while (isDef(node)) {
      //@ts-expect-error
      if (isDef((scopeId = node.context.$options._scopeId))) {
        markup += ` ${scopeId}`
      }
      node = node.parent!
    }
  }
  return markup + '>'
}