ivanceras · ivanceras · Apr 12, 2024 · Apr 4, 2024 · Apr 6, 2024 · Apr 6, 2024
diff --git a/Cargo.toml b/Cargo.toml
@@ -51,6 +51,7 @@ wasm-bindgen-futures = "0.4.31"
 regex = "1"
 sauron-html-parser = { path = "crates/html-parser" }
 sauron = { path = ".", features = ["test-fixtures", "html-parser", "log-patches"] }
+doc-comment = "0.3.3"
 
 [dev-dependencies.web-sys]
 version = "0.3"

diff --git a/README.md b/README.md
@@ -123,6 +123,7 @@ pub fn start() {
 ```
 
 `index.html`
+
 ```html
 <!doctype html>
 <html>
@@ -166,7 +167,7 @@ Build using
 wasm-pack build --target web --release
 ```
 Serve using
-```
+```sh
 basic-http-server -a 0.0.0.0:4000
 ```
 Then navigate to http://localhost:4000

diff --git a/crates/core/src/dom/dom_patch.rs b/crates/core/src/dom/dom_patch.rs
@@ -141,7 +141,6 @@ where
             let patch_tag = patch.tag();
             if let Some(target_node) = nodes_lookup.get(patch_path) {
                 let target_tag = target_node.tag();
-
                 if let (Some(patch_tag), Some(target_tag)) = (patch_tag, target_tag) {
                     if **patch_tag != target_tag{
                         panic!(

diff --git a/crates/core/src/dom/program.rs b/crates/core/src/dom/program.rs
@@ -435,7 +435,6 @@ where
 
     /// execute DOM changes in order to reflect the APP's view into the browser representation
     pub fn update_dom(&mut self) -> Result<(), JsValue> {
-        log::info!("updating the dom...");
         let t1 = now();
         // a new view is created due to the app update
         let view = self.app_context.view();

diff --git a/crates/core/src/vdom/diff.rs b/crates/core/src/vdom/diff.rs
@@ -325,6 +325,7 @@ fn diff_non_keyed_nodes<'a, MSG>(
 /// Note: The performance bottlenecks
 ///     - allocating new vec
 ///     - merging attributes of the same name
+#[allow(clippy::type_complexity)]
 fn create_attribute_patches<'a, MSG>(
     old_element: &'a Element<MSG>,
     new_element: &'a Element<MSG>,

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -22,18 +22,21 @@ cargo install wasm-pack
 ```
 
 We also use `basic-http-server` to easily serve static files locally.
+
 ```sh
 cargo install basic-http-server
 ```
 
 ## Creating a new project
 We will create a new project called `hello`.
-```
+
+```sh
 cargo new --lib hello
 ```
 This will create a new folder `hello` with set of files necessary to be compiled as a rust project.
 Try to compile this project to test if we installed rust correctly.
-```
+
+```sh
 cd hello
 cargo build
 ```
@@ -91,7 +94,9 @@ use sauron::{node, wasm_bindgen, Application, Cmd, Node, Program};
 
 struct App;
 
-impl Application<()> for App {
+impl Application for App {
+    type MSG = ();
+
     fn view(&self) -> Node<()> {
         node! {
             <p>
@@ -100,7 +105,7 @@ impl Application<()> for App {
         }
     }
 
-    fn update(&mut self, _msg: ()) -> Cmd<Self, ()> {
+    fn update(&mut self, _msg: ()) -> Cmd<()> {
         Cmd::none()
     }
 }
@@ -114,15 +119,18 @@ Take notice of the `view` method. Here we are using `node!` macro which takes ht
 We implement the `Application` trait for our `App` so that we can implement the required methods necessary to tell sauron how out app behaves.
 
 To compile, we issue the command:
-```shell
+
+```sh
 wasm-pack build --release --target=web
 ```
+
 As mentioned earlier,`wasm-pack` helps us simplify the process of compiling rust for targetting web applications.
 A folder `./pkg` is then created inside our project. This will contain the resulting compiled files.
 We only pay attention to the 2 files, named derived from the given package name `<package_name>.js` and `<package_name>_bg.wasm`.
 In our case, it will be `hello.js` and `hello_bg.wasm`.
 
 We need to reference this file in our page. Let's create `index.html` in our project.
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -138,20 +146,24 @@ We need to reference this file in our page. Let's create `index.html` in our pro
   </body>
 </html>
 ```
+
 Take note, that we are using `<script type=module>`.
 Another thing to take note is that we referencing `./pkg/hello.js` from the `./pkg` folder.
 If you changed the package name of the crate, you will also need to change the filename here.
 Behind the scene, `./pkg/hello.js` will take care of loading `./pkg/hello_bg.wasm` in the background.
 
 Recompile our webapp, issue this command everytime you have changes to the rust code.
-```shell
+
+```sh
 wasm-pack build --release --target=web
 ```
 
 Finally, we serve the files using `basic-http-server`
-```shell
+
+```sh
 basic-http-server
 ```
+
 By default, it serves the page in port `4000`
 Navigate to http://127.0.0.1:4000 to see the 'hello' message.
 There you have it, you've built the bare minimum web application using sauron.

diff --git a/docs/intermediate-example.md b/docs/intermediate-example.md
@@ -59,7 +59,10 @@ the type we send into the `update` method.
 Append this code to `src/lib.rs`.
 
 ```rust
-impl Application<Msg> for App {
+use sauron::*;
+
+impl Application for App {
+    type MSG = Msg; 
     fn view(&self) -> Node<Msg> {
         node! {
             <main>
@@ -80,7 +83,7 @@ impl Application<Msg> for App {
         }
     }
 
-    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
+    fn update(&mut self, msg: Msg) -> Cmd<Msg> {
         match msg {
             Msg::Increment => self.count += 1,
             Msg::Decrement => self.count -= 1,

diff --git a/examples/data-viewer/Cargo.toml b/examples/data-viewer/Cargo.toml
@@ -14,7 +14,7 @@ console_error_panic_hook = { version = "0.1", optional = true }
 js-sys = "0.3"
 log = "0.4"
 console_log = "0.2"
-restq = "0.6"
+restq = "0.9"
 thiserror = "1.0"
 
 [dependencies.wasm-bindgen]

diff --git a/examples/data-viewer/index.html b/examples/data-viewer/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>

diff --git a/examples/data-viewer/run_webapp.sh b/examples/data-viewer/run_webapp.sh
@@ -1,3 +1,4 @@
-if wasm-pack build --target web --release -- --features "console_error_panic_hook"; then
-    basic-http-server -a 0.0.0.0:4000
-fi
+#!/bin/bash
+set -v
+wasm-pack build --target web --release -- --features "console_error_panic_hook" &&\
+basic-http-server -a 0.0.0.0:4000
diff --git a/...s/data-viewer/src/views/resize_wrapper.rs → examples/data-viewer/src/app.rs b/...s/data-viewer/src/views/resize_wrapper.rs → examples/data-viewer/src/app.rs
@@ -14,7 +14,7 @@ pub enum Msg {
 }
 
 /// provides a resizable wrapper for the DataView
-pub struct ResizeWrapper {
+pub struct App {
     data_view: DataView,
     active_resize: Option<Grip>,
     width: i32,
@@ -30,9 +30,9 @@ pub enum Grip {
     BottomRight,
 }
 
-impl ResizeWrapper {
+impl App {
     pub fn new(data_view: DataView, width: i32, height: i32) -> Self {
-        ResizeWrapper {
+        App {
             data_view,
             active_resize: None,
             width,
@@ -43,7 +43,7 @@ impl ResizeWrapper {
     }
 }
 
-impl Application for ResizeWrapper {
+impl Application for App {
     type MSG = Msg;
 
     /// Setup the resize wrapper to listen to the mouseup

diff --git a/examples/data-viewer/src/lib.rs b/examples/data-viewer/src/lib.rs
@@ -1,21 +1,20 @@
 #![deny(warnings)]
+pub use app::App;
 pub use error::Error;
 use log::Level;
 pub use restq::{ast::ddl::DataTypeDef, ColumnDef, DataType, DataValue};
 use sauron::*;
-use views::{resize_wrapper, DataView, ResizeWrapper};
+use views::DataView;
 
 #[macro_use]
 extern crate log;
 
+pub(crate) mod app;
 pub(crate) mod assets;
 mod error;
 mod views;
 pub(crate) mod widgets;
 
-pub type App = ResizeWrapper;
-pub type AppMsg = resize_wrapper::Msg;
-
 #[wasm_bindgen]
 pub fn initialize(initial_state: &str) {
     #[cfg(feature = "console_error_panic_hook")]
@@ -26,14 +25,11 @@ pub fn initialize(initial_state: &str) {
     trace!("initial state: {}", initial_state);
     trace!("mounting..");
 
-    Program::mount_to_body(create_resize_wrapper());
-}
-
-fn create_resize_wrapper() -> ResizeWrapper {
     let data_view = create_data_view();
     let width = data_view.allocated_width;
     let height = data_view.allocated_height;
-    ResizeWrapper::new(data_view, width, height)
+    let app = App::new(data_view, width, height);
+    Program::mount_to_body(app);
 }
 
 fn create_data_view() -> DataView {

diff --git a/examples/data-viewer/src/views.rs b/examples/data-viewer/src/views.rs
@@ -2,12 +2,10 @@ pub use column_view::ColumnView;
 pub use data_view::DataView;
 pub use field_view::FieldView;
 pub use page_view::PageView;
-pub use resize_wrapper::ResizeWrapper;
 pub use row_view::RowView;
 
 mod column_view;
-mod data_view;
+pub(crate) mod data_view;
 mod field_view;
 mod page_view;
-pub(crate) mod resize_wrapper;
 mod row_view;
diff --git a/examples/data-viewer/src/views/column_view.rs b/examples/data-viewer/src/views/column_view.rs
@@ -1,7 +1,7 @@
 use crate::{assets, widgets::search_widget, ColumnDef};
 use sauron::{
     html::{attributes::*, events::*, units::*, *},
-    Component, Effects, Node,
+    style, Component, Effects, Node,
 };
 
 #[derive(Debug, PartialEq)]
@@ -87,17 +87,20 @@ impl ColumnView {
             [
                 class("column_view__controls flex-column"),
                 classes_flag([("column_view__controls--frozen", self.is_frozen)]),
-                styles([("height", px(self.height)), ("width", px(controls_width))]),
+                style! {
+                    height: px(self.height),
+                    width: px(controls_width),
+                },
             ],
             [
                 div(
                     [
                         class("column_controls flex-row"),
-                        styles([
-                            ("width", px(self_width)),
-                            ("padding-left", px(Self::side_padding_width())),
-                            ("padding-right", px(Self::side_padding_width())),
-                        ]),
+                        style! {
+                            width: px(self_width),
+                            padding_left: px(Self::side_padding_width()),
+                            padding_right: px(Self::side_padding_width()),
+                        },
                     ],
                     [
                         div(