-
Notifications
You must be signed in to change notification settings - Fork 46
Improve html docs #100
base: master
Are you sure you want to change the base?
Improve html docs #100
Changes from 3 commits
f668fa6
543b186
ca3a5cf
9196862
905b7a9
70ba8a6
494bce8
220f324
4484dba
6be5c81
f2eea56
907779d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -2,17 +2,26 @@ | |||||
| description: The procedural macro for generating HTML and SVG | ||||||
| --- | ||||||
|
|
||||||
| # Using html! | ||||||
| # Using [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) | ||||||
|
|
||||||
| The `html!` macro allows you to write HTML and SVG code declaratively. It is similar to JSX \(a Javascript extension which allows you to write HTML code inside of Javascript\). | ||||||
| The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro allows you to write HTML and SVG code declaratively. It is similar to JSX \(a Javascript extension which allows you to write HTML code inside of Javascript\). | ||||||
|
|
||||||
| **Important notes** | ||||||
|
|
||||||
| 1. The `html!` macro only accepts one root html node \(you can counteract this by [using fragments or iterators](lists.md)\) | ||||||
| 2. An empty `html! {}` invocation is valid and will not render anything | ||||||
| 3. Literals must always be quoted and wrapped in braces: `html! { "Hello, World" }` | ||||||
| - The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro only accepts one root html node (you can counteract this by [using fragments or iterators](lists.md)) | ||||||
| - An empty `html! {}` invocation is valid and will not render anything. | ||||||
| - Literals in element content must always be quoted and wrapped in braces (in contrary to attribute values - see below) | ||||||
|
zoechi marked this conversation as resolved.
Outdated
|
||||||
| * `html! { "Hello, World" }` | ||||||
| * `html! { <div>{ "Hell, World" }</div> }` | ||||||
| * `html! { <div>{ String::from("foo") + "bar" }</div>` | ||||||
| - Quoted attribute values are taken literally. The value is set at compile-time and does not change at runtime. | ||||||
|
zoechi marked this conversation as resolved.
Outdated
|
||||||
| * `html! { <div> id="bar"</div> }` | ||||||
| - Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions. | ||||||
| * `let foo = "bar"; html! { <div id=foo></div> }` | ||||||
| * `html! { <div id=String::from("foo") + "bar"></div> }` | ||||||
|
Comment on lines
+18
to
+22
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is a bit confusing because literals are also expressions. I'd prefer if we left these notes out |
||||||
|
|
||||||
| {% hint style="info" %} | ||||||
| The `html!` macro can reach easily the default recursion limit of the compiler. It is advised to bump its value if you encouter compilation errors. Use an attribute like `#![recursion_limit="1024"]` to bypass the problem. See the [official documentation](https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute) and [this Stack Overflow question](https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it) for details. | ||||||
| The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro can reach easily the default recursion limit of the compiler. It is advised to bump its value if you encouter compilation errors. Use an attribute like `#![recursion_limit="1024"]` to bypass the problem. See the [official documentation](https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute) and [this Stack Overflow question](https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it) for details. | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can't really see what exactly the change was here. What do you think about introducing a fix line length limit? I don't know what IDE you're using but in Emacs a keyboard shortcut realigns text to fit the defined width. I just saw that I added a link in another file. I intended to create a new PR for that but missed that I had a type when I tried to switch the branch so it landed in this branch as well.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "can reach easily" => "can easily exceed"
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll create an issue (and PR) about line lengths. |
||||||
| {% endhint %} | ||||||
|
|
||||||
| {% page-ref page="lists.md" %} | ||||||
|
|
||||||
Uh oh!
There was an error while loading. Please reload this page.