2个版本

0.0.2	2020年10月8日
0.0.1	2020年10月5日

#11 in #组合

MIT/Apache

21KB
307 行

Asteracea

Asteracea是一个旨在结合Angular和React的优点，同时完全支持Rust的生命周期模型的Web应用程序框架。

注意：Asteracea是实验性软件。
尽管到目前为止它似乎工作良好，但模板语法的破坏性更改可能仍然会发生。

安装

请使用cargo-edit始终添加此库的最新版本

cargo add asteracea

设计目标

少样板/有用的默认值

大多数生成的样板代码会自动调整到所需的内容。例如，如果生成了一个.render方法，组件的签名会发生变化。

在不牺牲可读性的情况下，这里仍有改进的余地。
同位/DRY

意图不应该需要在多个地方重复（分割声明、初始化和使用）。

目前，组件模板中的短形式捕获提供了一种集中某些语义的方法（类似于React的Hooks，但没有它们的控制流限制）。

计划在此领域进行进一步的改进。
健壮的代码

元素名称默认通过lignin-schema进行静态检查，但可以定义类似的其它模式。空元素（如<br>）不能包含子元素。

计划对属性和事件名称进行类似的检查。
无默认运行时

Asteracea组件编译为纯Rust代码（通常没有其他依赖项），这有助于保持包体积小巧。

使用 lignin-dom 或 lignin-html 将渲染的 Node 树转换为动态用户界面。

示例

空组件

最简单的（Node 渲染）组件可以这样编写

asteracea::component! {
  Empty()()
  [] // Empty node sequence
}

// Render into a bump allocator:
let mut bump = lignin::bumpalo::Bump::new();
assert!(matches!(
  Empty::new().render(&mut bump),
  lignin::Node::Multi(&[]) // Empty node sequence
));

单元组件

如果组件体不是 Node 表达式，则组件默认将返回 ()，并且不需要 Bump 引用来进行渲染。

可以在渲染参数列表之后指定不同的返回类型。

asteracea::component! {
  Unit(/* ::new arguments */)(/* .render arguments */) /* -> () */
  {} // Empty Rust block
}

asteracea::component! {
  Offset(base: usize)(offset: usize) -> usize

  |pub base: usize = {base}|; // ²
  { self.base + offset }
}

assert_eq!(Unit::new().render(), ());
assert_eq!(Offset::new(2).render(3), 5);

² https://github.com/Tamschi/Asteracea/issues/2

计数器组件

对于相对复杂的一个示例，请参考这个参数化计数器

use asteracea::component;
use std::cell::RefCell;

fn schedule_render() { /* ... */ }

component! {
  pub Counter(initial: i32, step: i32)()

  |value = RefCell::<i32>::new(initial)|; // shorthand capture
  |step: i32 = {step}|; // long form capture, ²

  <div
    "The current value is: " !{*self.value.borrow()} <br>

    <button
      !{self.step} // shorthand bump_format call
      +"click" {
        *self.value.borrow_mut() += self.step;
        schedule_render();
      }
    >
  >
}

impl Counter {
  pub fn value(&self) -> i32 {
    *self.value.borrow()
  }

  pub fn set_value(&self, value: i32) {
    self.value.replace(value);
  }
}