xilem_html: Experiment with composition types and strong typed DOM elements

Cargo.toml

@@ -4,7 +4,7 @@ members = [
     "crates/xilem_svg",
     "crates/xilem_html",
     "crates/xilem_html/web_examples/counter",
-    "crates/xilem_html/web_examples/counter_untyped",
+    "crates/xilem_html/web_examples/counter_custom_element",
     "crates/xilem_html/web_examples/todomvc",
 ]
 

crates/xilem_html/Cargo.toml

@@ -10,31 +10,6 @@ edition.workspace = true
 homepage.workspace = true
 repository.workspace = true
 
-[features]
-default = ["typed"]
-typed = [
-    "web-sys/FocusEvent", "web-sys/HtmlAnchorElement", "web-sys/HtmlAreaElement",
-    "web-sys/HtmlAudioElement", "web-sys/HtmlBrElement", "web-sys/HtmlButtonElement",
-    "web-sys/HtmlCanvasElement", "web-sys/HtmlDataElement", "web-sys/HtmlDataListElement",
-    "web-sys/HtmlDetailsElement", "web-sys/HtmlDialogElement", "web-sys/HtmlDivElement",
-    "web-sys/HtmlDListElement", "web-sys/HtmlEmbedElement", "web-sys/HtmlFieldSetElement",
-    "web-sys/HtmlFormElement", "web-sys/HtmlHeadingElement", "web-sys/HtmlHrElement",
-    "web-sys/HtmlIFrameElement", "web-sys/HtmlImageElement", "web-sys/HtmlInputElement",
-    "web-sys/HtmlLabelElement", "web-sys/HtmlLegendElement", "web-sys/HtmlLiElement",
-    "web-sys/HtmlMapElement", "web-sys/HtmlMenuElement", "web-sys/HtmlMeterElement",
-    "web-sys/HtmlModElement", "web-sys/HtmlObjectElement", "web-sys/HtmlOListElement",
-    "web-sys/HtmlOptGroupElement", "web-sys/HtmlOptionElement", "web-sys/HtmlOutputElement",
-    "web-sys/HtmlParagraphElement", "web-sys/HtmlPictureElement", "web-sys/HtmlPreElement",
-    "web-sys/HtmlProgressElement", "web-sys/HtmlQuoteElement", "web-sys/HtmlScriptElement",
-    "web-sys/HtmlSelectElement", "web-sys/HtmlSlotElement", "web-sys/HtmlSourceElement",
-    "web-sys/HtmlSpanElement", "web-sys/HtmlTableElement", "web-sys/HtmlTableCellElement",
-    "web-sys/HtmlTableColElement", "web-sys/HtmlTableCaptionElement", "web-sys/HtmlTableRowElement",
-    "web-sys/HtmlTableSectionElement", "web-sys/HtmlTemplateElement", "web-sys/HtmlTextAreaElement",
-    "web-sys/HtmlTimeElement", "web-sys/HtmlTrackElement", "web-sys/HtmlUListElement",
-    "web-sys/HtmlVideoElement", "web-sys/InputEvent", "web-sys/KeyboardEvent", "web-sys/MouseEvent",
-    "web-sys/PointerEvent", "web-sys/WheelEvent",
-]
-
 [dependencies]
 xilem_core.workspace = true
 kurbo.workspace = true
@@ -43,6 +18,9 @@ wasm-bindgen = "0.2.87"
 log = "0.4.19"
 gloo = { version = "0.8.1", default-features = false, features = ["events", "utils"] }
 
+# TODO make all or most of the extra elements and events optional via a feature
+# I think that at least HtmlElement + SvgElement (and the parent dom interfaces) should be enabled by default
+# possibly all web_sys elements, but that needs careful benching/investigation etc.
 [dependencies.web-sys]
 version = "0.3.4"
 features = [
@@ -56,4 +34,64 @@ features = [
     "SvgElement",
     "Text",
     "Window",
+    "FocusEvent",
+    "HtmlAnchorElement",
+    "HtmlAreaElement",
+    "HtmlAudioElement",
+    "HtmlBrElement",
+    "HtmlButtonElement",
+    "HtmlCanvasElement",
+    "HtmlDataElement",
+    "HtmlDataListElement",
+    "HtmlDetailsElement",
+    "HtmlDialogElement",
+    "HtmlDivElement",
+    "HtmlDListElement",
+    "HtmlEmbedElement",
+    "HtmlFieldSetElement",
+    "HtmlFormElement",
+    "HtmlHeadingElement",
+    "HtmlHrElement",
+    "HtmlIFrameElement",
+    "HtmlImageElement",
+    "HtmlInputElement",
+    "HtmlLabelElement",
+    "HtmlLegendElement",
+    "HtmlLiElement",
+    "HtmlMapElement",
+    "HtmlMenuElement",
+    "HtmlMeterElement",
+    "HtmlModElement",
+    "HtmlObjectElement",
+    "HtmlOListElement",
+    "HtmlOptGroupElement",
+    "HtmlOptionElement",
+    "HtmlOutputElement",
+    "HtmlParagraphElement",
+    "HtmlPictureElement",
+    "HtmlPreElement",
+    "HtmlProgressElement",
+    "HtmlQuoteElement",
+    "HtmlScriptElement",
+    "HtmlSelectElement",
+    "HtmlSlotElement",
+    "HtmlSourceElement",
+    "HtmlSpanElement",
+    "HtmlTableElement",
+    "HtmlTableCellElement",
+    "HtmlTableColElement",
+    "HtmlTableCaptionElement",
+    "HtmlTableRowElement",
+    "HtmlTableSectionElement",
+    "HtmlTemplateElement",
+    "HtmlTextAreaElement",
+    "HtmlTimeElement",
+    "HtmlTrackElement",
+    "HtmlUListElement",
+    "HtmlVideoElement",
+    "InputEvent",
+    "KeyboardEvent",
+    "MouseEvent",
+    "PointerEvent",
+    "WheelEvent"
 ]

crates/xilem_html/src/attribute.rs

@@ -0,0 +1,58 @@
+use std::borrow::Cow;
+
+use wasm_bindgen::JsCast;
+use xilem_core::{Id, MessageResult};
+
+use crate::{view::DomNode, AttributeValue, ChangeFlags, Cx, View, ViewMarker};
+
+use super::interfaces::Element;
+
+pub struct Attr<E> {
+    pub(crate) element: E,
+    pub(crate) name: Cow<'static, str>,
+    pub(crate) value: Option<AttributeValue>,
+}
+
+impl<E> ViewMarker for Attr<E> {}
+
+impl<T, A, E: Element<T, A>> View<T, A> for Attr<E> {
+    type State = E::State;
+    type Element = E::Element;
+
+    fn build(&self, cx: &mut Cx) -> (Id, Self::State, Self::Element) {
+        let (id, state, element) = self.element.build(cx);
+        if let Some(value) = &self.value {
+            let _ = element
+                .as_node_ref()
+                .dyn_ref::<web_sys::Element>()
+                .expect(
+                    "The Attr view can only be used by Views,\
+                     whose element inherits from `web_sys::Element`",
+                )
+                .set_attribute(&self.name, &value.serialize());
+        }
+        (id, state, element)
+    }
+
+    fn rebuild(
+        &self,
+        cx: &mut Cx,
+        prev: &Self,
+        id: &mut Id,
+        state: &mut Self::State,
+        element: &mut Self::Element,
+    ) -> ChangeFlags {
+        cx.add_new_attribute_to_current_element(&self.name, &self.value);
+        self.element.rebuild(cx, &prev.element, id, state, element)
+    }
+
+    fn message(
+        &self,
+        id_path: &[Id],
+        state: &mut Self::State,
+        message: Box<dyn std::any::Any>,
+        app_state: &mut T,
+    ) -> MessageResult<A> {
+        self.element.message(id_path, state, message, app_state)
+    }
+}

crates/xilem_html/src/element/attribute_value.rs → crates/xilem_html/src/attribute_value.rs

@@ -1,6 +1,6 @@
 type CowStr = std::borrow::Cow<'static, str>;
 
-#[derive(PartialEq, Debug)]
+#[derive(PartialEq, Clone, Debug)]
 pub enum AttributeValue {
     True, // for the boolean true, this serializes to an empty string (e.g. for <input checked>)
     I32(i32),

crates/xilem_html/src/context.rs

@@ -1,17 +1,51 @@
 use std::any::Any;
 
 use bitflags::bitflags;
-use wasm_bindgen::JsCast;
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use web_sys::Document;
 
 use xilem_core::{Id, IdPath};
 
-use crate::{app::AppRunner, Message, HTML_NS, SVG_NS};
+use crate::{
+    app::AppRunner,
+    diff::{diff_kv_iterables, Diff},
+    vecmap::VecMap,
+    AttributeValue, Message, HTML_NS, SVG_NS,
+};
+
+type CowStr = std::borrow::Cow<'static, str>;
+
+fn set_attribute(element: &web_sys::Element, name: &str, value: &str) {
+    // we have to special-case `value` because setting the value using `set_attribute`
+    // doesn't work after the value has been changed.
+    if name == "value" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_value(value)
+    } else if name == "checked" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_checked(true)
+    } else {
+        element.set_attribute(name, value).unwrap_throw();
+    }
+}
+
+fn remove_attribute(element: &web_sys::Element, name: &str) {
+    // we have to special-case `value` because setting the value using `set_attribute`
+    // doesn't work after the value has been changed.
+    if name == "checked" {
+        let element: &web_sys::HtmlInputElement = element.dyn_ref().unwrap_throw();
+        element.set_checked(false)
+    } else {
+        element.remove_attribute(name).unwrap_throw();
+    }
+}
 
 // Note: xilem has derive Clone here. Not sure.
 pub struct Cx {
     id_path: IdPath,
     document: Document,
+    // TODO There's likely a cleaner more robust way to propagate the attributes to an element
+    pub(crate) current_element_attributes: VecMap<CowStr, AttributeValue>,
     app_ref: Option<Box<dyn AppRunner>>,
 }
 
@@ -34,6 +68,7 @@ impl Cx {
             id_path: Vec::new(),
             document: crate::document(),
             app_ref: None,
+            current_element_attributes: Default::default(),
         }
     }
 
@@ -89,6 +124,46 @@ impl Cx {
         self.create_element(SVG_NS, name).unchecked_into()
     }
 
+    // TODO Not sure how multiple attribute definitions with the same name should be handled (e.g. `e.attr("class", "a").attr("class", "b")`)
+    // Currently the outer most (in the example above "b") defines the attribute (when it isn't `None`, in that case the inner attr defines the value)
+    pub(crate) fn add_new_attribute_to_current_element(
+        &mut self,
+        name: &CowStr,
+        value: &Option<AttributeValue>,
+    ) {
+        if let Some(value) = value {
+            // could be slightly optimized via something like this: `new_attrs.entry(name).or_insert_with(|| value)`
+            if !self.current_element_attributes.contains_key(name) {
+                self.current_element_attributes
+                    .insert(name.clone(), value.clone());
+            }
+        }
+    }
+
+    pub(crate) fn apply_attribute_changes(
+        &mut self,
+        element: &web_sys::Element,
+        attributes: &mut VecMap<CowStr, AttributeValue>,
+    ) -> ChangeFlags {
+        let mut changed = ChangeFlags::empty();
+        // update attributes
+        for itm in diff_kv_iterables(&*attributes, &self.current_element_attributes) {
+            match itm {
+                Diff::Add(name, value) | Diff::Change(name, value) => {
+                    set_attribute(element, name, &value.serialize());
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+                Diff::Remove(name) => {
+                    remove_attribute(element, name);
+                    changed |= ChangeFlags::OTHER_CHANGE;
+                }
+            }
+        }
+        std::mem::swap(attributes, &mut self.current_element_attributes);
+        self.current_element_attributes.clear();
+        changed
+    }
+
     pub fn message_thunk(&self) -> MessageThunk {
         MessageThunk {
             id_path: self.id_path.clone(),