vue Architecture Docs
Home / File/ parseComponent.spec.ts — vue Source File

parseComponent.spec.ts — vue Source File

Architecture documentation for parseComponent.spec.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript CompilerSFC 3 imports

Entity Profile

Dependency Diagram

graph LR
  9dc5438b_e4a2_d57a_8bd9_415f662bfceb["parseComponent.spec.ts"]
  ecb7777f_63cc_7bf6_1f6a_fedf933d43a4["parseComponent.ts"]
  9dc5438b_e4a2_d57a_8bd9_415f662bfceb --> ecb7777f_63cc_7bf6_1f6a_fedf933d43a4
  4fedf5e2_2642_82d1_7b8c_20a3078d10a3["parseComponent"]
  9dc5438b_e4a2_d57a_8bd9_415f662bfceb --> 4fedf5e2_2642_82d1_7b8c_20a3078d10a3
  47ae9f26_59d1_fab2_349f_966f5d15495a["compiler"]
  9dc5438b_e4a2_d57a_8bd9_415f662bfceb --> 47ae9f26_59d1_fab2_349f_966f5d15495a
  style 9dc5438b_e4a2_d57a_8bd9_415f662bfceb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { WarningMessage } from 'types/compiler'
import { parseComponent } from '../src/parseComponent'

describe('Single File Component parser', () => {
  it('should parse', () => {
    const res = parseComponent(
      `
      <template>
        <div>hi</div>
      </template>
      <style src="./test.css"></style>
      <style lang="stylus" scoped>
        h1
          color red
        h2
          color green
      </style>
      <style module>
        h1 { font-weight: bold }
      </style>
      <style bool-attr val-attr="test"></style>
      <script>
        export default {}
      </script>
      <div>
        <style>nested should be ignored</style>
      </div>
    `
    )
    expect(res.template!.content.trim()).toBe('<div>hi</div>')
    expect(res.styles.length).toBe(4)
    expect(res.styles[0].src).toBe('./test.css')
    expect(res.styles[1].lang).toBe('stylus')
    expect(res.styles[1].scoped).toBe(true)
    expect(res.styles[1].content.trim()).toBe(
      'h1\n  color red\nh2\n  color green'
    )
    expect(res.styles[2].module).toBe(true)
    expect(res.styles[3].attrs['bool-attr']).toBe(true)
    expect(res.styles[3].attrs['val-attr']).toBe('test')
    expect(res.script!.content.trim()).toBe('export default {}')
  })

  it('should parse template with closed input', () => {
    const res = parseComponent(`
      <template>
        <input type="text"/>
      </template>
    `)

    expect(res.template!.content.trim()).toBe('<input type="text"/>')
  })

  it('should handle nested template', () => {
    const res = parseComponent(`
      <template>
        <div><template v-if="ok">hi</template></div>
      </template>
    `)
    expect(res.template!.content.trim()).toBe(
// ... (210 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does parseComponent.spec.ts do?
parseComponent.spec.ts is a source file in the vue codebase, written in typescript. It belongs to the CompilerSFC domain.
What does parseComponent.spec.ts depend on?
parseComponent.spec.ts imports 3 module(s): compiler, parseComponent, parseComponent.ts.
Where is parseComponent.spec.ts in the architecture?
parseComponent.spec.ts is located at packages/compiler-sfc/test/parseComponent.spec.ts (domain: CompilerSFC, directory: packages/compiler-sfc/test).

Analyze Your Own Codebase

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

Try Supermodel Free