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 CompilerSFC 4 imports

Entity Profile

Dependency Diagram

graph LR
  ed689537_848c_dfa2_c97d_29c62eaf7c8e["tsx-test.tsx"]
  09422b63_6947_479f_f3b8_a48790187388["./index"]
  ed689537_848c_dfa2_c97d_29c62eaf7c8e --> 09422b63_6947_479f_f3b8_a48790187388
  640c5630_c924_297a_b265_64ad36b365b4["utils.ts"]
  ed689537_848c_dfa2_c97d_29c62eaf7c8e --> 640c5630_c924_297a_b265_64ad36b365b4
  526bbcde_5613_9f1a_1c80_ab1e7061c667["expectType"]
  ed689537_848c_dfa2_c97d_29c62eaf7c8e --> 526bbcde_5613_9f1a_1c80_ab1e7061c667
  ae6eb6a4_c3be_68e2_81f6_f67b97a4ccd3["expectType"]
  ed689537_848c_dfa2_c97d_29c62eaf7c8e --> ae6eb6a4_c3be_68e2_81f6_f67b97a4ccd3
  style ed689537_848c_dfa2_c97d_29c62eaf7c8e 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 CompilerSFC 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: CompilerSFC, directory: types/test/v3).

Analyze Your Own Codebase

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

Try Supermodel Free