Added testing and docs improvement

geofmureithi · Oct 1, 2022 · 75a67ca · 75a67ca
1 parent b0719a8
commit 75a67ca
Show file tree

Hide file tree

Showing 16 changed files with 303 additions and 263 deletions.
diff --git a/.github/workflows/browser.yml b/.github/workflows/browser.yml
@@ -1,3 +1,5 @@
+name: Integration Tests
+
 on: [push, pull_request]
 
 jobs:
@@ -10,4 +12,6 @@ jobs:
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
       - run: wasm-pack test --headless --chrome
+        working-directory: crates/hirola-core
       - run: wasm-pack test --headless --firefox
+        working-directory: crates/hirola-core
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 [![Latest Version](https://img.shields.io/crates/v/hirola.svg)](https://crates.io/crates/hirola)
 [![Browser Tests](https://github.com/geofmureithi/hirola/actions/workflows/browser.yml/badge.svg)](https://github.com/geofmureithi/hirola/actions/workflows/browser.yml)
+[![Unit Tests](https://github.com/geofmureithi/hirola/actions/workflows/unit.yml/badge.svg)](https://github.com/geofmureithi/hirola/actions/workflows/unit.yml)
 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 
 **Hirola** is an un-opinionated webf ramework that is focused on simplicity and predictability.
@@ -35,6 +36,7 @@ Create an `index.html` in the root of counter. Add the contents below
   <head>
     <meta charset="UTF-8" />
     <title>Hirola Counter</title>
+    <body></body>
   </head>
 </html>
 ```
@@ -46,11 +48,12 @@ use hirola::prelude::*;
 
 fn counter(app: &HirolaApp) -> Dom {
     let count = Signal::new(0);
+    let increment = count.mut_callback(|c, _| c + 1)
     html! {
-        <div>
-            <button on:click=count.mut_callback(|c, _| c + 1)>"Increment"</button>
+        <>
+            <button on:click=increment>"Increment"</button>
             <span>{count.get()}</span>
-        </div>
+        </>
 
     }
 }
@@ -84,18 +87,18 @@ Here are some extensions for hirola:
 
 ### Milestones
 
-| Status | Goal                                                                      | Labels       |
-| :----: | :------------------------------------------------------------------------ | ------------ |
-|   ✔    | Write code that is declarative and easy to follow                         | `ready`      |
-|   ✔    | Allow extensibility via mixins                                            | `ready`      |
-|   🚀   | [Standardize Components](https://github.com/geofmureithi/hirola/issues/1) | `inprogress` |
-|   🚀   | SSR First Approach                                                        | `inprogress` |
-|   🚀   | Hydration                                                                 | `todo`       |
-|   🚀   | Serverside integrations                                                   | `todo`       |
+| Status | Goal                                                                      | Labels  |
+| :----: | :------------------------------------------------------------------------ | ------- |
+|   ✔    | Write code that is declarative and easy to follow                         | `ready` |
+|   ✔    | Allow extensibility via mixins                                            | `ready` |
+|   🚀   | [Standardize Components](https://github.com/geofmureithi/hirola/issues/1) | `ready` |
+|   🚀   | SSR                                                                       | `ready` |
+|   🚀   | Hydration                                                                 | `todo`  |
+|   🚀   | Serverside integrations                                                   | `todo`  |
 
 ### Inspiration
 
-- Sycamore/Maple
+- Sycamore
 - Alpine.js
 - React.js
 - Yew

diff --git a/crates/hirola-core/Cargo.toml b/crates/hirola-core/Cargo.toml
@@ -54,6 +54,7 @@ version = "0.3"
 [dev-dependencies]
 criterion = {version = "0.3", features = ["html_reports"]}
 wasm-bindgen-test = "0.3"
+hirola = { path ="../../" }
 
 [features]
 default = ["dom", "wasm-bindgen", "web-sys"]

diff --git a/crates/hirola-core/src/flow.rs b/crates/hirola-core/src/flow.rs
@@ -34,21 +34,22 @@ where
 /// For non keyed iteration, see [`Indexed`].
 ///
 /// # Example
-/// ```no_run
-/// use hirola_core::prelude::*;
+/// ```ignore
+/// use hirola::prelude::*;
 ///
 /// let count = Signal::new(vec![1, 2]);
 ///
-/// let node = template! {
-///     Keyed(KeyedProps {
-///         iterable: count.handle(),
-///         template: |item| template! {
-///             li { (item) }
-///         },
-///         key: |item| *item,
-///     })
+/// let _node: TemplateResult<DomNode> = html! {
+///     <Keyed
+///         props={KeyedProps {
+///             iterable: count.handle(),
+///             template: |item| html! {
+///                <li>{ item }</li>
+///             },
+///             key: |item| *item,
+///         }}
+///     />
 /// };
-/// # let _ : TemplateResult<DomNode> = node;
 /// ```
 //#[component]
 
@@ -259,20 +260,22 @@ where
 /// For keyed iteration, see [`Keyed`].
 ///
 /// # Example
-/// ```no_run
-/// use hirola_core::prelude::*;
+/// ```ignore
+/// use hirola::prelude::*;
 ///
 /// let count = Signal::new(vec![1, 2]);
 ///
-/// let node = template! {
-///     Indexed(IndexedProps {
-///         iterable: count.handle(),
-///         template: |item| template! {
-///             li { (item) }
-///         },
-///     })
+/// let node = html! {
+///      <Indexed
+///         props={IndexedProps {
+///             iterable: count.handle(),
+///             template: move |item| html! {
+///                <li>{ item }</li>
+///             }
+///         }}
+///     />
 /// };
-/// # let _ : TemplateResult<DomNode> = node;
+/// # let _ : Dom = node;
 /// ```
 // #[component]
 

diff --git a/crates/hirola-core/src/generic_node.rs b/crates/hirola-core/src/generic_node.rs
@@ -29,7 +29,7 @@ pub type EventListener = dyn Fn(Event);
 /// that they are simply functions that generate [`GenericNode`]s inside a new reactive context. This means that there
 /// is no overhead whatsoever when using components.
 ///
-/// Maple ships with 2 rendering backends out of the box:
+/// Hirola ships with 2 rendering backends out of the box:
 /// * [`DomNode`] - Rendering in the browser (to real DOM nodes).
 /// * [`SsrNode`] - Render to a static string (often on the server side for Server Side Rendering, aka. SSR).
 ///

diff --git a/crates/hirola-core/src/mixins.rs b/crates/hirola-core/src/mixins.rs
@@ -1,3 +1,46 @@
+//! ## Mixins
+//! Hirola aims to be extensible and follow DRY principles.
+//! Here is an example of a mixin
+//! ```rust,no_run
+//! use hirola::prelude::*;
+//! use web_sys::Element;
+//! // Mixin that controls tailwind opacity based on a bool signal
+//! fn opacity<'a>(signal: &'a Signal<bool>) -> Box<dyn Fn(DomNode) -> () + 'a> {
+//!    let cb = move |node: DomNode| {
+//!        let element = node.unchecked_into::<Element>();
+//!        if *signal.get() {
+//!            element.class_list().add_1("opacity-100").unwrap();
+//!            element.class_list().remove_1("opacity-0").unwrap();
+//!        } else {
+//!            element.class_list().add_1("opacity-0").unwrap();
+//!            element.class_list().remove_1("opacity-100").unwrap();
+//!        }
+//!    };
+//!    Box::new(cb)
+//! }
+//!
+//! fn mixin_demo(_app: &HirolaApp) -> Dom {
+//!    let is_shown = Signal::new(true);
+//!    let toggle = is_shown.mut_callback(|show, _e| !show);
+//!    html! {
+//!        <div
+//!            class="h-screen flex flex-col items-center justify-center transition-all ease-in-out delay-1000">
+//!            <div
+//!                class="h-64 w-64 block bg-blue-900 rounded-md"
+//!                mixin:transition=&opacity(&is_shown)/>
+//!            <button
+//!                class="bg-gray-200 mt-4 font-bold py-2 px-4 rounded"
+//!                on:click=toggle>
+//!                "Click Me"
+//!            </button>
+//!        </div>
+//!    }
+//! }
+//! fn main() {
+//!    let app = HirolaApp::new();
+//!    app.mount("body", mixin_demo);
+//! }
+//! ```
 use std::{
     fmt::{Debug, Display},
     marker::PhantomData,

diff --git a/crates/hirola-core/src/styled.rs b/crates/hirola-core/src/styled.rs
@@ -47,14 +47,14 @@ pub trait Styled: Sized {
     }
 }
 
-#[derive(Clone, PartialEq)]
+#[derive(Clone, PartialEq, Debug)]
 enum Rule {
     Selecter(String, Vec<(String, String)>),
     Keyframes(String, Style),
     Media(String, Style),
 }
 
-#[derive(Clone)]
+#[derive(Clone, Debug)]
 pub struct Style {
     rules: Vec<Rule>,
 }
@@ -414,7 +414,7 @@ mod tests {
             "}\n",
         );
 
-        assert_eq!(format!("{:?}", style), style_str);
+        assert_eq!(format!("{}", style), style_str);
     }
 
     #[test]
@@ -478,7 +478,7 @@ mod tests {
             "}\n",
         );
 
-        assert_eq!(format!("{:?}", style), style_str);
+        assert_eq!(format!("{}", style), style_str);
     }
 
     #[test]