Home / File/ debug.ts — vue Source File

debug.ts — vue Source File

Architecture documentation for debug.ts, a typescript file in the vue codebase. 6 imports, 3 dependents.

File typescript CompilerSFC StyleProcessor 6 imports 3 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  c11cafd0_9de7_a29e_a7df_dc098f20ea24["debug.ts"]
  d22f3dff_cc24_705a_1193_eec206dcb1d5["config.ts"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> d22f3dff_cc24_705a_1193_eec206dcb1d5
  a6875054_df8a_0ce4_8a16_374ce422dc53["create-component.ts"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> a6875054_df8a_0ce4_8a16_374ce422dc53
  16abdeb5_17d6_b741_ca16_dfc41a7d0df5["getComponentName"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 16abdeb5_17d6_b741_ca16_dfc41a7d0df5
  156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 907f4994_ea28_43b1_7976_0db9f0e97637
  5de22f6c_6406_d60a_f5e8_6b3e166124cc["currentInstance"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 5de22f6c_6406_d60a_f5e8_6b3e166124cc
  34ce4c45_a0c3_08f3_7cbe_679778705432["error.ts"]
  34ce4c45_a0c3_08f3_7cbe_679778705432 --> c11cafd0_9de7_a29e_a7df_dc098f20ea24
  5c734a8f_efba_819c_28fc_f56bfd6b701f["options.ts"]
  5c734a8f_efba_819c_28fc_f56bfd6b701f --> c11cafd0_9de7_a29e_a7df_dc098f20ea24
  e8576a88_2e85_86ff_b2f9_bbbb6de70a51["props.ts"]
  e8576a88_2e85_86ff_b2f9_bbbb6de70a51 --> c11cafd0_9de7_a29e_a7df_dc098f20ea24
  style c11cafd0_9de7_a29e_a7df_dc098f20ea24 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import config from '../config'
import { noop, isArray, isFunction } from 'shared/util'
import type { Component } from 'types/component'
import { currentInstance } from 'v3/currentInstance'
import { getComponentName } from '../vdom/create-component'

export let warn: (msg: string, vm?: Component | null) => void = noop
export let tip = noop
export let generateComponentTrace: (vm: Component) => string // work around flow check
export let formatComponentName: (vm: Component, includeFile?: false) => string

if (__DEV__) {
  const hasConsole = typeof console !== 'undefined'
  const classifyRE = /(?:^|[-_])(\w)/g
  const classify = str =>
    str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')

  warn = (msg, vm = currentInstance) => {
    const trace = vm ? generateComponentTrace(vm) : ''

    if (config.warnHandler) {
      config.warnHandler.call(null, msg, vm, trace)
    } else if (hasConsole && !config.silent) {
      console.error(`[Vue warn]: ${msg}${trace}`)
    }
  }

  tip = (msg, vm) => {
    if (hasConsole && !config.silent) {
      console.warn(`[Vue tip]: ${msg}` + (vm ? generateComponentTrace(vm) : ''))
    }
  }

  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}` : '')
    )
  }

  const repeat = (str, n) => {
    let res = ''
    while (n) {
      if (n % 2 === 1) res += str
      if (n > 1) str += str
      n >>= 1
    }
    return res
  }

  generateComponentTrace = (vm: Component | undefined) => {
    if ((vm as any)._isVue && vm!.$parent) {
      const tree: any[] = []
      let currentRecursiveSequence = 0
      while (vm) {
        if (tree.length > 0) {
          const last = tree[tree.length - 1]
          if (last.constructor === vm.constructor) {
            currentRecursiveSequence++
            vm = vm.$parent!
            continue
          } else if (currentRecursiveSequence > 0) {
            tree[tree.length - 1] = [last, currentRecursiveSequence]
            currentRecursiveSequence = 0
          }
        }
        tree.push(vm)
        vm = vm.$parent!
      }
      return (
        '\n\nfound in\n\n' +
        tree
          .map(
            (vm, i) =>
              `${i === 0 ? '---> ' : repeat(' ', 5 + i * 2)}${
                isArray(vm)
                  ? `${formatComponentName(vm[0])}... (${
                      vm[1]
                    } recursive calls)`
                  : formatComponentName(vm)
              }`
          )
          .join('\n')
      )
    } else {
      return `\n\n(found in ${formatComponentName(vm!)})`
    }
  }
}

Domain

Subdomains

Dependencies

Frequently Asked Questions

What does debug.ts do?
debug.ts is a source file in the vue codebase, written in typescript. It belongs to the CompilerSFC domain, StyleProcessor subdomain.
What functions are defined in debug.ts?
debug.ts defines 8 function(s): classify, formatComponentName, generateComponentTrace, msg, repeat, tip, vm, warn.
What does debug.ts depend on?
debug.ts imports 6 module(s): component, config.ts, create-component.ts, currentInstance, getComponentName, util.
What files import debug.ts?
debug.ts is imported by 3 file(s): error.ts, options.ts, props.ts.
Where is debug.ts in the architecture?
debug.ts is located at src/core/util/debug.ts (domain: CompilerSFC, subdomain: StyleProcessor, directory: src/core/util).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free