init

frontend/src/app.css

@@ -0,0 +1 @@
+body {}

frontend/src/index.scss

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+html {}

frontend/src/inline-scss.scss

@@ -0,0 +1,4 @@
+.trunk_yew_example_fancy_green {
+  $nice_color: green;
+  background-color: $nice_color;
+}

frontend/src/main.rs

@@ -0,0 +1,196 @@
+#![recursion_limit = "1024"]
+
+#[global_allocator]
+static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+use common::OutputPicture;
+use console_error_panic_hook::set_once as set_panic_hook;
+use wasm_bindgen::prelude::*;
+use ybc::TileCtx::{Ancestor, Child, Parent};
+use yew::prelude::*;
+// use pathfinding::directed::dijkstra;
+use yew::format::Json;
+use yew::format::Nothing;
+
+use yew::services::fetch::FetchService;
+use yew::services::ConsoleService;
+use yew::services::fetch::FetchTask;
+use yew::services::fetch::Request;
+use yew::services::fetch::Response;
+
+pub enum Msg {
+    GetPictures,
+    ReceiveResponse(Result<Vec<OutputPicture>, anyhow::Error>),
+}
+
+struct App {
+    pictures: Option<Vec<OutputPicture>>,
+    fetch_task: Option<FetchTask>,
+    link: ComponentLink<Self>,
+    error: Option<String>,
+}
+
+impl App {
+    fn view_fetching(&self) -> Html {
+        if self.fetch_task.is_some() {
+            html! { <p>{ "Fetching data..." }</p> }
+        } else {
+            html! { <p></p> }
+        }
+    }
+    fn view_error(&self) -> Html {
+        if let Some(ref error) = self.error {
+            html! { <p>{ error.clone() }</p> }
+        } else {
+            html! {}
+        }
+    }
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self {
+            fetch_task: None,
+            link,
+            pictures: None,
+            error: None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> bool {
+        match msg {
+            Msg::GetPictures => {
+                let request = Request::get("http://localhost/api/pictures/")
+                    .body(Nothing)
+                    .expect("Could not build that request");
+                let callback =
+                    self.link
+                        .callback(|response: Response<Json<Result<Vec<OutputPicture>, anyhow::Error>>>| {
+                            let Json(data) = response.into_body();
+                            Msg::ReceiveResponse(data)
+                        });
+                let task = FetchService::fetch(request, callback).expect("failed to start request");
+                self.fetch_task = Some(task);
+                true
+            }
+            Msg::ReceiveResponse(response) => {
+                match response {
+                    Ok(pictures) => {
+                        self.pictures = Some(pictures);
+                    }
+                    Err(error) => {
+                        self.error = Some(error.to_string());
+                    }
+                }
+                self.fetch_task = None;
+                true
+            }
+        }
+    }
+
+    fn change(&mut self, _: Self::Properties) -> bool {
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <>
+            <ybc::Navbar
+                classes=classes!("is-success")
+                padded=true
+                navbrand=html!{
+                    <ybc::NavbarItem>
+                        <ybc::Title classes=classes!("has-text-white") size=ybc::HeaderSize::Is4>{"Trunk | Yew | YBC"}</ybc::Title>
+                    </ybc::NavbarItem>
+                }
+                navstart=html!{}
+                navend=html!{
+                    <>
+                    <ybc::NavbarItem>
+                        <ybc::ButtonAnchor classes=classes!("is-black", "is-outlined") rel=String::from("noopener noreferrer") target=String::from("_blank") href="https://github.com/thedodd/trunk">
+                            {"Trunk"}
+                        </ybc::ButtonAnchor>
+                    </ybc::NavbarItem>
+                    <ybc::NavbarItem>
+                        <ybc::ButtonAnchor classes=classes!("is-black", "is-outlined") rel=String::from("noopener noreferrer") target=String::from("_blank") href="https://yew.rs">
+                            {"Yew"}
+                        </ybc::ButtonAnchor>
+                    </ybc::NavbarItem>
+                    <ybc::NavbarItem>
+                        <ybc::ButtonAnchor classes=classes!("is-black", "is-outlined") rel=String::from("noopener noreferrer") target=String::from("_blank") href="https://github.com/thedodd/ybc">
+                            {"YBC"}
+                        </ybc::ButtonAnchor>
+                    </ybc::NavbarItem>
+                    </>
+                }
+            />
+
+            <ybc::Hero
+                classes=classes!("is-light")
+                size=ybc::HeroSize::FullheightWithNavbar
+                body=html!{
+                    <ybc::Container classes=classes!("is-centered")>
+                    <ybc::Tile ctx=Ancestor>
+                    <>
+                    <button onclick=self.link.callback(|_| Msg::GetPictures)>
+                         { "Load pictures" }
+                     </button>
+                { self.view_fetching() }
+                { self.view_error() }
+            </>
+                        <ybc::Tile ctx=Parent size=ybc::TileSize::Twelve>
+                            <ybc::Tile ctx=Parent>
+                                <ybc::Tile ctx=Child classes=classes!("notification", "is-success")>
+                                    <ybc::Subtitle size=ybc::HeaderSize::Is3 classes=classes!("has-text-white")>{"Trunk"}</ybc::Subtitle>
+                                    <p>{"Trunk is a WASM web application bundler for Rust."}</p>
+                                </ybc::Tile>
+                            </ybc::Tile>
+                            <ybc::Tile ctx=Parent>
+                                <ybc::Tile ctx=Child classes=classes!("notification", "is-success")>
+                                    <ybc::Icon size=ybc::Size::Large classes=classes!("is-pulled-right")><img src="yew.svg"/></ybc::Icon>
+                                    <ybc::Subtitle size=ybc::HeaderSize::Is3 classes=classes!("has-text-white")>
+                                        {"Yew"}
+                                    </ybc::Subtitle>
+                                    <p>{"Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly."}</p>
+                                </ybc::Tile>
+                            </ybc::Tile>
+                            <ybc::Tile ctx=Parent>
+                                <ybc::Tile ctx=Child classes=classes!("notification", "is-success")>
+                                    <ybc::Subtitle size=ybc::HeaderSize::Is3 classes=classes!("has-text-white")>{"YBC"}</ybc::Subtitle>
+                                    <p>{"A Yew component library based on the Bulma CSS framework."}</p>
+                                </ybc::Tile>
+                            </ybc::Tile>
+                        </ybc::Tile>
+                    </ybc::Tile>
+                    </ybc::Container>
+                }>
+            </ybc::Hero>
+            </>
+        }
+    }
+}
+
+#[wasm_bindgen(inline_js = "export function snippetTest() { console.log('Hello from JS FFI!'); }")]
+extern "C" {
+    fn snippetTest();
+}
+
+fn main() {
+    set_panic_hook();
+    snippetTest();
+
+    // Show off some feature flag enabling patterns.
+    #[cfg(feature = "demo-abc")]
+    {
+        ConsoleService::log("feature `demo-abc` enabled");
+    }
+    #[cfg(feature = "demo-xyz")]
+    {
+        ConsoleService::log("feature `demo-xyz` enabled");
+    }
+
+    yew::start_app::<App>();
+}

frontend/src/yew.svg

@@ -0,0 +1,7 @@
+<svg width="75" height="82" viewBox="0 0 75 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="38" cy="40" r="25" fill="#FFEFB8"/>
+<path d="M38.2373 41.0339L14 14" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
+<path d="M38.2373 41.0339L62.4746 14" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
+<path d="M38.2373 41.0339L38.2373 69" stroke="#444444" stroke-width="6" stroke-linecap="round"/>
+<circle cx="38" cy="41" r="7" fill="#FFD707" stroke="#444444" stroke-width="4"/>
+</svg>