Merge pull request #491 from sveltejs/misc-fixes

Misc fixes

src/generators/Generator.js

@@ -40,7 +40,7 @@ export default class Generator {
 		// allow compiler to deconflict user's `import { get } from 'whatever'` and
 		// Svelte's builtin `import { get, ... } from 'svelte/shared.js'`;
 		this.importedNames = new Set();
-		this._aliases = new Map();
+		this.aliases = new Map();
 		this._usedNames = new Set( [ name ] );
 	}
 
@@ -54,12 +54,11 @@ export default class Generator {
 	}
 
 	alias ( name ) {
-		if ( this._aliases.has( name ) ) {
-			return this._aliases.get( name );
+		if ( !this.aliases.has( name ) ) {
+			this.aliases.set( name, this.getUniqueName( name ) );
 		}
-		const alias = this.getUniqueName( name );
-		this._aliases.set( name, alias );
-		return alias;
+
+		return this.aliases.get( name );
 	}
 
 	contextualise ( block, expression, context, isEventHandler ) {
@@ -151,7 +150,7 @@ export default class Generator {
 		};
 	}
 
-	findDependencies ( contextDependencies, expression ) {
+	findDependencies ( contextDependencies, indexes, expression ) {
 		if ( expression._dependencies ) return expression._dependencies;
 
 		let scope = annotateWithScopes( expression );
@@ -170,7 +169,7 @@ export default class Generator {
 
 					if ( contextDependencies.has( name ) ) {
 						dependencies.push( ...contextDependencies.get( name ) );
-					} else {
+					} else if ( !indexes.has( name ) ) {
 						dependencies.push( name );
 					}
 

src/generators/dom/Block.js

@@ -29,6 +29,7 @@ export default class Block {
 			destroy: new CodeBuilder()
 		};
 
+		this.aliases = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
 
 		// unique names
@@ -61,6 +62,14 @@ export default class Block {
 		}
 	}
 
+	alias ( name ) {
+		if ( !this.aliases.has( name ) ) {
+			this.aliases.set( name, this.getUniqueName( name ) );
+		}
+
+		return this.aliases.get( name );
+	}
+
 	child ( options ) {
 		return new Block( Object.assign( {}, this, options, { parent: this } ) );
 	}
@@ -75,7 +84,7 @@ export default class Block {
 	}
 
 	findDependencies ( expression ) {
-		return this.generator.findDependencies( this.contextDependencies, expression );
+		return this.generator.findDependencies( this.contextDependencies, this.indexes, expression );
 	}
 
 	mount ( name, parentNode ) {

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;
 		}
 	},
@@ -131,35 +132,56 @@ const preprocessors = {
 
 		const isComponent = generator.components.has( node.name ) || node.name === ':Self';
 
-		if ( isComponent ) {
-			const name = block.getUniqueName( ( node.name === ':Self' ? generator.name : node.name ).toLowerCase() );
+		if ( node.children.length ) {
+			if ( isComponent ) {
+				const name = block.getUniqueName( ( node.name === ':Self' ? generator.name : node.name ).toLowerCase() );
 
-			node._block = block.child({
-				name: generator.getUniqueName( `create_${name}_yield_fragment` )
-			});
+				node._block = block.child({
+					name: generator.getUniqueName( `create_${name}_yield_fragment` )
+				});
 
-			generator.blocks.push( node._block );
-			preprocessChildren( generator, node._block, node.children );
-			block.addDependencies( node._block.dependencies );
-			node._block.hasUpdateMethod = node._block.dependencies.size > 0;
-		}
+				generator.blocks.push( node._block );
+				preprocessChildren( generator, node._block, node );
+				block.addDependencies( node._block.dependencies );
+				node._block.hasUpdateMethod = node._block.dependencies.size > 0;
+			}
 
-		else {
-			preprocessChildren( generator, block, node.children );
+			else {
+				preprocessChildren( generator, block, node );
+			}
 		}
 	}
 };
 
 preprocessors.RawMustacheTag = preprocessors.MustacheTag;
 
-function preprocessChildren ( generator, block, children ) {
-	children.forEach( child => {
+function preprocessChildren ( generator, block, node ) {
+	// 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' ),
@@ -177,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/EachBlock.js

@@ -7,7 +7,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
 	const create_each_block = node._block.name;
 	const each_block_value = node._block.listName;
 	const iterations = block.getUniqueName( `${each_block}_iterations` );
-	const i = block.getUniqueName( `i` );
+	const i = block.alias( `i` );
 	const params = block.params.join( ', ' );
 	const anchor = block.getUniqueName( `${each_block}_anchor` );
 
@@ -188,7 +188,7 @@ function unkeyed ( generator, block, state, node, snippet, { create_each_block,
 	` );
 
 	const dependencies = block.findDependencies( node.expression );
-	const allDependencies = new Set( block.dependencies );
+	const allDependencies = new Set( node._block.dependencies );
 	dependencies.forEach( dependency => {
 		allDependencies.add( dependency );
 	});

src/generators/dom/visitors/IfBlock.js

@@ -44,16 +44,73 @@ function visitChildren ( generator, block, state, node ) {
 }
 
 export default function visitIfBlock ( generator, block, state, node ) {
-	const params = block.params.join( ', ' );
 	const name = generator.getUniqueName( `if_block` );
-	const getBlock = block.getUniqueName( `get_block` );
-	const current_block = block.getUniqueName( `current_block` );
+	const anchor = generator.getUniqueName( `${name}_anchor` );
+	const params = block.params.join( ', ' );
+
+	const vars = { name, anchor, params };
+
+	block.createAnchor( anchor, state.parentNode );
 
 	const branches = getBranches( generator, block, state, node, generator.getUniqueName( `create_if_block` ) );
 	const dynamic = branches.some( branch => branch.dynamic );
 
-	const anchor = `${name}_anchor`;
-	block.createAnchor( anchor, state.parentNode );
+	if ( node.else ) {
+		compound( generator, block, state, node, branches, dynamic, vars );
+	} else {
+		simple( generator, block, state, node, branches[0], dynamic, vars );
+	}
+
+	block.builders.destroy.addLine(
+		`if ( ${name} ) ${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );`
+	);
+}
+
+function simple ( generator, block, state, node, branch, dynamic, { name, anchor, params } ) {
+	block.builders.create.addBlock( deindent`
+		var ${name} = ${branch.condition} && ${branch.block}( ${params}, ${block.component} );
+	` );
+
+	const isToplevel = !state.parentNode;
+
+	if ( isToplevel ) {
+		block.builders.mount.addLine( `if ( ${name} ) ${name}.mount( ${block.target}, ${anchor} );` );
+	} else {
+		block.builders.create.addLine( `if ( ${name} ) ${name}.mount( ${state.parentNode}, ${anchor} );` );
+	}
+
+	if ( dynamic ) {
+		block.builders.update.addBlock( deindent`
+			if ( ${branch.condition} ) {
+				if ( ${name} ) {
+					${name}.update( changed, ${params} );
+				} else {
+					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name}.mount( ${anchor}.parentNode, ${anchor} );
+				}
+			} else if ( ${name} ) {
+				${name}.destroy( true );
+				${name} = null;
+			}
+		` );
+	} else {
+		block.builders.update.addBlock( deindent`
+			if ( ${branch.condition} ) {
+				if ( !${name} ) {
+					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name}.mount( ${anchor}.parentNode, ${anchor} );
+				}
+			} else if ( ${name} ) {
+				${name}.destroy( true );
+				${name} = null;
+			}
+		` );
+	}
+}
+
+function compound ( generator, block, state, node, branches, dynamic, { name, anchor, params } ) {
+	const getBlock = block.getUniqueName( `get_block` );
+	const current_block = block.getUniqueName( `current_block` );
 
 	block.builders.create.addBlock( deindent`
 		function ${getBlock} ( ${params} ) {
@@ -93,8 +150,4 @@ export default function visitIfBlock ( generator, block, state, node ) {
 			}
 		` );
 	}
-
-	block.builders.destroy.addLine(
-		`if ( ${name} ) ${name}.destroy( ${isToplevel ? 'detach' : 'false'} );`
-	);
 }

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 { trimStart, trimEnd } from './utils/trim.js';
+import { whitespace } from '../utils/patterns.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 { trimStart, trimEnd } from '../utils/trim.js';
+import { whitespace } from '../../utils/patterns.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/CodeBuilder.js

@@ -16,7 +16,7 @@ export default class CodeBuilder {
 			this.result += `\n\t${line}`;
 		} else {
 			if ( this.lastCondition ) {
-				this.result += `\n}`;
+				this.result += `\n}\n\n`;
 			}
 
 			this.result += `if ( ${condition} ) {\n\t${line}`;

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 -->

test/js/samples/each-block-changed-check/expected.js

@@ -9,6 +9,12 @@ function create_main_fragment ( root, component ) {
 		each_block_iterations[i] = create_each_block( root, each_block_value, each_block_value[i], i, component );
 	}
 
+	var text = createText( "\n\n" );
+	var p = createElement( 'p' );
+	var text_1_value = root.foo;
+	var text_1 = createText( text_1_value );
+	appendNode( text_1, p );
+
 	return {
 		mount: function ( target, anchor ) {
 			insertNode( each_block_anchor, target, anchor );
@@ -16,6 +22,9 @@ function create_main_fragment ( root, component ) {
 			for ( var i = 0; i < each_block_iterations.length; i += 1 ) {
 				each_block_iterations[i].mount( target, each_block_anchor );
 			}
+
+			insertNode( text, target, anchor );
+			insertNode( p, target, anchor );
 		},
 
 		update: function ( changed, root ) {
@@ -35,6 +44,10 @@ function create_main_fragment ( root, component ) {
 
 				each_block_iterations.length = each_block_value.length;
 			}
+
+			if ( text_1_value !== ( text_1_value = root.foo ) ) {
+				text_1.data = text_1_value;
+			}
 		},
 
 		destroy: function ( detach ) {
@@ -42,24 +55,32 @@ function create_main_fragment ( root, component ) {
 
 			if ( detach ) {
 				detachNode( each_block_anchor );
+				detachNode( text );
+				detachNode( p );
 			}
 		}
 	};
 }
 
-function create_each_block ( root, each_block_value, comment, comment_index, component ) {
+function create_each_block ( root, each_block_value, comment, i, component ) {
 	var div = createElement( 'div' );
 	div.className = "comment";
+	var strong = createElement( 'strong' );
+	appendNode( strong, div );
+	var text_value = i;
+	var text = createText( text_value );
+	appendNode( text, strong );
+	appendNode( createText( "\n\n\t\t" ), div );
 	var span = createElement( 'span' );
 	appendNode( span, div );
 	span.className = "meta";
-	var text_value = comment.author;
-	var text = createText( text_value );
-	appendNode( text, span );
-	appendNode( createText( " wrote " ), span );
-	var text_2_value = root.elapsed(comment.time, root.time);
+	var text_2_value = comment.author;
 	var text_2 = createText( text_2_value );
 	appendNode( text_2, span );
+	appendNode( createText( " wrote " ), span );
+	var text_4_value = root.elapsed(comment.time, root.time);
+	var text_4 = createText( text_4_value );
+	appendNode( text_4, span );
 	appendNode( createText( " ago:" ), span );
 	appendNode( createText( "\n\n\t\t" ), div );
 	var raw_before = createElement( 'noscript' );
@@ -74,15 +95,19 @@ function create_each_block ( root, each_block_value, comment, comment_index, com
 			insertNode( div, target, anchor );
 		},
 
-		update: function ( changed, root, each_block_value, comment, comment_index ) {
-			if ( text_value !== ( text_value = comment.author ) ) {
+		update: function ( changed, root, each_block_value, comment, i ) {
+			if ( text_value !== ( text_value = i ) ) {
 				text.data = text_value;
 			}
 
-			if ( text_2_value !== ( text_2_value = root.elapsed(comment.time, root.time) ) ) {
+			if ( text_2_value !== ( text_2_value = comment.author ) ) {
 				text_2.data = text_2_value;
 			}
 
+			if ( text_4_value !== ( text_4_value = root.elapsed(comment.time, root.time) ) ) {
+				text_4.data = text_4_value;
+			}
+
 			if ( raw_value !== ( raw_value = comment.html ) ) {
 				detachBetween( raw_before, raw_after );
 				raw_before.insertAdjacentHTML( 'afterend', raw_value );

test/js/samples/each-block-changed-check/input.html

@@ -1,5 +1,7 @@
-{{#each comments as comment}}
+{{#each comments as comment, i}}
 	<div class='comment'>
+		<strong>{{i}}</strong>
+
 		<span class='meta'>
 			{{comment.author}} wrote {{elapsed(comment.time, time)}} ago:
 		</span>
@@ -7,3 +9,5 @@
 		{{{comment.html}}}
 	</div>
 {{/each}}
+
+<p>{{foo}}</p>

test/js/samples/if-block-simple/expected.js

@@ -0,0 +1,93 @@
+import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js";
+
+function create_main_fragment ( root, component ) {
+	var if_block_anchor = createComment();
+
+	var if_block = root.foo && create_if_block( root, component );
+
+	return {
+		mount: function ( target, anchor ) {
+			insertNode( if_block_anchor, target, anchor );
+			if ( if_block ) if_block.mount( target, if_block_anchor );
+		},
+
+		update: function ( changed, root ) {
+			if ( root.foo ) {
+				if ( !if_block ) {
+					if_block = create_if_block( root, component );
+					if_block.mount( if_block_anchor.parentNode, if_block_anchor );
+				}
+			} else if ( if_block ) {
+				if_block.destroy( true );
+				if_block = null;
+			}
+		},
+
+		destroy: function ( detach ) {
+			if ( if_block ) if_block.destroy( detach );
+
+			if ( detach ) {
+				detachNode( if_block_anchor );
+			}
+		}
+	};
+}
+
+function create_if_block ( root, component ) {
+	var p = createElement( 'p' );
+	appendNode( createText( "foo!" ), p );
+
+	return {
+		mount: function ( target, anchor ) {
+			insertNode( p, target, anchor );
+		},
+
+		destroy: function ( detach ) {
+			if ( detach ) {
+				detachNode( p );
+			}
+		}
+	};
+}
+
+function SvelteComponent ( options ) {
+	options = options || {};
+	this._state = 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;
+
+	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/if-block-simple/input.html

@@ -0,0 +1,3 @@
+{{#if foo}}
+	<p>foo!</p>
+{{/if}}