Receive Event in callback (Part 1) (#16)

* Reorder declaration of TemplateResult * Refactor element attribute parsing * Add compile test for unknown directive * Add hello world example Demonstrates data binding * Update README.md * Fix broken test
sycamore-rs · Mar 8, 2021 · ef0c6b7 · ef0c6b7
1 parent 3721245
commit ef0c6b7
Show file tree

Hide file tree

Showing 17 changed files with 207 additions and 139 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -4,4 +4,5 @@ members = [
   "maple-core-macro",
   "examples/components",
   "examples/counter",
+  "examples/hello",
 ]
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ template! {
 
 // Events are attached using the `on:*` directive.
 template! {
-    button(on:click=|| { /* do something */ }) {
+    button(on:click=|_| { /* do something */ }) {
         # "Click me"
     }
 }

diff --git a/examples/components/src/main.rs b/examples/components/src/main.rs
@@ -23,7 +23,7 @@ fn main() {
     let increment = {
         let state = state.clone();
         let set_state = set_state.clone();
-        move || {
+        move |_| {
             set_state(*state() + 1);
         }
     };

diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
@@ -17,13 +17,13 @@ fn main() {
         let counter = counter.clone();
         let set_counter = set_counter.clone();
 
-        move || set_counter(*counter() + 1)
+        move |_| set_counter(*counter() + 1)
     };
 
     let reset = {
         let set_counter = set_counter.clone();
 
-        move || set_counter(0)
+        move |_| set_counter(0)
     };
 
     let root = template! {

diff --git a/examples/hello/Cargo.toml b/examples/hello/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+authors = ["Luke Chu <37006668+lukechu10@users.noreply.github.com>"]
+edition = "2018"
+name = "hello"
+version = "0.1.0"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+console_error_panic_hook = "0.1.6"
+console_log = "0.2.0"
+log = "0.4.14"
+maple-core = {path = "../../maple-core"}
+wasm-bindgen = "0.2.71"
+
+[dependencies.web-sys]
+features = ["HtmlInputElement", "InputEvent"]
+version = "0.3"
diff --git a/examples/hello/index.html b/examples/hello/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Hello World!</title>
+
+    <style>
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>
diff --git a/examples/hello/src/main.rs b/examples/hello/src/main.rs
@@ -0,0 +1,45 @@
+#![allow(non_snake_case)]
+
+use maple_core::prelude::*;
+use wasm_bindgen::JsCast;
+use web_sys::{Event, HtmlInputElement};
+
+fn main() {
+    console_error_panic_hook::set_once();
+    console_log::init_with_level(log::Level::Debug).unwrap();
+
+    let (name, set_name) = create_signal(String::new());
+
+    let displayed_name = create_memo(move || {
+        if *name() == "" {
+            "World".to_string()
+        } else {
+            name().as_ref().clone()
+        }
+    });
+
+    let handle_change = move |event: Event| {
+        set_name(
+            event
+                .target()
+                .unwrap()
+                .dyn_into::<HtmlInputElement>()
+                .unwrap()
+                .value(),
+        );
+    };
+
+    let root = template! {
+        div {
+            h1 {
+                # "Hello "
+                # displayed_name()
+                # "!"
+            }
+
+            input(on:input=handle_change)
+        }
+    };
+
+    render(root);
+}
diff --git a/maple-core-macro/src/attributes.rs b/maple-core-macro/src/attributes.rs
@@ -0,0 +1,72 @@
+use syn::ext::IdentExt;
+use syn::parse::{Parse, ParseStream};
+use syn::punctuated::Punctuated;
+use syn::token::Paren;
+use syn::{parenthesized, Expr, Ident, Result, Token};
+
+pub enum AttributeType {
+    /// Syntax: `name`.
+    DomAttribute { name: String },
+    /// Syntax: `on:name`.
+    Event { name: String },
+}
+
+impl Parse for AttributeType {
+    fn parse(input: ParseStream) -> Result<Self> {
+        let ident = input.call(Ident::parse_any)?;
+        let ident_str = ident.to_string();
+
+        if input.peek(Token![:]) {
+            let _colon: Token![:] = input.parse()?;
+            match ident_str.as_str() {
+                "on" => {
+                    let event_name = input.call(Ident::parse_any)?;
+                    Ok(Self::Event {
+                        name: event_name.to_string(),
+                    })
+                }
+                _ => Err(syn::Error::new_spanned(
+                    ident,
+                    format!("unknown directive `{}`", ident_str),
+                )),
+            }
+        } else {
+            Ok(Self::DomAttribute { name: ident_str })
+        }
+    }
+}
+
+pub struct Attribute {
+    pub ty: AttributeType,
+    pub equals_token: Token![=],
+    pub expr: Expr,
+}
+
+impl Parse for Attribute {
+    fn parse(input: ParseStream) -> Result<Self> {
+        Ok(Self {
+            ty: input.parse()?,
+            equals_token: input.parse()?,
+            expr: input.parse()?,
+        })
+    }
+}
+
+pub struct AttributeList {
+    pub paren_token: Paren,
+    pub attributes: Punctuated<Attribute, Token![,]>,
+}
+
+impl Parse for AttributeList {
+    fn parse(input: ParseStream) -> Result<Self> {
+        let content;
+        let paren_token = parenthesized!(content in input);
+
+        let attributes = content.parse_terminated(Attribute::parse)?;
+
+        Ok(Self {
+            paren_token,
+            attributes,
+        })
+    }
+}
diff --git a/maple-core-macro/src/element.rs b/maple-core-macro/src/element.rs
@@ -2,31 +2,27 @@ use proc_macro2::TokenStream;
 use quote::{quote, quote_spanned, ToTokens};
 use syn::ext::IdentExt;
 use syn::parse::{Parse, ParseStream, Result};
-use syn::punctuated::Punctuated;
 use syn::spanned::Spanned;
-use syn::{
-    parenthesized, token, Expr, ExprAssign, ExprPath, ExprType, Ident, Token, Type, TypePath,
-};
+use syn::{token, Ident, Token};
 
+use crate::attributes::{AttributeList, AttributeType};
 use crate::children::Children;
 
 /// Represents a html element with all its attributes and properties (e.g. `p(class="text")`).
 pub(crate) struct Element {
     tag_name: TagName,
-    _paren_token: Option<token::Paren>,
-    attributes: Punctuated<Expr, Token![,]>,
+    attributes: Option<AttributeList>,
     children: Option<Children>,
 }
 
 impl Parse for Element {
     fn parse(input: ParseStream) -> Result<Self> {
         let tag_name = input.parse()?;
-        let (paren_token, attributes) = if input.peek(token::Paren) {
-            let attributes;
-            let paren_token = parenthesized!(attributes in input);
-            (Some(paren_token), attributes.parse_terminated(Expr::parse)?)
+
+        let attributes = if input.peek(token::Paren) {
+            Some(input.parse()?)
         } else {
-            (None, Punctuated::new())
+            None
         };
 
         let children = if input.peek(token::Brace) {
@@ -35,69 +31,8 @@ impl Parse for Element {
             None
         };
 
-        // check attribute syntax
-        for attribute in &attributes {
-            match attribute {
-                Expr::Assign(ExprAssign {
-                    attrs: _,
-                    left,
-                    eq_token: _,
-                    right: _,
-                }) => {
-                    match left.as_ref() {
-                        // simple attribute (e.g. `disabled`)
-                        Expr::Path(ExprPath { path, .. }) if path.segments.len() == 1 => {}
-                        // `on:click` is parsed as a type ascription expression
-                        Expr::Type(ExprType {
-                            attrs: _,
-                            expr,
-                            colon_token: _,
-                            ty,
-                        }) => match expr.as_ref() {
-                            Expr::Path(ExprPath { path, .. }) if path.segments.len() == 1 => {
-                                match path.segments[0].ident.to_string().as_str() {
-                                    "on" => {}
-                                    _ => {
-                                        return Err(syn::Error::new_spanned(
-                                            &path.segments[0],
-                                            format!(
-                                                "unknown directive `{}`",
-                                                path.segments[0].ident
-                                            ),
-                                        ))
-                                    }
-                                }
-
-                                match ty.as_ref() {
-                                    Type::Path(TypePath { path, .. })
-                                        if path.segments.len() == 1 => {}
-                                    _ => {
-                                        return Err(syn::Error::new_spanned(
-                                            ty,
-                                            "expected an identifier",
-                                        ))
-                                    }
-                                }
-                            }
-                            _ => {
-                                return Err(syn::Error::new_spanned(expr, "expected an identifier"))
-                            }
-                        },
-                        _ => return Err(syn::Error::new_spanned(left, "unexpected token")),
-                    }
-                }
-                _ => {
-                    return Err(syn::Error::new_spanned(
-                        attribute,
-                        "expected an assignment expression",
-                    ))
-                }
-            }
-        }
-
         Ok(Self {
             tag_name,
-            _paren_token: paren_token,
             attributes,
             children,
         })
@@ -108,56 +43,29 @@ impl ToTokens for Element {
     fn to_tokens(&self, tokens: &mut TokenStream) {
         let Element {
             tag_name,
-            _paren_token: _,
             attributes,
             children,
         } = self;
 
         let mut set_attributes = Vec::new();
         let mut set_event_listeners = Vec::new();
-        for attribute in attributes {
-            let attribute_span = attribute.span();
-
-            match attribute {
-                Expr::Assign(ExprAssign {
-                    attrs: _,
-                    left,
-                    eq_token: _,
-                    right,
-                }) => match left.as_ref() {
-                    Expr::Path(_) => {
-                        let left_str = left.to_token_stream().to_string();
-
-                        set_attributes.push(quote_spanned! { attribute_span=>
-                            ::maple_core::internal::attr(&element, #left_str, move || ::std::format!("{}", #right));
+        if let Some(attributes) = attributes {
+            for attribute in &attributes.attributes {
+                let expr = &attribute.expr;
+                let expr_span = expr.span();
+
+                match &attribute.ty {
+                    AttributeType::DomAttribute { name } => {
+                        set_attributes.push(quote_spanned! { expr_span=>
+                                ::maple_core::internal::attr(&element, #name, move || ::std::format!("{}", #expr));
+                            });
+                    }
+                    AttributeType::Event { name } => {
+                        set_event_listeners.push(quote_spanned! { expr_span=>
+                            ::maple_core::internal::event(&element, #name, ::std::boxed::Box::new(#expr));
                         });
                     }
-                    Expr::Type(ExprType {
-                        attrs: _,
-                        expr,
-                        colon_token: _,
-                        ty,
-                    }) => match expr.as_ref() {
-                        Expr::Path(path) => {
-                            let directive = path.to_token_stream().to_string();
-
-                            match directive.as_str() {
-                                "on" => {
-                                    // attach event handler
-                                    let event_name = ty.to_token_stream().to_string();
-
-                                    set_event_listeners.push(quote_spanned! { attribute_span=>
-                                        ::maple_core::internal::event(&element, #event_name, ::std::boxed::Box::new(#right));
-                                    });
-                                }
-                                _ => unreachable!("attribute syntax checked during parsing"),
-                            }
-                        }
-                        _ => unreachable!("attribute syntax checked during parsing"),
-                    },
-                    _ => unreachable!("attribute syntax checked during parsing"),
-                },
-                _ => unreachable!("attribute syntax checked during parsing"),
+                }
             }
         }
 

diff --git a/maple-core-macro/src/lib.rs b/maple-core-macro/src/lib.rs
@@ -1,3 +1,4 @@
+mod attributes;
 mod children;
 mod component;
 mod element;

diff --git a/maple-core-macro/tests/ui/component-fail.stderr b/maple-core-macro/tests/ui/component-fail.stderr
@@ -1,4 +1,4 @@
-error: expected an assignment expression
+error: expected ident
   --> $DIR/component-fail.rs:15:27
    |
 15 |     template! { Component(1) };

diff --git a/maple-core-macro/tests/ui/element-fail.rs b/maple-core-macro/tests/ui/element-fail.rs
@@ -5,6 +5,7 @@ fn compile_fail() {
 
     template! { button(disabled) };
     template! { button(on:click) };
+    template! { button(unknown:directive="123") };
 
     template! { button(a.b.c="123") };
 }