#web #asmjs #webasm #javascript

squark

Virtual DOM implemention and application definition inspired from HyperApp

14 releases (6 breaking)

✓ Uses Rust 2018 edition

0.7.0 Jan 8, 2019
0.6.3 Nov 7, 2018
0.6.1 Oct 19, 2018
0.5.1 Jul 23, 2018
0.1.1 Mar 28, 2018

#146 in Web programming

Download history 84/week @ 2018-10-18 57/week @ 2018-10-25 16/week @ 2018-11-01 98/week @ 2018-11-08 32/week @ 2018-11-15 18/week @ 2018-11-22 80/week @ 2018-11-29 15/week @ 2018-12-06 32/week @ 2018-12-13 9/week @ 2018-12-20 39/week @ 2018-12-27 4/week @ 2019-01-03 27/week @ 2019-01-10

170 downloads per month
Used in 3 crates

WTFPL license

19KB
446 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

~2MB
~38K SLoC