parseComponent() — vue Function Reference

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

Function typescript SfcCompiler ScriptCompiler called by 1

Entity Profile

SfcCompiler→ ScriptCompiler→ parseComponent() — vue Function Reference

Dependency Diagram

graph TD
  fcce9d76_9068_3c88_145d_3d973c3e1547["parseComponent()"]
  0efbfda6_f2a2_633c_6405_ea7a32c8a88d["parseComponent.ts"]
  fcce9d76_9068_3c88_145d_3d973c3e1547 -->|defined in| 0efbfda6_f2a2_633c_6405_ea7a32c8a88d
  9805a097_f548_6bcf_28b2_a636f018a4de["parse()"]
  9805a097_f548_6bcf_28b2_a636f018a4de -->|calls| fcce9d76_9068_3c88_145d_3d973c3e1547
  style fcce9d76_9068_3c88_145d_3d973c3e1547 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/parseComponent.ts lines 77–220

export function parseComponent(
  source: string,
  options: VueTemplateCompilerParseOptions = {}
): SFCDescriptor {
  const sfc: SFCDescriptor = {
    source,
    filename: DEFAULT_FILENAME,
    template: null,
    script: null,
    scriptSetup: null, // TODO
    styles: [],
    customBlocks: [],
    cssVars: [],
    errors: [],
    shouldForceReload: null as any // attached in parse() by compiler-sfc
  }
  let depth = 0
  let currentBlock: SFCBlock | null = null

  let warn: any = msg => {
    sfc.errors.push(msg)
  }

  if (__DEV__ && options.outputSourceRange) {
    warn = (msg, range) => {
      const data: WarningMessage = { msg }
      if (range.start != null) {
        data.start = range.start
      }
      if (range.end != null) {
        data.end = range.end
      }
      sfc.errors.push(data)
    }
  }

  function start(
    tag: string,
    attrs: ASTAttr[],
    unary: boolean,
    start: number,
    end: number
  ) {
    if (depth === 0) {
      currentBlock = {
        type: tag,
        content: '',
        start: end,
        end: 0, // will be set on tag close
        attrs: attrs.reduce((cumulated, { name, value }) => {
          cumulated[name] = value || true
          return cumulated
        }, {})
      }

      if (typeof currentBlock.attrs.src === 'string') {
        currentBlock.src = currentBlock.attrs.src
      }

      if (isSpecialTag(tag)) {
        checkAttrs(currentBlock, attrs)
        if (tag === 'script') {
          const block = currentBlock as SFCScriptBlock
          if (block.attrs.setup) {
            block.setup = currentBlock.attrs.setup
            sfc.scriptSetup = block
          } else {
            sfc.script = block
          }
        } else if (tag === 'style') {
          sfc.styles.push(currentBlock)
        } else {
          sfc[tag] = currentBlock
        }
      } else {
        // custom blocks
        sfc.customBlocks.push(currentBlock)
      }
    }
    if (!unary) {
      depth++