From 0dca3e03351e5dda40a0139a47b0eb81d9812beb Mon Sep 17 00:00:00 2001 From: Matt Hunzinger Date: Mon, 8 Jan 2024 02:45:24 -0500 Subject: [PATCH] Try out css styling --- src/web/html.rs | 82 +++++++++++++++++- web_examples/counter/dist/index.html | 4 +- ...ilder-counter-example-1826d9f52d63647e.js} | 6 +- ...r-counter-example-1826d9f52d63647e_bg.wasm | Bin 0 -> 140050 bytes .../dist/web-example-d4ee296f4030d402_bg.wasm | Bin 138096 -> 0 bytes web_examples/todomvc/src/main.rs | 1 - 6 files changed, 83 insertions(+), 10 deletions(-) rename web_examples/counter/dist/{web-example-d4ee296f4030d402.js => viewbuilder-counter-example-1826d9f52d63647e.js} (98%) create mode 100644 web_examples/counter/dist/viewbuilder-counter-example-1826d9f52d63647e_bg.wasm delete mode 100644 web_examples/counter/dist/web-example-d4ee296f4030d402_bg.wasm diff --git a/src/web/html.rs b/src/web/html.rs index c4a8e65..1ade052 100644 --- a/src/web/html.rs +++ b/src/web/html.rs @@ -1,5 +1,5 @@ use crate::{Context, HtmlAttributes, View, Web}; -use std::{marker::PhantomData, mem}; +use std::{fmt, marker::PhantomData, mem}; use web_sys::wasm_bindgen::{closure::Closure, JsCast}; macro_rules! tags { @@ -22,9 +22,9 @@ tags!( dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, - progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, - style, sub, summary, sup, svg, table, tbody, td, template, textarea, tfoot, th, thead, time, - title, tr, track, u, ul, var, video, wbr + progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, sub, + summary, sup, svg, table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, + track, u, ul, var, video, wbr ); pub fn element(tag: T, attrs: A, content: C) -> Element @@ -133,3 +133,77 @@ where ) { } } + +pub fn style(view: V) -> Style +where + V: View, +{ + Style { + view, + _marker: PhantomData, + } +} + +pub struct StyleTree { + s: String, +} + +pub struct Style { + view: V, + _marker: PhantomData, +} + +impl View for Style +where + V: View, +{ + type Element = StyleTree; + + fn build(&mut self, cx: &mut Context, tree: &mut HtmlAttributes) -> Self::Element { + let mut element = StyleTree { s: String::new() }; + self.view.build(cx, &mut element); + + tree.element.set_attribute("style", &element.s).unwrap(); + + element + } + + fn rebuild( + &mut self, + cx: &mut Context, + tree: &mut HtmlAttributes, + element: &mut Self::Element, + ) { + todo!() + } +} + +pub fn css(key: K, value: V) -> Css +where + K: fmt::Display + Clone, + V: fmt::Display + Clone, +{ + Css { key, value } +} + +pub struct Css { + key: K, + value: V, +} + +impl View for Css +where + K: fmt::Display + Clone, + V: fmt::Display + Clone, +{ + type Element = (K, V); + + fn build(&mut self, cx: &mut Context, tree: &mut StyleTree) -> Self::Element { + tree.s.push_str(&format!("{}: {};", &self.key, &self.value)); + (self.key.clone(), self.value.clone()) + } + + fn rebuild(&mut self, cx: &mut Context, tree: &mut StyleTree, element: &mut Self::Element) { + todo!() + } +} diff --git a/web_examples/counter/dist/index.html b/web_examples/counter/dist/index.html index cb56f89..ae12f1f 100644 --- a/web_examples/counter/dist/index.html +++ b/web_examples/counter/dist/index.html @@ -1,6 +1,6 @@ - -