From f668fa68a148e9028fa0d5eda54e6b0fce329492 Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Tue, 16 Jun 2020 19:02:15 +0200 Subject: [PATCH 01/11] Extend html! docs a bit --- src/concepts/html/README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index e3c683d..564de2d 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -2,7 +2,7 @@ description: The procedural macro for generating HTML and SVG --- -# Using html! +# Using `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\). @@ -10,7 +10,16 @@ The `html!` macro allows you to write HTML and SVG code declaratively. It is sim 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" }` +3. Literals in element content must always be quoted and wrapped in braces + * `html! { "Hello, World" }` + * `html! {
{"Hell, World" }
}` + * `html! {
{ String::from("foo") + "bar" }
+4. Quoted attribute values are taken literally + * `html! {
id="bar"
}` +5. Unquoted attribute values are interpreted as expressions + * `let foo = "bar"; html! {
}` + * `html! {
}` + {% 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. {% endhint %} From 543b186f0f9a2ea884f5ed14fde6f26d6765b1d1 Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Tue, 16 Jun 2020 19:08:07 +0200 Subject: [PATCH 02/11] Extend html! docs a bit --- src/concepts/html/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 564de2d..30a9515 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -12,8 +12,8 @@ The `html!` macro allows you to write HTML and SVG code declaratively. It is sim 2. An empty `html! {}` invocation is valid and will not render anything 3. Literals in element content must always be quoted and wrapped in braces * `html! { "Hello, World" }` - * `html! {
{"Hell, World" }
}` - * `html! {
{ String::from("foo") + "bar" }
+ * `html! {
{ "Hell, World" }
}` + * `html! {
{ String::from("foo") + "bar" }
` 4. Quoted attribute values are taken literally * `html! {
id="bar"
}` 5. Unquoted attribute values are interpreted as expressions From ca3a5cfcda9a057cc5e9a6ca7b4a357569ee5d36 Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Wed, 17 Jun 2020 15:29:36 +0200 Subject: [PATCH 03/11] Update according to the suggestions --- src/concepts/html/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 30a9515..d03e680 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -2,26 +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 in element content must always be quoted and wrapped in braces +- 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) * `html! { "Hello, World" }` * `html! {
{ "Hell, World" }
}` * `html! {
{ String::from("foo") + "bar" }
` -4. Quoted attribute values are taken literally +- Quoted attribute values are taken literally. The value is set at compile-time and does not change at runtime. * `html! {
id="bar"
}` -5. Unquoted attribute values are interpreted as expressions +- Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions. * `let foo = "bar"; html! {
}` * `html! {
}` {% 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. {% endhint %} {% page-ref page="lists.md" %} From 919686288bb078d97361e74e17a445307d26a436 Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Thu, 18 Jun 2020 11:08:53 +0200 Subject: [PATCH 04/11] Add link from properties to components where its shown how to pass them along --- src/concepts/components/properties.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/concepts/components/properties.md b/src/concepts/components/properties.md index dfc8944..70cfd8f 100644 --- a/src/concepts/components/properties.md +++ b/src/concepts/components/properties.md @@ -72,3 +72,5 @@ pub struct LinkProps { active: bool, } ``` + +How to pass properties to components is demonstrated in [Components](/concepts/html/components.html). From 905b7a9919591d48104e17ccb692b4991f41da6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Z=C3=B6chbauer?= Date: Thu, 18 Jun 2020 11:19:38 +0200 Subject: [PATCH 05/11] Update src/concepts/html/README.md Co-authored-by: Teymour Aldridge <42674621+teymour-aldridge@users.noreply.github.com> --- src/concepts/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index d03e680..017f816 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -8,7 +8,7 @@ The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro allows you t **Important notes** -- 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)) +- The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro only accepts one root HTML node (you can overcome 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) * `html! { "Hello, World" }` From 70ba8a68c742f5b637d5bed01d44c4fe7e387f25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Z=C3=B6chbauer?= Date: Thu, 18 Jun 2020 11:19:48 +0200 Subject: [PATCH 06/11] Update src/concepts/html/README.md Co-authored-by: Teymour Aldridge <42674621+teymour-aldridge@users.noreply.github.com> --- src/concepts/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 017f816..7bd4f31 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -10,7 +10,7 @@ The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro allows you t - The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro only accepts one root HTML node (you can overcome 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) +- Literals in element content must always be quoted and wrapped with braces (this is different to attribute values - see below) * `html! { "Hello, World" }` * `html! {
{ "Hell, World" }
}` * `html! {
{ String::from("foo") + "bar" }
` From 494bce8d74a86bb7e3cb09ab2eeb84626c8d024a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCnter=20Z=C3=B6chbauer?= Date: Thu, 18 Jun 2020 11:20:13 +0200 Subject: [PATCH 07/11] Update src/concepts/html/README.md Co-authored-by: Teymour Aldridge <42674621+teymour-aldridge@users.noreply.github.com> --- src/concepts/html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 7bd4f31..5548cae 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -14,7 +14,7 @@ The [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) macro allows you t * `html! { "Hello, World" }` * `html! {
{ "Hell, World" }
}` * `html! {
{ String::from("foo") + "bar" }
` -- Quoted attribute values are taken literally. The value is set at compile-time and does not change at runtime. +- Quoted attribute values are taken literally. The value is set at compile-time and does not change at run-time. * `html! {
id="bar"
}` - Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions. * `let foo = "bar"; html! {
}` From 220f32461db37f0eaff3193009daca52c26257cb Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Thu, 18 Jun 2020 11:26:06 +0200 Subject: [PATCH 08/11] Apply the PR suggestions --- src/concepts/html/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index d03e680..cf15955 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -2,26 +2,26 @@ description: The procedural macro for generating HTML and SVG --- -# Using [`html!`](https://docs.rs/yew/0.16.2/yew/macro.html.html) +# Using [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) -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\). +The [`html!`](https://docs.rs/yew/latest/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** -- 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)) +- The [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) macro only accepts one root HTML node (you can overcome 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) +- Literals inside of tags must always be quoted and wrapped with braces (this is different to attribute values - see below) * `html! { "Hello, World" }` * `html! {
{ "Hell, World" }
}` * `html! {
{ String::from("foo") + "bar" }
` -- Quoted attribute values are taken literally. The value is set at compile-time and does not change at runtime. +- Quoted attribute values are taken literally. The value is set at compile-time and does not change at run-time. * `html! {
id="bar"
}` - Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions. * `let foo = "bar"; html! {
}` * `html! {
}` {% hint style="info" %} -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/latest/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. {% endhint %} {% page-ref page="lists.md" %} From 6be5c81422f5228ea5ccd340e548b1d3fb1bcc7d Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Thu, 18 Jun 2020 11:49:12 +0200 Subject: [PATCH 09/11] Add bullet about upper/lowercase distinction for tag and component --- src/concepts/html/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 6418e32..2e083b3 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -20,6 +20,7 @@ The [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) macro allows you t - Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions. * `let foo = "bar"; html! {
}` * `html! {
}` +- HTML tags names need to start with a lowercase letter. Besides that every valid HTML tag name is allowed. If the tag name starts with an uppercase letter it is interpreted as component name and attributes are passed as component properties. {% hint style="info" %} The [`html!`](https://docs.rs/yew/latest/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. From f2eea56d6fda6ab134097c8b4556a0e1ac1ec542 Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Thu, 18 Jun 2020 15:54:33 +0200 Subject: [PATCH 10/11] Improve links --- src/concepts/components/properties.md | 2 +- src/concepts/html/README.md | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/concepts/components/properties.md b/src/concepts/components/properties.md index 70cfd8f..cf85132 100644 --- a/src/concepts/components/properties.md +++ b/src/concepts/components/properties.md @@ -73,4 +73,4 @@ pub struct LinkProps { } ``` -How to pass properties to components is demonstrated in [Components](/concepts/html/components.html). +How to pass properties to components is demonstrated in [Components](/concepts/html/components.md). diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 2e083b3..46bc790 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -2,14 +2,14 @@ description: The procedural macro for generating HTML and SVG --- -# Using [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) +# Using [`html!`][1] -The [`html!`](https://docs.rs/yew/latest/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\). +The [`html!`][1] 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** -- The [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) macro only accepts one root HTML node (you can overcome this by [using fragments or iterators](lists.md)) +- The [`html!`][1] macro only accepts one root HTML node (you can overcome this by [using fragments or iterators](lists.md)) - An empty `html! {}` invocation is valid and will not render anything. - Literals inside of tags must always be quoted and wrapped with braces (this is different to attribute values - see below) * `html! { "Hello, World" }` @@ -23,7 +23,7 @@ The [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) macro allows you t - HTML tags names need to start with a lowercase letter. Besides that every valid HTML tag name is allowed. If the tag name starts with an uppercase letter it is interpreted as component name and attributes are passed as component properties. {% hint style="info" %} -The [`html!`](https://docs.rs/yew/latest/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!`][1] 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][2] and [this Stack Overflow question][3] for details. {% endhint %} {% page-ref page="lists.md" %} @@ -33,3 +33,7 @@ The [`html!`](https://docs.rs/yew/latest/yew/macro.html.html) macro can reach ea {% page-ref page="literals-and-expressions.md" %} {% page-ref page="components.md" %} + +[1]: https://docs.rs/yew/latest/yew/macro.html.html +[2]: https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute +[3]: https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it From 907779d58ecc661127fe5466f5eeb318fe3e8d7d Mon Sep 17 00:00:00 2001 From: Guenter Zoechbauer Date: Thu, 18 Jun 2020 16:04:55 +0200 Subject: [PATCH 11/11] Using short names for link references seems better than numbers --- src/concepts/html/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/concepts/html/README.md b/src/concepts/html/README.md index 46bc790..1f7d634 100644 --- a/src/concepts/html/README.md +++ b/src/concepts/html/README.md @@ -2,14 +2,14 @@ description: The procedural macro for generating HTML and SVG --- -# Using [`html!`][1] +# Using [`html!`][yew_macro_html] The [`html!`][1] 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** -- The [`html!`][1] macro only accepts one root HTML node (you can overcome this by [using fragments or iterators](lists.md)) +- The [`html!`][yew_macro_html] macro only accepts one root HTML node (you can overcome this by [using fragments or iterators](lists.md)) - An empty `html! {}` invocation is valid and will not render anything. - Literals inside of tags must always be quoted and wrapped with braces (this is different to attribute values - see below) * `html! { "Hello, World" }` @@ -23,7 +23,7 @@ The [`html!`][1] macro allows you to write HTML and SVG code declaratively. It i - HTML tags names need to start with a lowercase letter. Besides that every valid HTML tag name is allowed. If the tag name starts with an uppercase letter it is interpreted as component name and attributes are passed as component properties. {% hint style="info" %} -The [`html!`][1] 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][2] and [this Stack Overflow question][3] for details. +The [`html!`][yew_macro_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][rust_recursion_limit] and [this Stack Overflow question][so_crate_attr] for details. {% endhint %} {% page-ref page="lists.md" %} @@ -34,6 +34,6 @@ The [`html!`][1] macro can reach easily the default recursion limit of the compi {% page-ref page="components.md" %} -[1]: https://docs.rs/yew/latest/yew/macro.html.html -[2]: https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute -[3]: https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it +[yew_macro_html]: https://docs.rs/yew/latest/yew/macro.html.html +[rust_recursion_limit]: https://doc.rust-lang.org/reference/attributes/limits.html#the-recursion_limit-attribute +[so_crate_attr]: https://stackoverflow.com/questions/27454761/what-is-a-crate-attribute-and-where-do-i-add-it