examples: rust_from_js

MartinKavik · MartinKavik · commit 81ee3e0a4d05 · 2021-01-14T23:24:36.000+01:00
diff --git a/Cargo.toml b/Cargo.toml
@@ -136,7 +136,7 @@ members = [
     "examples/pages_hash_routing",
     "examples/pages_keep_state",
     "examples/resize_observer",
-    # "examples/server_integration",   # has own workspace
+    "examples/rust_from_js",
     "examples/service_worker",
     "examples/subscribe",
     "examples/tests",
@@ -150,8 +150,8 @@ members = [
     "examples/window_events",
 ]
 
+# they have own workspaces
 exclude = [
-    # it has own workspace
     "examples/e2e_encryption",
     "examples/server_integration",
 ]
diff --git a/examples/README.md b/examples/README.md
@@ -66,6 +66,9 @@ Pages keep their state.
 ### [ResizeObserver](resize_observer)
 How to use [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
 
+## [Rust from JS](rust_from_js)
+How to call Rust functions from Javascript.
+
 ### [Subscribe](subscribe)
 How to create and use subscriptions, streams, notifications and commands.
 
diff --git a/examples/rust_from_js/Cargo.toml b/examples/rust_from_js/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "rust_from_js"
+version = "0.1.0"
+authors = ["Martin Kavík <martin@kavik.cz>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+seed = {path = "../../"}
diff --git a/examples/rust_from_js/Makefile.toml b/examples/rust_from_js/Makefile.toml
@@ -0,0 +1,27 @@
+extend = "../../Makefile.toml"
+
+# ---- BUILD ----
+
+[tasks.build]
+alias = "default_build"
+
+[tasks.build_release]
+alias = "default_build_release"
+
+# ---- START ----
+
+[tasks.start]
+alias = "default_start"
+
+[tasks.start_release]
+alias = "default_start_release"
+
+# ---- TEST ----
+
+[tasks.test_firefox]
+alias = "default_test_firefox"
+
+# ---- LINT ----
+
+[tasks.clippy]
+alias = "default_clippy"
diff --git a/examples/rust_from_js/README.md b/examples/rust_from_js/README.md
@@ -0,0 +1,17 @@
+## Rust from JS example
+
+How to call Rust functions from Javascript.
+
+_Note:_ See example `update_from_js` for more advanced example without the mutable global variable as a state. 
+
+---
+
+```bash
+cargo make start
+```
+
+Open [127.0.0.1:8000](http://127.0.0.1:8000) in your browser.
+
+See the code in `index.html`. 
+
+Run in the browser dev console `rust.set_title("New title")` and click the `Rerender` button.
diff --git a/examples/rust_from_js/index.html b/examples/rust_from_js/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, shrink-to-fit=no" />
+  <title>Rust from JS example</title>
+</head>
+
+<body>
+  <section id="app"></section>
+  <script type="module">
+    import { set_title } from '/pkg/package.js';
+    window.rust = { set_title };
+
+    import init from '/pkg/package.js';
+    init('/pkg/package_bg.wasm');
+  </script>
+</body>
+
+</html>
diff --git a/examples/rust_from_js/src/lib.rs b/examples/rust_from_js/src/lib.rs
@@ -0,0 +1,62 @@
+use seed::{prelude::*, *};
+use std::cell::RefCell;
+
+thread_local!(static TITLE: RefCell<String> = RefCell::new("I'm TITLE!".to_owned()));
+
+#[wasm_bindgen]
+pub fn set_title(title: String) {
+    TITLE.with(|title_cell| title_cell.replace(title));
+}
+
+fn title() -> String {
+    TITLE.with(|title_cell| title_cell.borrow().clone())
+}
+
+// ------ ------
+//     Init
+// ------ ------
+
+fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
+    Model
+}
+
+// ------ ------
+//     Model
+// ------ ------
+
+struct Model;
+
+// ------ ------
+//    Update
+// ------ ------
+
+#[derive(Clone, Copy)]
+enum Msg {
+    Rerender,
+}
+
+fn update(msg: Msg, _: &mut Model, _: &mut impl Orders<Msg>) {
+    match msg {
+        Msg::Rerender => log!("Rerendered"),
+    }
+}
+
+// ------ ------
+//     View
+// ------ ------
+
+fn view(_: &Model) -> Vec<Node<Msg>> {
+    vec![
+        h1![title()],
+        button!["Rerender", ev(Ev::Click, |_| Msg::Rerender)],
+    ]
+}
+
+// ------ ------
+//     Start
+// ------ ------
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    App::start("app", init, update, view);
+}
