xilem_web: Add a few boolean attribute modifiers for `HtmlInputElemen…

…t` and factor element state flags out of these modifiers into `ElementFlags` (#717)

This PR starts with supporting specialized elements (i.e. more than just
the `Element` DOM interface), starting with boolean attributes in
`HtmlInputElement` (`checked`, `default_checked`, `disabled`,
`required`, `multiple`).
With a general `OverwriteBool` modifier which is optimized by encoding
boolean flags into a `u32`, thus not requiring allocations (compared to
the other modifiers we currently have), but is limited to max 32
overwrites, which I don't think should be a real-world limitation (i.e.
`input_el.checked().checked()...checked()` 32 times makes no sense), I
also started adding tests for this, as it juggles around with
bit-operations (and we should generally start writing more tests).
I have originally planned to feature-flag this (i.e. have a feature like
`HtmlInputElement`).
But I'd like to see how far we can go without this, I haven't yet
noticed significant (binary-size) regressions in the todomvc example
(which uses `input` elements) that justifies the worse DX that
additional features introduce.
Having features for this is also not optimal for another reason: It
changes the API (e.g. `DomNode::Props` is `props::HtmlInputElement`
instead of `props::Element`.

It also factors the element state flags (`was_created`, `in_hydration`)
into a separate `ElementFlags` which is shared within a `Modifier<M>`
struct (similar as `PodMut` or `WidgetMut` in masonry), so that we don't
have to duplicate that state in every modifier. Additionally a new flag
`needs_update` is introduced, which indicates that the element in
general needs to update any modifier, and is entirely an optimization to
avoid checking every modifier whether it has changed (not yet that
important, but when we have a lot of modifiers per element, having to
check every modifier is less efficient, it's also already *slightly*
visible in the js-framework-benchmark).
For this, it unfortunately suffers similar as #705 from the free-form
syntax by being a little bit more verbose (which may be reverted after
`arbitrary_self_types` are stable).

It should also fix #716

xilem_web/src/elements.rs

@@ -11,7 +11,7 @@ use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use crate::{
     core::{AppendVec, ElementSplice, MessageResult, Mut, View, ViewId, ViewMarker},
     document,
-    modifiers::{Children, With},
+    modifiers::{Children, WithModifier},
     vec_splice::VecSplice,
     AnyPod, DomFragment, DomNode, DynMessage, FromWithContext, Pod, ViewCtx, HTML_NS,
 };
@@ -262,11 +262,11 @@ pub(crate) fn rebuild_element<State, Action, Element>(
     State: 'static,
     Action: 'static,
     Element: 'static,
-    Element: DomNode<Props: With<Children>>,
+    Element: DomNode<Props: WithModifier<Children>>,
 {
     let mut dom_children_splice = DomChildrenSplice::new(
         &mut state.append_scratch,
-        With::<Children>::modifier(element.props),
+        WithModifier::<Children>::modifier(element.props).modifier,
         &mut state.vec_splice_scratch,
         element.node.as_ref(),
         ctx.fragment.clone(),
@@ -290,11 +290,11 @@ pub(crate) fn teardown_element<State, Action, Element>(
     State: 'static,
     Action: 'static,
     Element: 'static,
-    Element: DomNode<Props: With<Children>>,
+    Element: DomNode<Props: WithModifier<Children>>,
 {
     let mut dom_children_splice = DomChildrenSplice::new(
         &mut state.append_scratch,
-        With::<Children>::modifier(element.props),
+        WithModifier::<Children>::modifier(element.props).modifier,
         &mut state.vec_splice_scratch,
         element.node.as_ref(),
         ctx.fragment.clone(),

xilem_web/src/interfaces.rs

@@ -16,10 +16,8 @@ use std::borrow::Cow;
 
 use crate::{
     events,
-    modifiers::{
-        Attr, Attributes, Class, ClassIter, Classes, Rotate, Scale, ScaleValue, Style, StyleIter,
-        Styles, With,
-    },
+    modifiers::{Attr, Class, ClassIter, Rotate, Scale, ScaleValue, Style, StyleIter},
+    props::{WithElementProps, WithHtmlInputElementProps},
     DomNode, DomView, IntoAttributeValue, OptionalAction, Pointer, PointerMsg,
 };
 use wasm_bindgen::JsCast;
@@ -51,13 +49,7 @@ macro_rules! event_handler_mixin {
 }
 
 pub trait Element<State, Action = ()>:
-    Sized
-    + DomView<
-        State,
-        Action,
-        DomNode: DomNode<Props: With<Attributes> + With<Classes> + With<Styles>>
-                     + AsRef<web_sys::Element>,
-    >
+    Sized + DomView<State, Action, DomNode: DomNode<Props: WithElementProps> + AsRef<web_sys::Element>>
 {
     /// Set an attribute for an [`Element`]
     ///
@@ -331,7 +323,7 @@ pub trait Element<State, Action = ()>:
 impl<State, Action, T> Element<State, Action> for T
 where
     T: DomView<State, Action>,
-    <T::DomNode as DomNode>::Props: With<Attributes> + With<Classes> + With<Styles>,
+    <T::DomNode as DomNode>::Props: WithElementProps,
     T::DomNode: AsRef<web_sys::Element>,
 {
 }
@@ -758,17 +750,100 @@ where
 {
 }
 
+use crate::modifiers::html_input_element;
 // #[cfg(feature = "HtmlInputElement")]
 pub trait HtmlInputElement<State, Action = ()>:
-    HtmlElement<State, Action, DomNode: AsRef<web_sys::HtmlInputElement>>
+    HtmlElement<
+    State,
+    Action,
+    DomNode: DomNode<Props: WithHtmlInputElementProps> + AsRef<web_sys::HtmlInputElement>,
+>
 {
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).attr("type", "checkbox").checked(true) // results in <input type="checkbox" checked></input>
+    /// # }
+    /// ```
+    fn checked(self, checked: bool) -> html_input_element::view::Checked<Self, State, Action> {
+        html_input_element::view::Checked::new(self, checked)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).attr("type", "radio").default_checked(true) // results in <input type="radio" checked></input>
+    /// # }
+    /// ```
+    fn default_checked(
+        self,
+        default_checked: bool,
+    ) -> html_input_element::view::DefaultChecked<Self, State, Action> {
+        html_input_element::view::DefaultChecked::new(self, default_checked)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).disabled(true) // results in <input disabled></input>
+    /// # }
+    /// ```
+    fn disabled(self, disabled: bool) -> html_input_element::view::Disabled<Self, State, Action> {
+        html_input_element::view::Disabled::new(self, disabled)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/disabled> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).required(true) // results in <input required></input>
+    /// # }
+    /// ```
+    fn required(self, required: bool) -> html_input_element::view::Required<Self, State, Action> {
+        html_input_element::view::Required::new(self, required)
+    }
+
+    /// See <https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/multiple> for more details.
+    ///
+    /// # Examples
+    ///
+    /// ```
+    /// use xilem_web::{interfaces::{Element, HtmlInputElement}, elements::html::input};
+    ///
+    /// # fn component() -> impl HtmlInputElement<()> {
+    /// input(()).multiple(true) // results in <input multiple></input>
+    /// # }
+    /// ```
+    fn multiple(self, multiple: bool) -> html_input_element::view::Multiple<Self, State, Action> {
+        html_input_element::view::Multiple::new(self, multiple)
+    }
 }
 
 // #[cfg(feature = "HtmlInputElement")]
 impl<State, Action, T> HtmlInputElement<State, Action> for T
 where
     T: HtmlElement<State, Action>,
     T::DomNode: AsRef<web_sys::HtmlInputElement>,
+    <T::DomNode as DomNode>::Props: WithHtmlInputElementProps,
 {
 }