Merge pull request #38 from bodil/dodrio

Dodrio support with a bespoke macro.
bodil · Mar 16, 2019 · 359a7a6 · 359a7a6
2 parents 1102415 + a39ccf7
commit 359a7a6
Show file tree

Hide file tree

Showing 31 changed files with 1,460 additions and 42 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -4,5 +4,7 @@ members = [
     "macros",
     "examples/stdweb",
     "examples/rocket",
+    "examples/dodrio/counter",
+    "examples/dodrio/todomvc",
     "ui",
 ]
diff --git a/examples/dodrio/counter/Cargo.toml b/examples/dodrio/counter/Cargo.toml
@@ -0,0 +1,34 @@
+[package]
+name = "dodrio-counter"
+version = "0.1.0"
+authors = ["Nick Fitzgerald <[email protected]>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[features]
+
+[dependencies]
+console_error_panic_hook = "0.1.6"
+console_log = "0.1.2"
+dodrio = "0.1.0"
+log = "0.4.6"
+wasm-bindgen = "0.2.38"
+typed-html = { path = "../../../typed-html", features = ["dodrio_macro"] }
+
+[dependencies.web-sys]
+version = "0.3.15"
+features = [
+  "console",
+  "Document",
+  "Event",
+  "EventTarget",
+  "HtmlElement",
+  "MouseEvent",
+  "Node",
+  "Window",
+]
+
+[dev-dependencies]
+wasm-bindgen-test = "0.2.38"
diff --git a/examples/dodrio/counter/README.md b/examples/dodrio/counter/README.md
@@ -0,0 +1,21 @@
+# Counter
+
+A counter that can be incremented and decremented.
+
+## Source
+
+See `src/lib.rs`.
+
+## Build
+
+```
+wasm-pack build --target no-modules
+```
+
+## Serve
+
+Use any HTTP server, for example:
+
+```
+python -m SimpleHTTPServer
+```
diff --git a/examples/dodrio/counter/index.html b/examples/dodrio/counter/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>Counter</title>
+  </head>
+  <body>
+    <script src="pkg/dodrio_counter.js"></script>
+    <script>
+     wasm_bindgen("pkg/dodrio_counter_bg.wasm");
+    </script>
+  </body>
+</html>
diff --git a/examples/dodrio/counter/src/lib.rs b/examples/dodrio/counter/src/lib.rs
@@ -0,0 +1,86 @@
+#![recursion_limit = "128"]
+
+use dodrio::builder::text;
+use dodrio::bumpalo::{self, Bump};
+use dodrio::Render;
+use log::*;
+use typed_html::dodrio;
+use wasm_bindgen::prelude::*;
+
+/// A counter that can be incremented and decrmented!
+struct Counter {
+    count: isize,
+}
+
+impl Counter {
+    /// Construct a new, zeroed counter.
+    fn new() -> Counter {
+        Counter { count: 0 }
+    }
+
+    /// Increment this counter's count.
+    fn increment(&mut self) {
+        self.count += 1;
+    }
+
+    /// Decrement this counter's count.
+    fn decrement(&mut self) {
+        self.count -= 1;
+    }
+}
+
+// The `Render` implementation for `Counter`s displays the current count and has
+// buttons to increment and decrement the count.
+impl Render for Counter {
+    fn render<'a, 'bump>(&'a self, bump: &'bump Bump) -> dodrio::Node<'bump>
+    where
+        'a: 'bump,
+    {
+        // Stringify the count as a bump-allocated string.
+        let count = bumpalo::format!(in bump, "{}", self.count);
+
+        dodrio!(bump,
+            <div id="counter">
+                <button onclick={|root, vdom, _event| {
+                    // Cast the root render component to a `Counter`, since
+                    // we know that's what it is.
+                    let counter = root.unwrap_mut::<Counter>();
+
+                    // Increment the counter.
+                    counter.increment();
+
+                    // Since the count has updated, we should re-render the
+                    // counter on the next animation frame.
+                    vdom.schedule_render();
+                }}>"+"</button>
+                { vec![text(count.into_bump_str())] }
+                <button onclick={|root, vdom, _event| {
+                    // Same as above, but decrementing instead of incrementing.
+                    root.unwrap_mut::<Counter>().decrement();
+                    vdom.schedule_render();
+                }}>"-"</button>
+            </div>
+        )
+    }
+}
+
+#[wasm_bindgen(start)]
+pub fn run() {
+    // Initialize debug logging for if/when things go wrong.
+    console_error_panic_hook::set_once();
+    console_log::init_with_level(Level::Trace).expect("should initialize logging OK");
+
+    // Get the document's `<body>`.
+    let window = web_sys::window().unwrap();
+    let document = window.document().unwrap();
+    let body = document.body().unwrap();
+
+    // Construct a new counter component.
+    let counter = Counter::new();
+
+    // Mount our counter component to the `<body>`.
+    let vdom = dodrio::Vdom::new(&body, counter);
+
+    // Run the virtual DOM and its listeners forever.
+    vdom.forget();
+}
diff --git a/examples/dodrio/todomvc/Cargo.toml b/examples/dodrio/todomvc/Cargo.toml
@@ -0,0 +1,49 @@
+[package]
+authors = ["Nick Fitzgerald <[email protected]>"]
+edition = "2018"
+name = "dodrio-todomvc"
+version = "0.1.0"
+
+[dependencies]
+cfg-if = "0.1.7"
+dodrio = "0.1.0"
+futures = "0.1.25"
+js-sys = "0.3.15"
+serde = { features = ["derive"], version = "1.0.89" }
+serde_json = "1.0.39"
+wasm-bindgen = "0.2.38"
+wasm-bindgen-futures = "0.3.15"
+typed-html = { path = "../../../typed-html", features = ["dodrio_macro"] }
+
+# Optional dependencies for logging.
+console_error_panic_hook = { optional = true, version = "0.1.6" }
+console_log = { optional = true, version = "0.1.2" }
+log = { optional = true, version = "0.4.6" }
+
+[dependencies.web-sys]
+version = "0.3.15"
+features = [
+    "Document",
+    "Event",
+    "EventTarget",
+    "HtmlElement",
+    "HtmlInputElement",
+    "KeyboardEvent",
+    "Location",
+    "Storage",
+    "Node",
+    "Window",
+]
+
+[dev-dependencies]
+wasm-bindgen-test = "0.2.38"
+
+[features]
+logging = [
+    "console_log",
+    "console_error_panic_hook",
+    "log",
+]
+
+[lib]
+crate-type = ["cdylib"]
diff --git a/examples/dodrio/todomvc/README.md b/examples/dodrio/todomvc/README.md
@@ -0,0 +1,33 @@
+# TodoMVC
+
+`dodrio` implementation of the popular [TodoMVC](http://todomvc.com/) app. It
+correctly and completely fulfills [the
+specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md) to
+the best of my knowledge.
+
+## Source
+
+There are a number of modules in this `dodrio` implementation of TodoMVC. The
+most important are:
+
+* `src/lib.rs`: The entry point to the application.
+* `src/todos.rs`: Definition of `Todos` model and its rendering.
+* `src/todo.rs`: Definition of `Todo` model and its rendering.
+* `src/controller.rs`: The controller handles UI interactions and translates
+  them into updates on the model. Finally, it triggers re-rendering after those
+  updates.
+* `src/router.rs`: A simple URL hash-based router.
+
+## Build
+
+```
+wasm-pack build --target no-modules
+```
+
+## Serve
+
+Use any HTTP server, for example:
+
+```
+python -m SimpleHTTPServer
+```
diff --git a/examples/dodrio/todomvc/index.html b/examples/dodrio/todomvc/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>dodrio • TodoMVC</title>
+        <link rel="stylesheet" href="https://unpkg.com/todomvc-common@^1.0.0/base.css">
+        <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@^2.0.0/index.css">
+    </head>
+    <body>
+        <section class="todoapp">
+        </section>
+        <footer class="info">
+            <p>Double-click to edit a todo</p>
+        </footer>
+        <script src="pkg/dodrio_todomvc.js"></script>
+        <script>
+         wasm_bindgen("pkg/dodrio_todomvc_bg.wasm");
+        </script>
+    </body>
+</html>