feat: trim whitespace

Remove whitespace at the start/end of the first/last text node. Details: posthtml/posthtml-include#19
andreyvolokitin · May 1, 2018 · 52155fe · 52155fe
1 parent 5f483a6
commit 52155fe
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 3 deletions.
diff --git a/lib/extend.es6 b/lib/extend.es6
@@ -19,11 +19,14 @@ export default (options = {}) => {
         tree = handleExtendsNodes(tree, options, tree.messages);
 
         const blockNodes = getBlockNodes(tree);
+        let blockTree;
+
         for (let blockName of Object.keys(blockNodes)) {
             let blockNode = blockNodes[blockName];
             blockNode.tag = false;
-            blockNode.content = blockNode.content || [];
+            blockTree = blockNode.content = blockNode.content || [];
             blockNodes[blockName] = blockNode;
+            trimTree(blockTree);
         }
 
         return tree;
@@ -32,6 +35,26 @@ export default (options = {}) => {
 
 const api = new Api();
 
+function trimTree(tree) {
+    let firstNode = tree[0];
+    let lastNode = tree[tree.length - 1];
+
+    if (typeof firstNode === 'string') {
+        tree[0] = firstNode = firstNode.replace(/^\s+/, '');
+
+        // make first and last node refer to the same string if they are the same node
+        if (tree.length === 1) {
+            lastNode = firstNode;
+        }
+    }
+
+    if (typeof lastNode === 'string') {
+        tree[tree.length - 1] = lastNode = lastNode.replace(/\s+$/, '');
+    }
+
+    return tree;
+}
+
 function handleExtendsNodes(tree, options, messages) {
     api.match.call(applyPluginsToTree(tree, options.plugins), {tag: 'extends'}, extendsNode => {
         if (! extendsNode.attrs || ! extendsNode.attrs.src) {
@@ -42,6 +65,8 @@ function handleExtendsNodes(tree, options, messages) {
         const layoutHtml = fs.readFileSync(layoutPath, options.encoding);
         let layoutTree = handleExtendsNodes(applyPluginsToTree(parseToPostHtml(layoutHtml), options.plugins), options, messages);
 
+        trimTree(layoutTree);
+
         extendsNode.tag = false;
         extendsNode.content = mergeExtendsAndLayout(layoutTree, extendsNode);
         messages.push({
@@ -72,11 +97,11 @@ function mergeExtendsAndLayout(layoutTree, extendsNode) {
         }
 
         let layoutBlockNode = layoutBlockNodes[layoutBlockName];
-        layoutBlockNode.content = mergeContent(
+        layoutBlockNode.content = trimTree(mergeContent(
             extendsBlockNode.content,
             layoutBlockNode.content,
             getBlockType(extendsBlockNode)
-        );
+        ));
 
         delete extendsBlockNodes[layoutBlockName];
     }

diff --git a/test/expect/result_trim-whitespace.html b/test/expect/result_trim-whitespace.html
@@ -0,0 +1,7 @@
+No line breaks <span>are inserted,</span> because "block" and "extend" are control tags... <i>...which can't dictate vertical indentation.</i>
+
+I am indented according to the file which should control it — base.html.
+
+
+
+<b>^^^ 3 empty lines above me (and no empty lines below), as per base.html.</b>
diff --git a/test/extend.js b/test/extend.js
@@ -16,6 +16,14 @@ let mfs = {
         this._files[fullPath] = content;
     }
 };
+const join = require('path').join;
+const readSync = require('fs').readFileSync;
+const fixture = (file) => {
+    return readSync(join(__dirname, 'fixtures', `${file}.html`), 'utf8');
+};
+const result = (file) => {
+    return readSync(join(__dirname, 'expect', `${file}.html`), 'utf8');
+};
 
 const extend = proxyquire('../lib/extend', {
     fs: mfs
@@ -200,6 +208,15 @@ describe('Extend', () => {
             '[posthtml-extend] Unexpected block "head"'
         );
     });
+
+    it('should remove all whitespace at the start/end of the first/last text node', () => {
+        mfs.writeFileSync( './base.html', fixture('base_trim-whitespace'));
+        mfs.writeFileSync( './layout.html', fixture('layout_trim-whitespace'));
+
+        return init(fixture('test_trim-whitespace')).then(html => {
+            expect(html).toBe(result('result_trim-whitespace'));
+        });
+    });
 });
 
 describe('Messages', () => {

diff --git a/test/fixtures/base_trim-whitespace.html b/test/fixtures/base_trim-whitespace.html
@@ -0,0 +1,7 @@
+<block name="a"></block> <block name="b"></block> <block name="c"></block> <block name="d"></block>
+
+<block name="e"></block>
+
+
+
+<block name="f"></block>
diff --git a/test/fixtures/layout_trim-whitespace.html b/test/fixtures/layout_trim-whitespace.html
@@ -0,0 +1,8 @@
+<extends src="base.html">
+
+    <block name="f">
+        <b>^^^ 3 empty lines above me (and no empty lines below), as per base.html.</b>
+    </block>
+
+
+</extends>
diff --git a/test/fixtures/test_trim-whitespace.html b/test/fixtures/test_trim-whitespace.html
@@ -0,0 +1,39 @@
+<extends src="layout.html">
+
+
+    <block name="a">
+
+        No line breaks
+
+    </block>
+
+    <block name="b">
+
+        <span>are inserted,</span>
+    </block>
+
+    <block name="c">
+        because "block" and "extend" are control tags...
+    </block>
+    <block name="d">
+        <i>...which can't dictate vertical indentation.</i>
+
+
+
+    </block>
+
+
+
+
+    <block name="e">
+
+
+
+        I am indented according to the file which should control it — base.html.
+
+
+
+    </block>
+
+
+</extends>