formatComponentName() — vue Function Reference

Architecture documentation for the formatComponentName() function in debug.ts from the vue codebase.

Function typescript ServerRenderer TemplateStream calls 3 called by 1

Entity Profile

ServerRenderer→ TemplateStream→ formatComponentName() — vue Function Reference

Dependency Diagram

graph TD
  02cfb8c5_645e_6e81_4566_3bd5205dbeee["formatComponentName()"]
  6c43050a_c466_5002_9f37_18f1d5f11833["generateComponentTrace()"]
  6c43050a_c466_5002_9f37_18f1d5f11833 -->|calls| 02cfb8c5_645e_6e81_4566_3bd5205dbeee
  b6885901_8acd_8c4a_af15_cbd768bcd57b["isFunction()"]
  02cfb8c5_645e_6e81_4566_3bd5205dbeee -->|calls| b6885901_8acd_8c4a_af15_cbd768bcd57b
  5b67b159_7ee7_ed13_42a0_e4b5c3befd84["getComponentName()"]
  02cfb8c5_645e_6e81_4566_3bd5205dbeee -->|calls| 5b67b159_7ee7_ed13_42a0_e4b5c3befd84
  87821e4a_29fb_861f_b0dc_e0d79e14e033["classify()"]
  02cfb8c5_645e_6e81_4566_3bd5205dbeee -->|calls| 87821e4a_29fb_861f_b0dc_e0d79e14e033
  style 02cfb8c5_645e_6e81_4566_3bd5205dbeee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/util/debug.ts lines 34–55

  formatComponentName = (vm, includeFile) => {
    if (vm.$root === vm) {
      return '<Root>'
    }
    const options =
      isFunction(vm) && (vm as any).cid != null
        ? (vm as any).options
        : vm._isVue
        ? vm.$options || (vm.constructor as any).options
        : vm
    let name = getComponentName(options)
    const file = options.__file
    if (!name && file) {
      const match = file.match(/([^/\\]+)\.vue$/)
      name = match && match[1]
    }

    return (
      (name ? `<${classify(name)}>` : `<Anonymous>`) +
      (file && includeFile !== false ? ` at ${file}` : '')
    )
  }