Smithy

Smithy 是一个用于Rust的前端框架

主页 ◇ API文档 ◇ 仓库 ◇ 示例网站

什么是Smithy？

Smithy是一个用于完全用Rust编写WebAssembly应用程序的框架。其目标是让你能够使用惯用的Rust语法，同时不放弃编译器的任何安全保证。

Smithy适用于nightly版本

Smithy v0.0.7目前适用于 1.39.0-nightly (dfd43f0fd 2019-09-01)。

入门

在Smithy中入门非常简单！

npm init smithy-app my_smithy_app
cd my_smithy_app
npm start

导航到 localhost:8080 查看您的应用程序的实际运行情况！

有关更多详细信息，请参阅 create-smithy-app仓库。

一个简单的Smithy应用程序

一个简单的点击计数器如下

#[wasm_bindgen(start)]
pub fn start() -> Result<(), wasm_bindgen::JsValue> {
  let root_element = get_root_element()?;
  let mut count = 0;
  let app = smithy::smd!(
    <div on_click={|_| count = count + 1}>
      I have been clicked {count}{' '}times.
    </div>
  );
  smithy::mount(Box::new(app), root_element);
  Ok(())
}

fn get_root_element() -> Result<web_sys::Element, wasm_bindgen::JsValue> {
  let document = web_sys::window().unwrap().document().unwrap();
  document.get_element_by_id("app")
    .ok_or(wasm_bindgen::JsValue::NULL)
}

Smithy是如何工作的

smd! 宏

smd! 和 smd_borrowed! 宏将类似JSX的东西转换为一个围绕 FnMut(smithy::types::Phase) -> smithy::types::PhaseResult 的包装器。例如，下面的 smd! 调用被转换成了

let mut count = 0;
let app = smithy::smd!(
  <div on_click={|_| count = count + 1}>
    I have been clicked {count}{' '}times.
  </div>
);

。

let mut app = {
  #[allow(dead_code)]
  use smithy::types::Component;
  let component: smithy::types::SmithyComponent =
    smithy::types::SmithyComponent(Box::new(move |phase| match phase {
      smithy::types::Phase::Rendering => {
        smithy::types::PhaseResult::Rendering(smithy::types::Node::Vec(vec![
          smithy::types::Node::Dom(smithy::types::HtmlToken {
            node_type: "div".into(),
            attributes: std::collections::HashMap::new(),
            children: {
              let mut children = Vec::with_capacity(4usize);
              children.push(smithy::types::Node::Text("I have been clicked ".into()));
              children.push({ count }.render());
              children.push({ ' ' }.render());
              children.push(smithy::types::Node::Text("times.".into()));
              children
            },
          }),
        ]))
      },
      smithy::types::Phase::UiEventHandling(ui_event_handling) => match ui_event_handling {
        (evt, [0usize, 1usize, rest @ ..]) => {
          smithy::types::PhaseResult::UiEventHandling({ count }.handle_ui_event(evt, rest))
        },
        (evt, [0usize, 2usize, rest @ ..]) => {
          smithy::types::PhaseResult::UiEventHandling({ ' ' }.handle_ui_event(evt, rest))
        },
        (smithy::types::UiEvent::OnClick(val), [0usize, rest @ ..]) => {
          ({ |_| count = count + 1 })(val);
          smithy::types::PhaseResult::UiEventHandling(true)
        },
        _ => smithy::types::PhaseResult::UiEventHandling(false),
      },
      smithy::types::Phase::WindowEventHandling(window_event) => {
        let mut event_handled = false;
        event_handled = ({ count }).handle_window_event(window_event) || event_handled;
        event_handled = ({ ' ' }).handle_window_event(window_event) || event_handled;
        match window_event {
          _ => smithy::types::PhaseResult::WindowEventHandling(event_handled),
        }
      },
      smithy::types::Phase::PostRendering => {
        {
          {
            ({ count }).handle_post_render();
          }
          ({ ' ' }).handle_post_render();
        }
        smithy::types::PhaseResult::PostRendering
      },
      smithy::types::Phase::RefAssignment(path_so_far) => {
        let new_path = path_so_far
          .clone()
          .into_iter()
          .chain(vec![0usize, 1usize])
          .collect();
        ({ count }).handle_ref_assignment(new_path);
        let new_path = path_so_far
          .clone()
          .into_iter()
          .chain(vec![0usize, 2usize])
          .collect();
        ({ ' ' }).handle_ref_assignment(new_path);
        smithy::types::PhaseResult::RefAssignment
      },
    }));
  component
};

注意，|_| count = count + 1 和 {count} 分别位于匹配分支的不同部分。如果它们不在（例如，如果 smd! 创建了一个结构体而不是一个 FnMut），则该代码将无法编译。借用检查器将报错，因为你不能不可变地借用 count，因为它已经在 on_click 回调中进行了可变借用。

Smithy 阶段

如上所述的 smd! 宏展开所示，阶段是 Smithy 的核心概念。特别是，一个应用程序通过五个阶段运行：

• 渲染阶段，应用程序被要求返回一个包含它将写入 DOM 的信息的结构体。
• 引用赋值阶段，任何具有 ref={&mut optional_web_sys_html_element} 的应用程序都将 Some(some_html_element) 赋值到那个引用。
• 渲染后阶段，任何 post_render={|_| ...} 回调将被执行。这些回调保证所有引用都已分配，因此允许你执行所需的任何直接 DOM 操作。
• UI 事件处理和窗口事件处理，Smithy 将根据事件执行回调。回调执行后，Smithy 将重新运行应用程序的不同阶段。
  • （UI 事件处理和窗口事件处理被视为单独的阶段，尽管在概念上它们非常相似。）

smd! 与 smd_borrowed!

如上宏展开所示，smd! 宏创建了一个移动闭包。这并不总是理想的。如果你不希望创建移动闭包，请使用 smd_borrowed! 代替。

如何参与

Smithy 总是在寻找贡献者！请给我发推文 @statisticsftw 或查看 Smithy 路线图。

此外，请使用 create-smithy-app 尝试 Smithy。

谢谢！祝编码愉快！