Skip to content

Use procedural macro for parsing jsx-like syntax#500

Merged
bors[bot] merged 49 commits intoyewstack:masterfrom
jstarry:proc-macro
Jun 28, 2019
Merged

Use procedural macro for parsing jsx-like syntax#500
bors[bot] merged 49 commits intoyewstack:masterfrom
jstarry:proc-macro

Conversation

@jstarry
Copy link
Copy Markdown
Member

@jstarry jstarry commented May 25, 2019

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:

  • lists <></>
  • blocks { self.subview() }
  • iterables { for children.into_iter() }
  • full tag support
    • basic tags <div><img /></div>
    • tag attributes (no commas!) <span class={"header"}></span>
    • backwards compatible <span class={"header"}, ></span>
    • tag input events <button onclick=|_| Msg::Update>{ "Update" }</button>
  • full component support
    • basic components <SubComponent />
    • backwards compatible <SubComponent: />
    • comp properties <SubComponent prop={value} />
  • empty invocation html! {}
  • nested invocation { for (0..3).map(|num| { html! { <span>{num}</span> }}) }

@jstarry
Copy link
Copy Markdown
Member Author

jstarry commented Jun 3, 2019

bors try

bors bot added a commit that referenced this pull request Jun 3, 2019
@bors
Copy link
Copy Markdown
Contributor

bors bot commented Jun 3, 2019

try

Build succeeded

@jstarry
Copy link
Copy Markdown
Member Author

jstarry commented Jun 27, 2019

bors try

bors bot added a commit that referenced this pull request Jun 27, 2019
@bors
Copy link
Copy Markdown
Contributor

bors bot commented Jun 27, 2019

try

Build succeeded

@therustmonk
Copy link
Copy Markdown
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 !

@therustmonk
Copy link
Copy Markdown
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>
@bors
Copy link
Copy Markdown
Contributor

bors bot commented Jun 28, 2019

Build succeeded

@bors bors bot merged commit 02f2bf3 into yewstack:master Jun 28, 2019
@jstarry jstarry deleted the proc-macro branch June 28, 2019 16:11
@LifeIsStrange
Copy link
Copy Markdown

Hi, how to actually use the new proc macro ?
I updated yew to master and was not able to declare html tags without useless commas.
Is there something special to do to enable it ?

@jstarry
Copy link
Copy Markdown
Member Author

jstarry commented Jul 1, 2019

@LifeIsStrange soon it will be enabled by default. For now, enable it by adding features = ["proc_macro"] to the yew dependency in your Cargo.toml file

yew = { git = "https://github.com/DenisKolodin/yew", features = ["proc_macro"] }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants