Merge pull request #213 from David-OConnor/style_enums

Style enums

Author: David-OConnor

.gitignore

@@ -1,4 +1,3 @@
-
 # --- Files ---
 **/*.ts
 **.wasm

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.4.1
+- Added more SVG `At` variants
+- Added the `St` enum, for style keys; similar to `At`
+- Improved ergonomics of `add_child`, `add_attr`, `add_class`, 
+`add_style`, `replace_text`, and `add_text`, `Node` methods
+
 ## v0.4.0
 - `ElContainer`, imported in prelude, renamed to `View`. (Breaking)
 - Internal refactor of `El`: Now wrapped in `Node`, along with

Cargo.lock

@@ -3,6 +3,19 @@
 # https://github.com/rust-lang/rustup.rs/blob/d35f94183601a81489bce025c2abc35cd395c909/src/toolchain.rs#L296
 RUST_RECURSION_COUNT = "0"
 
+# ---- SCRIPTS ----
+
+[tasks.populate_all]
+description = "Populate styles, tags, attributes, etc."
+workspace = false
+dependencies = ["populate_styles"]
+
+[tasks.populate_styles]
+description = "Populate styles"
+workspace = false
+command = "cargo"
+args = ["script", "./scripts/populate_styles.rs"]
+
 # ---- GENERAL ----
 
 [tasks.verify]

Makefile.toml

@@ -27,8 +27,8 @@ And cargo-make: `cargo install --force cargo-make`
 To start, clone [the quickstart repo](https://github.com/David-OConnor/seed-quickstart):
 `git clone https://github.com/david-oconnor/seed-quickstart.git`,
 run `cargo make build` in a terminal to build the app, and `cargo make serve` to start a dev server
-on `127.0.0.0:8000`. If you'd like the compiler automatically check and recompile when you 
-make changes, run `cargo make watch` instead of `cargo make all`.
+on `127.0.0.0:8000`. If you'd like the compiler to automatically check and recompile when you 
+make changes, run `cargo make watch` instead of `cargo make build`.
 
 
 ## A little deeper
@@ -150,27 +150,27 @@ fn view(model: &Model) -> impl View<Msg> {
 
     // Attrs, Style, Events, and children may be defined separately.
     let outer_style = style!{
-            "display" => "flex";
-            "flex-direction" => "column";
-            "text-align" => "center"
+            St::Display => "flex";
+            St::FlexDirection => "column";
+            St::TextAlign => "center"
     };
 
     div![ outer_style,
         h1![ "The Grand Total" ],
         div![
             style!{
                 // Example of conditional logic in a style.
-                "color" => if model.count > 4 {"purple"} else {"gray"};
-                "border" => "2px solid #004422"; 
-                "padding" => unit!(20, px);
+                St::Color => if model.count > 4 {"purple"} else {"gray"};
+                St::Border => "2px solid #004422"; 
+                St::Padding => unit!(20, px);
             },
             // We can use normal Rust code and comments in the view.
             h3![ format!("{} {}{} so far", model.count, model.what_we_count, plural) ],
             button![ simple_ev(Ev::Click, Msg::Increment), "+" ],
             button![ simple_ev(Ev::Click, Msg::Decrement), "-" ],
 
             // Optionally-displaying an element
-            if model.count >= 10 { h2![ style!{"padding" => px(50)}, "Nice!" ] } else { empty![] }
+            if model.count >= 10 { h2![ style!{St::Padding => px(50)}, "Nice!" ] } else { empty![] }
         ],
         success_level(model.count),  // Incorporating a separate component
 

README.md

@@ -11,6 +11,7 @@ for updating the homepage are available [here](https://github.com/David-OConnor/
 to reflect API changes, and the new version
 1. Ensure the version listed in `Cargo.toml` is updated
 1. Update Rust tools: `rustup update`
+1. Run `cargo make populate_all` to synchronize `St`, `At` and other enums with official values
 1. Run `cargo make verify` to ensure tests pass, and `clippy` / `fmt` are run
 1. Commit and push the repo
 1. Check that CI pipeline passed

RELEASE_CHECKLIST.md

@@ -67,23 +67,23 @@ fn write_emoticon_after_delay(emoticon: String) -> impl Future<Item = Msg, Error
 fn view(model: &Model) -> impl View<Msg> {
     div![
         style![
-            "display" => "flex",
-            "justify-content" => "center",
-            "align-items" => "center",
-            "font-size" => vmin(5),
-            "font-family" => "sans-serif",
-            "height" => vmin(50),
+            St::Display => "flex",
+            St::JustifyContent => "center",
+            St::AlignItems => "center",
+            St::FontSize => vmin(5),
+            St::FontFamily => "sans-serif",
+            St::Height => vmin(50),
         ],
         if model.greet_clicked {
             h1![model.title]
         } else {
             div![
                 style![
-                    "background-color" => "lightgreen",
-                    "padding" => vmin(3),
-                    "border-radius" => vmin(3),
-                    "cursor" => "pointer",
-                    "box-shadow" => [vmin(0), vmin(0.5), vmin(0.5), "green".into()].join(" "),
+                    St::BackgroundColor => "lightgreen",
+                    St::Padding => vmin(3),
+                    St::BorderRadius => vmin(3),
+                    St::Cursor => "pointer",
+                    St::BoxShadow => [vmin(0), vmin(0.5), vmin(0.5), "green".into()].join(" "),
                 ],
                 simple_ev(Ev::Click, Msg::Greet),
                 "Greet!"

examples/orders/src/lib.rs

@@ -0,0 +1,80 @@
+//! ```cargo
+//! [dependencies]
+//! reqwest = "^0.9.20"
+//! serde = { version = "^1.0.92", features = ["derive"] }
+//! ```
+
+//! Populate CSS styles
+
+extern crate reqwest;
+extern crate serde;
+
+use serde::Deserialize;
+use std::fs;
+
+const STYLE_NAMES_FILE: &str = "./src/dom_entity_names/styles/style_names.rs";
+const STYLES_ENDPOINT: &str = "https://martinkavik.github.io/html-css-db/css_properties.json";
+
+#[derive(Debug, Deserialize)]
+struct Style {
+    name: StyleName
+}
+
+#[derive(Debug, Deserialize)]
+struct StyleName {
+    original: String,
+    pascal_case: String,
+}
+
+fn main() {
+    let styles = fetch_styles();
+    let content_for_style_names_file = generate_content_for_style_names_file(styles);
+    fs::write(STYLE_NAMES_FILE, content_for_style_names_file)
+        .expect("Writing into style names file failed.")
+}
+
+/// Json example:
+///
+/// ```
+/// [
+///   {
+///     "name": {
+///       "original": "justify-content",
+///       "pascal_case": "JustifyContent"
+///     }
+///   }
+/// ]
+/// ```
+fn fetch_styles() -> Vec<Style> {
+    reqwest::get(STYLES_ENDPOINT)
+        .expect("Request to styles endpoints failed.")
+        .json()
+        .expect("Problem parsing CSS properties as JSON.")
+}
+
+/// Example of generated content:
+///
+/// ```rust,no_run
+/// //! This file is generated automatically by `/scripts/populate_styles.rs`.
+/// //! It's not meant to be edited directly.
+///
+/// make_styles! {
+///   Display => "display",
+///   JustifyContent => "justify-content",
+/// }
+/// ```
+fn generate_content_for_style_names_file(styles: Vec<Style>) -> String {
+    let style_pairs: String = styles
+        .into_iter()
+        .filter(|style| !style.name.pascal_case.is_empty())
+        .map(|style| format!("    {} => \"{}\",\n", style.name.pascal_case, style.name.original))
+        .collect();
+
+    format!(r#"//! This file is generated automatically by `/scripts/populate_styles.rs`.
+//! It's not meant to be edited directly.
+
+make_styles! {{
+    {}
+}}
+"#, style_pairs.trim().trim_end_matches(','))
+}

scripts/populate_styles.rs

@@ -0,0 +1 @@
+pub mod styles;

src/dom_entity_names/mod.rs

@@ -0,0 +1,57 @@
+/// Similar to tag population.
+macro_rules! make_styles {
+    // Create shortcut macros for any style; populate these functions in the submodule.
+    { $($st_pascal_case:ident => $st:expr),+ } => {
+
+        /// The St enum restricts element-creation to only valid styles.
+        #[derive(Clone, Debug, PartialEq, Eq, Hash)]
+        pub enum St {
+            $(
+                $st_pascal_case,
+            )+
+            Custom(String)
+        }
+
+        impl St {
+            pub fn as_str(&self) -> &str {
+                match self {
+                    $ (
+                        St::$st_pascal_case => $st,
+                    ) +
+                    St::Custom(val) => &val
+                }
+            }
+        }
+
+        impl From<&str> for St {
+            fn from(st: &str) -> Self {
+                match st {
+                    $ (
+                          $st => St::$st_pascal_case,
+                    ) +
+                    _ => {
+                        crate::error(&format!("Can't find this style: {}", st));
+                        St::Custom(st.to_owned())
+                    }
+                }
+            }
+        }
+        impl From<String> for St {
+            fn from(st: String) -> Self {
+                match st.as_ref() {
+                    $ (
+                          $st => St::$st_pascal_case,
+                    ) +
+                    _ => {
+                        crate::error(&format!("Can't find this style: {}", st));
+                        St::Custom(st)
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+mod style_names;
+pub use style_names::St;