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
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff["renderStartingTag()"]
  d01aa4a1_3c46_4b89_d557_7244e1de2f8f["renderElement()"]
  d01aa4a1_3c46_4b89_d557_7244e1de2f8f -->|calls| 4eef67a1_feb3_dd8c_e42a_2d625c9694ff
  299f2646_f776_9b7d_1179_7b9087b1e66c["isUndef()"]
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff -->|calls| 299f2646_f776_9b7d_1179_7b9087b1e66c
  22f5faa4_9441_9eb4_1066_2342a27d60cf["hasAncestorData()"]
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff -->|calls| 22f5faa4_9441_9eb4_1066_2342a27d60cf
  5b855538_2046_796e_16f9_7327a61399cb["isDef()"]
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff -->|calls| 5b855538_2046_796e_16f9_7327a61399cb
  f9462a81_a8d5_9062_8a24_a56d8ba459fc["resolveAsset()"]
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff -->|calls| f9462a81_a8d5_9062_8a24_a56d8ba459fc
  687221db_6a12_02f3_cd25_627d7c252cc8["getVShowDirectiveInfo()"]
  4eef67a1_feb3_dd8c_e42a_2d625c9694ff -->|calls| 687221db_6a12_02f3_cd25_627d7c252cc8
  style 4eef67a1_feb3_dd8c_e42a_2d625c9694ff 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 + '>'
}