fix(formatting): trailing space

Closes #135

BREAKING CHANGE: Trailing are now preserved. In some rare case, `react-element-to-jsx-string` failed to respect the JSX specs for the trailing space. Event is the space were in the final output. There were silentrly ignored by JSX parser. This commit fix this bug by protecting the trailing space in the output.

If we take the JSX:
```jsx
<div>
  foo <strong>bar</strong> baz
</div>
```

Before it was converted to (the trailing space are replace by `*` for the readability):
```html
<div>
  foo*
  <strong>
    bar
  </strong>
  *baz
</div>
```

Now there are preserved:
```html
<div>
  foo{' '}
  <strong>
    bar
  </strong>
  {' '}baz
</div>
```

Author: armandabric

src/formatter/formatProp.js

@@ -39,7 +39,7 @@ export default (
     formattedPropValue === '{false}' &&
     !hasDefaultValue
   ) {
-    // If a boolean is false an is not different from it's default, we do not render the attribute
+    // If a boolean is false and not different from it's default, we do not render the attribute
     attributeFormattedInline = '';
     attributeFormattedMultiline = '';
   } else if (useBooleanShorthandSyntax && formattedPropValue === '{true}') {

src/formatter/formatTreeNode.js

@@ -16,6 +16,19 @@ const escape = (s: string) => {
   return `{\`${s}\`}`;
 };
 
+const preserveTrailingSpace = (s: string) => {
+  let result = s;
+  if (result.endsWith(' ')) {
+    result = result.replace(/^(\S*)(\s*)$/, "$1{'$2'}");
+  }
+
+  if (result.startsWith(' ')) {
+    result = result.replace(/^(\s*)(\S*)$/, "{'$1'}$2");
+  }
+
+  return result;
+};
+
 export default (
   node: TreeNode,
   inline: boolean,
@@ -27,7 +40,9 @@ export default (
   }
 
   if (node.type === 'string') {
-    return node.value ? escape(String(node.value)) : '';
+    return node.value
+      ? `${preserveTrailingSpace(escape(String(node.value)))}`
+      : '';
   }
 
   if (node.type === 'ReactElement') {

src/index.spec.js

@@ -556,6 +556,22 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
+  it('reactElementToJSXString(<div>\nfoo <span>bar</span> baz\n</div>)', () => {
+    expect(
+      reactElementToJSXString(
+        <div>
+          foo <span>bar</span> baz
+        </div>
+      )
+    ).toEqual(`<div>
+  foo{' '}
+  <span>
+    bar
+  </span>
+  {' '}baz
+</div>`);
+  });
+
   it('reactElementToJSXString(<div a={[1, 2, 3, 4]} />', () => {
     expect(reactElementToJSXString(<div a={[1, 2, 3, 4]} />)).toEqual(
       `<div
@@ -722,7 +738,9 @@ describe('reactElementToJSXString(ReactElement)', () => {
 
   it('reactElementToJSXString(<div> {false} </div>)', () => {
     expect(reactElementToJSXString(<div> {false} </div>)).toEqual(
-      '<div>\n    \n</div>'
+      `<div>
+  {'  '}
+</div>`
     );
   });