Spaces between words and inline elements are lost

[davidtheclark]

If I start with this JSX:

<div>
  foo <strong>bar</strong> baz
</div>

That renders to React element that with children like this:

[ 
  'foo ',
  { type: 'strong', props: { children: [Object] }, .. },
  ' baz'
]

If I then pass that element through this module, I come out with this JSX — replacing some whitespaces with * to clarify:

<div>
  foo*
  <strong>
    bar
  </strong>
  *baz
</div>

The problem is that with the reformatting, those whitespace are actually lost. End-of-line and beginning-of-line whitespace is not meaningful, so the output HTML is actually this:

<div>
  foo<strong>bar</strong>baz
</div>

If introducing all the line breaks is the preference here, I think one fix would be to add spaces as strings, e.g.

<div>
  foo{' '}
  <strong>
    bar
  </strong>
  {' '}baz
</div>

[digital-flowers]

i think you can use this alternative function just pass inline:true to the options

import formatTreeNode from 'react-element-to-jsx-string/dist/formatter/formatTreeNode';
import parseReactElement from 'react-element-to-jsx-string/dist/parser/parseReactElement';

const jsxToString = (element, {
  filterProps = [],
  showDefaultProps = true,
  showFunctions = false,
  tabStop = 2,
  useBooleanShorthandSyntax = true,
  sortProps = true,
  inline = false,
  ...rest
}) => {
  const options = {
    filterProps,
    showDefaultProps,
    showFunctions,
    tabStop: inline ? 0 : tabStop,
    useBooleanShorthandSyntax,
    sortProps,
    ...rest
  };
  const str = formatTreeNode(parseReactElement(element, options), inline, 0, options);
  return inline ? str.replace(/\n/g, "").replace(/\s+/g, " ") : str;
};

Something like

jsxToString(element, {inline: true}));

[armandabric]

After some thought on this issue. I've found that the prettier project propose the same solution as you suggest @davidtheclark for the trailing space at the end of the line.

We could give a try on this solution. I'm little scare that the resulting string will be more difficult to read. It could be an issue for some use case.

[armandabric]

Here a PR that propose a solution to fix the issue #205

[davidtheclark]

I'm little scare that the resulting string will be more difficult to read.

I agree that it makes the output more difficult to read —— but at least it works as expected.

Thanks for looking into this 👍