JSX children including {" "} are printed oddly

Related to https://github.com/prettier/prettier/issues/4223 and https://github.com/prettier/prettier/issues/4941.

I have some intentional {" "} children in this code, which prettier sometimes collapses and sometimes does not. The end result is that some explicit spaces (which are important in this code, but not normally super important in JSX) can be easy to miss, because they are converted to implicit spaces.

I’m not sure how to handle this without breaking all the expectations people have elsewhere, but I’m opening this issue to track this.

Prettier 1.15.1 Playground link

--parser babylon

Input:

const ClassDeclarationComponent: React.FunctionComponent<Props> = ({
  node,
  renderChild,
  renderChildren,
}) => {
  return (
    <>
      {renderChildren("decorators", <Break />)}
      {node.decorators && node.decorators.length > 0 ? <Break /> : null}

      {node.declare /* TS */ ? (
        <>
          <Word value="declare" />
          {" "}
        </>
      ) : null}
      {node.abstract /* TS */ ? (
        <>
          <Word value="abstract" />
          {" "}
        </>
      ) : null}
      <Word value="class" />
      {node.id ? (
        <>
          {" "}
          {renderChild("id")}
        </>
      ) : null}
      {renderChild("typeParameters")}
      {node.superClass ? (
        <>
          {" "}
          <Word value="extends" />
          {" "}
          {renderChild("superClass")}
          {renderChild("superTypeParameters")}
        </>
      ) : null}
      {node.implements ? (
        <>
          {" "}
          <Word value="implements" />
          {" "}
          {renderChildren("implements", ", ")}
        </>
      ) : null}
      {" "}
      {renderChild("body")}
    </>
  );
};

Output:

const ClassDeclarationComponent: React.FunctionComponent<Props> = ({
  node,
  renderChild,
  renderChildren
}) => {
  return (
    <>
      {renderChildren("decorators", <Break />)}
      {node.decorators && node.decorators.length > 0 ? <Break /> : null}
      {node.declare /* TS */ ? (
        <>
          <Word value="declare" />{" "}
        </>
      ) : null}
      {node.abstract /* TS */ ? (
        <>
          <Word value="abstract" />{" "}
        </>
      ) : null}
      <Word value="class" />
      {node.id ? <> {renderChild("id")}</> : null}
      {renderChild("typeParameters")}
      {node.superClass ? (
        <>
          {" "}
          <Word value="extends" /> {renderChild("superClass")}
          {renderChild("superTypeParameters")}
        </>
      ) : null}
      {node.implements ? (
        <>
          {" "}
          <Word value="implements" /> {renderChildren("implements", ", ")}
        </>
      ) : null}{" "}
      {renderChild("body")}
    </>
  );
};

Expected behavior:

Not sure.

[duailibe]

Maybe a good heuristic would be: if there aren’t any text in children, print them all in separate lines

EDIT: we do that already, so I guess I mean not treating {" "} as text if there isn’t more text

[suchipi]

I might even go as far as to also consider the following “no text in children”, even though there’s a string child other than the space:

<>
  {"foo"}
  <Something />
  {" "}
</>

With any change related to this, though, we need to be careful not to introduce situations where JSX formats differently on a second run. This is a low-priority issue anyway