#asmjs #web #webasm #javascript

nightly macro squark-macros

Macros like JSX to help building Squark application

12 releases (6 breaking)

Uses old Rust 2015

0.7.0 Jan 8, 2019
0.6.1 Oct 19, 2018
0.5.4 Jul 23, 2018
0.1.0 Mar 29, 2018

#5 in #asmjs

31 downloads per month

WTFPL license

10KB
134 lines

squark

crates.io docs.rs

Virtual DOM implemention and definitions of Application and Runtime.

Fertures

This repository includes

  • Pure Rust virtual DOM implemention
  • Definition of application inspired from HyperApp
  • Definition of runtime to handle diffirence of virtual DOM
  • Runtime implementions for several platforms
    • Server side rendering within Rustic world (now working)
  • Macros like a JSX to help writing view

Currently, we depend on nightly channel

squark-macros

crates.io docs.rs

Crate that providing JSX like macro by proc_marco and 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};
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 {
        match action {
            Action::ChangeCount(c) => {
                state.count = c;
            }
        };
        state
    }

    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 is also available TodoMVC example at examples/todomvc and working on https://rail44.github.io/squark/.

Dependencies

~2.1–2.9MB
~58K SLoC