renderStartingTag() — vue Function Reference

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

Function typescript ServerRenderer BundleRenderer calls 5 called by 1

Entity Profile

ServerRenderer→ BundleRenderer→ renderStartingTag() — vue Function Reference

Dependency Diagram

graph TD
  4c03e6b5_515a_506e_9433_bf75e6caf6a5["renderStartingTag()"]
  ea57a750_853d_071e_282c_4b7157987b46["renderElement()"]
  ea57a750_853d_071e_282c_4b7157987b46 -->|calls| 4c03e6b5_515a_506e_9433_bf75e6caf6a5
  a1f5b8ca_b6d5_6b24_155e_038685c97c85["isUndef()"]
  4c03e6b5_515a_506e_9433_bf75e6caf6a5 -->|calls| a1f5b8ca_b6d5_6b24_155e_038685c97c85
  39e92ed8_978b_086e_5133_9d7a0c28b594["hasAncestorData()"]
  4c03e6b5_515a_506e_9433_bf75e6caf6a5 -->|calls| 39e92ed8_978b_086e_5133_9d7a0c28b594
  2be3818d_a4f3_495c_543c_ee071b428982["isDef()"]
  4c03e6b5_515a_506e_9433_bf75e6caf6a5 -->|calls| 2be3818d_a4f3_495c_543c_ee071b428982
  67dda8cf_b5cf_1ffb_6ae2_8e3b81dcf898["resolveAsset()"]
  4c03e6b5_515a_506e_9433_bf75e6caf6a5 -->|calls| 67dda8cf_b5cf_1ffb_6ae2_8e3b81dcf898
  8e7e138f_acad_802b_a6d7_60e684b03bdb["getVShowDirectiveInfo()"]
  4c03e6b5_515a_506e_9433_bf75e6caf6a5 -->|calls| 8e7e138f_acad_802b_a6d7_60e684b03bdb
  style 4c03e6b5_515a_506e_9433_bf75e6caf6a5 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 + '>'
}