squark

Rust 前端框架，适用于网页浏览器等。

目前，我们依赖于 nightly 频道

设计

• 分离运行时定义和实现
  • squark 包不依赖于特定平台
• 架构受 Elm 和 HyperApp 启发
  • 简洁
  • 优雅
• 支持 futures-0.1
  • reducer 可以发出异步工作任务，如获取资源

crates

squark

核心包。

• 纯 Rust 虚拟 DOM 实现
• GUI 应用定义
• 运行时定义以处理虚拟 DOM 的差异

squark-macros

它提供了类似于 JSX 的宏，用于帮助编写视图。
非常感谢 pest 解析器。

语法

view! {
    <button class="some-class" onclick={ |_| Some(Action::Submit) }>
        Button!
    </button>
}

我们可以在编译时生成本机 Rust 表达式。

squark-web

使用 wasm-bindgen 的网页浏览器运行时实现。

这里是一个计数器应用的完整示例！

#![feature(proc_macro_hygiene)]

extern crate squark;
extern crate squark_macros;
extern crate squark_web;
extern crate wasm_bindgen;
extern crate web_sys;

use squark::{App, Runtime, View, Task};
use squark_macros::view;
use squark_web::WebRuntime;
use wasm_bindgen::prelude::*;
use web_sys::window;

#[derive(Clone, Debug, PartialEq)]
struct State {
    count: isize,
}

impl State {
    pub fn new() -> State {
        State { count: 0 }
    }
}

#[derive(Clone, Debug)]
enum Action {
    ChangeCount(isize),
}

#[derive(Clone, Debug)]
struct CounterApp;
impl App for CounterApp {
    type State = State;
    type Action = Action;

    fn reducer(&self, mut state: State, action: Action) -> (State, Task<Action>) {
        match action {
            Action::ChangeCount(c) => {
                state.count = c;
            }
        };
        (state, Task::empty())
    }

    fn view(&self, state: State) -> View<Action> {
        let count = state.count;
        view! {
            <div>
                { count.to_string() }
                <button onclick={ move |_| Some(Action::ChangeCount(count.clone() + 1)) }>
                    increment
                </button>
                <button onclick={ move |_| Some(Action::ChangeCount(count - 1)) }>
                    decrement
                </button>
            </div>
        }
    }
}

impl Default for CounterApp {
    fn default() -> CounterApp {
        CounterApp
    }
}

#[wasm_bindgen]
pub fn run() {
    WebRuntime::<CounterApp>::new(
        window()
            .unwrap()
            .document()
            .expect("Failed to get document")
            .query_selector("body")
            .unwrap()
            .unwrap(),
        State::new(),
    )
    .run();
}

项目目录位于 examples/counter。

在其他 examples 中也有一些其他示例，其中大多数使用 rust-webpack-template。
TodoMVC 在 https://rail44.github.io/squark/ 上运行。