strange fix for jsx-no-leaked-render

[lukesmurray]

Input File

import { css } from "twin.macro";

export interface sortIndicatorProps {
  direction?: "up" | "down";
  removeFromLayout?: boolean;
  className?: string;
}

export const sortIndicatorMarginLeft = "-1em";

export function SortIndicator({
  direction,
  removeFromLayout = true,
  className,
}: sortIndicatorProps) {
  return (
    <span
      className={className}
      css={[
        css`
          font-size: 0.8em;
          &:first-of-type {
            padding-right: 0.5ch;
          }
        `,
        removeFromLayout &&
          css`
            position: absolute;
            margin-left: ${sortIndicatorMarginLeft};
          `,
      ]}>
      {direction ? (direction === "down" ? "▼" : "▲") : ""}
    </span>
  );
}

output file

import { css } from "twin.macro";

export interface sortIndicatorProps {
  direction?: "up" | "down";
  removeFromLayout?: boolean;
  className?: string;
}

export const sortIndicatorMarginLeft = "-1em";

export function SortIndicator({
  direction,
  removeFromLayout = true,
  className,
}: sortIndicatorProps) {
  return (
    <span
      className={className}
      css={[
        css`
          font-size: 0.8em;
          &:first-of-type {
            padding-right: 0.5ch;
          }
        `,
        removeFromLayout &&
          css`
            position: absolute;
            margin-left: ${sortIndicatorMarginLeft};
          `,
      ]}>
      {/* lol what is this ↓↓↓↓↓ */}
      {!!!!!!!!!!!!!!!!!!!!direction && direction === "down" && "▼"}
    </span>
  );
}

eslint rule setup

    "react/jsx-no-leaked-render": [
      // enforce that values are coerced to booleans in jsx conditionals
      "error",
      {
        validStrategies: ["coerce"], // coerce to boolean e.g. `<div>{count && title}</div>` becomes `<div>{!!count && title}</div>`
      },
    ],

[lukesmurray]

Every time I run eslint --fix the exclamation marks get longer 😂

      {!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!direction &&
        direction === "down" &&
        "▼"}

[lukesmurray]

In general fix probably shouldn't change behavior. If you have validStrategies: ["coerce"] the autofix removes the end of the ternary.

For example I have a component that displays Loading {message} or Loading based on a condition. The autofix removes the branch that displays Loading

input

  containerName.length > 0
    ? `Loading ${containerName.toLocaleLowerCase()}`
    : "Loading"

output

  !!containerName.length > 0 &&
  `Loading ${containerName.toLocaleLowerCase()}`

This is a small example. It will also remove entire component trees.

[lukesmurray]

The exclamation marks show up on strings and nested values.

                            !!!!!!!!!!!!!!!!!!column.isSorted && column.isSortedDesc && "down"

[ljharb]

lol this is clearly a bug. cc @Belco90

[lukesmurray]

let me know if you have trouble reproducing. to be clear there are two bugs here. the unnecessary exclamation marks and the deletion of branches from ternary expressions

[Belco90]

the unnecessary exclamation marks and the deletion of branches from ternary expressions

No idea what's causing the former! But the latter it's easy to fix. I'm on it.

[ljharb]

@Belco90 thanks! i'd love to publish a patch release soon, and i'd love to include fixes for the latest no-leaked-render issues :-)

[Belco90]

@ljharb I got the two issues reported here fixed + #3292 partially fixed. Still figuring out how to prevent reporting when TS types are involved.

[Belco90]

Sorry, I forgot to mention: I can create a PR with those fixes while I figure out the last one.