fix(transform): remove whitespace in table elements

close #30

package.json

@@ -63,7 +63,6 @@
     "npm-run-all": "^4.0.2",
     "prettier": "^1.9.2",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.1",
     "rollup": "^0.55.0",

src/__tests__/__snapshots__/convert.test.js.snap

@@ -177,6 +177,23 @@ exports[`preserve child of style tag 1`] = `
 />
 `;
 
+exports[`remove whitespace on table 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <th>
+        title
+      </th>
+    </tr>
+    <tr>
+      <td>
+        entry
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`self closing component 1`] = `
 <div>
   <img

src/__tests__/convert.test.js

@@ -1,7 +1,8 @@
 /* eslint-env jest */
 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
 import renderer from 'react-test-renderer';
+import snapshot from 'jest-snapshot';
+
 import convertServer from '../server';
 import convertBrowser from '../browser';
 
@@ -188,6 +189,23 @@ test('decode html attributes', () => {
   testRender(html);
 });
 
+test('remove whitespace on table', () => {
+  const html = `
+    <table>
+      <tbody>
+        <tr>
+          <th>title</th>
+        </tr>
+        <tr>
+          <td>entry</td>
+        </tr>
+      </tbody>
+    </table>
+  `.trim();
+
+  testRender(html);
+});
+
 /**
  * Test utilities
  */
@@ -196,15 +214,16 @@ function testRender(html, options) {
   let server = convertServer(html, options);
   let browser = convertBrowser(html, options);
 
+  const rs = renderer.create(server);
+  const rb = renderer.create(browser);
+
   // make sure return value is the same between server and browser
+  // compare snapshot result to make sure they're the exact same
   // Expected: browser
   // Received: server
-  expect(ReactDOMServer.renderToString(server)).toEqual(
-    ReactDOMServer.renderToString(browser)
-  );
+  expect(snapshot.utils.serialize(rs)).toEqual(snapshot.utils.serialize(rb));
 
   // assert snapshot, doesn't matter from server or browser
   // because we've already done assert equal between them
-  const tree = renderer.create(server);
-  expect(tree).toMatchSnapshot();
+  expect(rs).toMatchSnapshot();
 }

src/browser.js

@@ -11,6 +11,8 @@ const NodeTypes = {
   COMMENT: 8,
 };
 
+const TABLE_ELEMENTS = ['table', 'tbody', 'td', 'th', 'tr'];
+
 const tempEl = document.createElement('div');
 function unescape(str) {
   // Here we use innerHTML to unescape html entities.
@@ -46,8 +48,20 @@ function transform(node, key: number, options: HtmrOptions) {
 
   let children = [];
   for (let i = 0; i < node.childNodes.length; i++) {
+    const childNode = node.childNodes[i];
     const childKey = `${key}.${i}`;
-    const component = transform(node.childNodes[i], childKey, options);
+
+    if (
+      TABLE_ELEMENTS.indexOf(tag) > -1 &&
+      childNode.nodeType === NodeTypes.TEXT
+    ) {
+      childNode.textContent = childNode.textContent.trim();
+      if (childNode.textContent === '') {
+        continue;
+      }
+    }
+
+    const component = transform(childNode, childKey, options);
     if (component !== null) {
       children.push(component);
     }

src/server.js

@@ -21,6 +21,8 @@ type ElementNode = {
 
 type Element = React$Element<*> | string;
 
+const TABLE_ELEMENTS = ['table', 'tbody', 'td', 'th', 'tr'];
+
 function transform(node: Node, key: string, options: HtmrOptions): ?Element {
   const defaultMap = options.map._;
 
@@ -66,6 +68,13 @@ function transform(node: Node, key: string, options: HtmrOptions): ?Element {
       ? null
       : content
           .map((child, index) => {
+            if (TABLE_ELEMENTS.indexOf(tag) > -1 && typeof child == 'string') {
+              child = child.trim();
+              if (child === '') {
+                return null;
+              }
+            }
+
             const childKey = `${key}.${index}`;
             return transform(child, childKey, options);
           })

yarn.lock

@@ -1031,10 +1031,14 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
+commander@^2.11.0, commander@^2.9.0:
   version "2.11.0"
   resolved "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
+commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1484,9 +1488,9 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-flow-bin@^0.63.1:
-  version "0.63.1"
-  resolved "https://registry.npmjs.org/flow-bin/-/flow-bin-0.63.1.tgz#ab00067c197169a5fb5b4996c8f6927b06694828"
+flow-bin@^0.64.0:
+  version "0.64.0"
+  resolved "https://registry.npmjs.org/flow-bin/-/flow-bin-0.64.0.tgz#ddd3fb3b183ab1ab35a5d5dec9caf5ebbcded167"
 
 follow-redirects@1.0.0:
   version "1.0.0"
@@ -3097,9 +3101,9 @@ pn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
-posthtml-parser@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.3.1.tgz#c8a3cfb126313fe733fe239430e9318d538c22f8"
+posthtml-parser@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.4.0.tgz#8238dd4a93cf870dbacaae14b37a12d264fcfd68"
   dependencies:
     htmlparser2 "^3.9.2"
     isobject "^2.1.0"
@@ -3201,15 +3205,6 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 react-test-renderer@^16.2.0:
   version "16.2.0"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
@@ -3485,11 +3480,11 @@ rollup-plugin-node-resolve@^3.0.0:
     is-module "^1.0.0"
     resolve "^1.1.6"
 
-rollup-plugin-uglify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-2.0.1.tgz#67b37ad1efdafbd83af4c36b40c189ee4866c969"
+rollup-plugin-uglify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-3.0.0.tgz#a34eca24617709c6bf1778e9653baafa06099b86"
   dependencies:
-    uglify-js "^3.0.9"
+    uglify-es "^3.3.7"
 
 rollup-pluginutils@^1.5.0:
   version "1.5.2"
@@ -3505,9 +3500,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup@^0.54.0:
-  version "0.54.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.54.0.tgz#0641b8154ba02706464285d2ead924c486b48ba9"
+rollup@^0.55.0:
+  version "0.55.1"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-0.55.1.tgz#baf4f23abe3014b29e56dea7d72d9946e56ac7dd"
 
 run-async@^2.2.0:
   version "2.3.0"
@@ -3628,7 +3623,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1:
   version "0.5.6"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.6.0:
+source-map@^0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -3903,6 +3898,13 @@ ua-parser-js@^0.7.9:
   version "0.7.14"
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
+uglify-es@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
+  dependencies:
+    commander "~2.13.0"
+    source-map "~0.6.1"
+
 uglify-js@^2.6:
   version "2.8.29"
   resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -3912,13 +3914,6 @@ uglify-js@^2.6:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
-uglify-js@^3.0.9:
-  version "3.0.27"
-  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.27.tgz#a97db8c8ba6b9dba4e2f88d86aa9548fa6320034"
-  dependencies:
-    commander "~2.11.0"
-    source-map "~0.5.1"
-
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"