prettier: Consider breaking on text in JSX

Would it be possible to break on text inside JSX?

At the moment it seems like we only break around tags. This can cause some unusual formatting when including text with bold/italic tags. We use paragraphs of text with formatting in our Storybook documentation.

Input:

const Abc = () => {
  return (
    <div>
      Please state your <b>name</b> and <b>occupation</b> for the board of directors.
    </div>
  );
}

Output:

const Abc = () => {
  return (
    <div>
      Please state your
      {" "}
      <b>name</b>
      {" "}
      and
      {" "}
      <b>occupation</b>
      {" "}
      for the board of directors.
    </div>
  );
};

Expected:

const Abc = () => {
  return (
    <div>
      Please state your <b>name</b> and <b>occupation</b> for the board of
      directors.
    </div>
  );
}

https://prettier.github.io/prettier/#{"content"%3A"const Boo %3D () %3D> {\n return (\n <div>\n Please state your <b>name<%2Fb> and <b>occupation<%2Fb> for the board of directors.\n <%2Fdiv>\n )%3B\n}\n\nconst Yay %3D () %3D> {\n return (\n <div>\n Please state your <b>name<%2Fb> and <b>occupation<%2Fb> for the board\n of directors.\n <%2Fdiv>\n )%3B\n}\n"%2C"options"%3A{"printWidth"%3A80%2C"tabWidth"%3A2%2C"singleQuote"%3Afalse%2C"trailingComma"%3A"none"%2C"bracketSpacing"%3Atrue%2C"jsxBracketSameLine"%3Afalse%2C"parser"%3A"babylon"%2C"doc"%3Afalse}}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (5 by maintainers)

Most upvoted comments

I have an open PR (https://github.com/prettier/prettier/pull/1120) which adds a new fill primitive to Prettier that allows us to wrap text and elements with JSX.

I’m hopefully that we can use it to automatically fix the issue raised here, and it should be flexible enough to re-use for other code structures, such as +.

karl on Apr 20, 2017

src/doc-builders.js has the builder functions to generate the “doc” intermediate representation.

src/doc-printer.js is the faithful implementation of the paper

vjeux on Mar 15, 2017

I’ve had a play around with the code, and while that didn’t get me very far I did find something interesting in Walder’s paper that inspired Prettier (http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf). On page 15 it includes an example of formatting XML where it wraps text to include as many words as it can on a line before breaking.

I wonder if we could add support for this to Prettier? So that I could specify a fillwords group which tries to fit as many children on a line as possible, rather than splitting every child onto a new line as the current group does.

I don’t think I know enough about the code base to work out how to add this myself. I’m not quite clear how Walder’s paper maps to the Prettier code.

karl on Mar 14, 2017