collapse text around comments

src/generators/dom/index.js

@@ -43,7 +43,7 @@ export default function dom ( parsed, source, options ) {
 
 	const { computations, hasJs, templateProperties, namespace } = generator.parseJs();
 
-	const block = preprocess( generator, parsed.html.children );
+	const block = preprocess( generator, parsed.html );
 
 	const state = {
 		namespace,

src/generators/dom/preprocess.js

@@ -1,4 +1,5 @@
 import Block from './Block.js';
+import { trimStart, trimEnd } from '../../utils/trim.js';
 
 function isElseIf ( node ) {
 	return node && node.children.length === 1 && node.children[0].type === 'IfBlock';
@@ -23,7 +24,7 @@ const preprocessors = {
 			});
 
 			blocks.push( node._block );
-			preprocessChildren( generator, node._block, node.children );
+			preprocessChildren( generator, node._block, node );
 
 			if ( node._block.dependencies.size > 0 ) {
 				dynamic = true;
@@ -38,7 +39,7 @@ const preprocessors = {
 				});
 
 				blocks.push( node.else._block );
-				preprocessChildren( generator, node.else._block, node.else.children );
+				preprocessChildren( generator, node.else._block, node.else );
 
 				if ( node.else._block.dependencies.size > 0 ) {
 					dynamic = true;
@@ -97,7 +98,7 @@ const preprocessors = {
 		});
 
 		generator.blocks.push( node._block );
-		preprocessChildren( generator, node._block, node.children );
+		preprocessChildren( generator, node._block, node );
 		block.addDependencies( node._block.dependencies );
 		node._block.hasUpdateMethod = node._block.dependencies.size > 0;
 
@@ -107,7 +108,7 @@ const preprocessors = {
 			});
 
 			generator.blocks.push( node.else._block );
-			preprocessChildren( generator, node.else._block, node.else.children );
+			preprocessChildren( generator, node.else._block, node.else );
 			node.else._block.hasUpdateMethod = node.else._block.dependencies.size > 0;
 		}
 	},
@@ -140,13 +141,13 @@ const preprocessors = {
 				});
 
 				generator.blocks.push( node._block );
-				preprocessChildren( generator, node._block, node.children );
+				preprocessChildren( generator, node._block, node );
 				block.addDependencies( node._block.dependencies );
 				node._block.hasUpdateMethod = node._block.dependencies.size > 0;
 			}
 
 			else {
-				preprocessChildren( generator, block, node.children );
+				preprocessChildren( generator, block, node );
 			}
 		}
 	}
@@ -154,14 +155,33 @@ const preprocessors = {
 
 preprocessors.RawMustacheTag = preprocessors.MustacheTag;
 
-function preprocessChildren ( generator, block, children ) {
+function preprocessChildren ( generator, block, node ) {
-	children.forEach( child => {
+	// glue text nodes together
+	const cleaned = [];
+	let lastChild;
+
+	node.children.forEach( child => {
+		if ( child.type === 'Comment' ) return;
+
+		if ( child.type === 'Text' && lastChild && lastChild.type === 'Text' ) {
+			lastChild.data += child.data;
+			lastChild.end = child.end;
+		} else {
+			cleaned.push( child );
+		}
+
+		lastChild = child;
+	});
+
+	node.children = cleaned;
+
+	cleaned.forEach( child => {
 		const preprocess = preprocessors[ child.type ];
 		if ( preprocess ) preprocess( generator, block, child );
 	});
 }
 
-export default function preprocess ( generator, children ) {
+export default function preprocess ( generator, node ) {
 	const block = new Block({
 		generator,
 		name: generator.alias( 'create_main_fragment' ),
@@ -179,8 +199,21 @@ export default function preprocess ( generator, children ) {
 	});
 
 	generator.blocks.push( block );
-	preprocessChildren( generator, block, children );
+	preprocessChildren( generator, block, node );
 	block.hasUpdateMethod = block.dependencies.size > 0;
 
+	// trim leading and trailing whitespace from the top level
+	const firstChild = node.children[0];
+	if ( firstChild && firstChild.type === 'Text' ) {
+		firstChild.data = trimStart( firstChild.data );
+		if ( !firstChild.data ) node.children.shift();
+	}
+
+	const lastChild = node.children[ node.children.length - 1 ];
+	if ( lastChild && lastChild.type === 'Text' ) {
+		lastChild.data = trimEnd( lastChild.data );
+		if ( !lastChild.data ) node.children.pop();
+	}
+
 	return block;
 }

src/generators/dom/visitors/Comment.js

@@ -1,3 +0,0 @@
-export default function visitComment () {
-	// do nothing
-}

src/generators/dom/visitors/index.js

@@ -1,4 +1,3 @@
-import Comment from './Comment.js';
 import EachBlock from './EachBlock.js';
 import Element from './Element/Element.js';
 import IfBlock from './IfBlock.js';
@@ -8,7 +7,6 @@ import Text from './Text.js';
 import YieldTag from './YieldTag.js';
 
 export default {
-	Comment,
 	EachBlock,
 	Element,
 	IfBlock,

src/parse/index.js

@@ -1,7 +1,7 @@
 import { locate } from 'locate-character';
 import fragment from './state/fragment.js';
-import { whitespace } from './patterns.js';
+import { whitespace } from '../utils/patterns.js';
-import { trimStart, trimEnd } from './utils/trim.js';
+import { trimStart, trimEnd } from '../utils/trim.js';
 import getCodeFrame from '../utils/getCodeFrame.js';
 import hash from './utils/hash.js';
 

src/parse/state/mustache.js

@@ -1,6 +1,6 @@
 import readExpression from '../read/expression.js';
-import { whitespace } from '../patterns.js';
+import { whitespace } from '../../utils/patterns.js';
-import { trimStart, trimEnd } from '../utils/trim.js';
+import { trimStart, trimEnd } from '../../utils/trim.js';
 
 const validIdentifier = /[a-zA-Z_$][a-zA-Z0-9_$]*/;
 

src/parse/state/tag.js

@@ -2,7 +2,7 @@ import readExpression from '../read/expression.js';
 import readScript from '../read/script.js';
 import readStyle from '../read/style.js';
 import { readEventHandlerDirective, readBindingDirective } from '../read/directives.js';
-import { trimStart, trimEnd } from '../utils/trim.js';
+import { trimStart, trimEnd } from '../../utils/trim.js';
 import { decodeCharacterReferences } from '../utils/html.js';
 import isVoidElementName from '../../utils/isVoidElementName.js';
 

src/utils/trim.js

@@ -1,4 +1,4 @@
-import { whitespace } from '../patterns.js';
+import { whitespace } from './patterns.js';
 
 export function trimStart ( str ) {
 	let i = 0;

test/js/samples/collapses-text-around-comments/expected.js

@@ -0,0 +1,87 @@
+import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, proto, setAttribute } from "svelte/shared.js";
+
+var template = (function () {
+	return {
+		data: function () {
+			return { foo: 42 }
+		}
+	};
+}());
+
+var added_css = false;
+function add_css () {
+	var style = createElement( 'style' );
+	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
+	appendNode( style, document.head );
+
+	added_css = true;
+}
+
+function create_main_fragment ( root, component ) {
+	var p = createElement( 'p' );
+	setAttribute( p, 'svelte-3842350206', '' );
+	var text_value = root.foo;
+	var text = createText( text_value );
+	appendNode( text, p );
+
+	return {
+		mount: function ( target, anchor ) {
+			insertNode( p, target, anchor );
+		},
+
+		update: function ( changed, root ) {
+			if ( text_value !== ( text_value = root.foo ) ) {
+				text.data = text_value;
+			}
+		},
+
+		destroy: function ( detach ) {
+			if ( detach ) {
+				detachNode( p );
+			}
+		}
+	};
+}
+
+function SvelteComponent ( options ) {
+	options = options || {};
+	this._state = assign( template.data(), options.data );
+
+	this._observers = {
+		pre: Object.create( null ),
+		post: Object.create( null )
+	};
+
+	this._handlers = Object.create( null );
+
+	this._root = options._root;
+	this._yield = options._yield;
+
+	this._torndown = false;
+	if ( !added_css ) add_css();
+
+	this._fragment = create_main_fragment( this._state, this );
+	if ( options.target ) this._fragment.mount( options.target, null );
+}
+
+assign( SvelteComponent.prototype, proto );
+
+SvelteComponent.prototype._set = function _set ( newState ) {
+	var oldState = this._state;
+	this._state = assign( {}, oldState, newState );
+	dispatchObservers( this, this._observers.pre, newState, oldState );
+	if ( this._fragment ) this._fragment.update( newState, this._state );
+	dispatchObservers( this, this._observers.post, newState, oldState );
+};
+
+SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
+	this.fire( 'destroy' );
+
+	this._fragment.destroy( detach !== false );
+	this._fragment = null;
+
+	this._state = {};
+	this._torndown = true;
+};
+
+export default SvelteComponent;

test/js/samples/collapses-text-around-comments/input.html

@@ -0,0 +1,30 @@
+
+<!-- a -->
+
+<!-- b -->
+
+<p>{{foo}}</p>
+
+<!-- c -->
+
+<!-- d -->
+
+<style>
+	p {
+		color: red;
+	}
+</style>
+
+<!-- e -->
+
+<script>
+	export default {
+		data: function () {
+			return { foo: 42 }
+		}
+	};
+</script>
+
+<!-- f -->
+
+<!-- g -->