From 1a97e7fe4924e53b8f4c60f655cb8ea9d3ac1fdf Mon Sep 17 00:00:00 2001 From: Jack Farley Date: Sat, 6 May 2023 00:44:01 +1200 Subject: [PATCH 01/10] Add escaping of curly braces to docs --- site/content/docs/03-template-syntax.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 8038e972bee3..27b6686cfcd0 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -149,6 +149,14 @@ Text can also contain JavaScript expressions:
{(/^[A-Za-z ]+$/).test(value) ? x : y}
``` +--- + +To include regular curly braces in the HTML, they must either be included as string Javascript expressions or their [HTML Entity](https://developer.mozilla.org/docs/Glossary/Entity) strings used + +```html +{'{'} in curly braces {'}'} or { in curly braces } or { in curly braces } +``` + ### Comments --- From ce1f58ab0024c1a4da0bf467d857fad9b628b3f7 Mon Sep 17 00:00:00 2001 From: Jack Farley Date: Fri, 26 May 2023 20:54:42 +1200 Subject: [PATCH 02/10] Update 03-template-syntax.md Update text inline with PR discussions --- site/content/docs/03-template-syntax.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 27b6686cfcd0..fc511ab8e89f 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -151,12 +151,14 @@ Text can also contain JavaScript expressions: --- -To include regular curly braces in the HTML, they must either be included as string Javascript expressions or their [HTML Entity](https://developer.mozilla.org/docs/Glossary/Entity) strings used +To include regular curly braces in the HTML, use their [HTML Entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. ```html -{'{'} in curly braces {'}'} or { in curly braces } or { in curly braces } +{ in curly braces { { in curly braces } or { in curly braces } +{ it also works only escaping the start curly brace } ``` + ### Comments --- From 80d83f0dc6b14f69d0879a0757a06a3941b5113a Mon Sep 17 00:00:00 2001 From: Jack Farley Date: Fri, 26 May 2023 20:55:33 +1200 Subject: [PATCH 03/10] Update 03-template-syntax.md Remove hr at end of section to be inline with rest of document --- site/content/docs/03-template-syntax.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index fc511ab8e89f..573681f7d2e2 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -128,8 +128,6 @@ An element or component can have multiple spread attributes, interspersed with r > Another example is ``. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `` to make the image lazily loaded. ---- - ### Text expressions ```sv From 3a334fbf0f25871d5c8387e89e1fa0caf8f54e4f Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:54:18 -0700 Subject: [PATCH 04/10] Update documentation/docs/02-template-syntax/02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index b1d950864609..4b2ed780c25f 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -120,7 +120,7 @@ Text can also contain JavaScript expressions:
{/^[A-Za-z ]+$/.test(value) ? x : y}
``` -To include regular curly braces in the HTML, use their [HTML Entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. +To include regular curly braces in the HTML, use their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. ```svelte

{ in curly braces { { in curly braces } or { in curly braces }

From 24ebf455d6e122028daa09cae113fe2f362c5dbe Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 15:55:25 -0700 Subject: [PATCH 05/10] Update documentation/docs/02-template-syntax/02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index 4b2ed780c25f..a80b7ca995bf 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -120,7 +120,7 @@ Text can also contain JavaScript expressions:
{/^[A-Za-z ]+$/.test(value) ? x : y}
``` -To include regular curly braces in the HTML, use their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. +> Curly braces can be included in the HTML by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. ```svelte

{ in curly braces { { in curly braces } or { in curly braces }

From c721fe05301ccefee8ccc4595171314b464a6dc7 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:04:54 -0700 Subject: [PATCH 06/10] move curly brace explanation above regex discussion --- .../docs/02-template-syntax/02-basic-markup.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index a80b7ca995bf..43a064b4e203 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -109,7 +109,14 @@ An element or component can have multiple spread attributes, interspersed with r {expression} ``` -Text can also contain JavaScript expressions: +Curly braces can be included in the HTML by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. + +```svelte +

{ in curly braces { { in curly braces } or { in curly braces }

+

{ it also works only escaping the start curly brace }

+``` + +Text can also contain the result of JavaScript expressions. > If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses. @@ -120,13 +127,6 @@ Text can also contain JavaScript expressions:
{/^[A-Za-z ]+$/.test(value) ? x : y}
``` -> Curly braces can be included in the HTML by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. - -```svelte -

{ in curly braces { { in curly braces } or { in curly braces }

-

{ it also works only escaping the start curly brace }

-``` - ## Comments You can use HTML comments inside components. From e73093ad9c3f3f83d161c4c5b74017cb26b33647 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:06:58 -0700 Subject: [PATCH 07/10] Update documentation/docs/02-template-syntax/02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index 43a064b4e203..31cf5525362e 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -109,7 +109,7 @@ An element or component can have multiple spread attributes, interspersed with r {expression} ``` -Curly braces can be included in the HTML by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. +Curly braces can be included by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. ```svelte

{ in curly braces { { in curly braces } or { in curly braces }

From 9b33d6f5b9ba96221a34492671a328b38eb8e642 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:13:04 -0700 Subject: [PATCH 08/10] Update documentation/docs/02-template-syntax/02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index 31cf5525362e..96543a093c81 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -109,7 +109,7 @@ An element or component can have multiple spread attributes, interspersed with r {expression} ``` -Curly braces can be included by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings. +Curly braces can be included by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`. ```svelte

{ in curly braces { { in curly braces } or { in curly braces }

From d9919715c7bc961338d5051e3580af0a462cdd58 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:13:30 -0700 Subject: [PATCH 09/10] Update documentation/docs/02-template-syntax/02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index 96543a093c81..c8bd76e5a52f 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -111,11 +111,6 @@ An element or component can have multiple spread attributes, interspersed with r Curly braces can be included by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`. -```svelte -

{ in curly braces { { in curly braces } or { in curly braces }

-

{ it also works only escaping the start curly brace }

-``` - Text can also contain the result of JavaScript expressions. > If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses. From 255f6a4fcbe8b937f69b7e6516145c79a7521cec Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:21:00 -0700 Subject: [PATCH 10/10] Update 02-basic-markup.md --- documentation/docs/02-template-syntax/02-basic-markup.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md index c8bd76e5a52f..45bb30b633d4 100644 --- a/documentation/docs/02-template-syntax/02-basic-markup.md +++ b/documentation/docs/02-template-syntax/02-basic-markup.md @@ -105,13 +105,13 @@ An element or component can have multiple spread attributes, interspersed with r ## Text expressions +A JavaScript expression can be included as text by surrounding it with curly braces. + ```svelte {expression} ``` -Curly braces can be included by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`. - -Text can also contain the result of JavaScript expressions. +Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`. > If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.