Vitarx：新一代信号驱动的高性能前端框架

import { ref } from 'vitarx'

function Counter() {
  const count = ref(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  )
}

import { ref, reactive, computed, watch, watchEffect } from 'vitarx'

// 基本响应式引用
const name = ref('Vitarx')

// 响应式对象
const state = reactive({
  count: 0,
  items: []
})

// 计算属性
const doubled = computed(() => state.count * 2)

// 监听
watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`)
})

// 自动追踪依赖的副作用
watchEffect(() => {
  console.log(`current count: ${count.value}`)
})

import { onInit, onMounted, onDispose } from 'vitarx'

function MyComponent() {
  onInit(() => {
    console.log('组件初始化')
  })

  onMounted(() => {
    console.log('组件挂载到 DOM')
  })

  onDispose(() => {
    console.log('组件销毁，清理资源')
  })

  return <div>Hello Vitarx</div>
}

import { For, Suspense, Lazy, Freeze, Transition, Teleport } from 'vitarx'

// 列表渲染
<For each={items} key={(item) => item.id}>
  {(item) => <div>{item.name}</div>}
</For>

// 异步加载
<Suspense fallback={<Loading />}>
  <Lazy loader={() => import('./HeavyComponent')} />
</Suspense>

// 冻结组件（不响应外部信号变化）
<Freeze>
  <StaticContent />
</Freeze>

// 过渡动画
<Transition name="fade">
  <div v-show={visible}>内容</div>
</Transition>

// 传送门
<Teleport to="body">
  <Modal />
</Teleport>

// 父组件提供数据
function Parent() {
  provide('theme', 'dark')
  return <Child />
}

// 子组件注入数据
function Child() {
  const theme = inject('theme', 'light')
  return <div class={`theme-${theme}`}>内容</div>
}

import { renderToString, renderToStream } from 'vitarx'

// 字符串渲染
const html = await renderToString(App)

// 流式渲染
const stream = await renderToStream(App)

┌─────────────────────────────────────────────┐
│                   vitarx                    │  ← 聚合包，统一导出
├────────────┬─────────────┬──────────────────┤
│runtime-dom │ runtime-ssr │                  │  ← 平台适配层
├────────────┴─────────────┼──────────────────┤
│        runtime-core      │     utils        │  ← 运行时核心 & 工具
├──────────────────────────┼──────────────────┤
│        responsive        │                  │  ← 响应式系统
└──────────────────────────┴──────────────────┘

pnpm create vitarx

npm run dev