todomvc

Previous example: <-- web-sys: Wasm in Web Worker

TODO MVC

wasm-bindgen and web-sys coded TODO MVC

The code was rewritten from the ES6 version.

The core differences are:

Having an Element wrapper that takes care of dyn and into refs in web-sys, A Scheduler that allows Controller and View to communicate to each other by emulating something similar to the JS event loop.
_ [wasm-bindgen Guide](https://rustwasm.github.io/wasm-bindgen/examples/todomvc.html){target="_blank"}

Parallel Raytracing{target="_blank"}

Building the demo

One of the major gotchas with threaded WebAssembly is that Rust does not ship a precompiled target (e.g. standard library) which has threading support enabled. This means that you'll need to recompile the standard library with the appropriate rustc flags, namely -C target-feature=+atomics,+bulk-memory,+mutable-globals. Note that this requires a nightly Rust toolchain.
_ wasm-bindgen Guide{target="_blank"}

setup the project

cargo new todomvc --lib
cd todomvc
mkdir -p www/js www/html www/html/templates

Edit Cargo.toml

[lib]
crate-type = ["cdylib"]

[build-dependencies]
askama = "0.10.0"

[dependencies]
js-sys = "0.3.66"
wasm-bindgen = "0.2.89"
askama = "0.10.0"
console_error_panic_hook = "0.1.5"

[dependencies.web-sys]
version = "0.3.5"
features = [
  'console',
  'CssStyleDeclaration',
  'Document',
  'DomStringMap',
  'DomTokenList',
  'Element',
  'Event',
  'EventTarget',
  'HtmlBodyElement',
  'HtmlElement',
  'HtmlInputElement',
  'KeyboardEvent',
  'Location',
  'Node',
  'NodeList',
  'Storage',
  'Window',
]

The code

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>web-sys Wasm • TodoMVC</title>
  </head>
  <body>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="What needs to be done?" autofocus>
      </header>
      <section hidden class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list"></ul>
        <footer class="footer">
          <span class="todo-count"></span>
          <ul class="filters">
            <li>
              <a href="#/" class="selected">All</a>
            </li>
            <li>
            <a href="#/active">Active</a>
            </li>
            <li>
            <a href="#/completed">Completed</a>
            </li>
          </ul>
          <button class="clear-completed">Clear completed</button>
        </footer>
      </section>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="http://twitter.com/KingstonTime/">Jonathan Kingston</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>

    <script type="module" src="../js/index.js"></script>
  </body>
</html>

templates

in www/html/templates

itemsLeft.html

{{ active_todos }} item{% if active_todos > 1 %}s{% endif %} left

row.html

<li data-id="{{ id }}"{% if completed %} class="completed"{% endif %}>
	<div class="view">
		<input class="toggle" type="checkbox"{% if completed %} checked{% endif %}>
		<label>{{ title }}</label>
		<button class="destroy"></button>
	</div>
</li>

index.js

// For more comments about what's going on here, check out the `hello_world`
// example
const rust = import('./pkg');
const css = import('./index.css');

rust
  .then(m => m.run())
  .catch(console.error);

style.css

html,
body {
	margin: 0;
	padding: 0;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	background: #f5f5f5;
	color: #4d4d4d;
	min-width: 230px;
	max-width: 550px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 300;
}

:focus {
	outline: 0;
}

.hidden {
	display: none;
}

.todoapp {
	background: #fff;
	margin: 130px 0 40px 0;
	position: relative;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

.todoapp input::input-placeholder {
	font-style: italic;
	font-weight: 300;
	color: #e6e6e6;
}

.todoapp h1 {
	position: absolute;
	top: -155px;
	width: 100%;
	font-size: 100px;
	font-weight: 100;
	text-align: center;
	color: rgba(175, 47, 47, 0.15);
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 24px;
	font-family: inherit;
	font-weight: inherit;
	line-height: 1.4em;
	border: 0;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.new-todo {
	padding: 16px 16px 16px 60px;
	border: none;
	background: rgba(0, 0, 0, 0.003);
	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}

.main {
	position: relative;
	z-index: 2;
	border-top: 1px solid #e6e6e6;
}

.toggle-all {
	width: 1px;
	height: 1px;
	border: none; /* Mobile Safari */
	opacity: 0;
	position: absolute;
	right: 100%;
	bottom: 100%;
}

.toggle-all + label {
	width: 60px;
	height: 34px;
	font-size: 0;
	position: absolute;
	top: -52px;
	left: -13px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.toggle-all + label:before {
	content: '❯';
	font-size: 22px;
	color: #e6e6e6;
	padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
	color: #737373;
}

.todo-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.todo-list li {
	position: relative;
	font-size: 24px;
	border-bottom: 1px solid #ededed;
}

.todo-list li:last-child {
	border-bottom: none;
}

.todo-list li.editing {
	border-bottom: none;
	padding: 0;
}

.todo-list li.editing .edit {
	display: block;
	width: 506px;
	padding: 12px 16px;
	margin: 0 0 0 43px;
}

.todo-list li.editing .view {
	display: none;
}

.todo-list li .toggle {
	text-align: center;
	width: 40px;
	/* auto, since non-WebKit browsers doesn't support input styling */
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	border: none; /* Mobile Safari */
	-webkit-appearance: none;
	appearance: none;
}

.todo-list li .toggle {
	opacity: 0;
}

.todo-list li .toggle + label {
	/*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center left;
}

.todo-list li .toggle:checked + label {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.todo-list li label {
	word-break: break-all;
	padding: 15px 15px 15px 60px;
	display: block;
	line-height: 1.2;
	transition: color 0.4s;
}

.todo-list li.completed label {
	color: #d9d9d9;
	text-decoration: line-through;
}

.todo-list li .destroy {
	display: none;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 40px;
	height: 40px;
	margin: auto 0;
	font-size: 30px;
	color: #cc9a9a;
	margin-bottom: 11px;
	transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
	color: #af5b5e;
}

.todo-list li .destroy:after {
	content: '×';
}

.todo-list li:hover .destroy {
	display: block;
}

.todo-list li .edit {
	display: none;
}

.todo-list li.editing:last-child {
	margin-bottom: -1px;
}

.footer {
	color: #777;
	padding: 10px 15px;
	height: 20px;
	text-align: center;
	border-top: 1px solid #e6e6e6;
}

.footer:before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50px;
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
	            0 8px 0 -3px #f6f6f6,
	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
	            0 16px 0 -6px #f6f6f6,
	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
	float: left;
	text-align: left;
}

.todo-count strong {
	font-weight: 300;
}

.filters {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	right: 0;
	left: 0;
}

.filters li {
	display: inline;
}

.filters li a {
	color: inherit;
	margin: 3px;
	padding: 3px 7px;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 3px;
}

.filters li a:hover {
	border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
	border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
	float: right;
	position: relative;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
}

.clear-completed:hover {
	text-decoration: underline;
}

.info {
	margin: 65px auto 0;
	color: #bfbfbf;
	font-size: 10px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-align: center;
}

.info p {
	line-height: 1;
}

.info a {
	color: inherit;
	text-decoration: none;
	font-weight: 400;
}

.info a:hover {
	text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.toggle-all,
	.todo-list li .toggle {
		background: none;
	}

	.todo-list li .toggle {
		height: 40px;
	}
}

@media (max-width: 430px) {
	.footer {
		height: 50px;
	}

	.filters {
		bottom: 10px;
	}
}

Rust side

lib.rs

#![allow(unused)]
fn main() {
// src/lib.rs
//! # TODO MVC
//!
//! A [TODO MVC](http://todomvc.com/) implementation written using [web-sys](https://rustwasm.github.io/wasm-bindgen/web-sys/overview.html)

use wasm_bindgen::prelude::*;

use std::rc::Rc;

/// Controller of the program
pub mod controller;
/// Element wrapper to the DOM
pub mod element;
/// Schedule messages to the Controller and View
pub mod scheduler;
/// Stores items into localstorage
pub mod store;
/// Handles constructing template strings from data
pub mod template;
/// Presentation layer
pub mod view;
use crate::controller::{Controller, ControllerMessage};
use crate::scheduler::Scheduler;
use crate::store::Store;
use crate::view::{View, ViewMessage};

/// Message wrapper enum used to pass through the scheduler to the Controller or View
pub enum Message {
    /// Message wrapper to send to the controller
    Controller(ControllerMessage),
    /// Message wrapper to send to the view
    View(ViewMessage),
}

/// Used for debugging to the console
pub fn exit(message: &str) -> ! {
    let v = wasm_bindgen::JsValue::from_str(message);
    web_sys::console::exception_1(&v);
    std::process::abort()
}

fn app(name: &str) {
    let sched = Rc::new(Scheduler::new());
    let store = match Store::new(name) {
        Some(s) => s,
        None => return,
    };
    let controller = Controller::new(store, Rc::downgrade(&sched));
    if let Some(mut view) = View::new(Rc::clone(&sched)) {
        let sch: &Rc<Scheduler> = &sched;
        view.init();
        sch.set_view(view);
        sch.set_controller(controller);
        sched.add_message(Message::Controller(ControllerMessage::SetPage(
            "".to_string(),
        )));
    }
}

/// Entry point into the program from JavaScript
#[wasm_bindgen(start)]
fn run() -> Result<(), JsValue> {
    console_error_panic_hook::set_once();
    app("todos-wasmbindgen");

    Ok(())
}

}

controller.rs

#![allow(unused)]
fn main() {
/// Controller of the program
use crate::exit;
use crate::store::*;
use crate::view::ViewMessage;
use crate::{Message, Scheduler};
use js_sys::Date;

use std::cell::RefCell;
use std::rc::Weak;

/// The controller of the application turns page state into functionality
pub struct Controller {
    store: Store,
    sched: RefCell<Option<Weak<Scheduler>>>,
    active_route: String,
    last_active_route: String,
}

/// Messages that represent the methods to be called on the Controller
pub enum ControllerMessage {
    AddItem(String),
    SetPage(String),
    EditItemSave(String, String),
    ToggleItem(String, bool),
    EditItemCancel(String),
    RemoveCompleted(),
    RemoveItem(String),
    ToggleAll(bool),
}

impl Controller {
    pub fn new(store: Store, sched: Weak<Scheduler>) -> Controller {
        Controller {
            store,
            sched: RefCell::new(Some(sched)),
            active_route: "".into(),
            last_active_route: "none".into(),
        }
    }

    /// Used by `Scheduler` to convert a `ControllerMessage` into a function call on a `Controller`
    pub fn call(&mut self, method_name: ControllerMessage) {
        use self::ControllerMessage::*;
        match method_name {
            AddItem(title) => self.add_item(title),
            SetPage(hash) => self.set_page(hash),
            EditItemSave(id, value) => self.edit_item_save(id, value),
            EditItemCancel(id) => self.edit_item_cancel(id),
            RemoveCompleted() => self.remove_completed_items(),
            RemoveItem(id) => self.remove_item(&id),
            ToggleAll(completed) => self.toggle_all(completed),
            ToggleItem(id, completed) => self.toggle_item(id, completed),
        }
    }

    fn toggle_item(&mut self, id: String, completed: bool) {
        self.toggle_completed(id, completed);
        self._filter(completed);
    }

    fn add_message(&self, view_message: ViewMessage) {
        if let Ok(sched) = self.sched.try_borrow_mut() {
            if let Some(ref sched) = *sched {
                if let Some(sched) = sched.upgrade() {
                    sched.add_message(Message::View(view_message));
                }
            }
        }
    }

    pub fn set_page(&mut self, raw: String) {
        let route = raw.trim_start_matches("#/");
        self.active_route = route.to_string();
        self._filter(false);
        self.add_message(ViewMessage::UpdateFilterButtons(route.to_string()));
    }

    /// Add an Item to the Store and display it in the list.
    fn add_item(&mut self, title: String) {
        self.store.insert(Item {
            id: Date::now().to_string(),
            title,
            completed: false,
        });
        self.add_message(ViewMessage::ClearNewTodo());
        self._filter(true);
    }

    /// Save an Item in edit.
    fn edit_item_save(&mut self, id: String, title: String) {
        if !title.is_empty() {
            self.store.update(ItemUpdate::Title {
                id: id.clone(),
                title: title.clone(),
            });
            self.add_message(ViewMessage::EditItemDone(id.to_string(), title));
        } else {
            self.remove_item(&id);
        }
    }

    /// Cancel the item editing mode.
    fn edit_item_cancel(&mut self, id: String) {
        let mut message = None;
        if let Some(data) = self.store.find(ItemQuery::Id { id: id.clone() }) {
            if let Some(todo) = data.get(0) {
                let title = todo.title.to_string();
                message = Some(ViewMessage::EditItemDone(id, title));
            }
        }
        if let Some(message) = message {
            self.add_message(message);
        }
    }

    /// Remove the data and elements related to an Item.
    fn remove_item(&mut self, id: &String) {
        self.store.remove(ItemQuery::Id { id: id.clone() });
        self._filter(false);
        let ritem = id.to_string();
        self.add_message(ViewMessage::RemoveItem(ritem));
    }

    /// Remove all completed items.
    fn remove_completed_items(&mut self) {
        self.store.remove(ItemQuery::Completed { completed: true });
        self._filter(true);
    }

    /// Update an Item in storage based on the state of completed.
    fn toggle_completed(&mut self, id: String, completed: bool) {
        self.store.update(ItemUpdate::Completed {
            id: id.clone(),
            completed,
        });
        let tid = id;
        self.add_message(ViewMessage::SetItemComplete(tid, completed));
    }

    /// Set all items to complete or active.
    fn toggle_all(&mut self, completed: bool) {
        let mut vals = Vec::new();
        if let Some(data) = self.store.find(ItemQuery::EmptyItemQuery) {
            vals.extend(data.iter().map(|item| item.id.clone()));
        }
        for id in vals.iter() {
            self.toggle_completed(id.to_string(), completed);
        }
        self._filter(false);
    }

    /// Refresh the list based on the current route.
    fn _filter(&mut self, force: bool) {
        let route = &self.active_route;

        if force || !self.last_active_route.is_empty() || &self.last_active_route != route {
            let query = match route.as_str() {
                "completed" => ItemQuery::Completed { completed: true },
                "active" => ItemQuery::Completed { completed: false },
                _ => ItemQuery::EmptyItemQuery,
            };
            let mut v = None;
            {
                let store = &mut self.store;
                if let Some(res) = store.find(query) {
                    v = Some(res.into());
                }
            }
            if let Some(res) = v {
                self.add_message(ViewMessage::ShowItems(res));
            }
        }

        if let Some((total, active, completed)) = self.store.count() {
            self.add_message(ViewMessage::SetItemsLeft(active));
            self.add_message(ViewMessage::SetClearCompletedButtonVisibility(
                completed > 0,
            ));
            self.add_message(ViewMessage::SetCompleteAllCheckbox(completed == total));
            self.add_message(ViewMessage::SetMainVisibility(total > 0));
        }

        self.last_active_route = route.to_string();
    }
}

impl Drop for Controller {
    fn drop(&mut self) {
        exit("calling drop on Controller");
    }
}

}

element.rs

#![allow(unused)]
fn main() {
/// Element wrapper to the DOM
use wasm_bindgen::prelude::*;
use web_sys::EventTarget;

/// Wrapper for `web_sys::Element` to simplify calling different interfaces
pub struct Element {
    el: Option<web_sys::Element>,
}

impl From<web_sys::Element> for Element {
    fn from(el: web_sys::Element) -> Element {
        Element { el: Some(el) }
    }
}

impl From<web_sys::EventTarget> for Element {
    fn from(el: web_sys::EventTarget) -> Element {
        let el = wasm_bindgen::JsCast::dyn_into::<web_sys::Element>(el);
        Element { el: el.ok() }
    }
}

impl From<Element> for Option<web_sys::Node> {
    fn from(obj: Element) -> Option<web_sys::Node> {
        obj.el.map(Into::into)
    }
}

impl From<Element> for Option<EventTarget> {
    fn from(obj: Element) -> Option<EventTarget> {
        obj.el.map(Into::into)
    }
}

impl Element {
    // Create an element from a tag name
    pub fn create_element(tag: &str) -> Option<Element> {
        let el = web_sys::window()?.document()?.create_element(tag).ok()?;
        Some(el.into())
    }

    pub fn qs(selector: &str) -> Option<Element> {
        let body: web_sys::Element = web_sys::window()?.document()?.body()?.into();
        let el = body.query_selector(selector).ok()?;
        Some(Element { el })
    }

    /// Add event listener to this node
    pub fn add_event_listener<T>(&mut self, event_name: &str, handler: T)
    where
        T: 'static + FnMut(web_sys::Event),
    {
        let cb = Closure::new(handler);
        if let Some(el) = self.el.take() {
            let el_et: EventTarget = el.into();
            el_et
                .add_event_listener_with_callback(event_name, cb.as_ref().unchecked_ref())
                .unwrap();
            cb.forget();
            if let Ok(el) = el_et.dyn_into::<web_sys::Element>() {
                self.el = Some(el);
            }
        }
    }

    /// Delegate an event to a selector
    pub fn delegate<T>(
        &mut self,
        selector: &'static str,
        event: &str,
        mut handler: T,
        use_capture: bool,
    ) where
        T: 'static + FnMut(web_sys::Event),
    {
        let el = match self.el.take() {
            Some(e) => e,
            None => return,
        };
        if let Some(dyn_el) = &el.dyn_ref::<EventTarget>() {
            if let Some(window) = web_sys::window() {
                if let Some(document) = window.document() {
                    // TODO document selector to the target element
                    let tg_el = document;

                    let cb = Closure::new(move |event: web_sys::Event| {
                        if let Some(target_element) = event.target() {
                            let dyn_target_el: Option<&web_sys::Node> =
                                wasm_bindgen::JsCast::dyn_ref(&target_element);
                            if let Some(target_element) = dyn_target_el {
                                if let Ok(potential_elements) = tg_el.query_selector_all(selector) {
                                    let mut has_match = false;
                                    for i in 0..potential_elements.length() {
                                        if let Some(el) = potential_elements.get(i) {
                                            if target_element.is_equal_node(Some(&el)) {
                                                has_match = true;
                                            }
                                            break;
                                        }
                                    }

                                    if has_match {
                                        handler(event);
                                    }
                                }
                            }
                        }
                    });

                    dyn_el
                        .add_event_listener_with_callback_and_bool(
                            event,
                            cb.as_ref().unchecked_ref(),
                            use_capture,
                        )
                        .unwrap();
                    cb.forget(); // TODO cycle collect
                }
            }
        }
        self.el = Some(el);
    }

    /// Find child `Element`s from this node
    pub fn qs_from(&mut self, selector: &str) -> Option<Element> {
        let mut found_el = None;
        if let Some(el) = self.el.as_ref() {
            found_el = Some(Element {
                el: el.query_selector(selector).ok()?,
            });
        }
        found_el
    }

    /// Sets the inner HTML of the `self.el` element
    pub fn set_inner_html(&mut self, value: String) {
        if let Some(el) = self.el.take() {
            el.set_inner_html(&value);
            self.el = Some(el);
        }
    }

    /// Sets the text content of the `self.el` element
    pub fn set_text_content(&mut self, value: &str) {
        if let Some(el) = self.el.as_ref() {
            if let Some(node) = &el.dyn_ref::<web_sys::Node>() {
                node.set_text_content(Some(value));
            }
        }
    }

    /// Gets the text content of the `self.el` element
    pub fn text_content(&mut self) -> Option<String> {
        let mut text = None;
        if let Some(el) = self.el.as_ref() {
            if let Some(node) = &el.dyn_ref::<web_sys::Node>() {
                text = node.text_content();
            }
        }
        text
    }

    /// Gets the parent of the `self.el` element
    pub fn parent_element(&mut self) -> Option<Element> {
        let mut parent = None;
        if let Some(el) = self.el.as_ref() {
            if let Some(node) = &el.dyn_ref::<web_sys::Node>() {
                if let Some(parent_node) = node.parent_element() {
                    parent = Some(parent_node.into());
                }
            }
        }
        parent
    }

    /// Gets the parent of the `self.el` element
    pub fn append_child(&mut self, child: &mut Element) {
        if let Some(el) = self.el.as_ref() {
            if let Some(node) = &el.dyn_ref::<web_sys::Node>() {
                if let Some(ref child_el) = child.el {
                    if let Some(child_node) = child_el.dyn_ref::<web_sys::Node>() {
                        node.append_child(child_node).unwrap();
                    }
                }
            }
        }
    }

    /// Removes a class list item from the element
    ///
    /// ```
    /// e.class_list_remove(String::from("clickable"));
    /// // removes the class 'clickable' from e.el
    /// ```
    pub fn class_list_remove(&mut self, value: &str) {
        if let Some(el) = self.el.take() {
            el.class_list().remove_1(value).unwrap();
            self.el = Some(el);
        }
    }

    pub fn class_list_add(&mut self, value: &str) {
        if let Some(el) = self.el.take() {
            el.class_list().add_1(value).unwrap();
            self.el = Some(el);
        }
    }

    /// Given another `Element` it will remove that child from the DOM from this element
    /// Consumes `child` so it can't be used after it's removal.
    pub fn remove_child(&mut self, mut child: Element) {
        if let Some(child_el) = child.el.take() {
            if let Some(el) = self.el.take() {
                if let Some(el_node) = el.dyn_ref::<web_sys::Node>() {
                    let child_node: web_sys::Node = child_el.into();
                    el_node.remove_child(&child_node).unwrap();
                }
                self.el = Some(el);
            }
        }
    }

    /// Sets the whole class value for `self.el`
    pub fn set_class_name(&mut self, class_name: &str) {
        if let Some(el) = self.el.take() {
            el.set_class_name(class_name);
            self.el = Some(el);
        }
    }

    /// Sets the visibility for the element in `self.el`
    pub fn set_visibility(&mut self, visible: bool) {
        if let Some(el) = self.el.take() {
            {
                let dyn_el: Option<&web_sys::HtmlElement> = wasm_bindgen::JsCast::dyn_ref(&el);
                if let Some(el) = dyn_el {
                    el.set_hidden(!visible);
                }
            }
            self.el = Some(el);
        }
    }

    pub fn blur(&mut self) {
        if let Some(el) = self.el.take() {
            {
                let dyn_el: Option<&web_sys::HtmlElement> = wasm_bindgen::JsCast::dyn_ref(&el);
                if let Some(el) = dyn_el {
                    // There isn't much we can do with the result here so ignore
                    el.blur().unwrap();
                }
            }
            self.el = Some(el);
        }
    }

    pub fn focus(&mut self) {
        if let Some(el) = self.el.take() {
            {
                let dyn_el: Option<&web_sys::HtmlElement> = wasm_bindgen::JsCast::dyn_ref(&el);
                if let Some(el) = dyn_el {
                    // There isn't much we can do with the result here so ignore
                    el.focus().unwrap();
                }
            }
            self.el = Some(el);
        }
    }

    pub fn dataset_set(&mut self, key: &str, value: &str) {
        if let Some(el) = self.el.take() {
            {
                if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlElement>(&el) {
                    el.dataset().set(key, value).unwrap();
                }
            }
            self.el = Some(el);
        }
    }

    pub fn dataset_get(&mut self, key: &str) -> String {
        let mut text = String::new();
        if let Some(el) = self.el.take() {
            {
                if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlElement>(&el) {
                    if let Some(value) = el.dataset().get(key) {
                        text = value;
                    }
                }
            }
            self.el = Some(el);
        }
        text
    }

    /// Sets the value for the element in `self.el` (The element must be an input)
    pub fn set_value(&mut self, value: &str) {
        if let Some(el) = self.el.take() {
            if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&el) {
                el.set_value(value);
            }
            self.el = Some(el);
        }
    }

    /// Gets the value for the element in `self.el` (The element must be an input)
    pub fn value(&mut self) -> String {
        let mut v = String::new();
        if let Some(el) = self.el.take() {
            if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&el) {
                v = el.value();
            }
            self.el = Some(el);
        }
        v
    }

    /// Sets the checked state for the element in `self.el` (The element must be an input)
    pub fn set_checked(&mut self, checked: bool) {
        if let Some(el) = self.el.take() {
            if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&el) {
                el.set_checked(checked);
            }
            self.el = Some(el);
        }
    }

    /// Gets the checked state for the element in `self.el` (The element must be an input)
    pub fn checked(&mut self) -> bool {
        let mut checked = false;
        if let Some(el) = self.el.take() {
            if let Some(el) = wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&el) {
                checked = el.checked();
            }
            self.el = Some(el);
        }
        checked
    }
}

}

scheduler.rs

#![allow(unused)]
fn main() {
/// Schedule messages to the Controller and View
use crate::controller::Controller;
use crate::exit;
use crate::view::View;
use crate::Message;
use std::cell::RefCell;
use std::rc::Rc;

/// Creates an event loop that starts each time a message is added
pub struct Scheduler {
    controller: Rc<RefCell<Option<Controller>>>,
    view: Rc<RefCell<Option<View>>>,
    events: RefCell<Vec<Message>>,
    running: RefCell<bool>,
}

fn deadlock() -> ! {
    exit("This might be a deadlock");
}

impl Scheduler {
    /// Construct a new `Scheduler`
    pub fn new() -> Scheduler {
        Scheduler {
            controller: Rc::new(RefCell::new(None)),
            view: Rc::new(RefCell::new(None)),
            events: RefCell::new(Vec::new()),
            running: RefCell::new(false),
        }
    }

    pub fn set_controller(&self, controller: Controller) {
        if let Ok(mut controller_data) = self.controller.try_borrow_mut() {
            *controller_data = Some(controller);
        } else {
            deadlock()
        }
    }

    pub fn set_view(&self, view: View) {
        if let Ok(mut view_data) = self.view.try_borrow_mut() {
            *view_data = Some(view);
        } else {
            deadlock()
        }
    }

    /// Add a new message onto the event stack
    ///
    /// Triggers running the event loop if it's not already running
    pub fn add_message(&self, message: Message) {
        let running = if let Ok(running) = self.running.try_borrow() {
            *running
        } else {
            deadlock()
        };
        if let Ok(mut events) = self.events.try_borrow_mut() {
            events.push(message);
        } else {
            deadlock()
        }
        if !running {
            self.run();
        }
    }

    /// Start the event loop, taking messages from the stack to run
    fn run(&self) {
        let events_len = if let Ok(events) = self.events.try_borrow() {
            events.len()
        } else {
            deadlock()
        };
        if events_len == 0 {
            if let Ok(mut running) = self.running.try_borrow_mut() {
                *running = false;
            } else {
                deadlock()
            }
        } else {
            if let Ok(mut running) = self.running.try_borrow_mut() {
                *running = true;
            } else {
                deadlock()
            }
            self.next_message();
        }
    }

    fn next_message(&self) {
        let event = if let Ok(mut events) = self.events.try_borrow_mut() {
            events.pop()
        } else {
            deadlock()
        };
        if let Some(event) = event {
            match event {
                Message::Controller(e) => {
                    if let Ok(mut controller) = self.controller.try_borrow_mut() {
                        if let Some(ref mut ag) = *controller {
                            ag.call(e);
                        }
                    } else {
                        deadlock()
                    }
                }
                Message::View(e) => {
                    if let Ok(mut view) = self.view.try_borrow_mut() {
                        if let Some(ref mut ag) = *view {
                            ag.call(e);
                        }
                    } else {
                        deadlock()
                    }
                }
            }
            self.run();
        } else if let Ok(mut running) = self.running.try_borrow_mut() {
            *running = false;
        } else {
            deadlock()
        }
    }
}

impl Drop for Scheduler {
    fn drop(&mut self) {
        exit("calling drop on Scheduler");
    }
}

}

store.rs

#![allow(unused)]
fn main() {
/// Stores items into localstorage
use js_sys::JSON;
use wasm_bindgen::prelude::*;

/// Stores items into localstorage
pub struct Store {
    local_storage: web_sys::Storage,
    data: ItemList,
    name: String,
}

impl Store {
    /// Creates a new store with `name` as the localstorage value name
    pub fn new(name: &str) -> Option<Store> {
        let window = web_sys::window()?;
        if let Ok(Some(local_storage)) = window.local_storage() {
            let mut store = Store {
                local_storage,
                data: ItemList::new(),
                name: String::from(name),
            };
            store.fetch_local_storage();
            Some(store)
        } else {
            None
        }
    }

    /// Read the local ItemList from localStorage.
    /// Returns an &Option<ItemList> of the stored database
    /// Caches the store into `self.data` to reduce calls to JS
    ///
    /// Uses mut here as the return is something we might want to manipulate
    ///
    fn fetch_local_storage(&mut self) -> Option<()> {
        let mut item_list = ItemList::new();
        // If we have an existing cached value, return early.
        if let Ok(Some(value)) = self.local_storage.get_item(&self.name) {
            let data = JSON::parse(&value).ok()?;
            let iter = js_sys::try_iter(&data).ok()??;
            for item in iter {
                let item = item.ok()?;
                let item_array: &js_sys::Array = wasm_bindgen::JsCast::dyn_ref(&item)?;
                let title = item_array.shift().as_string()?;
                let completed = item_array.shift().as_bool()?;
                let id = item_array.shift().as_string()?;
                let temp_item = Item {
                    title,
                    completed,
                    id,
                };
                item_list.push(temp_item);
            }
        }
        self.data = item_list;
        Some(())
    }

    /// Write the local ItemList to localStorage.
    fn sync_local_storage(&mut self) {
        let array = js_sys::Array::new();
        for item in self.data.iter() {
            let child = js_sys::Array::new();
            child.push(&JsValue::from(&item.title));
            child.push(&JsValue::from(item.completed));
            child.push(&JsValue::from(&item.id));

            array.push(&JsValue::from(child));
        }
        if let Ok(storage_string) = JSON::stringify(&JsValue::from(array)) {
            let storage_string: String = storage_string.into();
            self.local_storage
                .set_item(&self.name, &storage_string)
                .unwrap();
        }
    }

    /// Find items with properties matching those on query.
    /// `ItemQuery` query Query to match
    ///
    /// ```
    ///  let data = db.find(ItemQuery::Completed {completed: true});
    ///  // data will contain items whose completed properties are true
    /// ```
    pub fn find(&mut self, query: ItemQuery) -> Option<ItemListSlice<'_>> {
        Some(
            self.data
                .iter()
                .filter(|todo| query.matches(todo))
                .collect(),
        )
    }

    /// Update an item in the Store.
    ///
    /// `ItemUpdate` update Record with an id and a property to update
    pub fn update(&mut self, update: ItemUpdate) {
        let id = update.id();
        self.data.iter_mut().for_each(|todo| {
            if id == todo.id {
                todo.update(&update);
            }
        });
        self.sync_local_storage();
    }

    /// Insert an item into the Store.
    ///
    /// `Item` item Item to insert
    pub fn insert(&mut self, item: Item) {
        self.data.push(item);
        self.sync_local_storage();
    }

    /// Remove items from the Store based on a query.
    /// query is an `ItemQuery` query Query matching the items to remove
    pub fn remove(&mut self, query: ItemQuery) {
        self.data.retain(|todo| !query.matches(todo));
        self.sync_local_storage();
    }

    /// Count total, active, and completed todos.
    pub fn count(&mut self) -> Option<(usize, usize, usize)> {
        self.find(ItemQuery::EmptyItemQuery).map(|data| {
            let total = data.length();

            let mut completed = 0;
            for item in data.iter() {
                if item.completed {
                    completed += 1;
                }
            }
            (total, total - completed, completed)
        })
    }
}

/// Represents a todo item
pub struct Item {
    pub id: String,
    pub title: String,
    pub completed: bool,
}

impl Item {
    pub fn update(&mut self, update: &ItemUpdate) {
        match update {
            ItemUpdate::Title { title, .. } => {
                self.title = title.to_string();
            }
            ItemUpdate::Completed { completed, .. } => {
                self.completed = *completed;
            }
        }
    }
}

pub trait ItemListTrait<T> {
    fn new() -> Self;
    fn get(&self, i: usize) -> Option<&T>;
    fn length(&self) -> usize;
    fn push(&mut self, item: T);
    fn iter(&self) -> std::slice::Iter<'_, T>;
}

pub struct ItemList {
    list: Vec<Item>,
}
impl ItemList {
    fn retain<F>(&mut self, f: F)
    where
        F: FnMut(&Item) -> bool,
    {
        self.list.retain(f);
    }
    fn iter_mut(&mut self) -> std::slice::IterMut<'_, Item> {
        self.list.iter_mut()
    }
}
impl ItemListTrait<Item> for ItemList {
    fn new() -> ItemList {
        ItemList { list: Vec::new() }
    }
    fn get(&self, i: usize) -> Option<&Item> {
        self.list.get(i)
    }
    fn length(&self) -> usize {
        self.list.len()
    }
    fn push(&mut self, item: Item) {
        self.list.push(item)
    }
    fn iter(&self) -> std::slice::Iter<'_, Item> {
        self.list.iter()
    }
}
use std::iter::FromIterator;
impl FromIterator<Item> for ItemList {
    fn from_iter<I: IntoIterator<Item = Item>>(iter: I) -> Self {
        let mut c = ItemList::new();
        for i in iter {
            c.push(i);
        }

        c
    }
}

/// A borrowed set of Items filtered from the store
pub struct ItemListSlice<'a> {
    list: Vec<&'a Item>,
}

impl<'a> ItemListTrait<&'a Item> for ItemListSlice<'a> {
    fn new() -> ItemListSlice<'a> {
        ItemListSlice { list: Vec::new() }
    }
    fn get(&self, i: usize) -> Option<&&'a Item> {
        self.list.get(i)
    }
    fn length(&self) -> usize {
        self.list.len()
    }
    fn push(&mut self, item: &'a Item) {
        self.list.push(item)
    }
    fn iter(&self) -> std::slice::Iter<'_, &'a Item> {
        self.list.iter()
    }
}

impl<'a> FromIterator<&'a Item> for ItemListSlice<'a> {
    fn from_iter<I: IntoIterator<Item = &'a Item>>(iter: I) -> Self {
        let mut c = ItemListSlice::new();
        for i in iter {
            c.push(i);
        }
        c
    }
}

impl From<ItemListSlice<'_>> for ItemList {
    fn from(s: ItemListSlice<'_>) -> Self {
        let mut i = ItemList::new();
        let items = s.list.into_iter();
        for j in items {
            // TODO neaten this cloning?
            let item = Item {
                id: j.id.clone(),
                completed: j.completed,
                title: j.title.clone(),
            };
            i.push(item);
        }
        i
    }
}

/// Represents a search into the store
pub enum ItemQuery {
    Id { id: String },
    Completed { completed: bool },
    EmptyItemQuery,
}

impl ItemQuery {
    fn matches(&self, item: &Item) -> bool {
        match *self {
            ItemQuery::EmptyItemQuery => true,
            ItemQuery::Id { ref id } => &item.id == id,
            ItemQuery::Completed { completed } => item.completed == completed,
        }
    }
}

pub enum ItemUpdate {
    Title { id: String, title: String },
    Completed { id: String, completed: bool },
}

impl ItemUpdate {
    fn id(&self) -> String {
        match self {
            ItemUpdate::Title { id, .. } => id.clone(),
            ItemUpdate::Completed { id, .. } => id.clone(),
        }
    }
}

}

template.rs

#![allow(unused)]
fn main() {
/// Handles constructing template strings from data
use crate::store::{ItemList, ItemListTrait};
use askama::Template as AskamaTemplate;

#[derive(AskamaTemplate)]
#[template(path = "row.html")]
struct RowTemplate<'a> {
    id: &'a str,
    title: &'a str,
    completed: bool,
}

#[derive(AskamaTemplate)]
#[template(path = "itemsLeft.html")]
struct ItemsLeftTemplate {
    active_todos: usize,
}

pub struct Template {}

impl Template {
    /// Format the contents of a todo list.
    ///
    /// items `ItemList` contains keys you want to find in the template to replace.
    /// Returns the contents for a todo list
    ///
    pub fn item_list(items: ItemList) -> String {
        let mut output = String::from("");
        for item in items.iter() {
            let row = RowTemplate {
                id: &item.id,
                completed: item.completed,
                title: &item.title,
            };
            if let Ok(res) = row.render() {
                output.push_str(&res);
            }
        }
        output
    }

    ///
    /// Format the contents of an "items left" indicator.
    ///
    /// `active_todos` Number of active todos
    ///
    /// Returns the contents for an "items left" indicator
    pub fn item_counter(active_todos: usize) -> String {
        let items_left = ItemsLeftTemplate { active_todos };
        if let Ok(res) = items_left.render() {
            res
        } else {
            String::new()
        }
    }
}
}

view.rs

#![allow(unused)]
fn main() {
/// Presentation layer
use crate::controller::ControllerMessage;
use crate::element::Element;
use crate::exit;
use crate::store::ItemList;
use crate::{Message, Scheduler};
use std::cell::RefCell;
use std::rc::Rc;

use crate::template::Template;

const ENTER_KEY: u32 = 13;
const ESCAPE_KEY: u32 = 27;

use wasm_bindgen::prelude::*;

/// Messages that represent the methods to be called on the View
pub enum ViewMessage {
    UpdateFilterButtons(String),
    ClearNewTodo(),
    ShowItems(ItemList),
    SetItemsLeft(usize),
    SetClearCompletedButtonVisibility(bool),
    SetCompleteAllCheckbox(bool),
    SetMainVisibility(bool),
    RemoveItem(String),
    EditItemDone(String, String),
    SetItemComplete(String, bool),
}
fn item_id(mut element: Element) -> Option<String> {
    element.parent_element().map(|mut parent| {
        let mut res = None;
        let parent_id = parent.dataset_get("id");
        if !parent_id.is_empty() {
            res = Some(parent_id);
        } else if let Some(mut ep) = parent.parent_element() {
            res = Some(ep.dataset_get("id"));
        }
        res.unwrap()
    })
}

/// Presentation layer
#[wasm_bindgen]
pub struct View {
    sched: RefCell<Rc<Scheduler>>,
    todo_list: Element,
    todo_item_counter: Element,
    clear_completed: Element,
    main: Element,
    toggle_all: Element,
    new_todo: Element,
    callbacks: Vec<(web_sys::EventTarget, String, Closure<dyn FnMut()>)>,
}

impl View {
    /// Construct a new view
    pub fn new(sched: Rc<Scheduler>) -> Option<View> {
        let todo_list = Element::qs(".todo-list")?;
        let todo_item_counter = Element::qs(".todo-count")?;
        let clear_completed = Element::qs(".clear-completed")?;
        let main = Element::qs(".main")?;
        let toggle_all = Element::qs(".toggle-all")?;
        let new_todo = Element::qs(".new-todo")?;
        Some(View {
            sched: RefCell::new(sched),
            todo_list,
            todo_item_counter,
            clear_completed,
            main,
            toggle_all,
            new_todo,
            callbacks: Vec::new(),
        })
    }

    pub fn init(&mut self) {
        let window = match web_sys::window() {
            Some(w) => w,
            None => return,
        };
        let document = match window.document() {
            Some(d) => d,
            None => return,
        };
        let sched = self.sched.clone();
        let set_page = Closure::<dyn FnMut()>::new(move || {
            if let Some(location) = document.location() {
                if let Ok(hash) = location.hash() {
                    if let Ok(sched) = &(sched.try_borrow_mut()) {
                        sched.add_message(Message::Controller(ControllerMessage::SetPage(hash)));
                    }
                }
            }
        });

        let window_et: web_sys::EventTarget = window.into();
        window_et
            .add_event_listener_with_callback("hashchange", set_page.as_ref().unchecked_ref())
            .unwrap();
        set_page.forget(); // Cycle collect this
                           //self.callbacks.push((window_et, "hashchange".to_string(), set_page));
        self.bind_add_item();
        self.bind_edit_item_save();
        self.bind_edit_item_cancel();
        self.bind_remove_item();
        self.bind_toggle_item();
        self.bind_edit_item();
        self.bind_remove_completed();
        self.bind_toggle_all();
    }

    fn bind_edit_item(&mut self) {
        self.todo_list.delegate(
            "li label",
            "dblclick",
            |e: web_sys::Event| {
                if let Some(target) = e.target() {
                    View::edit_item(target.into());
                }
            },
            false,
        );
    }

    /// Put an item into edit mode.
    fn edit_item(mut el: Element) {
        if let Some(mut parent_element) = el.parent_element() {
            if let Some(mut list_item) = parent_element.parent_element() {
                list_item.class_list_add("editing");
                if let Some(mut input) = Element::create_element("input") {
                    input.set_class_name("edit");
                    if let Some(text) = el.text_content() {
                        input.set_value(&text);
                    }
                    list_item.append_child(&mut input);
                    input.focus();
                }
            }
        }
    }

    /// Used by scheduler to convert a `ViewMessage` into a function call on the `View`
    pub fn call(&mut self, method_name: ViewMessage) {
        use self::ViewMessage::*;
        match method_name {
            UpdateFilterButtons(route) => self.update_filter_buttons(&route),
            ClearNewTodo() => self.clear_new_todo(),
            ShowItems(item_list) => self.show_items(item_list),
            SetItemsLeft(count) => self.set_items_left(count),
            SetClearCompletedButtonVisibility(visible) => {
                self.set_clear_completed_button_visibility(visible)
            }
            SetCompleteAllCheckbox(complete) => self.set_complete_all_checkbox(complete),
            SetMainVisibility(complete) => self.set_main_visibility(complete),
            RemoveItem(id) => self.remove_item(&id),
            EditItemDone(id, title) => self.edit_item_done(&id, &title),
            SetItemComplete(id, completed) => self.set_item_complete(&id, completed),
        }
    }

    /// Populate the todo list with a list of items.
    fn show_items(&mut self, items: ItemList) {
        self.todo_list.set_inner_html(Template::item_list(items));
    }

    /// Gets the selector to find a todo item in the DOM
    fn get_selector_string(id: &str) -> String {
        let mut selector = String::from("[data-id=\"");
        selector.push_str(id);
        selector.push_str("\"]");
        selector
    }

    /// Remove an item from the view.
    fn remove_item(&mut self, id: &str) {
        let elem = Element::qs(&View::get_selector_string(id));

        if let Some(elem) = elem {
            self.todo_list.remove_child(elem);
        }
    }

    /// Set the number in the 'items left' display.
    fn set_items_left(&mut self, items_left: usize) {
        self.todo_item_counter
            .set_inner_html(Template::item_counter(items_left));
    }

    /// Set the visibility of the "Clear completed" button.
    fn set_clear_completed_button_visibility(&mut self, visible: bool) {
        self.clear_completed.set_visibility(visible);
    }

    /// Set the visibility of the main content and footer.
    fn set_main_visibility(&mut self, visible: bool) {
        self.main.set_visibility(visible);
    }

    /// Set the checked state of the Complete All checkbox.
    fn set_complete_all_checkbox(&mut self, checked: bool) {
        self.toggle_all.set_checked(checked);
    }

    /// Change the appearance of the filter buttons based on the route.
    fn update_filter_buttons(&self, route: &str) {
        if let Some(mut el) = Element::qs(".filters .selected") {
            el.set_class_name("");
        }

        let mut selector = String::from(".filters [href=\"");
        selector.push_str(route);
        selector.push_str("\"]");

        if let Some(mut el) = Element::qs(&selector) {
            el.set_class_name("selected");
        }
    }

    /// Clear the new todo input
    fn clear_new_todo(&mut self) {
        self.new_todo.set_value("");
    }

    /// Render an item as either completed or not.
    fn set_item_complete(&self, id: &str, completed: bool) {
        if let Some(mut list_item) = Element::qs(&View::get_selector_string(id)) {
            let class_name = if completed { "completed" } else { "" };
            list_item.set_class_name(class_name);

            // In case it was toggled from an event and not by clicking the checkbox
            if let Some(mut el) = list_item.qs_from("input") {
                el.set_checked(completed);
            }
        }
    }

    /// Bring an item out of edit mode.
    fn edit_item_done(&self, id: &str, title: &str) {
        if let Some(mut list_item) = Element::qs(&View::get_selector_string(id)) {
            if let Some(input) = list_item.qs_from("input.edit") {
                list_item.class_list_remove("editing");

                if let Some(mut list_item_label) = list_item.qs_from("label") {
                    list_item_label.set_text_content(title);
                }

                list_item.remove_child(input);
            }
        }
    }

    fn bind_add_item(&mut self) {
        let sched = self.sched.clone();
        let cb = move |event: web_sys::Event| {
            if let Some(target) = event.target() {
                if let Some(input_el) =
                    wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&target)
                {
                    let v = input_el.value(); // TODO remove with nll
                    let title = v.trim();
                    if !title.is_empty() {
                        if let Ok(sched) = &(sched.try_borrow_mut()) {
                            sched.add_message(Message::Controller(ControllerMessage::AddItem(
                                String::from(title),
                            )));
                        }
                    }
                }
            }
        };
        self.new_todo.add_event_listener("change", cb);
    }

    fn bind_remove_completed(&mut self) {
        let sched = self.sched.clone();
        let handler = move |_| {
            if let Ok(sched) = &(sched.try_borrow_mut()) {
                sched.add_message(Message::Controller(ControllerMessage::RemoveCompleted()));
            }
        };
        self.clear_completed.add_event_listener("click", handler);
    }

    fn bind_toggle_all(&mut self) {
        let sched = self.sched.clone();
        self.toggle_all
            .add_event_listener("click", move |event: web_sys::Event| {
                if let Some(target) = event.target() {
                    if let Some(input_el) =
                        wasm_bindgen::JsCast::dyn_ref::<web_sys::HtmlInputElement>(&target)
                    {
                        if let Ok(sched) = &(sched.try_borrow_mut()) {
                            sched.add_message(Message::Controller(ControllerMessage::ToggleAll(
                                input_el.checked(),
                            )));
                        }
                    }
                }
            });
    }

    fn bind_remove_item(&mut self) {
        let sched = self.sched.clone();
        self.todo_list.delegate(
            ".destroy",
            "click",
            move |e: web_sys::Event| {
                if let Some(target) = e.target() {
                    let el: Element = target.into();
                    if let Some(item_id) = item_id(el) {
                        if let Ok(sched) = &(sched.try_borrow_mut()) {
                            sched.add_message(Message::Controller(ControllerMessage::RemoveItem(
                                item_id,
                            )));
                        }
                    }
                }
            },
            false,
        );
    }

    fn bind_toggle_item(&mut self) {
        let sched = self.sched.clone();
        self.todo_list.delegate(
            ".toggle",
            "click",
            move |e: web_sys::Event| {
                if let Some(target) = e.target() {
                    let mut el: Element = target.into();
                    let checked = el.checked();
                    if let Some(item_id) = item_id(el) {
                        if let Ok(sched) = &(sched.try_borrow_mut()) {
                            sched.add_message(Message::Controller(ControllerMessage::ToggleItem(
                                item_id, checked,
                            )));
                        }
                    }
                }
            },
            false,
        );
    }

    fn bind_edit_item_save(&mut self) {
        let sched = self.sched.clone();

        self.todo_list.delegate(
            "li .edit",
            "blur",
            move |e: web_sys::Event| {
                if let Some(target) = e.target() {
                    let mut target_el: Element = target.into();
                    if target_el.dataset_get("iscancelled") != "true" {
                        let val = target_el.value();
                        if let Some(item) = item_id(target_el) {
                            // TODO refactor back into fn
                            // Was: &self.add_message(ControllerMessage::SetPage(hash));
                            if let Ok(sched) = &(sched.try_borrow_mut()) {
                                sched.add_message(Message::Controller(
                                    ControllerMessage::EditItemSave(item, val),
                                ));
                            }
                            // TODO refactor back into fn
                        }
                    }
                }
            },
            true,
        );

        // Remove the cursor from the input when you hit enter just like if it were a real form
        self.todo_list.delegate(
            "li .edit",
            "keypress",
            |e: web_sys::Event| {
                if let Some(key_e) = wasm_bindgen::JsCast::dyn_ref::<web_sys::KeyboardEvent>(&e) {
                    if key_e.key_code() == ENTER_KEY {
                        if let Some(target) = e.target() {
                            let mut el: Element = target.into();
                            el.blur();
                        }
                    }
                }
            },
            false,
        );
    }

    fn bind_edit_item_cancel(&mut self) {
        let sched = self.sched.clone();
        self.todo_list.delegate(
            "li .edit",
            "keyup",
            move |e: web_sys::Event| {
                if let Some(key_e) = wasm_bindgen::JsCast::dyn_ref::<web_sys::KeyboardEvent>(&e) {
                    if key_e.key_code() == ESCAPE_KEY {
                        if let Some(target) = e.target() {
                            let mut el: Element = target.into();
                            el.dataset_set("iscanceled", "true");
                            el.blur();
                            if let Some(item_id) = item_id(el) {
                                if let Ok(sched) = &(sched.try_borrow_mut()) {
                                    sched.add_message(Message::Controller(
                                        ControllerMessage::EditItemCancel(item_id),
                                    ));
                                }
                            }
                        }
                    }
                }
            },
            false,
        );
    }
}

impl Drop for View {
    fn drop(&mut self) {
        for callback in self.callbacks.drain(..) {
            callback
                .0
                .remove_event_listener_with_callback(
                    callback.1.as_str(),
                    callback.2.as_ref().unchecked_ref(),
                )
                .unwrap();
        }
        exit("calling drop on view");
    }
}
}

build

Adding in TODO MVC example using web-sys

extern crate askama;

fn main() {
    askama::rerun_if_templates_changed();
}

Running the demo

"Currently it's required to use the --target no-modules or --target web flag with wasm-bindgen to run threaded code. This is because the WebAssembly file imports memory instead of exporting it, so we need to hook initialization of the wasm module at this time to provide the appropriate memory object. This demo uses --target no-modules, because Firefox does not support modules in workers.

With --target no-modules you'll be able to use importScripts inside of each web worker to import the shim JS generated by wasm-bindgen as well as calling the wasm_bindgen initialization function with the shared memory instance from the main thread. The expected usage is that WebAssembly on the main thread will post its memory object to all other threads to get instantiated with."
_ wasm-bindgen Guide{target="_blank"}

build and serve

This example requires to not create ES modules, therefore we pass the flag --target no-modules

wasm-pack build --target no-modules --no-typescript --out-dir www/pkg

http www

open index.html

firefox http://localhost:8000/html/

NOTE:

Size
The size of the project hasn't undergone much work to make it optimised yet.

~96kb release build ~76kb optimised with binaryen ~28kb brotli compressed
[wasm-bindgen guide](https://rustwasm.github.io/wasm-bindgen/examples/todomvc.html) ---

What's next?

Were are done for now.