From 0b2abe1978336d5eb36b3602e73a621c154294de Mon Sep 17 00:00:00 2001 From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Sun, 2 Mar 2025 18:03:34 +0330 Subject: [PATCH 1/3] Add dedicated docs for innerHTML and textContent --- src/middleware/legacy-routes-redirect.ts | 2 +- src/routes/reference/jsx-attributes/data.json | 3 ++- .../jsx-attributes/innerhtml-or-textcontent.mdx | 10 ---------- src/routes/reference/jsx-attributes/innerhtml.mdx | 8 ++++++++ src/routes/reference/jsx-attributes/textcontent.mdx | 8 ++++++++ 5 files changed, 19 insertions(+), 12 deletions(-) delete mode 100644 src/routes/reference/jsx-attributes/innerhtml-or-textcontent.mdx create mode 100644 src/routes/reference/jsx-attributes/innerhtml.mdx create mode 100644 src/routes/reference/jsx-attributes/textcontent.mdx diff --git a/src/middleware/legacy-routes-redirect.ts b/src/middleware/legacy-routes-redirect.ts index 2cc70a19c..73fcfffe2 100644 --- a/src/middleware/legacy-routes-redirect.ts +++ b/src/middleware/legacy-routes-redirect.ts @@ -59,7 +59,7 @@ const LEGACY_ROUTES = { "/references/api-reference/secondary-primitives/createSelector": "/reference/secondary-primitives/create-selector", "/references/api-reference/special-jsx-attributes/attr_": "/reference/jsx-attributes/attr", "/references/api-reference/special-jsx-attributes/classList": "/reference/jsx-attributes/classlist", - "/references/api-reference/special-jsx-attributes/innerHTML-or-textContent": "/reference/jsx-attributes/innerhtml-or-textcontent", + "/references/api-reference/special-jsx-attributes/innerHTML-or-textContent": "/reference/jsx-attributes/innerhtml", "/references/api-reference/special-jsx-attributes/on_": "/reference/jsx-attributes/on_", "/references/api-reference/special-jsx-attributes/on_-and-oncapture_": "/reference/jsx-attributes/on", diff --git a/src/routes/reference/jsx-attributes/data.json b/src/routes/reference/jsx-attributes/data.json index 92ca25a79..0cc993464 100644 --- a/src/routes/reference/jsx-attributes/data.json +++ b/src/routes/reference/jsx-attributes/data.json @@ -4,7 +4,8 @@ "attr.mdx", "classlist.mdx", "bool.mdx", - "innerhtml-or-textcontent.mdx", + "innerhtml.mdx", + "textcontent.mdx", "on_.mdx", "on.mdx", "once.mdx", diff --git a/src/routes/reference/jsx-attributes/innerhtml-or-textcontent.mdx b/src/routes/reference/jsx-attributes/innerhtml-or-textcontent.mdx deleted file mode 100644 index 59990daaa..000000000 --- a/src/routes/reference/jsx-attributes/innerhtml-or-textcontent.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: innerHTML or textContent -order: 2 ---- - -These work the same as their property equivalent. Set a string and they will be set. **Be careful!!** Setting `innerHTML` with any data that could be exposed to an end user as it could be a vector for malicious attack. `textContent` while generally not needed is actually a performance optimization when you know the children will only be text as it bypasses the generic diffing routine. - -```tsx -
-``` diff --git a/src/routes/reference/jsx-attributes/innerhtml.mdx b/src/routes/reference/jsx-attributes/innerhtml.mdx new file mode 100644 index 000000000..35b3f4074 --- /dev/null +++ b/src/routes/reference/jsx-attributes/innerhtml.mdx @@ -0,0 +1,8 @@ +--- +title: innerHTML +--- + +The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). +This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML. + +Note that using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities. diff --git a/src/routes/reference/jsx-attributes/textcontent.mdx b/src/routes/reference/jsx-attributes/textcontent.mdx new file mode 100644 index 000000000..bb80437b8 --- /dev/null +++ b/src/routes/reference/jsx-attributes/textcontent.mdx @@ -0,0 +1,8 @@ +--- +title: textContent +--- + +The `textContent` attribute is equivalent to the [`textContent` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). +This attribute replaces all existing child nodes of the element with a single text node containing the provided string. + +Using `textContent` can improve performance when the element's children are known to be exclusively text, as it bypasses the generic diffing process. From 2b90b63b16b438cdf9b630786baf3c0b180b5267 Mon Sep 17 00:00:00 2001 From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Mon, 3 Mar 2025 08:38:15 +0330 Subject: [PATCH 2/3] add callout --- src/routes/reference/jsx-attributes/innerhtml.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/routes/reference/jsx-attributes/innerhtml.mdx b/src/routes/reference/jsx-attributes/innerhtml.mdx index 35b3f4074..6f630ca88 100644 --- a/src/routes/reference/jsx-attributes/innerhtml.mdx +++ b/src/routes/reference/jsx-attributes/innerhtml.mdx @@ -5,4 +5,8 @@ title: innerHTML The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML. -Note that using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities. + + +Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities. + + From b17b697a6252acc0f80eadf28237958677476418 Mon Sep 17 00:00:00 2001 From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Sat, 8 Mar 2025 08:08:39 +0330 Subject: [PATCH 3/3] use :::caution --- src/routes/reference/jsx-attributes/innerhtml.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/reference/jsx-attributes/innerhtml.mdx b/src/routes/reference/jsx-attributes/innerhtml.mdx index 6f630ca88..9c8162a8c 100644 --- a/src/routes/reference/jsx-attributes/innerhtml.mdx +++ b/src/routes/reference/jsx-attributes/innerhtml.mdx @@ -5,8 +5,8 @@ title: innerHTML The `innerHTML` attribute is equivalent to the [`innerHTML` DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). This attribute replaces all existing nodes of the element with new nodes generated by parsing the provided string as HTML. - +:::caution Using `innerHTML` with unsanitized user-supplied data can introduce security vulnerabilities. - +:::