Merge pull request #122 from solidjs-community/fix/show-fragments

Check JSXFragment in most places where checking JSXElement, fixes #106.

Author: joshwilsonvu

docs/prefer-for.md

@@ -33,6 +33,20 @@ let Component = (props) => (
   </ol>
 );
 
+let Component = (props) => (
+  <>
+    {props.data.map((d) => (
+      <li>{d.text}</li>
+    ))}
+  </>
+);
+// after eslint --fix:
+let Component = (props) => (
+  <>
+    <For each={props.data}>{(d) => <li>{d.text}</li>}</For>
+  </>
+);
+ 
 let Component = (props) => (
   <ol>
     {props.data.map((d) => (

docs/prefer-show.md

@@ -33,6 +33,20 @@ function Component(props) {
   );
 }
 
+function Component(props) {
+  return <>{props.cond && <span>Content</span>}</>;
+}
+// after eslint --fix:
+function Component(props) {
+  return (
+    <>
+      <Show when={props.cond}>
+        <span>Content</span>
+      </Show>
+    </>
+  );
+}
+ 
 function Component(props) {
   return <div>{props.cond ? <span>Content</span> : <span>Fallback</span>}</div>;
 }

src/rules/prefer-for.ts

@@ -1,5 +1,5 @@
 import { TSESTree as T, ESLintUtils, ASTUtils } from "@typescript-eslint/utils";
-import { isFunctionNode } from "../utils";
+import { isFunctionNode, isJSXElementOrFragment } from "../utils";
 
 const createRule = ESLintUtils.RuleCreator.withoutDocs;
 const { getPropertyName } = ASTUtils;
@@ -55,7 +55,7 @@ export default createRule({
         const callOrChain = node.parent?.type === "ChainExpression" ? node.parent : node;
         if (
           callOrChain.parent?.type === "JSXExpressionContainer" &&
-          callOrChain.parent.parent?.type === "JSXElement"
+          isJSXElementOrFragment(callOrChain.parent.parent)
         ) {
           // check for Array.prototype.map in JSX
           if (

src/rules/prefer-show.ts

@@ -1,4 +1,5 @@
 import { TSESTree as T, ESLintUtils } from "@typescript-eslint/utils";
+import { isJSXElementOrFragment } from "../utils";
 
 const createRule = ESLintUtils.RuleCreator.withoutDocs;
 
@@ -25,7 +26,7 @@ export default createRule({
     const sourceCode = context.getSourceCode();
     const putIntoJSX = (node: T.Node): string => {
       const text = sourceCode.getText(node);
-      return node.type === "JSXElement" || node.type === "JSXFragment" ? text : `{${text}}`;
+      return isJSXElementOrFragment(node) ? text : `{${text}}`;
     };
 
     const logicalExpressionHandler = (node: T.LogicalExpression) => {
@@ -36,7 +37,7 @@ export default createRule({
           fix: (fixer) =>
             fixer.replaceText(
               node.parent?.type === "JSXExpressionContainer" &&
-                node.parent.parent?.type === "JSXElement"
+                isJSXElementOrFragment(node.parent.parent)
                 ? node.parent
                 : node,
               `<Show when={${sourceCode.getText(node.left)}}>${putIntoJSX(node.right)}</Show>`
@@ -55,7 +56,7 @@ export default createRule({
           fix: (fixer) =>
             fixer.replaceText(
               node.parent?.type === "JSXExpressionContainer" &&
-                node.parent.parent?.type === "JSXElement"
+                isJSXElementOrFragment(node.parent.parent)
                 ? node.parent
                 : node,
               `<Show when={${sourceCode.getText(node.test)}} fallback={${sourceCode.getText(
@@ -68,7 +69,7 @@ export default createRule({
 
     return {
       JSXExpressionContainer(node) {
-        if (node.parent?.type !== "JSXElement") {
+        if (!isJSXElementOrFragment(node.parent)) {
           return;
         }
         if (node.expression.type === "LogicalExpression") {

src/rules/reactivity.ts

@@ -16,6 +16,7 @@ import {
   isDOMElementName,
   ignoreTransparentWrappers,
   getFunctionName,
+  isJSXElementOrFragment,
 } from "../utils";
 
 const { findVariable, getFunctionHeadLocation } = ASTUtils;
@@ -527,7 +528,7 @@ export default createRule<Options, MessageIds>({
             if (
               // The signal is not being called and is being used as a props.children, where calling
               // the signal was the likely intent.
-              elementOrAttribute?.type === "JSXElement" ||
+              isJSXElementOrFragment(elementOrAttribute) ||
               // We can't say for sure about user components, but we know for a fact that a signal
               // should not be passed to a non-event handler DOM element attribute without calling it.
               (elementOrAttribute?.type === "JSXAttribute" &&
@@ -886,7 +887,7 @@ export default createRule<Options, MessageIds>({
           // to the DOM. This is semantically a "called function", so it's fine to read reactive
           // variables here.
           pushTrackedScope(node.expression, "called-function");
-        } else if (node.parent?.type === "JSXElement" && isFunctionNode(node.expression)) {
+        } else if (isJSXElementOrFragment(node.parent) && isFunctionNode(node.expression)) {
           pushTrackedScope(node.expression, "function"); // functions inline in JSX containers will be tracked
         } else {
           pushTrackedScope(node.expression, "expression");

src/utils.ts

@@ -97,6 +97,11 @@ export const isProgramOrFunctionNode = (
   node: T.Node | null | undefined
 ): node is ProgramOrFunctionNode => !!node && PROGRAM_OR_FUNCTION_TYPES.includes(node.type);
 
+export const isJSXElementOrFragment = (
+  node: T.Node | null | undefined
+): node is T.JSXElement | T.JSXFragment =>
+  node?.type === "JSXElement" || node?.type === "JSXFragment";
+
 export const getFunctionName = (node: FunctionNode): string | null => {
   if (
     (node.type === "FunctionDeclaration" || node.type === "FunctionExpression") &&

test/rules/prefer-for.test.ts

@@ -17,6 +17,11 @@ export const cases = run("prefer-for", rule, {
       errors: [{ messageId: "preferFor" }],
       output: `let Component = (props) => <ol><For each={props.data}>{d => <li>{d.text}</li>}</For></ol>;`,
     },
+    {
+      code: `let Component = (props) => <>{props.data.map(d => <li>{d.text}</li>)}</>;`,
+      errors: [{ messageId: "preferFor" }],
+      output: `let Component = (props) => <><For each={props.data}>{d => <li>{d.text}</li>}</For></>;`,
+    },
     {
       code: `let Component = (props) => <ol>{props.data.map(d => <li key={d.id}>{d.text}</li>)}</ol>;`,
       errors: [{ messageId: "preferFor" }],

test/rules/prefer-show.test.ts

@@ -22,6 +22,17 @@ export const cases = run("prefer-show", rule, {
         return <div><Show when={props.cond}><span>Content</span></Show></div>;
       }`,
     },
+    {
+      code: `
+      function Component(props) {
+        return <>{props.cond && <span>Content</span>}</>;
+      }`,
+      errors: [{ messageId: "preferShowAnd" }],
+      output: `
+      function Component(props) {
+        return <><Show when={props.cond}><span>Content</span></Show></>;
+      }`,
+    },
     {
       code: `
       function Component(props) {