Use procedural macro for parsing jsx-like syntax#500
Merged
bors[bot] merged 49 commits intoyewstack:masterfrom Jun 28, 2019
Merged
Use procedural macro for parsing jsx-like syntax#500bors[bot] merged 49 commits intoyewstack:masterfrom
bors[bot] merged 49 commits intoyewstack:masterfrom
Conversation
Member
Author
|
bors try |
Contributor
tryBuild succeeded |
Member
Author
|
bors try |
Contributor
tryBuild succeeded |
Member
|
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 ! |
Member
|
bors r+ |
bors bot
added a commit
that referenced
this pull request
Jun 28, 2019
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>
Contributor
Build succeeded |
|
Hi, how to actually use the new proc macro ? |
Member
Author
|
@LifeIsStrange soon it will be enabled by default. For now, enable it by adding |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-hackcrate requires splitting code into two crates and so we have anyew-macrocrate as well as anyew-macro-implcrate.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_macrofeature.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> }}) }