Add html_nested! macro to support nested iterable children access

[trivigy]

Requirements:

• Re-introduces changes from Improve nested html! expansion by unwrapping VNodes #820
• Includes the changes here in Add minor fix to VList and VTag to conform with #820 #835
• Fixes the regression in if and else have incompatible types: VChild VNode #839

[trivigy]

@jstarry This work is complete.

[ctaggart]

Thanks

[trivigy]

@jstarry are you sure that you want to remove the html! rewriting? The reason why I did that was the following:

If a developer is trying to write code like this:

fn view(&self) -> Html {
    return html! {
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>{ "ID" }</TableCell>
                    <TableCell>{ "First Name" }</TableCell>
                    <TableCell>{ "Last Name" }</TableCell>
                    <TableCell>{ "Email" }</TableCell>
                    <TableCell>{ "Gender" }</TableCell>
                    <TableCell>{ "IP Address" }</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {
                    self.props
                        .data_source
                        .into_iter()
                        .map(|row: &SampleRecord| {
                            html_nested! {
                                <TableRow>
                                    <TableCell>{ &row.id }</TableCell>
                                    <TableCell>{ &row.first_name }</TableCell>
                                    <TableCell>{ &row.last_name }</TableCell>
                                    <TableCell>{ &row.email }</TableCell>
                                    <TableCell>{ &row.gender }</TableCell>
                                    <TableCell>{ &row.ip_address }</TableCell>
                                </TableRow>
                            }
                        })
                        .collect::<Vec<VChild<TableRow>>>()
                }
            </TableBody>
        </Table>
    };
}

This forces the developer to remember that html_nested needs to be used. Makes yew harder to use.

[trivigy]

Otherwise maybe we could call it something like: html_vnode_unwrap or html_unwrap.

[jstarry]

I don't think we can determine implicitly when html! should be transformed to html_nested! so it should be explicit. I'm open to other names but so far I think html_nested! is the best option

[trivigy]

Just tested this and it is breaking my code now. Getting:

error[E0277]: `std::vec::Vec<yew::virtual_dom::vcomp::VComp>` doesn't implement `std::fmt::Display`
  --> src/components/table_body.rs:80:21
   |
80 | /                     self.props
81 | |                         .children
82 | |                         .iter()
83 | |                         .filter(|c| match &c.props {
...  |
92 | |                         .map(|c| c.into())
93 | |                         .collect::<Vec<VComp>>()
   | |________________________________________________^ `std::vec::Vec<yew::virtual_dom::vcomp::VComp>` cannot be formatted with the default formatter
   |
   = help: the trait `std::fmt::Display` is not implemented for `std::vec::Vec<yew::virtual_dom::vcomp::VComp>`
   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
   = note: required because of the requirements on the impl of `std::string::ToString` for `std::vec::Vec<yew::virtual_dom::vcomp::VComp>`
   = note: required because of the requirements on the impl of `std::convert::From<std::vec::Vec<yew::virtual_dom::vcomp::VComp>>` for `yew::virtual_dom::vnode::VNode`
   = note: required by `std::convert::From::from`

For:

return html! {
    <>
        {
            self.props
                .children
                .iter()
                .filter(|c| match &c.props {
                    Variants::Row(_) => true,
                })
                .map(|mut c| {
                    if let Variants::Row(ref mut props) = c.props {
                        props.context = Some(TableContext::Body);
                    }
                    c
                })
                .map(|c| c.into())
                .collect::<Vec<VComp>>()
        }
    </>
};

Here is the expansion:

return {
    enum ProcMacroHack {
        Nested = ( "< >\n{\n    self . props . children . iter () . filter\n    (| c | match & c . props { Variants :: Row (_) => true, }) . map\n    (| mut c |\n     {\n         if let Variants :: Row (ref mut props) = c . props\n         { props . context = Some (TableContext :: Body) ; } c\n     }) . map (| c | c . into ()) . collect :: < Vec < VComp >> ()\n} < / >" , 0 ) . 1 , }
    ::yew::virtual_dom::VNode::VList(
        ::yew::virtual_dom::vlist::VList::new_with_children({
            let mut v = ::std::vec::Vec::new();
            v.extend(::yew::utils::NodeSeq::from(
                ::yew::virtual_dom::VNode::from({
                    self.props
                        .children
                        .iter()
                        .filter(|c| match &c.props {
                            Variants::Row(_) => true,
                        })
                        .map(|mut c| {
                            if let Variants::Row(ref mut props) = c.props {
                                props.context = Some(TableContext::Body);
                            }
                            c
                        })
                        .map(|c| c.into())
                        .collect::<Vec<VComp>>()
                }),
            ));
            v
        }),
    )
};

The expansion before the wip commit did:

return {
    enum ProcMacroHack {
        Nested = ( "< >\n{\n    self . props . children . iter () . filter\n    (| c | match & c . props { Variants :: Row (_) => true, }) . map\n    (| mut c |\n     {\n         if let Variants :: Row (ref mut props) = c . props\n         { props . context = Some (TableContext :: Body) ; } c\n     }) . map (| c | c . into ()) . collect :: < Vec < VComp >> ()\n} < / >" , 0 ) . 1 , }
    ::yew::virtual_dom::VNode::from(::yew::virtual_dom::VNode::VList(
        ::yew::virtual_dom::vlist::VList::new_with_children({
            let mut v = ::std::vec::Vec::new();
            let comps = ({
                self.props
                    .children
                    .iter()
                    .filter(|c| match &c.props {
                        Variants::Row(_) => true,
                    })
                    .map(|mut c| {
                        if let Variants::Row(ref mut props) = c.props {
                            props.context = Some(TableContext::Body);
                        }
                        c
                    })
                    .map(|c| c.into())
                    .collect::<Vec<VComp>>()
            },);
            ::yew::utils::NodeSeq::from(comps.0)
                .into_iter()
                .for_each(|x| v.push(x.into()));
            v
        }),
    ))
};

The reason this works and the other doesn't is because a tuple can hold multiple different types whereas a vector cannot. And the type coercion was happening when the tuple was iterated over and unloaded. This way it is impossible.

[jstarry]

@trivigy the reason your example code breaks is because I added back ::yew::virtual_dom::VNode::from(..)

Why do you have .collect::<Vec<VComp>>()?

[trivigy]

@jstarry Consider the following example:

There is collection into three different types. All need to be handled in such way so that the underlying table can have access to their props.

return html! {
    <Table>
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Head(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VChild<TableHead>>>()
        }
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Body(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VChild<TableBody>>>()
        }
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Foot(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VChild<TableFoot>>>()
        }
    </Table>
};

Statically this would work absolutely fine.

return html! {
    <Table>
        <TableHead></TableHead>
        <TableHead></TableHead>
        <TableBody></TableBody>
        <TableBody></TableBody>
        <TableFoot></TableFoot>
        <TableFoot></TableFoot>
    </Table>
};

[jstarry]

@trivigy what's the error?

[trivigy]

Why do you have .collect::<Vec>()?

Because for right now I have this:

return html! {
    <>
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Head(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VComp>>()
        }
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Body(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VComp>>()
        }
        {
            self.props
                .children
                .iter()
                .filter(|c| match c.props {
                    Variants::Foot(_) => true,
                    _ => false,
                })
                .map(|c| c.into())
                .collect::<Vec<VComp>>()
        }
    </>
};

With this:

impl Into<VComp> for Variant {
    fn into(self) -> VComp {
        match self.props {
            Variants::Head(props) => VComp::new::<table_head::TableHead>(props, NodeRef::default()),
            Variants::Body(props) => VComp::new::<table_body::TableBody>(props, NodeRef::default()),
            Variants::Foot(props) => VComp::new::<table_foot::TableFoot>(props, NodeRef::default()),
            Variants::Row(props) => VComp::new::<table_row::TableRow>(props, NodeRef::default()),
        }
    }
}

Because I could not implement:

impl Into<VChild<TableHead>> for Variant {
    fn into(self) -> VChild<TableHead> {
        match self.props {
            Variants::Head(props) => VChild::<table_head::TableHead>::new(props, NodeRef::default()),
        }
    }
}

The whole vdom is quite a mess and I could not figure out how to make it do what I was slowly actually headed towards.