-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use procedural macro for parsing jsx-like syntax #500
Conversation
bors try |
tryBuild succeeded |
bors try |
tryBuild succeeded |
This PR changes everything in the framework and we can have some new issues later, but it's important changes and we will merge it to start improving templates usability. Thanks @jstarry ! |
bors r+ |
500: Use procedural macro for parsing jsx-like syntax r=DenisKolodin a=jstarry Using a procedural macro makes it possible to generate nice compile time error messages when the jsx-like syntax is malformed or misused. No more panics at run-time! This change utilizes https://github.com/dtolnay/proc-macro-hack to allow using the `html!` macro for expressions. The `proc-macro-hack` crate requires splitting code into two crates and so we have an `yew-macro` crate as well as an `yew-macro-impl` crate. The goal is to start with backwards compatibility with the old declarative macro and then move forward with more user-friendly syntax that is more similar to what you would use with actual JSX. This new proc macro can be enabled using the `proc_macro` feature. **Feature Checklist:** - [x] lists `<></>` - [x] blocks `{ self.subview() }` - [x] iterables ` { for children.into_iter() }` - [x] full tag support - [x] basic tags `<div><img /></div>` - [x] tag attributes (no commas!) `<span class={"header"}></span>` - [x] backwards compatible `<span class={"header"}, ></span>` - [x] tag input events `<button onclick=|_| Msg::Update>{ "Update" }</button>` - [x] full component support - [x] basic components `<SubComponent />` - [x] backwards compatible `<SubComponent: />` - [x] comp properties `<SubComponent prop={value} />` - [x] empty invocation `html! {}` - [x] nested invocation `{ for (0..3).map(|num| { html! { <span>{num}</span> }}) }` Co-authored-by: Justin Starry <jstarry@users.noreply.github.com>
Build succeeded |
Hi, how to actually use the new proc macro ? |
@LifeIsStrange soon it will be enabled by default. For now, enable it by adding
|
Using a procedural macro makes it possible to generate nice compile time error messages when the jsx-like syntax is malformed or misused. No more panics at run-time!
This change utilizes https://github.com/dtolnay/proc-macro-hack to allow using the
html!
macro for expressions. Theproc-macro-hack
crate requires splitting code into two crates and so we have anyew-macro
crate as well as anyew-macro-impl
crate.The goal is to start with backwards compatibility with the old declarative macro and then move forward with more user-friendly syntax that is more similar to what you would use with actual JSX. This new proc macro can be enabled using the
proc_macro
feature.Feature Checklist:
<></>
{ self.subview() }
{ for children.into_iter() }
<div><img /></div>
<span class={"header"}></span>
<span class={"header"}, ></span>
<button onclick=|_| Msg::Update>{ "Update" }</button>
<SubComponent />
<SubComponent: />
<SubComponent prop={value} />
html! {}
{ for (0..3).map(|num| { html! { <span>{num}</span> }}) }