fix: jsx rule with fragment (QwikDev#2364)

fixes QwikDev#2177

packages/eslint-plugin-qwik/qwik.unit.ts

@@ -271,7 +271,7 @@ export default component$(() => {
 `,
       `
         import { component$ } from "@builder.io/qwik";
-        
+
         export interface Props {
           serializableTuple: [string, number, boolean];
         }
@@ -445,7 +445,7 @@ export default component$(() => {
       {
         code: `
         import { component$ } from "@builder.io/qwik";
-        
+
         export interface Props {
           nonserializableTuple: [string, number, boolean, Function];
         }
@@ -463,4 +463,28 @@ export default component$(() => {
   });
 });
 
+test('single-jsx-root', () => {
+  ruleTester.run('my-rule', rules['single-jsx-root'] as any, {
+    valid: [``],
+    invalid: [
+      {
+        code: `export const HelloWorld = component$(async () => {
+            return isLoading ? <>Loading...</> : <div>The value is loaded</div>;
+          });`,
+        errors: [
+          'Components in Qwik must have a single JSX root element. Your component has multiple roots on lines: 2, 2. Rewrite your component with a single root such as (`return <>{...}</>`.) and keep all JSX within',
+        ],
+      },
+      {
+        code: `export const HelloWorld = component$(async () => {
+          return isLoading ? <div>Loading...</div> : <div>The value is loaded</div>
+          });`,
+        errors: [
+          'Components in Qwik must have a single JSX root element. Your component has multiple roots on lines: 2, 2. Rewrite your component with a single root such as (`return <>{...}</>`.) and keep all JSX within',
+        ],
+      },
+    ],
+  });
+});
+
 export {};

packages/eslint-plugin-qwik/src/singleJsxRoot.ts

@@ -67,6 +67,12 @@ export const singleJsxRoot: Rule.RuleModule = {
           current.depth--;
         }
       },
+      'JSXFragment:exit'() {
+        const current = stack[stack.length - 1];
+        if (current) {
+          current.depth--;
+        }
+      },
     };
   },
 };