Update jsx-dollar rule to handle two-child case

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/rules/jsx-dollar.mdx

@@ -53,51 +53,44 @@ import React from "react";
 
 function MyComponent({ user }) {
   return <div>Hello ${user.name}</div>;
-  //          ^^^^^^^^^^^^^^
+  //          ^^^^^^^
   //          - Possible unnecessary '$' character before expression.
 }
 ```
 
-### Passing
-
 ```tsx
 import React from "react";
 
 function MyComponent({ user }) {
-  return `Hello ${user.name}`;
+  return <div>${user.name} is your name</div>;
+  //          ^
+  //          - Possible unnecessary '$' character before expression.
 }
 ```
 
+### Passing
+
 ```tsx
 import React from "react";
 
 function MyComponent({ user }) {
-  return <div>Hello {user.name}</div>;
+  return `Hello ${user.name}`;
 }
 ```
 
 ```tsx
 import React from "react";
 
-function MyComponent({ price }) {
-  return <div>${price}</div>;
+function MyComponent({ user }) {
+  return <div>Hello {user.name}</div>;
 }
 ```
 
-### Legitimate uses
-
-If you legitimately need to output a dollar sign before an expression (for example, to display a price), you can wrap it in a template literal or use a string literal.
-
 ```tsx
 import React from "react";
 
 function MyComponent({ price }) {
-  // 🟢 Good: This is a legitimate use of the '$' character.
-  return <div>{`$${price}`}</div>;
-}
-
-function AnotherComponent({ price }) {
-  // 🟢 Good: Another legitimate way to display a price.
+  // 🟢 Good: If there are only two children (the dollar sign and the expression) it doesn't seem to be split from a template literal
   return <div>${price}</div>;
 }
 ```

packages/plugins/eslint-plugin-react-x/src/rules/jsx-dollar.spec.ts

@@ -45,6 +45,50 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: tsx`
+        const App = (props) => {
+            return <div>\${props.name} is your name</div>;
+        };
+      `,
+      errors: [
+        {
+          messageId: "jsxDollar",
+          suggestions: [
+            {
+              messageId: "removeDollarSign",
+              output: tsx`
+                const App = (props) => {
+                    return <div>{props.name} is your name</div>;
+                };
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: tsx`
+        const App = (props) => {
+            return <div>Hello \${props.name} is your name</div>;
+        };
+      `,
+      errors: [
+        {
+          messageId: "jsxDollar",
+          suggestions: [
+            {
+              messageId: "removeDollarSign",
+              output: tsx`
+                const App = (props) => {
+                    return <div>Hello {props.name} is your name</div>;
+                };
+              `,
+            },
+          ],
+        },
+      ],
+    },
   ],
   valid: [
     ...allValid,

packages/plugins/eslint-plugin-react-x/src/rules/jsx-dollar.ts

@@ -41,9 +41,11 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
    */
   const visitorFunction = (node: TSESTree.JSXElement | TSESTree.JSXFragment) => {
     for (const [index, child] of node.children.entries()) {
-      if (child.type !== T.JSXText || child.raw === "$" || !child.raw.endsWith("$")) continue;
+      if (child.type !== T.JSXText || !child.value.endsWith("$")) continue;
       // Ensure the next sibling is a JSXExpressionContainer
       if (node.children[index + 1]?.type !== T.JSXExpressionContainer) continue;
+      // Skip if there are only two children (the dollar sign and the expression) it doesn't seem to be split from a template literal
+      if (child.value === "$" && node.children.length === 2) continue;
       context.report({
         messageId: "jsxDollar",
         node: child,