Try out css styling

matthunz · Jan 8, 2024 · 0dca3e0 · 0dca3e0
1 parent bc13c3a
commit 0dca3e0
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 10 deletions.
diff --git 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<T, A, C, M>(tag: T, attrs: A, content: C) -> Element<T, A, C, M>
@@ -133,3 +133,77 @@ where
     ) {
     }
 }
+
+pub fn style<M, V>(view: V) -> Style<V, M>
+where
+    V: View<StyleTree, M>,
+{
+    Style {
+        view,
+        _marker: PhantomData,
+    }
+}
+
+pub struct StyleTree {
+    s: String,
+}
+
+pub struct Style<V, M> {
+    view: V,
+    _marker: PhantomData<M>,
+}
+
+impl<M, V> View<HtmlAttributes, M> for Style<V, M>
+where
+    V: View<StyleTree, M>,
+{
+    type Element = StyleTree;
+
+    fn build(&mut self, cx: &mut Context<M>, 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<M>,
+        tree: &mut HtmlAttributes,
+        element: &mut Self::Element,
+    ) {
+        todo!()
+    }
+}
+
+pub fn css<K, V>(key: K, value: V) -> Css<K, V>
+where
+    K: fmt::Display + Clone,
+    V: fmt::Display + Clone,
+{
+    Css { key, value }
+}
+
+pub struct Css<K, V> {
+    key: K,
+    value: V,
+}
+
+impl<M, K, V> View<StyleTree, M> for Css<K, V>
+where
+    K: fmt::Display + Clone,
+    V: fmt::Display + Clone,
+{
+    type Element = (K, V);
+
+    fn build(&mut self, cx: &mut Context<M>, 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<M>, tree: &mut StyleTree, element: &mut Self::Element) {
+        todo!()
+    }
+}
diff --git a/web_examples/counter/dist/index.html b/web_examples/counter/dist/index.html
@@ -1,6 +1,6 @@
 <html><head>
-<link rel="preload" href="/web-example-d4ee296f4030d402_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/web-example-d4ee296f4030d402.js"></head><body><script type="module">import init from '/web-example-d4ee296f4030d402.js';init('/web-example-d4ee296f4030d402_bg.wasm');</script><script>(function () {
+<link rel="preload" href="/viewbuilder-counter-example-1826d9f52d63647e_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/viewbuilder-counter-example-1826d9f52d63647e.js"></head><body><script type="module">import init from '/viewbuilder-counter-example-1826d9f52d63647e.js';init('/viewbuilder-counter-example-1826d9f52d63647e_bg.wasm');</script><script>(function () {
     var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     var url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;

diff --git a/...nter/dist/web-example-d4ee296f4030d402.js → ...ilder-counter-example-1826d9f52d63647e.js b/...nter/dist/web-example-d4ee296f4030d402.js → ...ilder-counter-example-1826d9f52d63647e.js
@@ -201,7 +201,7 @@ function makeMutClosure(arg0, arg1, dtor, f) {
     return real;
 }
 function __wbg_adapter_14(arg0, arg1) {
-    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf0b81a8520a648fb(arg0, arg1);
+    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h67b5727e7f591b9b(arg0, arg1);
 }
 
 function isLikeNone(x) {
@@ -340,7 +340,7 @@ function __wbg_get_imports() {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm0(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper99 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper70 = function(arg0, arg1, arg2) {
         const ret = makeMutClosure(arg0, arg1, 20, __wbg_adapter_14);
         return addHeapObject(ret);
     };
@@ -382,7 +382,7 @@ async function __wbg_init(input) {
     if (wasm !== undefined) return wasm;
 
     if (typeof input === 'undefined') {
-        input = new URL('web-example-d4ee296f4030d402_bg.wasm', import.meta.url);
+        input = new URL('viewbuilder-counter-example-1826d9f52d63647e_bg.wasm', import.meta.url);
     }
     const imports = __wbg_get_imports();
 

diff --git a/web_examples/counter/dist/viewbuilder-counter-example-1826d9f52d63647e_bg.wasm b/web_examples/counter/dist/viewbuilder-counter-example-1826d9f52d63647e_bg.wasm
diff --git a/web_examples/counter/dist/web-example-d4ee296f4030d402_bg.wasm b/web_examples/counter/dist/web-example-d4ee296f4030d402_bg.wasm
diff --git a/web_examples/todomvc/src/main.rs b/web_examples/todomvc/src/main.rs
@@ -1,5 +1,4 @@
 use std::{cell::RefCell, rc::Rc, sync::Arc};
-
 use viewbuilder::{web::html, Application, ControlFlow, Model, View, Web};
 
 enum Message {