Move running the solutions to use web workers, not blocking the main rendering

Author: Cadiac

Cargo.lock

@@ -8,6 +8,7 @@ edition = "2021"
 itertools = "0.12.0"
 log = "0.4.20"
 yew = { version = "0.21.0", features = ["csr"] }
+yew-agent = "0.3.0"
 yew-router = "0.18"
 wasm-logger = "0.2.0"
 wasm-bindgen = "0.2.88"
@@ -17,3 +18,8 @@ gloo = "0.10.0"
 syntect = { version = "5.1.0", default-features = false, features = [
     "default-fancy",
 ] }
+serde = { version = "1.0.194", features = ["derive"] }
+chrono = { version = "0.4.31", default-features = false, features = [
+    "clock",
+    "wasmbind",
+] }

aoc-web/Cargo.toml

@@ -17,7 +17,25 @@
 
     <base data-trunk-public-url />
 
-    <link data-trunk rel="rust" data-bin="aoc-web" />
+    <link
+      data-trunk
+      rel="rust"
+      href="Cargo.toml"
+      data-bin="app"
+      data-type="main"
+      data-wasm-opt="4"
+      data-weak-refs
+    />
+    <link
+      data-trunk
+      rel="rust"
+      href="Cargo.toml"
+      data-bin="worker"
+      data-type="worker"
+      data-wasm-opt="4"
+      data-weak-refs
+    />
+
     <link data-trunk rel="css" href="static/styles.css" />
     <link data-trunk rel="copy-file" href="static/_redirects" />
     <link data-trunk rel="copy-file" href="static/fragment.glsl" />

aoc-web/index.html

@@ -0,0 +1,23 @@
+use chrono::Local;
+use yew_agent::prelude::*;
+
+use aoc_solver::{solution::Solver, y2020::Y2020, y2021::Y2021, y2022::Y2022, y2023::Y2023};
+
+#[oneshot]
+pub async fn SolutionTask(input: (u32, u8)) -> (String, i64) {
+    let (year, day) = input;
+
+    let start = Local::now();
+
+    let output = match year {
+        2020 => Y2020::run_solution(day, None),
+        2021 => Y2021::run_solution(day, None),
+        2022 => Y2022::run_solution(day, None),
+        2023 => Y2023::run_solution(day, None),
+        _ => vec!["Missing year".to_string()],
+    };
+
+    let duration = (Local::now() - start).num_milliseconds();
+
+    (output.join("\n"), duration)
+}

aoc-web/src/agent.rs

@@ -0,0 +1,21 @@
+use yew::prelude::*;
+
+use aoc_web::{footer::Footer, router::Router};
+
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+        <>
+            <Router/>
+            <Footer />
+        </>
+    }
+}
+
+fn main() {
+    let document = gloo::utils::document();
+    let container = document.query_selector("#aoc").unwrap().unwrap();
+
+    yew::Renderer::<App>::with_root(container).render();
+    wasm_logger::init(wasm_logger::Config::default());
+}

aoc-web/src/bin/app.rs

@@ -0,0 +1,7 @@
+use yew_agent::Registrable;
+
+use aoc_web::agent::SolutionTask;
+
+fn main() {
+    SolutionTask::registrar().register();
+}

aoc-web/src/bin/worker.rs

@@ -0,0 +1,16 @@
+use yew::prelude::*;
+
+#[function_component(Footer)]
+pub fn footer() -> Html {
+    html! {
+        <footer>
+            <small>
+                {"Made by "}
+                <a href="https://github.com/Cadiac">{"Cadiac"}</a>
+                {". Source code can be be found "}
+                <a href="https://github.com/Cadiac/adventofcode">{"here"}</a>
+                {"."}
+            </small>
+        </footer>
+    }
+}

aoc-web/src/footer.rs

@@ -1,6 +1,6 @@
 use yew::prelude::*;
 
-use crate::{year::Year, NavLink, Route};
+use crate::{navlink::NavLink, router::Route, year::Year};
 
 #[derive(Properties, PartialEq)]
 pub struct HeaderProps {

aoc-web/src/header.rs

@@ -0,0 +1,13 @@
+pub mod agent;
+pub mod footer;
+pub mod header;
+pub mod home;
+pub mod navlink;
+pub mod router;
+pub mod solution;
+pub mod year;
+
+pub mod y2020;
+pub mod y2021;
+pub mod y2022;
+pub mod y2023;

aoc-web/src/lib.rs

@@ -1,7 +1,7 @@
 use yew::prelude::*;
 use yew_router::components::Link;
 
-use crate::Route;
+use crate::router::Route;
 
 #[derive(Properties, PartialEq)]
 pub struct NavLinkProps {

aoc-web/src/navlink.rs

@@ -1,18 +1,8 @@
-pub mod header;
-pub mod home;
-pub mod navlink;
-pub mod solution;
-pub mod y2020;
-pub mod y2021;
-pub mod y2022;
-pub mod y2023;
-pub mod year;
-
-use home::Home;
 use yew::prelude::*;
+use yew_agent::oneshot::OneshotProvider;
 use yew_router::prelude::*;
 
-use crate::{header::Header, navlink::NavLink, solution::Solution};
+use crate::{agent::SolutionTask, header::Header, home::Home, solution::Solution, y2022};
 
 #[derive(Clone, Routable, PartialEq)]
 pub enum Route {
@@ -33,7 +23,7 @@ pub enum Route {
     NotFound,
 }
 
-fn router(route: Route) -> Html {
+pub fn switch(route: Route) -> Html {
     let year = match route {
         Route::Index | Route::NotFound => 2023,
         Route::Solution { year, day: _ } | Route::Home { year } => year,
@@ -61,42 +51,20 @@ fn router(route: Route) -> Html {
     html! {
         <>
             <Header year={year} route={route} />
-            <main class="fade-in">{ main }</main>
+            <main class="fade-in">
+                <OneshotProvider<SolutionTask> path="/worker.js">
+                    { main }
+                </OneshotProvider<SolutionTask>>
+            </main>
         </>
     }
 }
 
-#[function_component(Footer)]
-fn footer() -> Html {
-    html! {
-        <footer>
-            <small>
-                {"Made by "}
-                <a href="https://github.com/Cadiac">{"Cadiac"}</a>
-                {". Source code can be be found "}
-                <a href="https://github.com/Cadiac/adventofcode">{"here"}</a>
-                {"."}
-            </small>
-        </footer>
-    }
-}
-
-#[function_component(App)]
-fn app() -> Html {
+#[function_component(Router)]
+pub fn router() -> Html {
     html! {
-        <>
-            <BrowserRouter>
-                <Switch<Route> render={router} />
-            </BrowserRouter>
-            <Footer />
-        </>
+        <BrowserRouter>
+            <Switch<Route> render={switch} />
+        </BrowserRouter>
     }
 }
-
-fn main() {
-    let document = gloo::utils::document();
-    let container = document.query_selector("#aoc").unwrap().unwrap();
-
-    yew::Renderer::<App>::with_root(container).render();
-    wasm_logger::init(wasm_logger::Config::default());
-}

aoc-web/src/main.rs renamed to aoc-web/src/router.rs

@@ -1,9 +1,12 @@
+use yew::platform::spawn_local;
 use yew::prelude::*;
+use yew_agent::oneshot::use_oneshot_runner;
 
 use syntect::highlighting::ThemeSet;
 use syntect::html::highlighted_html_for_string;
 use syntect::parsing::{SyntaxDefinition, SyntaxSetBuilder};
 
+use crate::agent::SolutionTask;
 use aoc_solver::solution::Solver;
 use aoc_solver::y2020::Y2020;
 use aoc_solver::y2021::Y2021;
@@ -16,8 +19,6 @@ pub struct Props {
     pub year: u32,
 }
 
-use yew::{function_component, Html, Properties};
-
 #[function_component(SourceViewer)]
 pub fn source_viewer(props: &Props) -> Html {
     let highlighted = use_memo((props.year, props.day), |(year, day)| {
@@ -51,18 +52,32 @@ pub fn source_viewer(props: &Props) -> Html {
 
 #[function_component(Solution)]
 pub fn solution(props: &Props) -> Html {
-    let output = match props.year {
-        2020 => Y2020::run_solution(props.day, None),
-        2021 => Y2021::run_solution(props.day, None),
-        2022 => Y2022::run_solution(props.day, None),
-        2023 => Y2023::run_solution(props.day, None),
-        _ => vec!["Unknown year".to_string()],
+    let output = use_state(|| "".to_string());
+    let solution_task = use_oneshot_runner::<SolutionTask>();
+
+    let run_solution = {
+        let output = output.clone();
+
+        move |input: (u32, u8)| {
+            let solution_agent = solution_task.clone();
+            let output = output.clone();
+            output.set("Running...".to_string());
+
+            spawn_local(async move {
+                let (output_value, duration) = solution_agent.run(input).await;
+                output.set(format!("{output_value}\n{duration} ms"));
+            });
+        }
     };
 
+    let input = (props.year, props.day);
+
+    use_effect_with((props.day, props.year), move |_| run_solution(input));
+
     html! {
         <div class="fade-in">
             <pre>
-                <code>{ output.join("\n") }</code>
+                <code>{ &*output }</code>
             </pre>
             <SourceViewer year={props.year} day={props.day} />
         </div>

aoc-web/src/solution.rs

@@ -1,7 +1,7 @@
 use yew::prelude::*;
 use yew_router::components::Link;
 
-use crate::Route;
+use crate::router::Route;
 
 const YEARS: &[u32] = &[2023, 2022, 2021, 2020];