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
  97c5bc9c_0aa3_baf8_f9d0_ae63133eb395["renderStartingTag()"]
  439dcf36_0570_3186_196e_91c09d6d3ea6["render.ts"]
  97c5bc9c_0aa3_baf8_f9d0_ae63133eb395 -->|defined in| 439dcf36_0570_3186_196e_91c09d6d3ea6
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b["renderElement()"]
  d9e88fbe_8aa3_df58_ea93_81e3ec0c817b -->|calls| 97c5bc9c_0aa3_baf8_f9d0_ae63133eb395
  71e80a09_f70c_628c_5a8a_002f466f8874["hasAncestorData()"]
  97c5bc9c_0aa3_baf8_f9d0_ae63133eb395 -->|calls| 71e80a09_f70c_628c_5a8a_002f466f8874
  55a09939_deb1_fd91_7ea9_43a9d2acfbd8["getVShowDirectiveInfo()"]
  97c5bc9c_0aa3_baf8_f9d0_ae63133eb395 -->|calls| 55a09939_deb1_fd91_7ea9_43a9d2acfbd8
  style 97c5bc9c_0aa3_baf8_f9d0_ae63133eb395 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 + '>'
}