视图构建

declare function h<T extends ViewDescriptor>(
  type: T,
  propsOrChildren?: AnyProps | RenderChildren,
  children?: RenderChildren
): InferView<T>

import { h } from 'vitarx'

// 创建元素
const el = h('div', { class: 'container' }, 'Hello')

// 创建组件
const comp = h(MyComponent, { prop: 'value' })

// 嵌套子节点
const nested = h('div', null, [h('span', null, 'Hello'), h('span', null, 'World')])

declare function dynamic<T>(build: () => T, location?: CodeLocation): DynamicView<T>

import { dynamic, ref } from 'vitarx'

function App() {
  const show = ref(true)

  return dynamic(() => {
    return show.value ? <div>显示</div> : <div>隐藏</div>
  })
}

declare function mergeProps(p1: AnyProps, p2: AnyProps): AnyProps

import { mergeProps } from 'vitarx'

const merged = mergeProps({ class: 'a', id: 'test' }, { class: 'b', style: 'color: red' })
// { class: 'a b', id: 'test', style: 'color: red' }

// 重载一：渲染组件
declare function render<T extends Component>(
  component: T,
  container: HostContainer,
  ctx?: ViewContext
): ComponentView<T>

// 重载二：渲染视图
declare function render<T extends View>(view: T, container: HostContainer, ctx?: ViewContext): T

import { ModalComponent } from 'xxxx'

// 渲染组件到body中
const view = render(ModalComponent, document.body)

setTimeout(() => {
  view.dispose() // 销毁
}, 3000)

const view = render(<div>Hello World</div>, document.body)

setTimeout(() => {
  view.dispose() // 销毁
}, 3000)

declare function builder<P extends AnyProps, R extends View>(
  builder: (props: P, location?: CodeLocation) => R,
  displayName?: string
): ViewBuilder<P, R>

import { builder } from 'vitarx'

// 标记一个视图构建器
const Button = builder((props, location) => {
  return <button {...props}>{props.children}</button>
})

function App() {
  // 实际创建出的节点为 <button>按钮</button>
  return <Button>按钮</Button>
}

// JSX: <div>{count.value + 1}</div>
// 编译为: createView('div', null, expr(() => count.value + 1))

expr(() => 'hello') // → 'hello'（静态表达式，零开销）
expr(() => count.value) // → Ref<number, never>（包含响应式依赖）

// JSX: <div>{data.name}</div>
// 编译为: createView('div', null, accessor(data, 'name'))

// JSX: <div>{show ? <A /> : <B />}</div>
// 编译为: createView('div', null, branch(() => show.value ? 0 : 1, [() => <A />, () => <B />]))

interface FragmentProps {
  children?: RenderChildren
}

import { Fragment } from 'vitarx'

function MultiRoot() {
  return (
    <Fragment>
      <div>First</div>
      <div>Second</div>
    </Fragment>
  )
}

interface DynamicProps {
  is: ViewDescriptor | undefined | null | false
  key?: unknown
  memo?: boolean | number
  children?: RenderChildren
  [key: string]: any
}

import { Dynamic, ref } from 'vitarx'

function App() {
  const currentComponent = ref(HomeComponent)

  return <Dynamic is={currentComponent} />
}

interface CommentProps {
  text: string
}

import { Comment } from 'vitarx'

function App() {
  return (
    <div>
      <Comment text="section start" />
      <div>Content</div>
    </div>
  )
}

interface PlainTextProps {
  text: string | number
}

import { PlainText } from 'vitarx'

function App() {
  return <PlainText text="Hello World" />
}