Refactor and cleanup codebase (yewstack#1842)

* remove yew-dsl

* remove yew-components

* remove yew-services

* remove yew::format

* fix CI

* move yew::agent to yew-agent crate

* move yew-functional to yew

plus a couple of misc fixes

* move futures and neqassign out of yewtil

* move yewtil::store to yew_agent, remove yewtil

* formatting

* fix tests

* update docs

* use `rustwasm` gloo repo instead of mine

* add docs

* use rustwasm/gloo repo

* remove unused file

* fix Makefile.toml

* Fix issues after rebase

* Apply suggestions from code review (part 1)

Co-authored-by: mc1098 <m.cripps1@uni.brighton.ac.uk>

* Apply suggestions from code review (part 2)

* move `#[function_component(_)]` tests

missed those before

* Apply suggestions from code review

Co-authored-by: mc1098 <m.cripps1@uni.brighton.ac.uk>

Co-authored-by: mc1098 <m.cripps1@uni.brighton.ac.uk>

Author: ranile

.github/workflows/pull-request.yml

@@ -41,12 +41,6 @@ jobs:
           command: clippy
           args: --all-targets -- -D warnings
 
-      - name: Run clippy - yew with all features
-        if: always()
-        run: |
-          cd packages/yew
-          cargo clippy --all-targets --features "cbor msgpack toml yaml" -- -D warnings
-
   check_examples:
     name: Check Examples
     runs-on: ubuntu-latest
@@ -110,20 +104,11 @@ jobs:
       - name: Run doctest - yew with features
         run: |
           cd packages/yew
-          cargo test --doc --features "doc_test wasm_test yaml msgpack cbor toml"
+          cargo test --doc --features "doc_test wasm_test"
 
   integration_tests:
     name: Integration Tests on ${{ matrix.toolchain }}
     runs-on: ubuntu-latest
-    services:
-      httpbin:
-        image: kennethreitz/httpbin@sha256:599fe5e5073102dbb0ee3dbb65f049dab44fa9fc251f6835c9990f8fb196a72b
-        ports:
-          - 8080:80
-      echo_server:
-        image: jmalloc/echo-server@sha256:c461e7e54d947a8777413aaf9c624b4ad1f1bac5d8272475da859ae82c1abd7d
-        ports:
-          - 8081:8080
 
     strategy:
       matrix:
@@ -163,20 +148,6 @@ jobs:
           cd packages/yew-router
           wasm-pack test --chrome --firefox --headless
 
-      - name: Run tests - yew-functional
-        run: |
-          cd packages/yew-functional
-          wasm-pack test --chrome --firefox --headless
-
-      - name: Run tests - yew-services
-        env:
-          HTTPBIN_URL: "http://localhost:8080"
-          ECHO_SERVER_URL: "ws://localhost:8081"
-        run: |
-          cd packages/yew-services
-          wasm-pack test --chrome --firefox --headless -- --features "wasm_test httpbin_test echo_server_test"
-
-
   unit_tests:
     name: Unit Tests on ${{ matrix.toolchain }}
     runs-on: ubuntu-latest

Cargo.toml

@@ -1,31 +1,18 @@
 [workspace]
 members = [
   "packages/yew",
-  "packages/yew-components",
   "packages/yew-macro",
-  "packages/yew-services",
   "packages/yew-validation",
+  "packages/yew-agent",
 
   # Router
   "packages/yew-router",
   "packages/yew-router-macro",
 
-  # Function components
-  "packages/yew-functional",
-  "packages/yew-functional-macro",
-
-  # Utilities
-  "packages/yewtil",
-  "packages/yewtil-macro",
-
-  # dsl
-  "packages/yew-dsl",
-
   # Examples
   "examples/boids",
   "examples/counter",
   "examples/crm",
-  "examples/dashboard",
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
   "examples/futures",

examples/README.md

@@ -31,9 +31,8 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [boids](boids)                                      | Yew port of [Boids](https://en.wikipedia.org/wiki/Boids)                                                                           |
 | [counter](counter)                                  | Simple counter which can be incremented and decremented                                                                            |
 | [crm](crm)                                          | Shallow customer relationship management tool                                                                                      |
-| [dashboard](dashboard)                              | Uses the `fetch` and `websocket` services to load external data                                                                    |
 | [dyn_create_destroy_apps](dyn_create_destroy_apps)  | Uses the function `start_app_in_element` and the `AppHandle` struct to dynamically create and delete Yew apps                      |
-| [file_upload](file_upload)                          | Uses the `reader` service to read the content of user uploaded files                                                               |
+| [file_upload](file_upload)                          | Uses the `gloo::file` to read the content of user uploaded files                                                               |
 | [futures](futures)                                  | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |
 | [game_of_life](game_of_life)                        | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |
 | [inner_html](inner_html)                            | Embeds an external document as raw HTML by manually managing the element                                                           |

examples/boids/Cargo.toml

@@ -12,4 +12,4 @@ getrandom = { version = "0.2", features = ["js"] }
 rand = "0.8"
 serde = { version = "1.0", features = ["derive"] }
 yew = { path = "../../packages/yew" }
-yew-services = { path = "../../packages/yew-services" }
+gloo = { git = "https://github.com/rustwasm/gloo/" }

examples/boids/README.md

@@ -17,17 +17,15 @@ trunk serve --release
 
 ## Concepts
 
-The example uses [`IntervalService`] to drive the game loop.
+The example uses [`gloo::timers`](https://gloo-rs.web.app/docs/timer) implementation of `setInterval` to drive the Yew game loop.
 
 ## Improvements
 
 - Add the possibility to switch the behaviour from flocking to scattering by inverting the cohesion rule so that boids avoid each other.
   This should also invert the color adaption to restore some variety.
-- Add keyboard shortcuts (using the `KeyboardService`) for the actions.
+- Add keyboard shortcuts for the actions.
 - Make it possible to hide the settings panel entirely
 - Bigger boids should accelerate slower than smaller ones
 - Share settings by encoding them into the URL
 - Resize the boids when "Spacing" is changed.
   The setting should then also be renamed to something like "Size".
-
-[`intervalservice`]: https://docs.rs/yew-services/latest/yew_services/struct.IntervalService.html

examples/boids/src/settings.rs

@@ -1,6 +1,5 @@
+use gloo::storage::{LocalStorage, Storage};
 use serde::{Deserialize, Serialize};
-use yew::format::Json;
-use yew_services::storage::{Area, StorageService};
 
 #[derive(Clone, Debug, PartialEq, Deserialize, Serialize)]
 pub struct Settings {
@@ -31,27 +30,15 @@ impl Settings {
     const KEY: &'static str = "yew.boids.settings";
 
     pub fn load() -> Self {
-        StorageService::new(Area::Local)
-            .ok()
-            .and_then(|storage| {
-                storage
-                    .restore::<Json<anyhow::Result<Settings>>>(Self::KEY)
-                    .0
-                    .ok()
-            })
-            .unwrap_or_default()
+        LocalStorage::get(Self::KEY).unwrap_or_default()
     }
 
     pub fn remove() {
-        if let Ok(mut storage) = StorageService::new(Area::Local) {
-            storage.remove(Self::KEY);
-        }
+        LocalStorage::delete(Self::KEY);
     }
 
     pub fn store(&self) {
-        if let Ok(mut storage) = StorageService::new(Area::Local) {
-            storage.store(Self::KEY, Json(self))
-        }
+        let _ = LocalStorage::set(Self::KEY, self);
     }
 }
 impl Default for Settings {

examples/boids/src/simulation.rs

@@ -1,9 +1,8 @@
 use crate::boid::Boid;
 use crate::math::Vector2D;
 use crate::settings::Settings;
-use std::time::Duration;
+use gloo::timers::callback::Interval;
 use yew::{html, Component, ComponentLink, Html, Properties, ShouldRender};
-use yew_services::interval::{IntervalService, IntervalTask};
 
 pub const SIZE: Vector2D = Vector2D::new(1600.0, 1000.0);
 
@@ -26,7 +25,7 @@ pub struct Simulation {
     props: Props,
     link: ComponentLink<Self>,
     boids: Vec<Boid>,
-    interval_task: IntervalTask,
+    interval: Interval,
 }
 impl Component for Simulation {
     type Message = Msg;
@@ -38,16 +37,18 @@ impl Component for Simulation {
             .map(|_| Boid::new_random(settings))
             .collect();
 
-        let interval_task = IntervalService::spawn(
-            Duration::from_millis(settings.tick_interval_ms),
-            link.callback(|_| Msg::Tick),
-        );
+        let interval = {
+            let link = link.clone();
+            Interval::new(settings.tick_interval_ms as u32, move || {
+                link.send_message(Msg::Tick)
+            })
+        };
 
         Self {
             props,
             link,
             boids,
-            interval_task,
+            interval,
         }
     }
 
@@ -86,10 +87,12 @@ impl Component for Simulation {
             if settings.tick_interval_ms != self.props.settings.tick_interval_ms {
                 // as soon as the previous task is dropped it is cancelled.
                 // We don't need to worry about manually stopping it.
-                self.interval_task = IntervalService::spawn(
-                    Duration::from_millis(settings.tick_interval_ms),
-                    self.link.callback(|_| Msg::Tick),
-                );
+                self.interval = {
+                    let link = self.link.clone();
+                    Interval::new(settings.tick_interval_ms as u32, move || {
+                        link.send_message(Msg::Tick)
+                    })
+                }
             }
 
             self.props = props;

examples/counter/Cargo.toml

@@ -8,4 +8,5 @@ license = "MIT OR Apache-2.0"
 [dependencies]
 js-sys = "0.3"
 yew = { path = "../../packages/yew" }
-yew-services = { path = "../../packages/yew-services" }
+weblog = "0.3"
+wasm-bindgen = "0.2"

examples/counter/src/main.rs

@@ -1,6 +1,6 @@
 use js_sys::Date;
+use weblog::console_log;
 use yew::{html, Component, ComponentLink, Html, ShouldRender};
-use yew_services::ConsoleService;
 
 // Define the possible messages which can be sent to the component
 pub enum Msg {
@@ -25,12 +25,12 @@ impl Component for Model {
         match msg {
             Msg::Increment => {
                 self.value += 1;
-                ConsoleService::log("plus one"); // Will output a string to the browser console
+                console_log!("plus one"); // Will output a string to the browser console
                 true // Return true to cause the displayed change to update
             }
             Msg::Decrement => {
                 self.value -= 1;
-                ConsoleService::log("minus one");
+                console_log!("minus one");
                 true
             }
         }

examples/crm/Cargo.toml

@@ -9,4 +9,5 @@ license = "MIT OR Apache-2.0"
 serde = "1"
 serde_derive = "1"
 yew = { path = "../../packages/yew" }
-yew-services = { path = "../../packages/yew-services" }
+gloo = { git = "https://github.com/rustwasm/gloo/" }
+

examples/crm/README.md

@@ -14,7 +14,7 @@ For a much more sophisticated approach check out [`yew-router`](https://yew.rs/c
 One major flaw with the implementation used by this example is that the scenes aren't tied to the URL.
 Reloading the page always brings the user back to the initial scene.
 
-The example also uses the [`StorageService`](https://docs.rs/yew-services/latest/yew_services/struct.StorageService.html)
+The example also uses the [`gloo::storage`](https://gloo-rs.web.app/docs/storage)
 to persist the clients across sessions.
 
 ## Improvements

examples/crm/src/main.rs

@@ -1,9 +1,7 @@
 use add_client::AddClientForm;
+use gloo::storage::{LocalStorage, Storage};
 use serde::{Deserialize, Serialize};
-use yew::format::Json;
 use yew::{html, Component, ComponentLink, Html, ShouldRender};
-use yew_services::storage::Area;
-use yew_services::{DialogService, StorageService};
 
 mod add_client;
 
@@ -46,7 +44,6 @@ pub enum Msg {
 
 pub struct Model {
     link: ComponentLink<Self>,
-    storage: StorageService,
     clients: Vec<Client>,
     scene: Scene,
 }
@@ -56,12 +53,9 @@ impl Component for Model {
     type Properties = ();
 
     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let storage = StorageService::new(Area::Local).expect("storage was disabled by the user");
-        let Json(clients) = storage.restore(KEY);
-        let clients = clients.ok().unwrap_or_else(Vec::new);
+        let clients = LocalStorage::get(KEY).unwrap_or_else(|_| Vec::new());
         Self {
             link,
-            storage,
             clients,
             scene: Scene::ClientsList,
         }
@@ -75,14 +69,14 @@ impl Component for Model {
             }
             Msg::AddClient(client) => {
                 self.clients.push(client);
-                self.storage.store(KEY, Json(&self.clients));
+                LocalStorage::set(KEY, &self.clients).expect("failed to set");
                 // we only need to re-render if we're currently displaying the clients
                 matches!(self.scene, Scene::ClientsList)
             }
             Msg::ClearClients => {
-                if DialogService::confirm("Do you really want to clear the data?") {
+                if gloo::dialogs::confirm("Do you really want to clear the data?") {
                     self.clients.clear();
-                    self.storage.remove(KEY);
+                    LocalStorage::delete(KEY);
                     true
                 } else {
                     false