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

Check JSXFragment in most places where checking JSXElement, fixes #106.
solidjs-community · Dec 30, 2023 · 16a5209 · 16a5209
2 parents 85c4f5a + 794a64a
commit 16a5209
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 8 deletions.
diff --git a/docs/prefer-for.md b/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) => (

diff --git a/docs/prefer-show.md b/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>;
 }

diff --git a/src/rules/prefer-for.ts b/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 (

diff --git a/src/rules/prefer-show.ts b/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") {

diff --git a/src/rules/reactivity.ts b/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");

diff --git a/src/utils.ts b/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") &&

diff --git a/test/rules/prefer-for.test.ts b/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" }],

diff --git a/test/rules/prefer-show.test.ts b/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) {