docs: minor improvements

Author: Rel1cx

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.spec.ts

@@ -657,7 +657,7 @@ ruleTester.run(RULE_NAME, rule, {
         const [data, setData] = useState(() => 0);
         useEffect(() => {
           void async function () {
-            const ret = await fetch("https://example.com");
+            const ret = await fetch("https://eslint-react.xyz");
             setData(ret);
           }()
         }, []);

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.spec.ts

@@ -680,7 +680,7 @@ ruleTester.run(RULE_NAME, rule, {
         const [data, setData] = useState(() => 0);
         useLayoutEffect(() => {
           void async function () {
-            const ret = await fetch("https://example.com");
+            const ret = await fetch("https://eslint-react.xyz");
             setData(ret);
           }()
         }, []);

packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts

@@ -51,7 +51,7 @@ ruleTester.run(RULE_NAME, rule, {
   valid: [
     ...allValid,
     "<App foo='test'>{/* valid */}</App>",
-    "<strong>&nbsp;https://www.example.com/attachment/download/1</strong>",
+    "<strong>&nbsp;https://www.eslint-react.xyz/attachment/download/1</strong>",
     "<App /* valid */ placeholder={'foo'}/>",
     "</* valid */></>",
   ],

website/pages/docs/configurations.mdx

@@ -11,7 +11,9 @@ ESLint React provides the following configurations:
 (type: `string`, default: `"react"`)
 
 The source where React is imported from.\
-This allows to specify a custom import location for React when not using the official distribution (e.g. `@pika/react`, etc).
+This allows to specify a custom import location for React when not using the official distribution.
+
+(e.g. `@pika/react`, etc)
 
 ### `jsxPragma`
 
@@ -56,17 +58,21 @@ will be evaluated as an `h3`. If no `polymorphicPropName` is set, then the compo
 
 A object of aliases for React built-in hooks. ESLint React will recognize these aliases as equivalent to the built-in hooks in all its rules.
 
-(e.g. `{ useLayoutEffect: ["useIsomorphicLayoutEffect"] }`).
+(e.g. `{ useLayoutEffect: ["useIsomorphicLayoutEffect"] }`)
 
 ### `additionalComponents`
 
 (type: `{ name: string; as: string; attributes: { name: string; as?: string; defaultValue?: string }[] }[]`)
 
-<Callout type="warning">This is an experimental feature that can be unstable and lacks comprehensive documentation.</Callout>
+<Callout type="info">If `polymorphicPropName` meets the requirements, always consider using it instead of this setting, as it is simpler and more efficient.</Callout>
+
+<Callout type="warning">This is an experimental feature that can be unstable and lacks documentation.</Callout>
+
+An array of components and its attributes mapping. It allows the related rules to do even more comprehensive analysis on them than just using the `polymorphicPropName` setting. You can also provide default values for attributes here, that will be used when that attribute is not present in the component.
 
-An array of user-defined components, used to inform the ESLint React plugins how to treat these components during checks.
+(e.g. The `[{ name: "Link", as: "a", attributes: [{ name: "to", as: "href" }] }]` demystifies a `<Link to="https://eslint-react.xyz" />` as an `<a href="https://eslint-react.xyz" />` so that the `dom/no-unsafe-target-blank` rule can perform checks on it)
 
-This can be incredibly helpful for rules to understand the semantics of user-defined components and their props (e.g. `<Link to="/home" />`, `<Box as="form" />`, `<Button component="a" />`).
+(e.g. The `[{ name: "EmbedContent", as: "iframe", attributes: [{ name: "sandbox", defaultValue: "" }] }]` demystifies an `<EmbedContent src="https://eslint-react.xyz" />` as an `<iframe src="https://eslint-react.xyz" sandbox="" />` so that both the `dom/no-missing-sandbox` and `dom/no-unsafe-sandbox` rules can perform checks on it)
 
 ## Examples
 

website/pages/docs/rules/dom-no-missing-iframe-sandbox.md

@@ -39,8 +39,8 @@ This rule checks all React iframe elements and verifies that there is sandbox at
 import React from "react";
 
 function MyComponent() {
-  return <iframe src="https://example.com" />;
-  //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  return <iframe src="https://eslint-react.xyz" />;
+  //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   //     - Missing 'sandbox' attribute on iframe component.
 }
 ```
@@ -51,7 +51,7 @@ function MyComponent() {
 import React from "react";
 
 function MyComponent() {
-  return <iframe src="https://example.com" sandbox="allow-popups" />;
+  return <iframe src="https://eslint-react.xyz" sandbox="allow-popups" />;
 }
 ```
 

website/pages/docs/rules/dom-no-unsafe-iframe-sandbox.md

@@ -41,7 +41,7 @@ import React from "react";
 function MyComponent() {
   return (
     <iframe
-      src="https://example.com"
+      src="https://eslint-react.xyz"
       sandbox="allow-scripts allow-same-origin"
     />
   );
@@ -54,7 +54,7 @@ function MyComponent() {
 import React from "react";
 
 function MyComponent() {
-  return <iframe src="https://example.com" sandbox="allow-popups" />;
+  return <iframe src="https://eslint-react.xyz" sandbox="allow-popups" />;
 }
 ```
 

website/pages/docs/rules/dom-no-unsafe-target-blank.md

@@ -36,7 +36,7 @@ import React from "react";
 
 function MyComponent() {
   return (
-    <a href="https://example.com" target="_blank">
+    <a href="https://eslint-react.xyz" target="_blank">
       Example
     </a>
   );
@@ -50,7 +50,7 @@ import React from "react";
 
 function MyComponent() {
   return (
-    <a href="https://example.com" target="_blank" rel="noreferrer noopener">
+    <a href="https://eslint-react.xyz" target="_blank" rel="noreferrer noopener">
       Example
     </a>
   );

website/pages/docs/rules/hooks-extra-no-direct-set-state-in-use-effect.md

@@ -79,7 +79,7 @@ export default function RemoteContent() {
 
   useEffect(() => {
     let discarded = false;
-    fetch("https://example.com/content")
+    fetch("https://eslint-react.xyz/content")
       .then(resp => resp.text())
       .then(text => {
         if (discarded) return;

website/pages/docs/rules/hooks-extra-no-direct-set-state-in-use-layout-effect.md

@@ -73,7 +73,7 @@ export default function RemoteContent() {
 
   useLayoutEffect(() => {
     let discarded = false;
-    fetch("https://example.com/content")
+    fetch("https://eslint-react.xyz/content")
       .then(resp => resp.text())
       .then(text => {
         if (discarded) return;