Consecuit

一个 实验性 的函数式 Web UI 框架，它使用 Rust 类型系统进行挂钩和更多。

这与其他框架有何不同？

其他函数式 UI 框架:

• 要求开发人员遵循 Hooks 规则 或类似规则。

• 通过计算组件/挂钩被调用的顺序动态识别组件/挂钩并维护它们的状态。

• 动态设计

  • 组件在父组件渲染时动态创建和挂载。
  • 组件可以根据状态进行挂载或卸载。

Consecuit:

• 使用 Rust 类型系统自动强制执行 Hooks 规则。

• 静态地知道将要创建的每个组件和将要发生的每个挂钩调用。

• 静态优先设计

  • 组件在应用开始时静态挂载，并默认永久挂载。
  • 根据状态进行挂载/卸载被视为可以通过显式使用 opt_comp、vec_comps 等提供的特殊案例。

它看起来像什么？

请查看我们的 TodoMVC（并查看其 源代码）。

如果您想要更简单一些，这里是计数器的代码。

use consecuit::prelude::*;
use consecuit_html::prelude::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn run() -> Result<(), JsValue> {
    consecuit::mount::mount_app(counter);
    Ok(())
}

fn counter(cc: ComponentBuilder, _: ()) -> impl ComponentReturn {
    let (cc, (count, setter)) = cc.hook(use_state, 0);

	let setter1 = setter.clone();
    let decrement = Callback::new(move |_ev| {
        setter1.update_with(|v| v - 1);
    });

    let increment = Callback::new(move |_ev| {
        setter.update_with(|v| v + 1);
    });
    
    cc_tree!(
		<button {html_props().onclick(decrement)}>"-"</button>
		{count.to_string()}
		<button {html_props().onclick(increment)}>"+"</button>
    )
}

更多计数器示例 在此处（包括带有实时演示的 此处），包括一个没有宏和一个将逻辑提取到 use_counter 函数中的示例。

如何开始？

按照下面的简单指南进行

文档中提供了更多关于创建组件和钩子的信息。

接下来是什么？

这个库还处于早期阶段。许多功能尚未实现。（例如，目前不支持内联样式；您需要使用类名并编写CSS。）

欢迎贡献！

此crate使用unsafe。

所有公开的函数都是安全的。