Skip to content
This repository has been archived by the owner on Jul 19, 2020. It is now read-only.

Improve html docs #100

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
21 changes: 15 additions & 6 deletions src/concepts/html/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
zoechi marked this conversation as resolved.
Show resolved Hide resolved
- 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.
Show resolved Hide resolved
* `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.
Show resolved Hide resolved
* `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> }`

{% 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro can easily exceed 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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?
It's much easier to compare lines that are not broken over several lines.

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 latest works in links instead of a concrete version number.
I think that's better than to update all links with each version increment.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"can reach easily" => "can easily exceed"

Copy link
Contributor

Choose a reason for hiding this comment

The 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" %}
Expand Down