fix(whitespace): handle {true} {false}

fixes #6
fixes #7

Author: vvo

README.md

@@ -22,6 +22,7 @@ Features:
 - sort object keys in a deterministic order (`o={{a: 1, b:2}} === o={{b:2, a:1}}`)
 - handle `ref` and `key` attributes, they are always on top of props
 - React's documentation indent style for JSX
+- Display whitespace as `<whitespace>` when needed
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

index-test.js

@@ -346,4 +346,48 @@ describe(`reactElementToJSXString(ReactElement)`, () => {
 
     expect(reactElementToJSXString(element)).toEqual(`<div />`);
   });
+
+  it(`reactElementToJSXString(<div>{true}</div>)`, () => {
+    expect(
+      reactElementToJSXString(<div>{true}</div>)
+    ).toEqual(`<div />`);
+  });
+
+  it(`reactElementToJSXString(<div>{false}</div>)`, () => {
+    expect(
+      reactElementToJSXString(<div>{false}</div>)
+    ).toEqual(`<div />`);
+  });
+
+  it(`reactElementToJSXString(<div>{false}</div>)`, () => {
+    expect(
+      reactElementToJSXString(<div>
+        {false}
+</div>)
+    ).toEqual(
+      reactElementToJSXString(<div></div>)
+    );
+  });
+
+  it(`reactElementToJSXString(<div>\n{false}\n</div>)`, () => {
+    expect(
+      reactElementToJSXString(<div>
+{false}
+</div>)
+    ).toEqual(`<div />`);
+  });
+
+  it(`reactElementToJSXString(<div> {false} </div>)`, () => {
+    expect(
+      reactElementToJSXString(<div> {false} </div>)
+    ).toEqual(`<div>
+  <whitespace><whitespace>
+</div>`);
+  });
+
+  it(`reactElementToJSXString(<div>{null}</div>)`, () => {
+    expect(
+      reactElementToJSXString(<div>{null}</div>)
+    ).toEqual(`<div />`);
+  });
 });

index.js

@@ -32,7 +32,9 @@ function toJSXString({ReactElement = null, lvl = 0, inline = false}) {
   let out = `<${tagName}`;
   let props = formatProps(ReactElement.props);
   let attributes = [];
-  let children = ReactElement.props.children;
+  let children = React.Children.toArray(ReactElement.props.children)
+    .filter(onlyMeaningfulChildren)
+    .map(displayWhitespace);
 
   if (ReactElement.ref !== null) {
     attributes.push(getJSXAttribute('ref', ReactElement.ref));
@@ -60,7 +62,7 @@ function toJSXString({ReactElement = null, lvl = 0, inline = false}) {
     out += `\n${spacer(lvl)}`;
   }
 
-  if (React.Children.count(children) > 0) {
+  if (children.length > 0) {
     out += `>`;
     lvl++;
     if (!inline) {
@@ -71,8 +73,7 @@ function toJSXString({ReactElement = null, lvl = 0, inline = false}) {
     if (typeof children === 'string') {
       out += children;
     } else {
-      out += React.Children
-        .toArray(children)
+      out += children
         .reduce(mergePlainStringChildren, [])
         .map(
           recurse({lvl, inline})
@@ -187,3 +188,15 @@ function spacer(times) {
 function noChildren(propName) {
   return propName !== 'children';
 }
+
+function onlyMeaningfulChildren(children) {
+  return children !== true && children !== false && children !== null;
+}
+
+function displayWhitespace(children) {
+  if (children === ' ') {
+    return '<whitespace>';
+  }
+
+  return children;
+}