![]()
{
testRender(html);
});
+test('remove whitespace on table', () => {
+ const html = `
+
+
+
+ | title |
+
+
+ | entry |
+
+
+
+ `.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();
}
diff --git a/src/browser.js b/src/browser.js
index 5aa70b4..def91ec 100644
--- a/src/browser.js
+++ b/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);
}
diff --git a/src/server.js b/src/server.js
index b2e21b9..59f3725 100644
--- a/src/server.js
+++ b/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);
})
diff --git a/yarn.lock b/yarn.lock
index 6f93e0b..ae0d3b1 100644
--- a/yarn.lock
+++ b/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"