Skip to content
Rust frontend framework, for web browser and more.
Branch: master
Clone or download
Latest commit 22b8ef6 Mar 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
squark-macros [squark-macros] 0.7.0 Jan 8, 2019
squark-web [squark-web] 0.3.0 Jan 8, 2019
squark [squark] 0.7.1 Mar 5, 2019
.gitignore setup workspace Mar 28, 2018
Cargo.toml wasm-bindgen Sep 25, 2018
LICENCE add LICENCE Mar 28, 2018
README.md Update README Jan 8, 2019

README.md

squark

Rust frontend framework, for web browser and more.

Currently, we depend on nightly channel

Design

  • Separating runtime definition and implemention
    • squark crate has no dependency for specific platform
  • Architecture inspired from Elm and HyperApp
    • Simplicy
    • Elegant
  • Supporting futures-0.1
    • reducer can emit task for async work such as fetch resource

crates

squark

crates.io docs.rs

Core crate.

  • Pure Rust virtual DOM implemention
  • Definition of GUI application
  • Definition of runtime to handle diffirence of virtual DOM

squark-macros

crates.io docs.rs

It provides macro like JSX for helping writing view.
Very thanks to pest parser.

Syntax

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

We can generate native Rust expression at compile-time.

squark-web

crates.io docs.rs

Runtime implemention for web browser with usinng wasm-bindgen.

Here is full example of counter app!

#![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();
}

Project dir is located at examples/counter.

There are some other examples available on examples, most of them use rust-webpack-template.
TodoMVC is working on https://rail44.github.io/squark/.

You can’t perform that action at this time.