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 VueCore GlobalAPI 6 imports 3 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  4be43750_5259_d6e1_902d_9b3e2df2b9c4["debug.ts"]
  81a11719_3457_ecad_7c86_c586d804debb["config.ts"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 81a11719_3457_ecad_7c86_c586d804debb
  82e2e746_8f28_fbf0_8cf7_69eca6423e4a["create-component.ts"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 82e2e746_8f28_fbf0_8cf7_69eca6423e4a
  07237020_2f32_55be_02ad_e77197985632["getComponentName"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 07237020_2f32_55be_02ad_e77197985632
  09aa5370_2caa_6b33_3f44_6ac5211bd11b["util"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 09aa5370_2caa_6b33_3f44_6ac5211bd11b
  64c87498_c46a_6944_ab9d_8e45519852a8["component"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 64c87498_c46a_6944_ab9d_8e45519852a8
  72fd8695_a700_b0bb_c497_9baf5b0b19e0["currentInstance"]
  4be43750_5259_d6e1_902d_9b3e2df2b9c4 --> 72fd8695_a700_b0bb_c497_9baf5b0b19e0
  88dc54e4_4a50_ce50_5fb5_52118613323e["error.ts"]
  88dc54e4_4a50_ce50_5fb5_52118613323e --> 4be43750_5259_d6e1_902d_9b3e2df2b9c4
  395cc6b0_6f88_f1b1_f5dd_8cdf5c229777["options.ts"]
  395cc6b0_6f88_f1b1_f5dd_8cdf5c229777 --> 4be43750_5259_d6e1_902d_9b3e2df2b9c4
  ebb0510e_1beb_0f1e_d9b5_9f9e319cefcc["props.ts"]
  ebb0510e_1beb_0f1e_d9b5_9f9e319cefcc --> 4be43750_5259_d6e1_902d_9b3e2df2b9c4
  style 4be43750_5259_d6e1_902d_9b3e2df2b9c4 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 VueCore domain, GlobalAPI 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: VueCore, subdomain: GlobalAPI, directory: src/core/util).

Analyze Your Own Codebase

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

Try Supermodel Free