【文章标题】：Vidact – a compiler that turns React into direct DOM operations
【文章标题】：Vidact —— 将React转换为直接DOM操作的编译器
【文章正文】：
Write React. Ship the DOM.
编写React代码。直接输出DOM。
Vidact compiles your function components and hooks into direct DOM operations. No Virtual DOM, no re-renders, no React in the bundle.
Vidact将您的函数组件和钩子编译为直接的DOM操作。无需虚拟DOM，无需重新渲染，打包产物中不含React。
Every example below is ordinary React, compiled by Vidact and running on this page.
以下每个示例都是普通的React代码，经过Vidact编译后在本页运行。
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<output>Count: {count}</output>
</div>
)
}- Component calls
- 组件调用次数
- 1
- 1
- DOM mutations
- DOM变更次数
- 0
- 0
- Tree diffs
- 树差异比较次数
- 0
- 0
Counted live by a MutationObserver watching this demo.
通过MutationObserver实时监测本示例的计数结果。
How it works
工作原理
Compile
编译阶段
The compiler maps every expression to the values it reads. Code it cannot compile stops the build at its exact line.
编译器将每个表达式映射到其读取的值。遇到无法编译的代码时，会在对应行终止构建。
Mount once
单次挂载
The component runs a single time and builds its DOM. There is no render loop and no tree to diff.
组件仅运行一次并构建其DOM。不存在渲染循环，也无需进行树差异比较。
Update surgically
精准更新
A state write runs only the updaters that read it: a text node, an attribute, a list row.
状态更新时仅运行读取该状态的更新器：文本节点、属性或列表行。
Full-stack, the same way
全栈统一方案
Vidact Start adds file routes, server loaders, SSR, hydration, and client navigation, all generated by the same compiler, so server and browser output match by construction.
Vidact Start新增文件路由、服务器加载器、SSR、水合及客户端导航功能，全部由同一编译器生成，确保服务端与浏览器输出结果天然一致。
Explore Vidact Start
import { defineFileRoute } from '@vidact/start'
const loader = async ({ params }) => ({
product: await findProduct(params.productId),
})
export function ProductRoute({ loaderData }) {
return <h1>{loaderData.product.name}</h1>
}
export const Route = defineFileRoute({
loader,
component: ProductRoute,
})Vidact is in beta. What is supported is documented; what is not fails at build time.
Vidact目前处于测试阶段。已支持的功能均有文档记录；未支持的功能会在构建时报错。
Get started
立即开始