vue Architecture Docs
Home / File/ tsx-test.tsx — vue Source File

tsx-test.tsx — vue Source File

Architecture documentation for tsx-test.tsx, a tsx file in the vue codebase. 4 imports, 0 dependents.

File tsx VueCore 4 imports

Entity Profile

Dependency Diagram

graph LR
  5bddf87e_b9ea_affa_b55d_e4633d24ad6f["tsx-test.tsx"]
  451106ad_39e7_1c30_4a13_bb292ee7299e["./index"]
  5bddf87e_b9ea_affa_b55d_e4633d24ad6f --> 451106ad_39e7_1c30_4a13_bb292ee7299e
  3bc1859e_5f62_1ad0_1a20_c1ba96d0683f["utils.ts"]
  5bddf87e_b9ea_affa_b55d_e4633d24ad6f --> 3bc1859e_5f62_1ad0_1a20_c1ba96d0683f
  620797b4_7e39_eef5_c1bc_e0f39399ca9d["expectType"]
  5bddf87e_b9ea_affa_b55d_e4633d24ad6f --> 620797b4_7e39_eef5_c1bc_e0f39399ca9d
  2d9e76a6_6850_37a3_10b2_3172dcc30bcd["expectType"]
  5bddf87e_b9ea_affa_b55d_e4633d24ad6f --> 2d9e76a6_6850_37a3_10b2_3172dcc30bcd
  style 5bddf87e_b9ea_affa_b55d_e4633d24ad6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { VNode, defineComponent, ref, RenderContext } from '../../index'
import { expectType } from '../utils'

expectType<VNode>(<div />)
expectType<JSX.Element>(<div />)
expectType<JSX.Element>(<div id="foo" />)
expectType<JSX.Element>(<input value="foo" />)

// @ts-expect-error style css property validation
expectError(<div style={{ unknown: 123 }} />)

// allow array styles and nested array styles
expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
expectType<JSX.Element>(
  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
)

// @ts-expect-error unknown prop
expectError(<div foo="bar" />)

// allow key/ref on arbitrary element
expectType<JSX.Element>(<div key="foo" />)
expectType<JSX.Element>(<div ref="bar" />)

// allow Ref type type on arbitrary element
const fooRef = ref<HTMLElement>()
expectType<JSX.Element>(<div ref={fooRef} />)
expectType<JSX.Element>(
  <div
    ref={el => {
      fooRef.value = el as HTMLElement
    }}
  />
)

expectType<JSX.Element>(
  <input
    onInput={e => {
      // infer correct event type
      expectType<EventTarget | null>(e.target)
    }}
  />
)

const Foo = defineComponent({
  props: {
    foo: String,
    bar: {
      type: Number,
      required: true
    }
  }
})

// @ts-expect-error
;<Foo />
// @ts-expect-error
;<Foo bar="1" />
// @ts-expect-error
;<Foo bar={1} foo={2} />

// working
;<Foo bar={1} />
;<Foo bar={1} foo="baz" />
;<div slot="x" />

export default ({ data }: RenderContext) => {
  return <button {...data} />
}

Domain

Dependencies

Source

Frequently Asked Questions

What does tsx-test.tsx do?
tsx-test.tsx is a source file in the vue codebase, written in tsx. It belongs to the VueCore domain.
What does tsx-test.tsx depend on?
tsx-test.tsx imports 4 module(s): ./index, expectType, expectType, utils.ts.
Where is tsx-test.tsx in the architecture?
tsx-test.tsx is located at types/test/v3/tsx-test.tsx (domain: VueCore, directory: types/test/v3).

Analyze Your Own Codebase

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

Try Supermodel Free