Lay foundation for a statically typed vdom

examples/boids/src/boid.rs

@@ -130,7 +130,7 @@ impl Boid {
             points.push_str(&format!("{:.2},{:.2} ", x, y));
         }
 
-        html! { <polygon {points} fill={color} /> }
+        html! { <@{"polygon"} {points} fill={color} /> }
     }
 }
 

examples/boids/src/simulation.rs

@@ -87,9 +87,9 @@ impl Component for Simulation {
         let view_box = format!("0 0 {} {}", SIZE.x, SIZE.y);
 
         html! {
-            <svg class="simulation-window" viewBox={view_box}>
+            <@{"svg"} class="simulation-window" viewBox={view_box}>
                 { for self.boids.iter().map(Boid::render) }
-            </svg>
+            </@>
         }
     }
 }

examples/function_memory_game/src/components/chessboard_card.rs

@@ -42,7 +42,7 @@ pub fn ChessboardCard(props: &Props) -> Html {
 
     html! {
       <div class="chess-board-card-container">
-          <div class={classes!("card", flipped.then(|| "flipped"))} {onclick}>
+          <div class={classes!("card", flipped.then(|| "flipped"))} onclick={onclick}>
               <img class="front" src={get_link_by_cardname} alt="card" />
               <img class="back" src="public/back.png" alt="card" />
           </div>

examples/js_callback/src/main.rs

@@ -56,8 +56,9 @@ impl Component for App {
                         let input: HtmlTextAreaElement = e.target_unchecked_into();
                         Msg::Payload(input.value())
                     })}
-                    value={self.payload.clone()}
-                />
+                >
+                    {self.payload.clone()}
+                </textarea>
                 <button onclick={ctx.link().callback(|_| Msg::Payload(bindings::get_payload()))}>
                     { "Get the payload!" }
                 </button>

examples/router/src/components/pagination.rs

@@ -31,7 +31,7 @@ impl Component for Pagination {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <nav class="pagination is-right" role="navigation" aria-label="pagination">
+            <nav class="pagination is-right" role="navigation" aria_label="pagination">
                 { self.view_relnav_buttons(ctx.props()) }
                 <ul class="pagination-list">
                     { self.view_links(ctx.props()) }

examples/router/src/components/progress_delay.rs

@@ -58,7 +58,7 @@ impl Component for ProgressDelay {
     fn view(&self, _ctx: &Context<Self>) -> Html {
         let value = self.value;
         html! {
-            <progress class="progress is-primary" value={value.to_string()} max=1.0>
+            <progress class="progress is-primary" value={value.to_string()} max="1.0">
                 { format!("{:.0}%", 100.0 * value) }
             </progress>
         }

examples/router/src/main.rs

@@ -83,17 +83,17 @@ impl App {
         let active_class = if !navbar_active { "is-active" } else { "" };
 
         html! {
-            <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+            <nav class="navbar is-primary" aria_roledescription="navigation" aria_label="main navigation">
                 <div class="navbar-brand">
                     <h1 class="navbar-item is-size-3">{ "Yew Blog" }</h1>
 
                     <button class={classes!("navbar-burger", "burger", active_class)}
-                        aria-label="menu" aria-expanded="false"
+                        aria_label="menu" aria_expanded="false"
                         onclick={link.callback(|_| Msg::ToggleNavbar)}
                     >
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
+                        <span aria_hidden="true"></span>
+                        <span aria_hidden="true"></span>
+                        <span aria_hidden="true"></span>
                     </button>
                 </div>
                 <div class={classes!("navbar-menu", active_class)}>

examples/suspense/src/main.rs

@@ -30,7 +30,7 @@ fn app_content() -> HtmlResult {
 
     Ok(html! {
         <div class="content-area">
-            <textarea value={value.to_string()} oninput={on_text_input}></textarea>
+            <textarea oninput={on_text_input}>{value.to_string()}</textarea>
             <div class="action-area">
                 <button onclick={on_take_a_break}>{"Take a break!"}</button>
                 <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>

packages/yew-macro/Cargo.toml

@@ -17,6 +17,7 @@ proc-macro = true
 
 [dependencies]
 boolinator = "2"
+convert_case = "0.5"
 lazy_static = "1"
 proc-macro-error = "1"
 proc-macro2 = "1"

packages/yew-macro/Makefile.toml

@@ -1,6 +1,6 @@
 [tasks.test]
 clear = true
-toolchain = ""
+toolchain = "1.56"
 command = "cargo"
 # test target can be optionally specified like `cargo make test html_macro`,
 args = ["test", "${@}"]

packages/yew-macro/src/html_tree/html_component.rs

@@ -8,14 +8,14 @@ use syn::parse::{Parse, ParseStream};
 use syn::punctuated::Punctuated;
 use syn::spanned::Spanned;
 use syn::{
-    AngleBracketedGenericArguments, GenericArgument, Path, PathArguments, PathSegment, Token, Type,
-    TypePath,
+    parse_quote_spanned, AngleBracketedGenericArguments, GenericArgument, Path, PathArguments,
+    PathSegment, Token, Type, TypePath,
 };
 
 pub struct HtmlComponent {
-    ty: Type,
-    props: ComponentProps,
-    children: HtmlChildrenTree,
+    pub ty: Type,
+    pub props: ComponentProps,
+    pub children: HtmlChildrenTree,
 }
 
 impl PeekValue<()> for HtmlComponent {
@@ -26,6 +26,14 @@ impl PeekValue<()> for HtmlComponent {
     }
 }
 
+fn element_or_ty(ty: &Type) -> Type {
+    if crate::typed_vdom::element_names().contains(&&*ty.to_token_stream().to_string()) {
+        parse_quote_spanned! {ty.span()=> ::yew::virtual_dom::typings::#ty}
+    } else {
+        ty.clone()
+    }
+}
+
 impl Parse for HtmlComponent {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         if HtmlComponentClose::peek(input.cursor()).is_some() {
@@ -42,7 +50,7 @@ impl Parse for HtmlComponent {
         // Return early if it's a self-closing tag
         if open.is_self_closing() {
             return Ok(HtmlComponent {
-                ty: open.ty,
+                ty: element_or_ty(&open.ty),
                 props: open.props,
                 children: HtmlChildrenTree::new(),
             });
@@ -77,7 +85,7 @@ impl Parse for HtmlComponent {
         }
 
         Ok(HtmlComponent {
-            ty: open.ty,
+            ty: element_or_ty(&open.ty),
             props: open.props,
             children,
         })
@@ -91,14 +99,23 @@ impl ToTokens for HtmlComponent {
             props,
             children,
         } = self;
+        // incredibly jank but works ¯\_(ツ)_/¯
+        let is_element = {
+            let ty_str = ty.to_token_stream().to_string();
+            let ty_str = ty_str.split("::").filter_map(|it| {
+                let trimmed = it.trim();
+                if trimmed.is_empty() { None } else { Some(trimmed) }
+            }).take(3).collect::<Vec<_>>();
+            ty_str == vec!["yew", "virtual_dom", "typings"]
+        };
 
         let props_ty = quote_spanned!(ty.span()=> <#ty as ::yew::html::BaseComponent>::Properties);
         let children_renderer = if children.is_empty() {
             None
         } else {
             Some(quote! { ::yew::html::ChildrenRenderer::new(#children) })
         };
-        let build_props = props.build_properties_tokens(&props_ty, children_renderer);
+        let build_props = props.build_properties_tokens(&props_ty, children_renderer, is_element);
 
         let special_props = props.special();
         let node_ref = if let Some(node_ref) = &special_props.node_ref {

packages/yew-macro/src/html_tree/html_dashed_name.rs

@@ -18,6 +18,7 @@ pub struct HtmlDashedName {
 impl HtmlDashedName {
     /// Checks if this name is equal to the provided item (which can be anything implementing
     /// `Into<String>`).
+    #[allow(dead_code)]
     pub fn eq_ignore_ascii_case<S>(&self, other: S) -> bool
     where
         S: Into<String>,
@@ -76,7 +77,7 @@ impl Parse for HtmlDashedName {
         let name = input.call(Ident::parse_any)?;
         let mut extended = Vec::new();
         while input.peek(Token![-]) {
-            extended.push((input.parse::<Token![-]>()?, input.parse::<Ident>()?));
+            extended.push((input.parse::<Token![-]>()?, Ident::parse_any(input)?));
         }
 
         Ok(HtmlDashedName { name, extended })
@@ -89,7 +90,8 @@ impl ToTokens for HtmlDashedName {
         let dashes = extended.iter().map(|(dash, _)| quote! {#dash});
         let idents = extended.iter().map(|(_, ident)| quote! {#ident});
         let extended = quote! { #(#dashes #idents)* };
-        tokens.extend(quote! { #name #extended });
+        let label = quote! { #name #extended };
+        tokens.extend(label.to_token_stream())
     }
 }
 

packages/yew-macro/src/html_tree/html_element.rs

@@ -272,7 +272,7 @@ impl ToTokens for HtmlElement {
             quote! { ::yew::virtual_dom::listeners::Listeners::None }
         } else {
             let listeners_it = listeners.iter().map(|Prop { label, value, .. }| {
-                let name = &label.name;
+                let name = &label.name();
                 quote! {
                     ::yew::html::#name::Wrapper::__macro_new(#value)
                 }
@@ -313,19 +313,6 @@ impl ToTokens for HtmlElement {
                             )
                         }
                     }
-                    "textarea" => {
-                        quote! {
-                            ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
-                                ::yew::virtual_dom::VTag::__new_textarea(
-                                    #value,
-                                    #node_ref,
-                                    #key,
-                                    #attributes,
-                                    #listeners,
-                                ),
-                            )
-                        }
-                    }
                     _ => {
                         quote! {
                             ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
@@ -387,17 +374,9 @@ impl ToTokens for HtmlElement {
                     #[allow(clippy::redundant_clone, unused_braces, clippy::let_and_return)]
                     let mut #vtag = match ::std::convert::AsRef::<::std::primitive::str>::as_ref(&#vtag_name) {
                         "input" => {
-                            ::yew::virtual_dom::VTag::__new_textarea(
-                                #value,
-                                #node_ref,
-                                #key,
-                                #attributes,
-                                #listeners,
-                            )
-                        }
-                        "textarea" => {
-                            ::yew::virtual_dom::VTag::__new_textarea(
+                            ::yew::virtual_dom::VTag::__new_input(
                                 #value,
+                                #checked,
                                 #node_ref,
                                 #key,
                                 #attributes,
@@ -449,7 +428,7 @@ impl ToTokens for HtmlElement {
     }
 }
 
-fn wrap_attr_prop(prop: &Prop) -> TokenStream {
+fn wrap_attr_prop(prop: &Prop<false>) -> TokenStream {
     let value = prop.value.optimize_literals();
     quote_spanned! {value.span()=>
         ::yew::html::IntoPropValue::<

packages/yew-macro/src/html_tree/html_list.rs

@@ -125,12 +125,12 @@ impl Parse for HtmlListProps {
         let key = if input.is_empty() {
             None
         } else {
-            let prop: Prop = input.parse()?;
+            let prop: Prop<true> = input.parse()?;
             if !input.is_empty() {
                 return Err(input.error("only a single `key` prop is allowed on a fragment"));
             }
 
-            if prop.label.to_ascii_lowercase_string() != "key" {
+            if prop.label.to_string().to_ascii_lowercase() != "key" {
                 return Err(syn::Error::new_spanned(
                     prop.label,
                     "fragments only accept the `key` prop",