【开源自荐】一款声明式 Rust WebAssembly UI 框架 Euv 版本基线：基于 euv v0.12.17（202607）当前仓库 euvdev/euv 的实际实现。所有 API、宏、CLI 命令均与源码一致。 项目概述 Euv 是一个基于 Rust 语言开发的声明式、跨平台 UI 框架，构建在 WebAssembly 之上。框架采用"按需 Patch 虚拟 DOM + 精确依赖追踪的细粒度响应式"两条路径相结合的设计：用 html! 宏编写类 JSX 的声明式视图，用 usesignal / computed! / watch! 构建自动追踪依赖的响应式系统，渲染层通过 dataeuvid 全局事件委托 + 局部 Patch 更新避免不必要的整树 Diff。 核心特性 声明式 UI：html! 宏编写类 JSX 语法，编译期类型检查；属性支持字符串、信号、if/match 三态表达式；Rust 关键字属性加 r 前缀（rtype、rloop）；布尔属性必须传 Signal<bool；data / aria 自动转 data / aria 细粒度响应式 Signal：usesignal Hook + 精确依赖追踪，Signal::get() 在 DynamicNode 渲染上下文内自动注册依赖，只有真正依赖该信号的 DynamicNode 会被标记为 dirty —— 不是全树广播 按需虚拟 DOM：VirtualNode 变体 Element | Text | Fragment | Dynamic | Empty；列表支持 key: 启用 Keyed Diffing；非列表场景走精确 Patch（attribute 级 HashMap diff），跳过完整 Diff Microtask 批处理：多次 Signal::set() 在同一微任务内自动合并为一次 dispatch；App::batch(|| { ... }) 提供手动抑制中间调度，闭包退出后才统一刷新 DOM 全局事件委托：基于事件冒泡 + dataeuvid 精确路由；非冒泡事件（blur / focus / mouseenter / mouseleave / scroll / resize / 媒体类 35 种）直绑 target；每种冒泡事件类型全局只注册一次监听器；handler 在 DOM 节点删除时自动清理，无内存泄漏 CSSinRust：class! 宏原生支持伪类（hover / focus / nthchild 等）、伪元素（before / after）、媒体查询（media(...)）、类继承（cbase();）、参数化类（cdynamiccolor(color: &str)）、动态属性名（{key}: {value};），snakecase 属性自动转 kebabcase；vars! / var! 提供类型安全的 CSS 变量定义与引用（注意是 vars! 不是 cssvars!） 计算属性 + 副作用：computed!(a, b, |a: T, b: T| R { ... }) 派生只读信号；watch!(a, b, |a, b| { ... }) 注册副作用，创建时立即执行一次 组件系统：[component] 属性宏标注，组件函数签名 fn(node: VirtualNode<Props) VirtualNode；支持 Props Down / Callback Up / 双向绑定（Shared Signal） CLI 工具链：内置 euv（来自 euvcli crate），run / build / fmt 三种子命令，集成 wasmpack，自动处理 cratepath / wwwdir，支持热更新开发服务器 架构设计亮点 Workspace 架构 euv/ 聚合入口：euvcore + euvmacros ├── core/ 核心运行时：app / event / reactive / renderer / vdom ├── macros/ 过程宏：html! / class! / vars! / var! / computed! / watch! / [component] ├── cli/ CLI 工具，binary 名 = euv ├── engine/ 独立的 2D 游戏引擎（ECS / 固定步长 / 物理 / 碰撞 / 精灵 / 音频） ├── ui/ 跨 page 共享的 UI 组件库（euvbutton / euvcard / euvinput / ...） └── example/ 示例 SPA：50 个 page（路由 / 布局 / 业务 / 全栈） | Crate | 职责 | 说明 | | | | | | euv | 聚合入口 | 对外暴露 App::usesignal / batch / mount / ...；重新导出 euvcore + euvmacros | | euvcore | 核心运行时 | VirtualNode、Signal 系统、Renderer、事件代理、HookContext、Scheduler | | euvmacros | 过程宏 | html! class! vars! var! computed! watch! [component] | | euvcli | CLI | run / build / fmt；集成 wasmpack，热更新 Dev Server | | euvengine | 2D 游戏引擎 | ECS / 固定步长 / 物理 / 碰撞 / 精灵 / 音频，可选依赖 | | euvui | 组件库 | 跨 page 共享的 euvbutton / euvcard / euvmodal / euvinput / euvbadge / ... | | euvexample | 示例 SPA | 50 个示例 page，覆盖各种使用场景 | 响应式系统架构 Signal::set(value) ── T: Clone + PartialEq ──┐ │ 值变化才更新 ▼ SignalInner.setvalue │ ▼ 遍历 listeners（已 swapout 防重入） │ ▼ updatedependentsbysignaladdr ──► 标记 dirty │ ▼ App::scheduleupdate([...dirty ids]) │ ▼ queueMicrotask ─► dispatch │ ▼ 精确重新渲染每个 dirty DynamicNode │ ▼ attribute HashMap diff ─► DOM patch 关键设计要点： 1. 精确依赖追踪：Signal::get() 在 CURRENTTRACKINGDYNAMICID 激活时调用 adddependent()，建立 signal → DynamicNode 的反向依赖图。Signal::set() 时只标记实际依赖此 signal 的 DynamicNode，避免全树广播 2. Microtask 批处理：多次 set() 自动合并；App::batch(|| { ... }) 进一步抑制中间 dispatch，闭包退出时统一调度一次 3. Copy 语义：Signal<T 实质是 usize（内部地址），实现 Copy；底层 Rc<SignalInner<T 由全局注册表持有，跨 async / 闭包 / setTimeout 自由拷贝不增加引用开销 4. usesignal Hook 语义：首次渲染时执行 init() 并存储；后续渲染返回同一 signal；hook index 由调用位置隐式决定（不可写在条件分支内，否则 index 错位） 5. 生命周期安全：Signal::deactivate() 仅清空 listeners/dependents，保留堆分配——因为 async 闭包可能持有旧 Signal 拷贝，释放内存会导致后续 .get() useafterfree；deactivate 后这些调用退化为 noop 按需 Patch 策略 | 场景 | 算法 | 复杂度 | | | | | | key: 列表 | Keyed Diff | O(N) 建映射 + 最小 DOM 移动 | | 普通列表 | Positional Diff | O(min(M, N)) 逐位比较 | | 静态子树 | 不渲染（直接复用） | O(1) | | DynamicNode 重渲染 | Attribute HashMap diff | 只更新变化的属性 | | 初次挂载 | 全量构建 | — | Keyed Diff 细节： 构建 oldkey → oldindex HashMap 复用已有 DOM 节点，仅 Patch 属性差异 通过 insertbefore 最小化 DOM 移动操作 反向遍历移除废弃节点，避免索引偏移 全局事件委托机制 DOM Element └─ dataeuvid="42" ← 自动分配，跨 rerender 保持稳定 └─ Event Bubble ─► window 委托监听器 └─ dispatchdelegatedevent() 沿 target 向上找到最近的 dataeuvid └─ HandlerRegistry[(42, "click")] ─► HandlerSlot ─► 用户回调 冒泡事件：click / input / change / submit / keydown / keyup / mousedown / mouseup / mousemove / mouseover / mouseout / wheel / touchstart / touchmove / touchend / dragstart / drag / dragend / drop / pointer / focusin / focusout / copy / cut / paste / scroll(冒泡部分) 等，全部走 window 委托，每种事件类型全局只有一个监听器 非冒泡事件（35 种）：blur / focus / mouseenter / mouseleave / load / error / scroll(element) / resize / beforeunload / 所有媒体事件（play / pause / seeked / timeupdate / ...）/ transitionend / animationend 等，直接绑在 target 元素上 精确路由：dataeuvid 在元素首次挂载时分配，跨 rerender 复用同一 ID，handler 通过 ID 在全局注册表查找 自动清理：DOM 节点被移除时，对应的 HandlerSlot 自动从注册表删除；Signal::deactivate() 同步清理 subscribe 闭包 开发便捷性 1. 声明式 UI 编写 rust use euv::; use wasmbindgen::prelude::; [wasmbindgen] pub fn main() { consoleerrorpanichook::setonce(); App::mount("app", app); } fn app() VirtualNode { let count: Signal<i32 = App::usesignal(|| 0); let disabled: Signal<bool = App::usesignal(|| false); html! { div { class: ccontainer() euvbutton { variant: EuvButtonVariant::Primary label: if { disabled.get() } { "Disabled" } else { "Increment" } onclick: move |: Event| { count.set(count.get() + 1); } } p { "Count: " { count.get() } } } } } 2. 响应式状态管理 rust fn pageconditional() VirtualNode { let showdetails: Signal<bool = App::usesignal(|| false); let usertype: Signal<String = App::usesignal(|| "guest".tostring()); // 计算属性：自动追踪 firstname / lastname 变化 // （此处仅示意，实际 firstname / lastname 需另行 usesignal） // let fullname: Signal<String = computed!(firstname, lastname, |f: String, l: String| String { // format!("{} {}", f, l) // }); html! { div { class: cpagecontainer() euvbutton { variant: EuvButtonVariant::Primary label: "Toggle Details" onclick: move |: Event| { showdetails.set(!showdetails.get()); } } // 响应式 if——条件用 {} 包裹，依赖变化时自动重新求值 if { showdetails.get() } { div { class: ccard() "Hidden Details" } } // 响应式 match——必须含 通配分支 match { usertype.get().asstr() } { "guest" = { p { "Welcome, guest!" } } "user" = { p { "Hello, user!" } } = { p { "Welcome, admin!" } } } } } } 3. CSSinRust 样式系统 rust // 类的定义统一在 ui/src/style/class/fn.rs（306 个跨 page 共享类） // 或项目内 example/src/style/class/fn.rs（仅本页使用） // page 的 view/fn.rs 只引用 cxxx() 函数，绝不写 class! 块 class! { pub ccard { background: var!(background); border: 1px solid var!(border); borderradius: 0; padding: var!(space2xl); hover { background: var!(accentmuted); bordercolor: var!(accent); } // 唯一断点：移动端 < 768px media("(maxwidth: 767px)") { padding: var!(spacelg); } } // 参数化类 pub cdynamiccolor(color: &str) { color: {color}; background: var!(background); } // 继承 pub cprimarybutton { cbase(); background: var!(accent); color: var!(textonaccent); hover { background: var!(foreground); // 覆盖 cbase 的 hover } } } // CSS 变量：vars! 定义，var! 引用 vars! { pub cthemelight { background: "ffffff"; foreground: "000000"; accent: "000000"; accentmuted: "ffffff"; border: "000000"; textonaccent: "ffffff"; } pub cthemedark { background: "000000"; foreground: "ffffff"; accent: "ffffff"; accentmuted: "000000"; border: "ffffff"; textonaccent: "000000"; } } // 引用：var!(name) 或 var!("name") 都行 class! { pub ccard { background: var!(background); border: 1px solid var!(border); } } 4. 计算属性与副作用 rust let count: Signal<i32 = App::usesignal(|| 0i32); let name: Signal<String = App::usesignal(|| String::from("euv")); // 计算属性：firstname + lastname → fullname，自动追踪依赖 let firstname: Signal<String = App::usesignal(|| String::from("Rust")); let lastname: Signal<String = App::usesignal(|| String::from("WASM")); let fullname: Signal<String = computed!(firstname, lastname, |f: String, l: String| String { format!("{} {}", f, l) }); // watch!：注册副作用，依赖变化时执行；创建时立即执行一次 watch!(count, name, |countval: i32, nameval: String| { websys::console::log1( &format!("count={}, name={}", countval, nameval).into() ); }); // 批量更新：闭包内的多次 set 只触发一次 DOM dispatch App::batch(|| { count.set(10); name.set("updated".tostring()); }); 5. CLI 开发工具链 sh 安装（包名 euvcli，binary 名 euv） cargo install euvcli 创建 / 启动开发服务器（热更新） euv run cratepath . wwwdir ./www 构建发布 euv build cratepath . wwwdir ./www 格式化宏代码 euv fmt cratepath . 框架优势 1. 零成本抽象设计 编译期宏展开：html! class! vars! 等宏在编译时生成 Rust 代码，运行时零解析开销 类型安全：Props 自动提取（[derive(Clone, Default)]）、事件类型强校验、Signal<bool 强制用于布尔属性，编译时消除 UI 逻辑错误 Copy 语义 Signal：Signal<T 是 usize（内部地址），实现 Copy，仅复制指针地址；底层 Rc<SignalInner<T 由全局注册表持有，跨闭包 / async / setTimeout 无 GC 压力 依赖追踪在编译期不可能：Signal::get() 的运行时追踪是 euv 唯一"运行时开销"，但配合 DynamicNode 边界可以做到零浪费——不在 DynamicNode 内调用 get() 就不注册依赖 2. 精细 DOM 更新策略 属性级 Patch：新旧属性 HashMap 对比，仅更新变化的属性 信号绑定属性：AttributeValue::Signal 自动订阅变更，DOM 节点移除时自动清理监听器（dataeuvsignaladdrs 维护 signal 地址集合） DynamicNode 独立渲染：每个动态节点拥有独立的 Renderer 和 HookContext，实现局部更新 arm 切换检测：match 分支切换时自动执行 renderfullreplace，避免错误复用 3. 完善的生命周期管理 DOM 子树清理：cleanupdomsubtree 递归清理事件处理器、动态节点监听器、信号监听器 Hook 清理：match 分支切换 / 组件卸载时执行 cleanups 队列，防止信号泄漏 Signal 存活标记：alive 标志位 + deactivate() 路径确保已清理的 Signal 不再触发无效更新 4. 跨平台响应式布局 媒体查询：class! 宏原生支持 media("(maxwidth: 767px)") { ... } 语法，唯一断点 < 768px 视为移动端 CSS 变量主题：vars! 实现明暗主题，运行时通过 class 切换即可 技术栈对比 | 特性 | Euv | Yew | Dioxus | Leptos | | | | | | | | 声明式宏 | ✅ html! | ✅ html! | ✅ rsx! | ✅ view! | | 响应式系统 | ✅ Signal + 精确依赖追踪 | ❌（手动更新） | ✅ | ✅ | | 计算属性 | ✅ computed! | ❌ | ❌ | ✅ | | 副作用 | ✅ watch! | ❌ | ❌ | ✅ | | CSSinRust | ✅ class! + vars! | ❌ | ❌ | ❌ | | 伪类/媒体查询 | ✅ 原生 | ❌ | ❌ | ❌ | | 全局事件委托 | ✅ 冒泡事件 | ❌ | ❌ | ❌ | | 组件系统 | ✅ [component] | ✅ | ✅ | ✅ | | CLI 工具链 | ✅ run/build/fmt + wasmpack | ❌ | ✅ | ✅ | | WASM 目标 | ✅ | ✅ | ✅ | ✅ | | Rust Edition | 2024 | 2021 | 2021 | 2021 | | 2D 游戏引擎 | ✅ euvengine（ECS / 物理） | ❌ | ❌ | ❌ | 生态系统与社区 文档与学习资源 官方文档：< API 文档：< < crates.io：< 许可证：MIT License 适用场景 推荐使用场景 1. Web 应用前端：需要高性能、类型安全的现代 Web 应用 2. 内部管理系统：表单密集、条件渲染复杂的管理后台 3. 交互式仪表盘：实时数据更新、响应式布局的数据看板 4. 组件库开发：类型安全的 Props、CSSinRust 样式隔离 5. WASM 原生应用：追求极致性能的 WebAssembly 应用 6. 2D 游戏 / 可视化：搭配 euvengine（ECS / 物理 / 碰撞 / 精灵 / 音频）开箱即用 示例页面（50 个） 基础特性：/（About）、/animation、/async、/customattrs、/badge、/componentbinding、/browser、/camera、/canvas、/conditional、/counter、/dynamiccomponent、/event、/facedetector、/form、/keepalive、/lifecycle、/list、/modal、/observer、/select、/timer、/fileupload、/virtuallist 全栈集成：/websocket、/sse、/qrcode、/shortlink、/rss、/cicd、/monitor 2D / 3D 游戏：/game2d、/game3d、/gomoku、/ide、/chat、/auth、/blog、/textreader、/videolist、/tracking、/trace、/order、/user、/notification、/json、/sticky、/redis、/diff 核心能力 35 种非冒泡事件 + 所有冒泡事件走全局委托，每种事件类型仅一个 window 监听器 内置组件：euvbutton（Primary / Outline）、euvcard、euvinput、euvcheckbox、euvbadge、euvtag、euvalert、euvmodal、euvlogo、euvinfo、euvformlabel 依赖追踪 + 计算属性：Signal::get() 在 DynamicNode 内自动追踪；computed! 派生只读信号 生命周期 Hook：usesignal / usecleanup / usewindowevent / useinterval 批量更新：App::batch(|| { ... }) 闭包内多次 set 仅触发一次 DOM dispatch 总结 Euv 作为一款新兴的 Rust 声明式 UI 框架，在 WebAssembly 生态中独树一帜。通过创新的架构设计——精确依赖追踪的 Signal 系统 + 按需 Patch 虚拟 DOM + dataeuvid 全局事件委托 + CSSinRust 样式系统——为 Rust 前端开发提供了完整且高效的解决方案。 框架的核心优势在于： 开发体验：html! 宏 + class! 宏 + usesignal Hook + computed! + watch!，五位一体的声明式开发范式 运行时性能：精确依赖追踪（不广播）+ Microtask 批处理 + Keyed Diff + 事件委托，多层级优化确保极致渲染效率 类型安全：编译期宏展开、Props 自动提取、事件类型强校验、Signal<bool 强约束，将 UI 错误扼杀在编译阶段 工程化支持：CLI 工具链提供 run / build / fmt 三种模式，内置热更新、wasmpack 集成和代码格式化 生态完整：可选 euvengine（2D 游戏引擎）+ euvui（跨 page 组件库）+ 50 个示例 page 对于追求类型安全、高性能和开发效率的 Rust WebAssembly 项目，Euv 是一个值得考虑的优秀选择。随着 Rust 前端生态的不断发展，Euv 有望成为 WebAssembly UI 开发的重要工具。
OriginalDTResearch & learningDTLifestyle & entertainmentDTWeb app
DEV TRENDS / COMMUNITY
Discuss this edition
Sign in with GitHub to share a thought, question, or useful follow-up.