From 1a0fa0a955abeb4c9a623c956f51b231c81e907d Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Thu, 16 Jun 2022 11:01:06 -0300 Subject: [PATCH 1/8] Update Fragment examples --- src/pages/en/core-concepts/astro-components.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 0a9d2dbfe7c41..9c085e1b83ccd 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -154,9 +154,7 @@ const items = ["Dog", "Cat", "Platypus"]; #### Fragments & Multiple Elements -Remember: an Astro component template can render multiple elements with no need to wrap everything in a single `
` or `<>`. - -However, when using an Astro JSX-like expression to dynamically create elements, you must wrap these multiple elements inside of a **Fragment** just like you would in JavaScript or JSX. Astro supports using either ` ` or `<> `. +An Astro component template can render multiple elements with no need to wrap everything in a single `
` or `<>`, unlike JavaScript or JSX. ```astro --- @@ -164,15 +162,18 @@ const items = ["Dog", "Cat", "Platypus"]; ---
    {items.map((item) => ( - <> -
  • Red {item}
    • -
  • Blue {item}
    • -
  • Green {item}
    • - +
  • Red {item}
    • +
  • Blue {item}
    • +
  • Green {item}
    • ))}
``` +However, Astro also supports using either ` ` or `<> `. This may be useful to add [`client:*` directives](/en/reference/client-directives/) and avoid wrapper elements, as in the following example: + +```astro + +``` ### Component Props From 6f5f7cfd58dbd9e293b6faa90b8ed8a2ae34d86a Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Thu, 16 Jun 2022 11:18:49 -0300 Subject: [PATCH 2/8] don't invent page links --- src/pages/en/core-concepts/astro-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 9c085e1b83ccd..97283ea4fb8e1 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -169,7 +169,7 @@ const items = ["Dog", "Cat", "Platypus"]; ``` -However, Astro also supports using either ` ` or `<> `. This may be useful to add [`client:*` directives](/en/reference/client-directives/) and avoid wrapper elements, as in the following example: +However, Astro also supports using either ` ` or `<> `. This may be useful to add [`client:*` directives](/en/reference/directives-reference/) and avoid wrapper elements, as in the following example: ```astro From 6f0c4effe11a3c118fadd1e5ee658acdeedad489 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 08:29:32 -0300 Subject: [PATCH 3/8] keep fragment wrapper in example Co-authored-by: Chris Swithinbank --- src/pages/en/core-concepts/astro-components.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 97283ea4fb8e1..d3d0d56305e2a 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -162,9 +162,11 @@ const items = ["Dog", "Cat", "Platypus"]; ---
    {items.map((item) => ( -
  • Red {item}
    • -
  • Blue {item}
    • -
  • Green {item}
    • + <> +
  • Red {item}
    • +
  • Blue {item}
    • +
  • Green {item}
    • + ))}
``` From b3e1ac9a84ab51acb19b1d99a14ca25efe9a7493 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 08:32:31 -0300 Subject: [PATCH 4/8] Patented Chris Explaining Example Co-authored-by: Chris Swithinbank --- src/pages/en/core-concepts/astro-components.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index d3d0d56305e2a..de0aa9a17f737 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -156,6 +156,16 @@ const items = ["Dog", "Cat", "Platypus"]; An Astro component template can render multiple elements with no need to wrap everything in a single `
` or `<>`, unlike JavaScript or JSX. +```astro +--- +// Template with multiple elements +--- +

No need to wrap elements in a single containing element.

+

Astro supports multiple root elements in a template.

+``` + +However, when using an expression to dynamically create multiple elements, you should wrap these elements inside a **Fragment** as you would in JavaScript or JSX. Astro supports using either ` ` or the shorthand `<> `. + ```astro --- const items = ["Dog", "Cat", "Platypus"]; From 2045f33719d08964c90560e89898000ff4ce50b6 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 08:34:49 -0300 Subject: [PATCH 5/8] more concise description Co-authored-by: Chris Swithinbank --- src/pages/en/core-concepts/astro-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index de0aa9a17f737..38a3bc86e6406 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -181,7 +181,7 @@ const items = ["Dog", "Cat", "Platypus"]; ``` -However, Astro also supports using either ` ` or `<> `. This may be useful to add [`client:*` directives](/en/reference/directives-reference/) and avoid wrapper elements, as in the following example: +Fragments can also be useful to avoid wrapper elements when adding [`client:*` directives](/en/reference/directives-reference/), as in the following example: ```astro From a5fecd94395cae409be32da6ae7885174d46f4d6 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 08:35:26 -0300 Subject: [PATCH 6/8] added script to example Co-authored-by: Chris Swithinbank --- src/pages/en/core-concepts/astro-components.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 38a3bc86e6406..adf471fe7fe78 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -184,6 +184,9 @@ const items = ["Dog", "Cat", "Platypus"]; Fragments can also be useful to avoid wrapper elements when adding [`client:*` directives](/en/reference/directives-reference/), as in the following example: ```astro +--- +const htmlString = '

Raw HTML content

'; +--- ``` From 3890b7243c09c0b0683fea42a4fe4eb7a9cfc695 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 08:38:57 -0300 Subject: [PATCH 7/8] fragment doesn't appear to be capitalized in other docs --- src/pages/en/core-concepts/astro-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index adf471fe7fe78..727a638f4f4ca 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -164,7 +164,7 @@ An Astro component template can render multiple elements with no need to wrap ev

Astro supports multiple root elements in a template.

``` -However, when using an expression to dynamically create multiple elements, you should wrap these elements inside a **Fragment** as you would in JavaScript or JSX. Astro supports using either ` ` or the shorthand `<> `. +However, when using an expression to dynamically create multiple elements, you should wrap these elements inside a **fragment** as you would in JavaScript or JSX. Astro supports using either ` ` or the shorthand `<> `. ```astro --- From e686b665f38b6493bb4219e084c429e9d6a71036 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 22 Jun 2022 11:14:31 -0300 Subject: [PATCH 8/8] Update src/pages/en/core-concepts/astro-components.md Co-authored-by: Chris Swithinbank --- src/pages/en/core-concepts/astro-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/en/core-concepts/astro-components.md b/src/pages/en/core-concepts/astro-components.md index 727a638f4f4ca..fa73a7693c56f 100644 --- a/src/pages/en/core-concepts/astro-components.md +++ b/src/pages/en/core-concepts/astro-components.md @@ -181,7 +181,7 @@ const items = ["Dog", "Cat", "Platypus"]; ``` -Fragments can also be useful to avoid wrapper elements when adding [`client:*` directives](/en/reference/directives-reference/), as in the following example: +Fragments can also be useful to avoid wrapper elements when adding [`set:*` directives](/en/reference/directives-reference/#sethtml), as in the following example: ```astro ---