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

fixes #6 fixes #7
algolia · Nov 8, 2015 · eaca1a2 · eaca1a2
1 parent 1e63273
commit eaca1a2
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/README.md b/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 -->

diff --git a/index-test.js b/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 />`);
+  });
 });
diff --git a/index.js b/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;
+}