fix(formatting): trailling space

Closes algolia#135

BREAKING CHANGE: Trailling 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>
```

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>`
     );
   });