Merge pull request yewstack#85 from rivertam/mount-point

Add mount points

examples/counter/src/main.rs

@@ -53,12 +53,14 @@ fn view(model: &Model) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let context = Context {
         console: ConsoleService,
     };
     let model = Model {
         value: 0,
     };
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }

examples/crm/src/main.rs

@@ -200,6 +200,7 @@ fn view_last_name_input(client: &Client) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let mut context = Context {
         storage: StorageService::new(Scope::Local),
@@ -209,5 +210,6 @@ fn main() {
     let scene = Scene::Initialization;
     let model = Model { database, scene };
     app.sender().send(Msg::SwitchTo(Scene::ClientsList));
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }

examples/dashboard/client/src/main.rs

@@ -139,6 +139,7 @@ fn view_data(model: &Model) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let context = Context {
         web: FetchService::new(app.sender()),
@@ -149,5 +150,6 @@ fn main() {
         data: None,
         ws: None,
     };
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }

examples/game_of_life/src/main.rs

@@ -215,6 +215,7 @@ fn view_cellule((idx, cellule): (usize, &Cellule)) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let context = Context {
         interval: IntervalService::new(app.sender()),
@@ -225,5 +226,6 @@ fn main() {
         cellules_height: 40,
         job : None
     };
-    app.run(context, gof, update, view);
+    app.mount(context, gof, update, view);
+    yew::run_loop();
 }

examples/mount_point/Cargo.toml

@@ -0,0 +1,8 @@
+[package]
+name = "mount_point"
+version = "0.1.0"
+authors = ["Ben Berman <[email protected]>"]
+
+[dependencies]
+yew = { path = "../.." }
+stdweb = "0.3"

examples/mount_point/src/main.rs

@@ -0,0 +1,67 @@
+#[macro_use]
+extern crate yew;
+#[macro_use]
+extern crate stdweb;
+
+use yew::html::{App, Html, InputData};
+use stdweb::web::{IElement, document, INode};
+
+struct Context {}
+
+struct Model {
+    name: String,
+}
+
+enum Msg {
+    UpdateName(String),
+}
+
+fn update(_: &mut Context, model: &mut Model, msg: Msg) {
+    match msg {
+        Msg::UpdateName(new_name) => {
+            model.name = new_name;
+        }
+    }
+}
+
+fn view(model: &Model) -> Html<Msg> {
+    html! {
+        <div>
+            <input value=&model.name, oninput=|e: InputData| Msg::UpdateName(e.value), />
+            <p>{ model.name.chars().rev().collect::<String>() }</p>
+        </div>
+    }
+}
+
+fn main() {
+    yew::initialize();
+    let body = document().query_selector("body").unwrap();
+
+    // This canvas won't be overwritten by yew!
+    let canvas = document().create_element("canvas");
+    body.append_child(&canvas);
+
+    js! {
+        const canvas = document.querySelector("canvas");
+        canvas.width = 100;
+        canvas.height = 100;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "green";
+        ctx.fillRect(10, 10, 50, 50);
+    };
+
+    let mount_class = "mount-point";
+    let mount_point = document().create_element("div");
+    mount_point.class_list().add(mount_class);
+    body.append_child(&mount_point);
+
+    let mut app = App::new();
+    let context = Context {};
+    let model = Model {
+        name: "Reversed".to_owned(),
+    };
+
+    let mount_point = format!(".{}", mount_class);
+    app.mount_to(&mount_point, context, model, update, view);
+    yew::run_loop();
+}

examples/npm_and_rest/Cargo.toml

@@ -7,4 +7,4 @@ authors = ["Denis Kolodin <[email protected]>"]
 serde = "1"
 serde_derive = "1"
 yew = { path = "../.." }
-stdweb = "0.2"
+stdweb = "0.3"

examples/npm_and_rest/src/main.rs

@@ -62,6 +62,7 @@ fn view(model: &Model) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let context = Context {
         gravatar: GravatarService::new(app.sender()),
@@ -71,5 +72,6 @@ fn main() {
         profile: None,
         exchanges: Vec::new(),
     };
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }

examples/timer/src/main.rs

@@ -86,6 +86,7 @@ fn view(model: &Model) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let context = Context {
         interval: IntervalService::new(app.sender()),
@@ -96,5 +97,6 @@ fn main() {
         job: None,
         messages: Vec::new(),
     };
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }

examples/todomvc/src/main.rs

@@ -194,6 +194,7 @@ fn view_entry_edit_input((idx, entry): (usize, &Entry)) -> Html<Msg> {
 }
 
 fn main() {
+    yew::initialize();
     let mut app = App::new();
     let mut context = Context {
         storage: StorageService::new(Scope::Local),
@@ -210,7 +211,8 @@ fn main() {
             }
         }
     };
-    app.run(context, model, update, view);
+    app.mount(context, model, update, view);
+    yew::run_loop();
 }
 
 #[derive(EnumIter, ToString, Clone, PartialEq)]

examples/two_apps/Cargo.toml

@@ -0,0 +1,7 @@
+[package]
+name = "two_apps"
+version = "0.1.0"
+authors = ["Denis Kolodin <[email protected]>"]
+
+[dependencies]
+yew = { path = "../.." }

examples/two_apps/src/main.rs

@@ -0,0 +1,66 @@
+#[macro_use]
+extern crate yew;
+
+use yew::html::*;
+
+struct Context {
+    sender: AppSender<Msg>,
+}
+
+struct Model {
+    selector: &'static str,
+    title: String,
+}
+
+enum Msg {
+    SendToOpposite(String),
+    SetTitle(String),
+}
+
+fn update(context: &mut Context, model: &mut Model, msg: Msg) {
+    match msg {
+        Msg::SendToOpposite(title) => {
+            context.sender.send(Msg::SetTitle(title));
+        }
+        Msg::SetTitle(title) => {
+            model.title = title;
+        }
+    }
+}
+
+fn view(model: &Model) -> Html<Msg> {
+    html! {
+        <div>
+            <h3>{ format!("{} received <{}>", model.selector, model.title) }</h3>
+            <button onclick=|_| Msg::SendToOpposite("One".into()),>{ "One" }</button>
+            <button onclick=|_| Msg::SendToOpposite("Two".into()),>{ "Two" }</button>
+            <button onclick=|_| Msg::SendToOpposite("Three".into()),>{ "Three" }</button>
+        </div>
+    }
+}
+
+fn mount_app(selector: &'static str, app: &mut App<Msg>, sender: AppSender<Msg>) {
+    let context = Context {
+        sender,
+    };
+    let model = Model {
+        selector,
+        title: "Not set".into(),
+    };
+    app.mount_to(selector, context, model, update, view);
+}
+
+fn main() {
+    yew::initialize();
+
+    let mut first_app = App::new();
+    let to_first = first_app.sender();
+
+    let mut second_app = App::new();
+    let to_second = second_app.sender();
+
+    mount_app(".first-app", &mut first_app, to_second);
+    mount_app(".second-app", &mut second_app, to_first);
+
+    yew::run_loop();
+}

examples/two_apps/static/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Yew • Two Apps</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <div class="first-app"></div>
+        <div class="second-app"></div>
+        <script src="js/app.js"></script>
+    </body>
+</html>
+