From 078f3ad8b6984b2c823cb3d568d81cccc6ae46c5 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 00:25:29 -0400
Subject: [PATCH 1/8] simplify helpers

---
 mocha.opts                                    |  3 +-
 src/generators/dom/Block.ts                   | 20 ++++----
 src/generators/dom/index.ts                   | 48 +++++++++----------
 .../dom/visitors/Component/Binding.ts         |  4 +-
 src/generators/dom/visitors/EachBlock.ts      | 10 ++--
 .../dom/visitors/Element/Attribute.ts         | 16 ++-----
 .../dom/visitors/Element/Binding.ts           | 31 ++++--------
 .../dom/visitors/Element/Element.ts           | 20 ++++----
 .../dom/visitors/Element/EventHandler.ts      | 16 +++----
 .../dom/visitors/Element/addTransitions.ts    |  8 ++--
 src/generators/dom/visitors/IfBlock.ts        |  4 +-
 src/generators/dom/visitors/MustacheTag.ts    |  4 +-
 src/generators/dom/visitors/RawMustacheTag.ts | 12 ++---
 src/generators/dom/visitors/Text.ts           |  4 +-
 src/shared/transitions.js                     |  3 +-
 15 files changed, 85 insertions(+), 118 deletions(-)

diff --git a/mocha.opts b/mocha.opts
index 4e8a550a4c..af6b17a845 100644
--- a/mocha.opts
+++ b/mocha.opts
@@ -1 +1,2 @@
-test/test.js
+--bail
+test/test.js
\ No newline at end of file
diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index e7187e309d..f706a48807 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -2,6 +2,7 @@ import CodeBuilder from '../../utils/CodeBuilder';
 import deindent from '../../utils/deindent';
 import { DomGenerator } from './index';
 import { Node } from '../../interfaces';
+import shared from './shared';
 
 export interface BlockOptions {
 	name: string;
@@ -140,7 +141,7 @@ export default class Block {
 
 		if (isToplevel) {
 			this.builders.unmount.addLine(
-				`${this.generator.helper('detachNode')}( ${name} );`
+				`@detachNode( ${name} );`
 			);
 		}
 	}
@@ -187,12 +188,11 @@ export default class Block {
 	mount(name: string, parentNode: string) {
 		if (parentNode) {
 			this.builders.mount.addLine(
-				`${this.generator.helper('appendNode')}( ${name}, ${parentNode} );`
+				`@appendNode( ${name}, ${parentNode} );`
 			);
 		} else {
 			this.builders.mount.addLine(
-				`${this.generator.helper('insertNode')}( ${name}, ${this
-					.target}, anchor );`
+				`@insertNode( ${name}, ${this.target}, anchor );`
 			);
 		}
 	}
@@ -233,7 +233,7 @@ export default class Block {
 		}
 
 		if (this.builders.create.isEmpty()) {
-			properties.addBlock(`create: ${this.generator.helper('noop')},`);
+			properties.addBlock(`create: @noop,`);
 		} else {
 			properties.addBlock(deindent`
 				create: function () {
@@ -245,7 +245,7 @@ export default class Block {
 
 		if (this.generator.hydratable) {
 			if (this.builders.claim.isEmpty()) {
-				properties.addBlock(`claim: ${this.generator.helper('noop')},`);
+				properties.addBlock(`claim: @noop,`);
 			} else {
 				properties.addBlock(deindent`
 					claim: function ( nodes ) {
@@ -265,7 +265,7 @@ export default class Block {
 		}
 
 		if (this.builders.mount.isEmpty()) {
-			properties.addBlock(`mount: ${this.generator.helper('noop')},`);
+			properties.addBlock(`mount: @noop,`);
 		} else {
 			properties.addBlock(deindent`
 				mount: function ( ${this.target}, anchor ) {
@@ -276,7 +276,7 @@ export default class Block {
 
 		if (this.hasUpdateMethod) {
 			if (this.builders.update.isEmpty()) {
-				properties.addBlock(`update: ${this.generator.helper('noop')},`);
+				properties.addBlock(`update: @noop,`);
 			} else {
 				properties.addBlock(deindent`
 					update: function ( changed, ${this.params.join(', ')} ) {
@@ -331,7 +331,7 @@ export default class Block {
 		}
 
 		if (this.builders.unmount.isEmpty()) {
-			properties.addBlock(`unmount: ${this.generator.helper('noop')},`);
+			properties.addBlock(`unmount: @noop,`);
 		} else {
 			properties.addBlock(deindent`
 				unmount: function () {
@@ -341,7 +341,7 @@ export default class Block {
 		}
 
 		if (this.builders.destroy.isEmpty()) {
-			properties.addBlock(`destroy: ${this.generator.helper('noop')}`);
+			properties.addBlock(`destroy: @noop`);
 		} else {
 			properties.addBlock(deindent`
 				destroy: function () {
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 2c54e573a1..a3728e5939 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -12,6 +12,8 @@ import preprocess from './preprocess';
 import Block from './Block';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
 
+const helperPattern = new RegExp(`@(${Object.keys(shared).join('|')})\\b`, 'g');
+
 export class DomGenerator extends Generator {
 	blocks: Block[];
 	uses: Set<string>;
@@ -83,7 +85,6 @@ export default function dom(
 
 	if (computations.length) {
 		const builder = new CodeBuilder();
-		const differs = generator.helper('differs');
 
 		computations.forEach(({ key, deps }) => {
 			if (generator.readonly.has(key)) {
@@ -98,7 +99,7 @@ export default function dom(
 			const condition = `isInitial || ${deps
 				.map(
 					dep =>
-						`( '${dep}' in newState && ${differs}( state.${dep}, oldState.${dep} ) )`
+						`( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )`
 				)
 				.join(' || ')}`;
 			const statement = `state.${key} = newState.${key} = ${generator.alias(
@@ -131,18 +132,14 @@ export default function dom(
 		`}
 
 		var oldState = this._state;
-		this._state = ${generator.helper('assign')}( {}, oldState, newState );
+		this._state = @assign( {}, oldState, newState );
 		${computations.length &&
 			`${generator.alias(
 				'recompute'
 			)}( this._state, newState, oldState, false )`}
-		${generator.helper(
-			'dispatchObservers'
-		)}( this, this._observers.pre, newState, oldState );
+		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
-		${generator.helper(
-			'dispatchObservers'
-		)}( this, this._observers.post, newState, oldState );
+		@dispatchObservers( this, this._observers.post, newState, oldState );
 		${generator.hasComplexBindings &&
 			`while ( this._bindings.length ) this._bindings.pop()();`}
 		${(generator.hasComponents || generator.hasIntroTransitions) &&
@@ -158,10 +155,10 @@ export default function dom(
 	if (generator.css && options.css !== false) {
 		builders.main.addBlock(deindent`
 			function ${generator.alias('add_css')} () {
-				var style = ${generator.helper('createElement')}( 'style' );
+				var style = @createElement( 'style' );
 				style.id = ${JSON.stringify(generator.cssId + '-style')};
 				style.textContent = ${JSON.stringify(generator.css)};
-				${generator.helper('appendNode')}( style, document.head );
+				@appendNode( style, document.head );
 			}
 		`);
 	}
@@ -180,7 +177,7 @@ export default function dom(
 			? `, ${generator.alias('template')}.methods`
 			: '');
 	const proto = sharedPath
-		? `${generator.helper('proto')} `
+		? `@proto `
 		: deindent`
 		{
 			${['get', 'fire', 'observe', 'on', 'set', '_flush']
@@ -196,7 +193,7 @@ export default function dom(
 				`if ( !options.target && !options._root ) throw new Error( "'target' is a required option" );`}
 			${generator.usesRefs && `this.refs = {};`}
 			this._state = ${templateProperties.data
-				? `${generator.helper('assign')}( ${generator.alias(
+				? `@assign( ${generator.alias(
 						'template'
 					)}.data(), options.data )`
 				: `options.data || {}`};
@@ -242,9 +239,9 @@ export default function dom(
 			if ( options.target ) {
 				${generator.hydratable ?
 					deindent`
-						var nodes = ${generator.helper('children')}( options.target );
+						var nodes = @children( options.target );
 						options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
-						nodes.forEach( ${generator.helper('detachNode')} );
+						nodes.forEach( @detachNode );
 					` :
 					deindent`
 						this._fragment.create();
@@ -269,7 +266,7 @@ export default function dom(
 			`}
 		}
 
-		${generator.helper('assign')}( ${prototypeBase}, ${proto});
+		@assign( ${prototypeBase}, ${proto});
 
 		${name}.prototype._set = function _set ( newState ) {
 			${builders._set}
@@ -289,6 +286,9 @@ export default function dom(
 		};
 	`);
 
+	let result = builders.main.toString()
+		.replace(helperPattern, (match: string, name: string) => generator.helper(name));
+
 	if (sharedPath) {
 		if (format !== 'es') {
 			throw new Error(
@@ -302,9 +302,7 @@ export default function dom(
 				: name;
 		});
 
-		builders.main.addLineAtStart(
-			`import { ${names.join(', ')} } from ${JSON.stringify(sharedPath)};`
-		);
+		result = `import { ${names.join(', ')} } from ${JSON.stringify(sharedPath)};\n\n` + result;
 	} else {
 		generator.uses.forEach(key => {
 			const str = shared[key];
@@ -343,22 +341,20 @@ export default function dom(
 				// special case
 				const global = `_svelteTransitionManager`;
 
-				builders.main.addBlock(
-					`var ${generator.alias(
-						'transitionManager'
-					)} = window.${global} || ( window.${global} = ${code});`
-				);
+				result += `\n\nvar ${generator.alias(
+					'transitionManager'
+				)} = window.${global} || ( window.${global} = ${code});`;
 			} else {
 				const alias = generator.alias(expression.id.name);
 				if (alias !== expression.id.name)
 					code.overwrite(expression.id.start, expression.id.end, alias);
 
-				builders.main.addBlock(code.toString());
+				result += `\n\n${code}`;
 			}
 		});
 	}
 
-	return generator.generate(builders.main.toString(), options, {
+	return generator.generate(result, options, {
 		name,
 		format,
 	});
diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts
index ac8e90f0f2..a071dc1439 100644
--- a/src/generators/dom/visitors/Component/Binding.ts
+++ b/src/generators/dom/visitors/Component/Binding.ts
@@ -73,9 +73,7 @@ export default function visitBinding(
 				${updating} = true;
 				${setter}
 				${updating} = false;
-			}, { init: ${generator.helper(
-				'differs'
-			)}( ${local.name}.get( '${attribute.name}' ), ${snippet} ) });
+			}, { init: @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) });
 		});
 	`);
 
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index 4be9059e52..aab9372725 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -48,8 +48,8 @@ export default function visitEachBlock(
 	if (node.needsAnchor) {
 		block.addElement(
 			anchor,
-			`${generator.helper('createComment')}()`,
-			`${generator.helper('createComment')}()`,
+			`@createComment()`,
+			`@createComment()`,
 			state.parentNode,
 			true
 		);
@@ -162,8 +162,8 @@ function keyed(
 		node._block.first = node._block.getUniqueName('first');
 		node._block.addElement(
 			node._block.first,
-			`${generator.helper('createComment')}()`,
-			`${generator.helper('createComment')}()`,
+			`@createComment()`,
+			`@createComment()`,
 			null,
 			true
 		);
@@ -479,6 +479,6 @@ function unkeyed(
 	`);
 
 	block.builders.destroy.addBlock(
-		`${generator.helper('destroyEach')}( ${iterations}, false, 0 );`
+		`@destroyEach( ${iterations}, false, 0 );`
 	);
 }
diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
index 97d2bfe8be..a3e21953d7 100644
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ b/src/generators/dom/visitors/Element/Attribute.ts
@@ -36,8 +36,8 @@ export default function visitAttribute(
 	// namespaced attributes but I'm not sure that's applicable in
 	// HTML5?
 	const method = name.slice(0, 6) === 'xlink:'
-		? 'setXlinkAttribute'
-		: 'setAttribute';
+		? '@setXlinkAttribute'
+		: '@setAttribute';
 
 	const isDynamic =
 		(attribute.value !== true && attribute.value.length > 1) ||
@@ -112,13 +112,9 @@ export default function visitAttribute(
 			updater = `${state.parentNode}.${propertyName} = ${last};`;
 		} else {
 			block.builders.hydrate.addLine(
-				`${generator.helper(
-					method
-				)}( ${state.parentNode}, '${name}', ${last} = ${value} );`
+				`${method}( ${state.parentNode}, '${name}', ${last} = ${value} );`
 			);
-			updater = `${generator.helper(
-				method
-			)}( ${state.parentNode}, '${name}', ${last} );`;
+			updater = `${method}( ${state.parentNode}, '${name}', ${last} );`;
 		}
 
 		block.builders.update.addBlock(deindent`
@@ -135,9 +131,7 @@ export default function visitAttribute(
 
 		const statement = propertyName
 			? `${state.parentNode}.${propertyName} = ${value};`
-			: `${generator.helper(
-					method
-				)}( ${state.parentNode}, '${name}', ${value} );`;
+			: `${method}( ${state.parentNode}, '${name}', ${value} );`;
 
 		block.builders.hydrate.addLine(statement);
 
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 3610ce4e75..185996b898 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -152,11 +152,9 @@ export default function visitBinding(
 		}
 	`);
 
-	block.builders.hydrate.addBlock(deindent`
-		${generator.helper(
-			'addListener'
-		)}( ${state.parentNode}, '${eventName}', ${handler} );
-	`);
+	block.builders.hydrate.addBlock(
+		`@addListener( ${state.parentNode}, '${eventName}', ${handler} );`
+	);
 
 	if (node.name !== 'audio' && node.name !== 'video')
 		node.initialUpdate = updateElement;
@@ -170,22 +168,15 @@ export default function visitBinding(
 		`);
 	}
 
-	block.builders.destroy.addLine(deindent`
-		${generator.helper(
-			'removeListener'
-		)}( ${state.parentNode}, '${eventName}', ${handler} );
-	`);
+	block.builders.destroy.addLine(
+		`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`);
 
 	if (attribute.name === 'paused') {
 		block.builders.create.addLine(
-			`${generator.helper(
-				'addListener'
-			)}( ${state.parentNode}, 'play', ${handler} );`
+			`@addListener( ${state.parentNode}, 'play', ${handler} );`
 		);
 		block.builders.destroy.addLine(
-			`${generator.helper(
-				'removeListener'
-			)}( ${state.parentNode}, 'play', ${handler} );`
+			`@removeListener( ${state.parentNode}, 'play', ${handler} );`
 		);
 	}
 }
@@ -231,9 +222,7 @@ function getBindingValue(
 	// <input type='checkbox' bind:group='foo'>
 	if (attribute.name === 'group') {
 		if (type === 'checkbox') {
-			return `${generator.helper(
-				'getBindingGroupValue'
-			)}( ${block.component}._bindingGroups[${bindingGroup}] )`;
+			return `@getBindingGroupValue( ${block.component}._bindingGroups[${bindingGroup}] )`;
 		}
 
 		return `${state.parentNode}.__value`;
@@ -241,9 +230,7 @@ function getBindingValue(
 
 	// <input type='range|number' bind:value>
 	if (type === 'range' || type === 'number') {
-		return `${generator.helper(
-			'toNumber'
-		)}( ${state.parentNode}.${attribute.name} )`;
+		return `@toNumber( ${state.parentNode}.${attribute.name} )`;
 	}
 
 	// everything else
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index 5e16abb3eb..946f716b73 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -56,22 +56,20 @@ export default function visitElement(
 	if (generator.hydratable) {
 		block.builders.claim.addBlock(deindent`
 			${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
-			var ${childState.parentNodes} = ${generator.helper('children')}( ${name} );
+			var ${childState.parentNodes} = @children( ${name} );
 		`);
 	}
 
 	if (state.parentNode) {
-		block.builders.mount.addLine(`${block.generator.helper('appendNode')}( ${name}, ${state.parentNode} );`);
+		block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`);
 	} else {
-		block.builders.mount.addLine(`${block.generator.helper('insertNode')}( ${name}, ${block.target}, anchor );`);
+		block.builders.mount.addLine(`@insertNode( ${name}, ${block.target}, anchor );`);
 	}
 
 	// add CSS encapsulation attribute
 	if (generator.cssId && (!generator.cascade || state.isTopLevel)) {
 		block.builders.hydrate.addLine(
-			`${generator.helper(
-				'setAttribute'
-			)}( ${name}, '${generator.cssId}', '' );`
+			`@setAttribute( ${name}, '${generator.cssId}', '' );`
 		);
 	}
 
@@ -134,7 +132,7 @@ export default function visitElement(
 		// TODO we eventually need to consider what happens to elements
 		// that belong to the same outgroup as an outroing element...
 		block.builders.unmount.addLine(
-			`${generator.helper('detachNode')}( ${name} );`
+			`@detachNode( ${name} );`
 		);
 	}
 
@@ -188,7 +186,7 @@ export default function visitElement(
 	}
 
 	block.builders.claim.addLine(
-		`${childState.parentNodes}.forEach( ${generator.helper('detachNode')} );`
+		`${childState.parentNodes}.forEach( @detachNode );`
 	);
 }
 
@@ -198,14 +196,14 @@ function getRenderStatement(
 	name: string
 ) {
 	if (namespace === 'http://www.w3.org/2000/svg') {
-		return `${generator.helper('createSvgElement')}( '${name}' )`;
+		return `@createSvgElement( '${name}' )`;
 	}
 
 	if (namespace) {
 		return `document.createElementNS( '${namespace}', '${name}' )`;
 	}
 
-	return `${generator.helper('createElement')}( '${name}' )`;
+	return `@createElement( '${name}' )`;
 }
 
 function getClaimStatement(
@@ -221,7 +219,7 @@ function getClaimStatement(
 
 	const name = namespace ? node.name : node.name.toUpperCase();
 
-	return `${generator.helper('claimElement')}( ${nodes}, '${name}', ${attributes ? `{ ${attributes} }` : `{}`}, ${namespace === namespaces.svg ? true : false} )`;
+	return `@claimElement( ${nodes}, '${name}', ${attributes ? `{ ${attributes} }` : `{}`}, ${namespace === namespaces.svg ? true : false} )`;
 }
 
 function quoteProp(name: string) {
diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 8a84e004ca..8edb614a62 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -99,16 +99,12 @@ export default function visitEventHandler(
 			block.builders.init.addBlock(handler);
 		}
 
-		block.builders.hydrate.addLine(deindent`
-			${generator.helper(
-				'addListener'
-			)}( ${state.parentNode}, '${name}', ${handlerName} );
-		`);
+		block.builders.hydrate.addLine(
+			`@addListener( ${state.parentNode}, '${name}', ${handlerName} );`
+		);
 
-		block.builders.destroy.addLine(deindent`
-			${generator.helper(
-				'removeListener'
-			)}( ${state.parentNode}, '${name}', ${handlerName} );
-		`);
+		block.builders.destroy.addLine(
+			`@removeListener( ${state.parentNode}, '${name}', ${handlerName} );`
+		);
 	}
 }
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
index 358c6d7d6c..2a0a52b41e 100644
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -12,8 +12,6 @@ export default function addTransitions(
 	intro,
 	outro
 ) {
-	const wrapTransition = generator.helper('wrapTransition');
-
 	if (intro === outro) {
 		const name = block.getUniqueName(`${state.name}_transition`);
 		const snippet = intro.expression
@@ -26,7 +24,7 @@ export default function addTransitions(
 
 		block.builders.intro.addBlock(deindent`
 			${block.component}._renderHooks.push( function () {
-				if ( !${name} ) ${name} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, true, null );
+				if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 				${name}.run( true, function () {
 					${block.component}.fire( 'intro.end', { node: ${state.name} });
 				});
@@ -61,7 +59,7 @@ export default function addTransitions(
 
 			block.builders.intro.addBlock(deindent`
 				${block.component}._renderHooks.push( function () {
-					${introName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, true, null );
+					${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 					${introName}.run( true, function () {
 						${block.component}.fire( 'intro.end', { node: ${state.name} });
 					});
@@ -80,7 +78,7 @@ export default function addTransitions(
 			// TODO hide elements that have outro'd (unless they belong to a still-outroing
 			// group) prior to their removal from the DOM
 			block.builders.outro.addBlock(deindent`
-				${outroName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, false, null );
+				${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
 				${outroName}.run( false, function () {
 					${block.component}.fire( 'outro.end', { node: ${state.name} });
 					if ( --${block.alias('outros')} === 0 ) ${block.alias('outrocallback')}();
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts
index fc2c54ca97..ace976952d 100644
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/dom/visitors/IfBlock.ts
@@ -116,8 +116,8 @@ export default function visitIfBlock(
 	if (node.needsAnchor) {
 		block.addElement(
 			anchor,
-			`${generator.helper('createComment')}()`,
-			`${generator.helper('createComment')}()`,
+			`@createComment()`,
+			`@createComment()`,
 			state.parentNode,
 			true
 		);
diff --git a/src/generators/dom/visitors/MustacheTag.ts b/src/generators/dom/visitors/MustacheTag.ts
index 7ab106a650..77f874db36 100644
--- a/src/generators/dom/visitors/MustacheTag.ts
+++ b/src/generators/dom/visitors/MustacheTag.ts
@@ -18,8 +18,8 @@ export default function visitMustacheTag(
 	block.addVariable(value);
 	block.addElement(
 		name,
-		`${generator.helper('createText')}( ${value} = ${snippet} )`,
-		generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${value} = ${snippet} )` : '',
+		`@createText( ${value} = ${snippet} )`,
+		generator.hydratable ? `@claimText( ${state.parentNodes}, ${value} = ${snippet} )` : '',
 		state.parentNode,
 		true
 	);
diff --git a/src/generators/dom/visitors/RawMustacheTag.ts b/src/generators/dom/visitors/RawMustacheTag.ts
index ff487302b3..41c3af9aa4 100644
--- a/src/generators/dom/visitors/RawMustacheTag.ts
+++ b/src/generators/dom/visitors/RawMustacheTag.ts
@@ -23,15 +23,15 @@ export default function visitRawMustacheTag(
 	// exists for `Element`s.
 	block.addElement(
 		before,
-		`${generator.helper('createElement')}( 'noscript' )`,
-		`${generator.helper('createElement')}( 'noscript' )`,
+		`@createElement( 'noscript' )`,
+		`@createElement( 'noscript' )`,
 		state.parentNode,
 		true
 	);
 	block.addElement(
 		after,
-		`${generator.helper('createElement')}( 'noscript' )`,
-		`${generator.helper('createElement')}( 'noscript' )`,
+		`@createElement( 'noscript' )`,
+		`@createElement( 'noscript' )`,
 		state.parentNode,
 		true
 	);
@@ -39,9 +39,7 @@ export default function visitRawMustacheTag(
 	const isToplevel = !state.parentNode;
 
 	const mountStatement = `${before}.insertAdjacentHTML( 'afterend', ${value} = ${snippet} );`;
-	const detachStatement = `${generator.helper(
-		'detachBetween'
-	)}( ${before}, ${after} );`;
+	const detachStatement = `@detachBetween( ${before}, ${after} );`;
 
 	block.builders.mount.addLine(mountStatement);
 
diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts
index a14c25208c..7d4eaba770 100644
--- a/src/generators/dom/visitors/Text.ts
+++ b/src/generators/dom/visitors/Text.ts
@@ -12,8 +12,8 @@ export default function visitText(
 	if (!node._state.shouldCreate) return;
 	block.addElement(
 		node._state.name,
-		`${generator.helper('createText')}( ${JSON.stringify(node.data)} )`,
-		generator.hydratable ? `${generator.helper('claimText')}( ${state.parentNodes}, ${JSON.stringify(node.data)} )` : '',
+		`@createText( ${JSON.stringify(node.data)} )`,
+		generator.hydratable ? `@claimText( ${state.parentNodes}, ${JSON.stringify(node.data)} )` : '',
 		state.parentNode,
 		node.usedAsAnchor
 	);
diff --git a/src/shared/transitions.js b/src/shared/transitions.js
index ded3a35b4d..df03646510 100644
--- a/src/shared/transitions.js
+++ b/src/shared/transitions.js
@@ -1,4 +1,5 @@
 import { assign, noop } from './utils.js';
+import { createElement } from './dom.js';
 
 export function linear(t) {
 	return t;
@@ -45,7 +46,7 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
 
 	// TODO share <style> tag between all transitions?
 	if (obj.css) {
-		var style = document.createElement('style');
+		var style = createElement('style');
 	}
 
 	if (intro) {

From c8e396730b4569438547369667e96bb40a56c45a Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 00:27:41 -0400
Subject: [PATCH 2/8] remove unnecessary codebuilder

---
 src/generators/dom/index.ts | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index a3728e5939..ddc619e802 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -78,13 +78,10 @@ export default function dom(
 		visit(generator, block, state, node);
 	});
 
-	const builders = {
-		main: new CodeBuilder(),
-		_set: new CodeBuilder(),
-	};
+	const builder = new CodeBuilder();
 
 	if (computations.length) {
-		const builder = new CodeBuilder();
+		const computationBuilder = new CodeBuilder();
 
 		computations.forEach(({ key, deps }) => {
 			if (generator.readonly.has(key)) {
@@ -106,19 +103,19 @@ export default function dom(
 				'template'
 			)}.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`;
 
-			builder.addConditionalLine(condition, statement);
+			computationBuilder.addConditionalLine(condition, statement);
 		});
 
-		builders.main.addBlock(deindent`
+		builder.addBlock(deindent`
 			function ${generator.alias(
 				'recompute'
 			)} ( state, newState, oldState, isInitial ) {
-				${builder}
+				${computationBuilder}
 			}
 		`);
 	}
 
-	builders._set.addBlock(deindent`
+	const _set = deindent`
 		${options.dev &&
 			deindent`
 			if ( typeof newState !== 'object' ) {
@@ -144,16 +141,16 @@ export default function dom(
 			`while ( this._bindings.length ) this._bindings.pop()();`}
 		${(generator.hasComponents || generator.hasIntroTransitions) &&
 			`this._flush();`}
-	`);
+	`;
 
 	if (hasJs) {
-		builders.main.addBlock(
+		builder.addBlock(
 			`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`
 		);
 	}
 
 	if (generator.css && options.css !== false) {
-		builders.main.addBlock(deindent`
+		builder.addBlock(deindent`
 			function ${generator.alias('add_css')} () {
 				var style = @createElement( 'style' );
 				style.id = ${JSON.stringify(generator.cssId + '-style')};
@@ -164,7 +161,7 @@ export default function dom(
 	}
 
 	generator.blocks.forEach(block => {
-		builders.main.addBlock(block.render());
+		builder.addBlock(block.render());
 	});
 
 	const sharedPath = options.shared === true
@@ -186,7 +183,7 @@ export default function dom(
 		}`;
 
 	// TODO deprecate component.teardown()
-	builders.main.addBlock(deindent`
+	builder.addBlock(deindent`
 		function ${name} ( options ) {
 			options = options || {};
 			${options.dev &&
@@ -269,7 +266,7 @@ export default function dom(
 		@assign( ${prototypeBase}, ${proto});
 
 		${name}.prototype._set = function _set ( newState ) {
-			${builders._set}
+			${_set}
 		};
 
 		${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
@@ -286,7 +283,7 @@ export default function dom(
 		};
 	`);
 
-	let result = builders.main.toString()
+	let result = builder.toString()
 		.replace(helperPattern, (match: string, name: string) => generator.helper(name));
 
 	if (sharedPath) {

From 9feee3a0bfe3e992218fdefcfd1e383125b8ec0d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 10:05:52 -0400
Subject: [PATCH 3/8] use @foo for generator.alias("foo")

---
 src/generators/dom/index.ts                   | 71 +++++++------------
 src/generators/dom/preprocess.ts              |  2 +-
 .../dom/visitors/Component/Component.ts       |  2 +-
 .../dom/visitors/Element/EventHandler.ts      |  4 +-
 .../dom/visitors/Element/addTransitions.ts    |  6 +-
 src/generators/server-side-rendering/index.ts | 14 ++--
 .../visitors/Component.ts                     |  2 +-
 .../expected-bundle.js                        |  2 +-
 .../expected.js                               |  2 +-
 9 files changed, 40 insertions(+), 65 deletions(-)

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index ddc619e802..7dd1e04656 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -16,7 +16,6 @@ const helperPattern = new RegExp(`@(${Object.keys(shared).join('|')})\\b`, 'g');
 
 export class DomGenerator extends Generator {
 	blocks: Block[];
-	uses: Set<string>;
 	readonly: Set<string>;
 	metaBindings: string[];
 
@@ -34,7 +33,6 @@ export class DomGenerator extends Generator {
 	) {
 		super(parsed, source, name, options);
 		this.blocks = [];
-		this.uses = new Set();
 
 		this.readonly = new Set();
 
@@ -43,16 +41,6 @@ export class DomGenerator extends Generator {
 		// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
 		this.metaBindings = [];
 	}
-
-	helper(name: string) {
-		if (this.options.dev && `${name}Dev` in shared) {
-			name = `${name}Dev`;
-		}
-
-		this.uses.add(name);
-
-		return this.alias(name);
-	}
 }
 
 export default function dom(
@@ -99,17 +87,13 @@ export default function dom(
 						`( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )`
 				)
 				.join(' || ')}`;
-			const statement = `state.${key} = newState.${key} = ${generator.alias(
-				'template'
-			)}.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`;
+			const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`;
 
 			computationBuilder.addConditionalLine(condition, statement);
 		});
 
 		builder.addBlock(deindent`
-			function ${generator.alias(
-				'recompute'
-			)} ( state, newState, oldState, isInitial ) {
+			function @recompute ( state, newState, oldState, isInitial ) {
 				${computationBuilder}
 			}
 		`);
@@ -130,10 +114,7 @@ export default function dom(
 
 		var oldState = this._state;
 		this._state = @assign( {}, oldState, newState );
-		${computations.length &&
-			`${generator.alias(
-				'recompute'
-			)}( this._state, newState, oldState, false )`}
+		${computations.length && `@recompute( this._state, newState, oldState, false )`}
 		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
@@ -151,9 +132,9 @@ export default function dom(
 
 	if (generator.css && options.css !== false) {
 		builder.addBlock(deindent`
-			function ${generator.alias('add_css')} () {
+			function @add_css () {
 				var style = @createElement( 'style' );
-				style.id = ${JSON.stringify(generator.cssId + '-style')};
+				style.id = '${generator.cssId}-style';
 				style.textContent = ${JSON.stringify(generator.css)};
 				@appendNode( style, document.head );
 			}
@@ -171,14 +152,14 @@ export default function dom(
 	const prototypeBase =
 		`${name}.prototype` +
 		(templateProperties.methods
-			? `, ${generator.alias('template')}.methods`
+			? `, @template.methods`
 			: '');
 	const proto = sharedPath
 		? `@proto `
 		: deindent`
 		{
 			${['get', 'fire', 'observe', 'on', 'set', '_flush']
-				.map(n => `${n}: ${generator.helper(n)}`)
+				.map(n => `${n}: @${n}`)
 				.join(',\n')}
 		}`;
 
@@ -190,15 +171,11 @@ export default function dom(
 				`if ( !options.target && !options._root ) throw new Error( "'target' is a required option" );`}
 			${generator.usesRefs && `this.refs = {};`}
 			this._state = ${templateProperties.data
-				? `@assign( ${generator.alias(
-						'template'
-					)}.data(), options.data )`
+				? `@assign( @template.data(), options.data )`
 				: `options.data || {}`};
 			${generator.metaBindings}
 			${computations.length &&
-				`${generator.alias(
-					'recompute'
-				)}( this._state, this._state, {}, true );`}
+				`@recompute( this._state, this._state, {}, true );`}
 			${options.dev &&
 				Array.from(generator.expectedProperties).map(
 					prop =>
@@ -224,14 +201,12 @@ export default function dom(
 				options.css !== false &&
 				`if ( !document.getElementById( ${JSON.stringify(
 					generator.cssId + '-style'
-				)} ) ) ${generator.alias('add_css')}();`}
+				)} ) ) @add_css();`}
 			${(generator.hasComponents || generator.hasIntroTransitions) &&
 				`this._renderHooks = [];`}
 			${generator.hasComplexBindings && `this._bindings = [];`}
 
-			this._fragment = ${generator.alias(
-				'create_main_fragment'
-			)}( this._state, this );
+			this._fragment = @create_main_fragment( this._state, this );
 
 			if ( options.target ) {
 				${generator.hydratable ?
@@ -254,11 +229,9 @@ export default function dom(
 			${templateProperties.oncreate &&
 				deindent`
 				if ( options._root ) {
-					options._root._renderHooks.push( ${generator.alias(
-						'template'
-					)}.oncreate.bind( this ) );
+					options._root._renderHooks.push( @template.oncreate.bind( this ) );
 				} else {
-					${generator.alias('template')}.oncreate.call( this );
+					@template.oncreate.call( this );
 				}
 			`}
 		}
@@ -272,7 +245,7 @@ export default function dom(
 		${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
 			this.fire( 'destroy' );
 			${templateProperties.ondestroy &&
-				`${generator.alias('template')}.ondestroy.call( this );`}
+				`@template.ondestroy.call( this );`}
 
 			if ( detach !== false ) this._fragment.unmount();
 			this._fragment.destroy();
@@ -283,8 +256,16 @@ export default function dom(
 		};
 	`);
 
+	const usedHelpers = new Set();
+
 	let result = builder.toString()
-		.replace(helperPattern, (match: string, name: string) => generator.helper(name));
+		.replace(/@(\w+)\b/g, (match: string, name: string) => {
+			if (name in shared) {
+				if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
+				usedHelpers.add(name);
+			}
+			return generator.alias(name);
+		});
 
 	if (sharedPath) {
 		if (format !== 'es') {
@@ -293,7 +274,7 @@ export default function dom(
 			);
 		}
 
-		const names = Array.from(generator.uses).sort().map(name => {
+		const names = Array.from(usedHelpers).sort().map(name => {
 			return name !== generator.alias(name)
 				? `${name} as ${generator.alias(name)}`
 				: name;
@@ -301,7 +282,7 @@ export default function dom(
 
 		result = `import { ${names.join(', ')} } from ${JSON.stringify(sharedPath)};\n\n` + result;
 	} else {
-		generator.uses.forEach(key => {
+		usedHelpers.forEach(key => {
 			const str = shared[key];
 			const code = new MagicString(str);
 			const expression = parseExpressionAt(str, 0);
@@ -320,7 +301,7 @@ export default function dom(
 						if (node.name in shared) {
 							// this helper function depends on another one
 							const dependency = node.name;
-							generator.uses.add(dependency);
+							usedHelpers.add(dependency);
 
 							const alias = generator.alias(dependency);
 							if (alias !== node.name)
diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts
index dc3ff59717..d9600cea61 100644
--- a/src/generators/dom/preprocess.ts
+++ b/src/generators/dom/preprocess.ts
@@ -382,7 +382,7 @@ export default function preprocess(
 ) {
 	const block = new Block({
 		generator,
-		name: generator.alias('create_main_fragment'),
+		name: '@create_main_fragment',
 		key: null,
 
 		contexts: new Map(),
diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts
index 96fdd4e31e..a33458e037 100644
--- a/src/generators/dom/visitors/Component/Component.ts
+++ b/src/generators/dom/visitors/Component/Component.ts
@@ -184,7 +184,7 @@ export default function visitComponent(
 	const expression = node.name === ':Self'
 		? generator.name
 		: generator.importedComponents.get(node.name) ||
-				`${generator.alias('template')}.components.${node.name}`;
+				`@template.components.${node.name}`;
 
 	local.create.addBlockAtStart(deindent`
 		${statements.join('\n')}
diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 8edb614a62..2a13379364 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -72,9 +72,7 @@ export default function visitEventHandler(
 		block.addVariable(handlerName);
 
 		block.builders.hydrate.addBlock(deindent`
-			${handlerName} = ${generator.alias(
-				'template'
-			)}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
+			${handlerName} = @template.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
 				${handlerBody}
 			});
 		`);
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
index 2a0a52b41e..238831c04b 100644
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -20,7 +20,7 @@ export default function addTransitions(
 
 		block.addVariable(name);
 
-		const fn = `${generator.alias('template')}.transitions.${intro.name}`;
+		const fn = `@template.transitions.${intro.name}`;
 
 		block.builders.intro.addBlock(deindent`
 			${block.component}._renderHooks.push( function () {
@@ -48,7 +48,7 @@ export default function addTransitions(
 				? block.contextualise(intro.expression).snippet
 				: '{}';
 
-			const fn = `${generator.alias('template')}.transitions.${intro.name}`; // TODO add built-in transitions?
+			const fn = `@template.transitions.${intro.name}`; // TODO add built-in transitions?
 
 			if (outro) {
 				block.builders.intro.addBlock(deindent`
@@ -73,7 +73,7 @@ export default function addTransitions(
 				? block.contextualise(outro.expression).snippet
 				: '{}';
 
-			const fn = `${generator.alias('template')}.transitions.${outro.name}`;
+			const fn = `@template.transitions.${outro.name}`;
 
 			// TODO hide elements that have outro'd (unless they belong to a still-outroing
 			// group) prior to their removal from the DOM
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index 32a4c6635e..fe065c2260 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -59,22 +59,18 @@ export default function ssr(
 
 		${name}.data = function () {
 			return ${templateProperties.data
-				? `${generator.alias('template')}.data()`
+				? `@template.data()`
 				: `{}`};
 		};
 
 		${name}.render = function ( state, options ) {
 			${templateProperties.data
-				? `state = Object.assign( ${generator.alias(
-						'template'
-					)}.data(), state || {} );`
+				? `state = Object.assign( @template.data(), state || {} );`
 				: `state = state || {};`}
 
 			${computations.map(
 				({ key, deps }) =>
-					`state.${key} = ${generator.alias(
-						'template'
-					)}.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`
+					`state.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`
 			)}
 
 			${generator.bindings.length &&
@@ -121,7 +117,7 @@ export default function ssr(
 					const { name } = prop.key;
 					const expression =
 						generator.importedComponents.get(name) ||
-						`${generator.alias('template')}.components.${name}`;
+						`@template.components.${name}`;
 					return `addComponent( ${expression} );`;
 				})}
 			`}
@@ -144,7 +140,7 @@ export default function ssr(
 		function __escape ( html ) {
 			return String( html ).replace( /["'&<>]/g, match => escaped[ match ] );
 		}
-	`;
+	`.replace(/@(\w+)/g, (match, name) => generator.alias(name));
 
 	return generator.generate(result, options, { name, format });
 }
diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts
index 6fb87973e4..fb34b188f4 100644
--- a/src/generators/server-side-rendering/visitors/Component.ts
+++ b/src/generators/server-side-rendering/visitors/Component.ts
@@ -68,7 +68,7 @@ export default function visitComponent(
 	const expression = node.name === ':Self'
 		? generator.name
 		: generator.importedComponents.get(node.name) ||
-				`${generator.alias('template')}.components.${node.name}`;
+				`@template.components.${node.name}`;
 
 	bindings.forEach(binding => {
 		block.addBinding(binding, expression);
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index 35aa419e8b..0f9374f360 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -145,7 +145,7 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	style.id = "svelte-3842350206-style";
+	style.id = 'svelte-3842350206-style';
 	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
 }
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
index d3a818a9d0..07b8b893ac 100644
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -10,7 +10,7 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	style.id = "svelte-3842350206-style";
+	style.id = 'svelte-3842350206-style';
 	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
 }

From 334772a11d80186ee85f5d6ce74e9235d90944e2 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 11:24:24 -0400
Subject: [PATCH 4/8] use #foo instead of block.alias("foo")

---
 src/generators/dom/Block.ts                   |  4 +-
 src/generators/dom/index.ts                   |  9 +-
 .../dom/visitors/Component/Attribute.ts       |  5 +-
 src/generators/dom/visitors/EachBlock.ts      | 86 +++++++++----------
 .../dom/visitors/Element/Attribute.ts         |  5 +-
 .../dom/visitors/Element/Binding.ts           |  7 +-
 .../dom/visitors/Element/addTransitions.ts    |  4 +-
 src/generators/dom/visitors/Text.ts           |  5 +-
 .../dom/visitors/shared/binding/getSetter.ts  |  2 -
 src/generators/server-side-rendering/index.ts |  5 +-
 .../visitors/Component.ts                     |  7 +-
 src/utils/stringify.ts                        |  3 +
 .../expected-bundle.js                        |  2 +-
 .../expected.js                               |  2 +-
 test/server-side-rendering/index.js           | 15 ++--
 15 files changed, 84 insertions(+), 77 deletions(-)
 create mode 100644 src/utils/stringify.ts

diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index f706a48807..47cf59e0ce 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -367,6 +367,8 @@ export default class Block {
 					${properties}
 				};
 			}
-		`;
+		`.replace(/(\\)?#(\w*)/g, (match, escaped, name) => {
+			return escaped ? match.slice(1) : this.alias(name);
+		});
 	}
 }
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 7dd1e04656..6916e3b3e9 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -4,6 +4,7 @@ import annotateWithScopes from '../../utils/annotateWithScopes';
 import isReference from '../../utils/isReference';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent';
+import stringify from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
 import visit from './visit';
 import shared from './shared';
@@ -135,7 +136,7 @@ export default function dom(
 			function @add_css () {
 				var style = @createElement( 'style' );
 				style.id = '${generator.cssId}-style';
-				style.textContent = ${JSON.stringify(generator.css)};
+				style.textContent = ${stringify(generator.css)};
 				@appendNode( style, document.head );
 			}
 		`);
@@ -199,9 +200,7 @@ export default function dom(
 			this._torndown = false;
 			${generator.css &&
 				options.css !== false &&
-				`if ( !document.getElementById( ${JSON.stringify(
-					generator.cssId + '-style'
-				)} ) ) @add_css();`}
+				`if ( !document.getElementById( '${generator.cssId}-style' ) ) @add_css();`}
 			${(generator.hasComponents || generator.hasIntroTransitions) &&
 				`this._renderHooks = [];`}
 			${generator.hasComplexBindings && `this._bindings = [];`}
@@ -280,7 +279,7 @@ export default function dom(
 				: name;
 		});
 
-		result = `import { ${names.join(', ')} } from ${JSON.stringify(sharedPath)};\n\n` + result;
+		result = `import { ${names.join(', ')} } from ${stringify(sharedPath)};\n\n` + result;
 	} else {
 		usedHelpers.forEach(key => {
 			const str = shared[key];
diff --git a/src/generators/dom/visitors/Component/Attribute.ts b/src/generators/dom/visitors/Component/Attribute.ts
index 5549931864..35cabec66a 100644
--- a/src/generators/dom/visitors/Component/Attribute.ts
+++ b/src/generators/dom/visitors/Component/Attribute.ts
@@ -2,6 +2,7 @@ import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
 import { State } from '../../interfaces';
+import stringify from '../../../../utils/stringify';
 
 export default function visitAttribute(
 	generator: DomGenerator,
@@ -28,7 +29,7 @@ export default function visitAttribute(
 		if (value.type === 'Text') {
 			// static attributes
 			const result = isNaN(value.data)
-				? JSON.stringify(value.data)
+				? stringify(value.data)
 				: value.data;
 			local.staticAttributes.push({
 				name: attribute.name,
@@ -54,7 +55,7 @@ export default function visitAttribute(
 			attribute.value
 				.map(chunk => {
 					if (chunk.type === 'Text') {
-						return JSON.stringify(chunk.data);
+						return stringify(chunk.data);
 					} else {
 						const { dependencies, snippet } = block.contextualise(
 							chunk.expression
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index aab9372725..ef4e52ce3d 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -15,7 +15,6 @@ export default function visitEachBlock(
 	const create_each_block = node._block.name;
 	const each_block_value = node._block.listName;
 	const iterations = block.getUniqueName(`${each_block}_iterations`);
-	const i = block.alias(`i`);
 	const params = block.params.join(', ');
 	const anchor = node.needsAnchor
 		? block.getUniqueName(`${each_block}_anchor`)
@@ -27,7 +26,6 @@ export default function visitEachBlock(
 		create_each_block,
 		each_block_value,
 		iterations,
-		i,
 		params,
 		anchor,
 		mountOrIntro,
@@ -138,7 +136,6 @@ function keyed(
 		each_block,
 		create_each_block,
 		each_block_value,
-		i,
 		params,
 		anchor,
 		mountOrIntro,
@@ -170,15 +167,15 @@ function keyed(
 	}
 
 	block.builders.init.addBlock(deindent`
-		for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
-			var ${key} = ${each_block_value}[${i}].${node.key};
-			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component}, ${key} );
+		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
+			var ${key} = ${each_block_value}[#i].${node.key};
+			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
 
 			if ( ${last} ) ${last}.next = ${iteration};
 			${iteration}.last = ${last};
 			${last} = ${iteration};
 
-			if ( ${i} === 0 ) ${head} = ${iteration};
+			if ( #i === 0 ) ${head} = ${iteration};
 		}
 	`);
 
@@ -231,9 +228,9 @@ function keyed(
 				${expected} = ${expected}.next;
 			}
 
-			for ( ${i} = 0; ${i} < discard_pile.length; ${i} += 1 ) {
-				if ( discard_pile[${i}].discard ) {
-					${fn}( discard_pile[${i}] );
+			for ( #i = 0; #i < discard_pile.length; #i += 1 ) {
+				if ( discard_pile[#i].discard ) {
+					${fn}( discard_pile[#i] );
 				}
 			}
 		`;
@@ -253,8 +250,8 @@ function keyed(
 				${expected} = ${expected}.next;
 			}
 
-			for ( ${i} = 0; ${i} < discard_pile.length; ${i} += 1 ) {
-				var ${iteration} = discard_pile[${i}];
+			for ( #i = 0; #i < discard_pile.length; #i += 1 ) {
+				var ${iteration} = discard_pile[#i];
 				if ( ${iteration}.discard ) {
 					${fn}( ${iteration} );
 				}
@@ -270,12 +267,12 @@ function keyed(
 
 		var discard_pile = [];
 
-		for ( ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
-			var ${key} = ${each_block_value}[${i}].${node.key};
+		for ( #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
+			var ${key} = ${each_block_value}[#i].${node.key};
 			var ${iteration} = ${lookup}[${key}];
 
 			${dynamic &&
-				`if ( ${iteration} ) ${iteration}.update( changed, ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i} );`}
+				`if ( ${iteration} ) ${iteration}.update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );`}
 
 			if ( ${expected} ) {
 				if ( ${key} === ${expected}.key ) {
@@ -296,7 +293,7 @@ function keyed(
 						if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} );
 					} else {
 						// key is being inserted
-						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component}, ${key} );
+						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
 						${iteration}.create();
 						${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first );
 
@@ -311,7 +308,7 @@ function keyed(
 					${iteration}.next = null;
 					${iteration}.mount( ${parentNode}, ${anchor} );
 				} else {
-					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component}, ${key} );
+					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
 					${iteration}.create();
 					${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				}
@@ -360,7 +357,6 @@ function unkeyed(
 		create_each_block,
 		each_block_value,
 		iterations,
-		i,
 		params,
 		anchor,
 		mountOrIntro,
@@ -369,8 +365,8 @@ function unkeyed(
 	block.builders.init.addBlock(deindent`
 		var ${iterations} = [];
 
-		for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
-			${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );
+		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
+			${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
 		}
 	`);
 
@@ -378,20 +374,20 @@ function unkeyed(
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addBlock(deindent`
-		for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
-			${iterations}[${i}].create();
+		for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+			${iterations}[#i].create();
 		}
 	`);
 
 	block.builders.claim.addBlock(deindent`
-		for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
-			${iterations}[${i}].claim( ${state.parentNodes} );
+		for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+			${iterations}[#i].claim( ${state.parentNodes} );
 		}
 	`);
 
 	block.builders.mount.addBlock(deindent`
-		for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
-			${iterations}[${i}].${mountOrIntro}( ${targetNode}, ${anchorNode} );
+		for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+			${iterations}[#i].${mountOrIntro}( ${targetNode}, ${anchorNode} );
 		}
 	`);
 
@@ -412,26 +408,26 @@ function unkeyed(
 		const forLoopBody = node._block.hasUpdateMethod
 			? node._block.hasIntroMethod
 				? deindent`
-					if ( ${iterations}[${i}] ) {
-						${iterations}[${i}].update( changed, ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i} );
+					if ( ${iterations}[#i] ) {
+						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );
-						${iterations}[${i}].create();
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i].create();
 					}
-					${iterations}[${i}].intro( ${parentNode}, ${anchor} );
+					${iterations}[#i].intro( ${parentNode}, ${anchor} );
 				`
 				: deindent`
-					if ( ${iterations}[${i}] ) {
-						${iterations}[${i}].update( changed, ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i} );
+					if ( ${iterations}[#i] ) {
+						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );
-						${iterations}[${i}].create();
-						${iterations}[${i}].mount( ${parentNode}, ${anchor} );
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i].create();
+						${iterations}[#i].mount( ${parentNode}, ${anchor} );
 					}
 				`
 			: deindent`
-				${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );
-				${iterations}[${i}].${mountOrIntro}( ${parentNode}, ${anchor} );
+				${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+				${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} );
 			`;
 
 		const start = node._block.hasUpdateMethod ? '0' : `${iterations}.length`;
@@ -449,12 +445,12 @@ function unkeyed(
 					}
 				}
 
-				for ( ; ${i} < ${iterations}.length; ${i} += 1 ) ${outro}( ${i} );
+				for ( ; #i < ${iterations}.length; #i += 1 ) ${outro}( #i );
 			`
 			: deindent`
-				for ( ; ${i} < ${iterations}.length; ${i} += 1 ) {
-					${iterations}[${i}].unmount();
-					${iterations}[${i}].destroy();
+				for ( ; #i < ${iterations}.length; #i += 1 ) {
+					${iterations}[#i].unmount();
+					${iterations}[#i].destroy();
 				}
 				${iterations}.length = ${each_block_value}.length;
 			`;
@@ -463,7 +459,7 @@ function unkeyed(
 			var ${each_block_value} = ${snippet};
 
 			if ( ${condition} ) {
-				for ( var ${i} = ${start}; ${i} < ${each_block_value}.length; ${i} += 1 ) {
+				for ( var #i = ${start}; #i < ${each_block_value}.length; #i += 1 ) {
 					${forLoopBody}
 				}
 
@@ -473,8 +469,8 @@ function unkeyed(
 	}
 
 	block.builders.unmount.addBlock(deindent`
-		for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
-			${iterations}[${i}].unmount();
+		for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+			${iterations}[#i].unmount();
 		}
 	`);
 
diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
index a3e21953d7..f2951cb750 100644
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ b/src/generators/dom/visitors/Element/Attribute.ts
@@ -1,5 +1,6 @@
 import attributeLookup from './lookup';
 import deindent from '../../../../utils/deindent';
+import stringify from '../../../../utils/stringify';
 import getStaticAttributeValue from './getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
@@ -57,7 +58,7 @@ export default function visitAttribute(
 				attribute.value
 					.map((chunk: Node) => {
 						if (chunk.type === 'Text') {
-							return JSON.stringify(chunk.data);
+							return stringify(chunk.data);
 						} else {
 							const { snippet } = block.contextualise(chunk.expression);
 							return `( ${snippet} )`;
@@ -127,7 +128,7 @@ export default function visitAttribute(
 			? 'true'
 			: attribute.value.length === 0
 				? `''`
-				: JSON.stringify(attribute.value[0].data);
+				: stringify(attribute.value[0].data);
 
 		const statement = propertyName
 			? `${state.parentNode}.${propertyName} = ${value};`
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 185996b898..d13b7ffdb0 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -57,7 +57,7 @@ export default function visitBinding(
 		value,
 	});
 	let updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
-	const lock = block.alias(`${state.parentNode}_updating`);
+	const lock = `#${state.parentNode}_updating`;
 	let updateCondition = `!${lock}`;
 
 	block.addVariable(lock, 'false');
@@ -69,7 +69,6 @@ export default function visitBinding(
 		}
 
 		const value = block.getUniqueName('value');
-		const i = block.alias('i');
 		const option = block.getUniqueName('option');
 
 		const ifStatement = isMultipleSelect
@@ -83,8 +82,8 @@ export default function visitBinding(
 
 		updateElement = deindent`
 			var ${value} = ${snippet};
-			for ( var ${i} = 0; ${i} < ${state.parentNode}.options.length; ${i} += 1 ) {
-				var ${option} = ${state.parentNode}.options[${i}];
+			for ( var #i = 0; #i < ${state.parentNode}.options.length; #i += 1 ) {
+				var ${option} = ${state.parentNode}.options[#i];
 
 				${ifStatement}
 			}
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
index 238831c04b..0681fcc154 100644
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -34,7 +34,7 @@ export default function addTransitions(
 		block.builders.outro.addBlock(deindent`
 			${name}.run( false, function () {
 				${block.component}.fire( 'outro.end', { node: ${state.name} });
-				if ( --${block.alias('outros')} === 0 ) ${block.alias('outrocallback')}();
+				if ( --#outros === 0 ) #outrocallback();
 				${name} = null;
 			});
 		`);
@@ -81,7 +81,7 @@ export default function addTransitions(
 				${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
 				${outroName}.run( false, function () {
 					${block.component}.fire( 'outro.end', { node: ${state.name} });
-					if ( --${block.alias('outros')} === 0 ) ${block.alias('outrocallback')}();
+					if ( --#outros === 0 ) #outrocallback();
 				});
 			`);
 		}
diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts
index 7d4eaba770..9231073167 100644
--- a/src/generators/dom/visitors/Text.ts
+++ b/src/generators/dom/visitors/Text.ts
@@ -2,6 +2,7 @@ import { DomGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
 import { State } from '../interfaces';
+import stringify from '../../../utils/stringify';
 
 export default function visitText(
 	generator: DomGenerator,
@@ -12,8 +13,8 @@ export default function visitText(
 	if (!node._state.shouldCreate) return;
 	block.addElement(
 		node._state.name,
-		`@createText( ${JSON.stringify(node.data)} )`,
-		generator.hydratable ? `@claimText( ${state.parentNodes}, ${JSON.stringify(node.data)} )` : '',
+		`@createText( ${stringify(node.data)} )`,
+		generator.hydratable ? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )` : '',
 		state.parentNode,
 		node.usedAsAnchor
 	);
diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts
index 679d9005f6..e6a75dfeec 100644
--- a/src/generators/dom/visitors/shared/binding/getSetter.ts
+++ b/src/generators/dom/visitors/shared/binding/getSetter.ts
@@ -33,8 +33,6 @@ export default function getSetter({
 	}
 
 	if (attribute.value.type === 'MemberExpression') {
-		const alias = block.alias(name);
-
 		return deindent`
 			var state = ${block.component}.get();
 			${snippet} = ${value};
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index fe065c2260..c27a278d0b 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -2,6 +2,7 @@ import deindent from '../../utils/deindent';
 import Generator from '../Generator';
 import Block from './Block';
 import visit from './visit';
+import stringify from '../../utils/stringify';
 import { Parsed, Node, CompileOptions } from '../../interfaces';
 
 export class SsrGenerator extends Generator {
@@ -55,7 +56,7 @@ export default function ssr(
 
 		var ${name} = {};
 
-		${name}.filename = ${JSON.stringify(options.filename)};
+		${name}.filename = ${stringify(options.filename)};
 
 		${name}.data = function () {
 			return ${templateProperties.data
@@ -95,7 +96,7 @@ export default function ssr(
 				deindent`
 				components.push({
 					filename: ${name}.filename,
-					css: ${JSON.stringify(generator.css)},
+					css: ${stringify(generator.css)},
 					map: null // TODO
 				});
 			`}
diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts
index fb34b188f4..c6280ca67e 100644
--- a/src/generators/server-side-rendering/visitors/Component.ts
+++ b/src/generators/server-side-rendering/visitors/Component.ts
@@ -4,6 +4,7 @@ import { SsrGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
 import getObject from '../../../utils/getObject';
+import stringify from '../../../utils/stringify';
 import getTailSnippet from '../../../utils/getTailSnippet';
 
 export default function visitComponent(
@@ -11,7 +12,7 @@ export default function visitComponent(
 	block: Block,
 	node: Node
 ) {
-	function stringify(chunk: Node) {
+	function stringifyAttribute(chunk: Node) {
 		if (chunk.type === 'Text') return chunk.data;
 		if (chunk.type === 'MustacheTag') {
 			const { snippet } = block.contextualise(chunk.expression);
@@ -41,13 +42,13 @@ export default function visitComponent(
 			} else if (attribute.value.length === 1) {
 				const chunk = attribute.value[0];
 				if (chunk.type === 'Text') {
-					value = isNaN(chunk.data) ? JSON.stringify(chunk.data) : chunk.data;
+					value = isNaN(chunk.data) ? stringify(chunk.data) : chunk.data;
 				} else {
 					const { snippet } = block.contextualise(chunk.expression);
 					value = snippet;
 				}
 			} else {
-				value = '`' + attribute.value.map(stringify).join('') + '`';
+				value = '`' + attribute.value.map(stringifyAttribute).join('') + '`';
 			}
 
 			return `${attribute.name}: ${value}`;
diff --git a/src/utils/stringify.ts b/src/utils/stringify.ts
new file mode 100644
index 0000000000..fdb0410710
--- /dev/null
+++ b/src/utils/stringify.ts
@@ -0,0 +1,3 @@
+export default function stringify(data: string) {
+	return JSON.stringify(data.replace(/([^\\])?([@#])/g, '$1\\$2'));
+}
\ No newline at end of file
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index 0f9374f360..b2ded1b0e0 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -198,7 +198,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
+	if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
index 07b8b893ac..6c44f150e2 100644
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -63,7 +63,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
+	if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
index e70bb13e73..4250dcce85 100644
--- a/test/server-side-rendering/index.js
+++ b/test/server-side-rendering/index.js
@@ -65,11 +65,16 @@ describe("ssr", () => {
 			fs.writeFileSync(`${dir}/_actual.html`, html);
 			if (css) fs.writeFileSync(`${dir}/_actual.css`, css);
 
-			assert.htmlEqual(html, expectedHtml);
-			assert.equal(
-				css.replace(/^\s+/gm, ""),
-				expectedCss.replace(/^\s+/gm, "")
-			);
+			try {
+				assert.htmlEqual(html, expectedHtml);
+				assert.equal(
+					css.replace(/^\s+/gm, ""),
+					expectedCss.replace(/^\s+/gm, "")
+				);
+			} catch (err) {
+				showOutput(dir, { generate: 'ssr' });
+				throw err;
+			}
 		});
 	});
 

From b7574444846cc0f2f951bd1172d406c3b8e3eb02 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 11:26:35 -0400
Subject: [PATCH 5/8] remove unused regex

---
 src/generators/dom/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 6916e3b3e9..c82ffbc792 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -13,8 +13,6 @@ import preprocess from './preprocess';
 import Block from './Block';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
 
-const helperPattern = new RegExp(`@(${Object.keys(shared).join('|')})\\b`, 'g');
-
 export class DomGenerator extends Generator {
 	blocks: Block[];
 	readonly: Set<string>;

From 8402ae9c24439b1d49d9ab7021c63fcb238d1582 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 12:27:11 -0400
Subject: [PATCH 6/8] use #target and #component instead of block.target and
 block.component

---
 src/generators/dom/Block.ts                   | 22 +++++-----------
 .../dom/visitors/Component/Binding.ts         |  2 +-
 .../dom/visitors/Component/Component.ts       |  6 ++---
 .../dom/visitors/Component/EventHandler.ts    |  2 +-
 src/generators/dom/visitors/Component/Ref.ts  |  4 +--
 src/generators/dom/visitors/EachBlock.ts      | 26 +++++++++----------
 .../dom/visitors/Element/Binding.ts           | 10 +++----
 .../dom/visitors/Element/Element.ts           |  4 +--
 .../dom/visitors/Element/EventHandler.ts      |  8 +++---
 src/generators/dom/visitors/Element/Ref.ts    |  4 +--
 .../dom/visitors/Element/addTransitions.ts    | 12 ++++-----
 .../dom/visitors/Element/meta/Window.ts       | 18 ++++++-------
 src/generators/dom/visitors/IfBlock.ts        | 26 +++++++++----------
 src/generators/dom/visitors/YieldTag.ts       |  6 ++---
 .../dom/visitors/shared/binding/getSetter.ts  | 12 ++++-----
 15 files changed, 77 insertions(+), 85 deletions(-)

diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index 47cf59e0ce..733bb68490 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -62,9 +62,6 @@ export default class Block {
 	variables: Map<string, string>;
 	getUniqueName: (name: string) => string;
 
-	component: string;
-	target: string;
-
 	hasUpdateMethod: boolean;
 	autofocus: string;
 
@@ -111,10 +108,6 @@ export default class Block {
 		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker(options.params);
 
-		// unique names
-		this.component = this.getUniqueName('component');
-		this.target = this.getUniqueName('target');
-
 		this.hasUpdateMethod = false; // determined later
 	}
 
@@ -192,7 +185,7 @@ export default class Block {
 			);
 		} else {
 			this.builders.mount.addLine(
-				`@insertNode( ${name}, ${this.target}, anchor );`
+				`@insertNode( ${name}, #target, anchor );`
 			);
 		}
 	}
@@ -268,7 +261,7 @@ export default class Block {
 			properties.addBlock(`mount: @noop,`);
 		} else {
 			properties.addBlock(deindent`
-				mount: function ( ${this.target}, anchor ) {
+				mount: function ( #target, anchor ) {
 					${this.builders.mount}
 				},
 			`);
@@ -289,20 +282,20 @@ export default class Block {
 		if (this.hasIntroMethod) {
 			if (hasIntros) {
 				properties.addBlock(deindent`
-					intro: function ( ${this.target}, anchor ) {
+					intro: function ( #target, anchor ) {
 						if ( ${introing} ) return;
 						${introing} = true;
 						${hasOutros && `${outroing} = false;`}
 
 						${this.builders.intro}
 
-						this.mount( ${this.target}, anchor );
+						this.mount( #target, anchor );
 					},
 				`);
 			} else {
 				properties.addBlock(deindent`
-					intro: function ( ${this.target}, anchor ) {
-						this.mount( ${this.target}, anchor );
+					intro: function ( #target, anchor ) {
+						this.mount( #target, anchor );
 					},
 				`);
 			}
@@ -351,8 +344,7 @@ export default class Block {
 		}
 
 		return deindent`
-			function ${this.name} ( ${this.params.join(', ')}, ${this.component}${this
-			.key
+			function ${this.name} ( ${this.params.join(', ')}, #component${this.key
 			? `, ${localKey}`
 			: ''} ) {
 				${this.variables.size > 0 && (
diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts
index a071dc1439..cd10709238 100644
--- a/src/generators/dom/visitors/Component/Binding.ts
+++ b/src/generators/dom/visitors/Component/Binding.ts
@@ -66,7 +66,7 @@ export default function visitBinding(
 	block.addVariable(updating, 'false');
 
 	local.create.addBlock(deindent`
-		${block.component}._bindings.push( function () {
+		#component._bindings.push( function () {
 			if ( ${local.name}._torndown ) return;
 			${local.name}.observe( '${attribute.name}', function ( value ) {
 				if ( ${updating} ) return;
diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts
index a33458e037..0180a2c553 100644
--- a/src/generators/dom/visitors/Component/Component.ts
+++ b/src/generators/dom/visitors/Component/Component.ts
@@ -113,7 +113,7 @@ export default function visitComponent(
 	}
 
 	const componentInitProperties = [
-		`_root: ${block.component}._root`,
+		`_root: #component._root`,
 	];
 
 	// Component has children, put them in a separate {{yield}} block
@@ -129,7 +129,7 @@ export default function visitComponent(
 		const yieldFragment = block.getUniqueName(`${name}_yield_fragment`);
 
 		block.builders.init.addLine(
-			`var ${yieldFragment} = ${childBlock.name}( ${params}, ${block.component} );`
+			`var ${yieldFragment} = ${childBlock.name}( ${params}, #component );`
 		);
 
 		block.builders.create.addLine(
@@ -225,7 +225,7 @@ export default function visitComponent(
 
 	block.builders.init.addBlock(local.create);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addLine(`${name}._fragment.create();`);
diff --git a/src/generators/dom/visitors/Component/EventHandler.ts b/src/generators/dom/visitors/Component/EventHandler.ts
index 2db9549389..1010456253 100644
--- a/src/generators/dom/visitors/Component/EventHandler.ts
+++ b/src/generators/dom/visitors/Component/EventHandler.ts
@@ -16,7 +16,7 @@ export default function visitEventHandler(
 	generator.addSourcemapLocations(attribute.expression);
 	generator.code.prependRight(
 		attribute.expression.start,
-		`${block.component}.`
+		`${block.alias('component')}.`
 	);
 
 	const usedContexts: string[] = [];
diff --git a/src/generators/dom/visitors/Component/Ref.ts b/src/generators/dom/visitors/Component/Ref.ts
index 3b9a929ed1..8de874ac2f 100644
--- a/src/generators/dom/visitors/Component/Ref.ts
+++ b/src/generators/dom/visitors/Component/Ref.ts
@@ -15,10 +15,10 @@ export default function visitRef(
 	generator.usesRefs = true;
 
 	local.create.addLine(
-		`${block.component}.refs.${attribute.name} = ${local.name};`
+		`#component.refs.${attribute.name} = ${local.name};`
 	);
 
 	block.builders.destroy.addLine(deindent`
-		if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null;
+		if ( #component.refs.${attribute.name} === ${local.name} ) #component.refs.${attribute.name} = null;
 	`);
 }
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index ef4e52ce3d..921be74683 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -63,14 +63,14 @@ export default function visitEachBlock(
 		// TODO neaten this up... will end up with an empty line in the block
 		block.builders.init.addBlock(deindent`
 			if ( !${each_block_value}.length ) {
-				${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+				${each_block_else} = ${node.else._block.name}( ${params}, #component );
 				${each_block_else}.create();
 			}
 		`);
 
 		block.builders.mount.addBlock(deindent`
 			if ( ${each_block_else} ) {
-				${each_block_else}.${mountOrIntro}( ${state.parentNode || block.target}, null );
+				${each_block_else}.${mountOrIntro}( ${state.parentNode || '#target'}, null );
 			}
 		`);
 
@@ -81,7 +81,7 @@ export default function visitEachBlock(
 				if ( !${each_block_value}.length && ${each_block_else} ) {
 					${each_block_else}.update( changed, ${params} );
 				} else if ( !${each_block_value}.length ) {
-					${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+					${each_block_else} = ${node.else._block.name}( ${params}, #component );
 					${each_block_else}.create();
 					${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				} else if ( ${each_block_else} ) {
@@ -99,7 +99,7 @@ export default function visitEachBlock(
 						${each_block_else} = null;
 					}
 				} else if ( !${each_block_else} ) {
-					${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+					${each_block_else} = ${node.else._block.name}( ${params}, #component );
 					${each_block_else}.create();
 					${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				}
@@ -169,7 +169,7 @@ function keyed(
 	block.builders.init.addBlock(deindent`
 		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
 			var ${key} = ${each_block_value}[#i].${node.key};
-			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+			var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 
 			if ( ${last} ) ${last}.next = ${iteration};
 			${iteration}.last = ${last};
@@ -179,7 +179,7 @@ function keyed(
 		}
 	`);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addBlock(deindent`
@@ -293,7 +293,7 @@ function keyed(
 						if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} );
 					} else {
 						// key is being inserted
-						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+						${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 						${iteration}.create();
 						${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first );
 
@@ -308,7 +308,7 @@ function keyed(
 					${iteration}.next = null;
 					${iteration}.mount( ${parentNode}, ${anchor} );
 				} else {
-					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} );
+					${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
 					${iteration}.create();
 					${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} );
 				}
@@ -366,11 +366,11 @@ function unkeyed(
 		var ${iterations} = [];
 
 		for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
-			${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+			${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 		}
 	`);
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addBlock(deindent`
@@ -411,7 +411,7 @@ function unkeyed(
 					if ( ${iterations}[#i] ) {
 						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 						${iterations}[#i].create();
 					}
 					${iterations}[#i].intro( ${parentNode}, ${anchor} );
@@ -420,13 +420,13 @@ function unkeyed(
 					if ( ${iterations}[#i] ) {
 						${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
 					} else {
-						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+						${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 						${iterations}[#i].create();
 						${iterations}[#i].mount( ${parentNode}, ${anchor} );
 					}
 				`
 			: deindent`
-				${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} );
+				${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
 				${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} );
 			`;
 
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index d13b7ffdb0..c19faf2b7f 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -91,7 +91,7 @@ export default function visitBinding(
 
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`if ( !('${name}' in state) ) ${block.component}._bindings.push( ${handler} );`
+			`if ( !('${name}' in state) ) #component._bindings.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
@@ -107,18 +107,18 @@ export default function visitBinding(
 			: `${state.parentNode}.__value === ${snippet}`;
 
 		block.builders.hydrate.addLine(
-			`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
+			`#component._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
 		);
 
 		block.builders.destroy.addBlock(
-			`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
+			`#component._bindingGroups[${bindingGroup}].splice( #component._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
 		);
 
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`${block.component}._bindings.push( ${handler} );`
+			`#component._bindings.push( ${handler} );`
 		);
 
 		if (attribute.name === 'currentTime') {
@@ -221,7 +221,7 @@ function getBindingValue(
 	// <input type='checkbox' bind:group='foo'>
 	if (attribute.name === 'group') {
 		if (type === 'checkbox') {
-			return `@getBindingGroupValue( ${block.component}._bindingGroups[${bindingGroup}] )`;
+			return `@getBindingGroupValue( #component._bindingGroups[${bindingGroup}] )`;
 		}
 
 		return `${state.parentNode}.__value`;
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index 946f716b73..0851878c6f 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -63,7 +63,7 @@ export default function visitElement(
 	if (state.parentNode) {
 		block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`);
 	} else {
-		block.builders.mount.addLine(`@insertNode( ${name}, ${block.target}, anchor );`);
+		block.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
 	}
 
 	// add CSS encapsulation attribute
@@ -97,7 +97,7 @@ export default function visitElement(
 			const updates: string[] = [];
 
 			if (childState.usesComponent) {
-				initialProps.push(`component: ${block.component}`);
+				initialProps.push(`component: #component`);
 			}
 
 			childState.allUsedContexts.forEach((contextName: string) => {
diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 2a13379364..9aeea16302 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -24,7 +24,7 @@ export default function visitEventHandler(
 		// TODO verify that it's a valid callee (i.e. built-in or declared method)
 		generator.code.prependRight(
 			attribute.expression.start,
-			`${block.component}.`
+			`${block.alias('component')}.`
 		);
 		if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
 	}
@@ -45,7 +45,7 @@ export default function visitEventHandler(
 	const declarations = usedContexts.map(name => {
 		if (name === 'state') {
 			if (shouldHoist) state.usesComponent = true;
-			return `var state = ${block.component}.get();`;
+			return `var state = #component.get();`;
 		}
 
 		const listName = block.listNames.get(name);
@@ -63,7 +63,7 @@ export default function visitEventHandler(
 
 	// create the handler body
 	const handlerBody = deindent`
-		${state.usesComponent && `var ${block.component} = this._svelte.component;`}
+		${state.usesComponent && `var ${block.alias('component')} = this._svelte.component;`}
 		${declarations}
 		[✂${attribute.expression.start}-${attribute.expression.end}✂];
 	`;
@@ -72,7 +72,7 @@ export default function visitEventHandler(
 		block.addVariable(handlerName);
 
 		block.builders.hydrate.addBlock(deindent`
-			${handlerName} = @template.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) {
+			${handlerName} = @template.events.${name}.call( #component, ${state.parentNode}, function ( event ) {
 				${handlerBody}
 			});
 		`);
diff --git a/src/generators/dom/visitors/Element/Ref.ts b/src/generators/dom/visitors/Element/Ref.ts
index 53b808c97e..54af267ef6 100644
--- a/src/generators/dom/visitors/Element/Ref.ts
+++ b/src/generators/dom/visitors/Element/Ref.ts
@@ -14,11 +14,11 @@ export default function visitRef(
 	const name = attribute.name;
 
 	block.builders.mount.addLine(
-		`${block.component}.refs.${name} = ${state.parentNode};`
+		`#component.refs.${name} = ${state.parentNode};`
 	);
 
 	block.builders.unmount.addLine(deindent`
-		if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null;
+		if ( #component.refs.${name} === ${state.parentNode} ) #component.refs.${name} = null;
 	`);
 
 	generator.usesRefs = true; // so this component.refs object is created
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
index 0681fcc154..b533ef8536 100644
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -23,17 +23,17 @@ export default function addTransitions(
 		const fn = `@template.transitions.${intro.name}`;
 
 		block.builders.intro.addBlock(deindent`
-			${block.component}._renderHooks.push( function () {
+			#component._renderHooks.push( function () {
 				if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 				${name}.run( true, function () {
-					${block.component}.fire( 'intro.end', { node: ${state.name} });
+					#component.fire( 'intro.end', { node: ${state.name} });
 				});
 			});
 		`);
 
 		block.builders.outro.addBlock(deindent`
 			${name}.run( false, function () {
-				${block.component}.fire( 'outro.end', { node: ${state.name} });
+				#component.fire( 'outro.end', { node: ${state.name} });
 				if ( --#outros === 0 ) #outrocallback();
 				${name} = null;
 			});
@@ -58,10 +58,10 @@ export default function addTransitions(
 			}
 
 			block.builders.intro.addBlock(deindent`
-				${block.component}._renderHooks.push( function () {
+				#component._renderHooks.push( function () {
 					${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
 					${introName}.run( true, function () {
-						${block.component}.fire( 'intro.end', { node: ${state.name} });
+						#component.fire( 'intro.end', { node: ${state.name} });
 					});
 				});
 			`);
@@ -80,7 +80,7 @@ export default function addTransitions(
 			block.builders.outro.addBlock(deindent`
 				${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
 				${outroName}.run( false, function () {
-					${block.component}.fire( 'outro.end', { node: ${state.name} });
+					#component.fire( 'outro.end', { node: ${state.name} });
 					if ( --#outros === 0 ) #outrocallback();
 				});
 			`);
diff --git a/src/generators/dom/visitors/Element/meta/Window.ts b/src/generators/dom/visitors/Element/meta/Window.ts
index 867ecdfba6..ea27f4ae43 100644
--- a/src/generators/dom/visitors/Element/meta/Window.ts
+++ b/src/generators/dom/visitors/Element/meta/Window.ts
@@ -47,13 +47,13 @@ export default function visitWindow(
 				// allow event.stopPropagation(), this.select() etc
 				generator.code.prependRight(
 					attribute.expression.start,
-					`${block.component}.`
+					`${block.alias('component')}.`
 				);
 			}
 
 			const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
 			const handlerBody = deindent`
-				${usesState && `var state = ${block.component}.get();`}
+				${usesState && `var state = #component.get();`}
 				[✂${attribute.expression.start}-${attribute.expression.end}✂];
 			`;
 
@@ -113,7 +113,7 @@ export default function visitWindow(
 			${event === 'scroll' && `${lock} = true;`}
 			${generator.options.dev && `component._updatingReadonlyProperty = true;`}
 
-			${block.component}.set({
+			#component.set({
 				${props}
 			});
 
@@ -141,10 +141,10 @@ export default function visitWindow(
 			function ${observerCallback} () {
 				if ( ${lock} ) return;
 				var x = ${bindings.scrollX
-					? `${block.component}.get( '${bindings.scrollX}' )`
+					? `#component.get( '${bindings.scrollX}' )`
 					: `window.scrollX`};
 				var y = ${bindings.scrollY
-					? `${block.component}.get( '${bindings.scrollY}' )`
+					? `#component.get( '${bindings.scrollY}' )`
 					: `window.scrollY`};
 				window.scrollTo( x, y );
 			};
@@ -152,17 +152,17 @@ export default function visitWindow(
 
 		if (bindings.scrollX)
 			block.builders.init.addLine(
-				`${block.component}.observe( '${bindings.scrollX}', ${observerCallback} );`
+				`#component.observe( '${bindings.scrollX}', ${observerCallback} );`
 			);
 		if (bindings.scrollY)
 			block.builders.init.addLine(
-				`${block.component}.observe( '${bindings.scrollY}', ${observerCallback} );`
+				`#component.observe( '${bindings.scrollY}', ${observerCallback} );`
 			);
 	} else if (bindings.scrollX || bindings.scrollY) {
 		const isX = !!bindings.scrollX;
 
 		block.builders.init.addBlock(deindent`
-			${block.component}.observe( '${bindings.scrollX ||
+			#component.observe( '${bindings.scrollX ||
 			bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
 				if ( ${lock} ) return;
 				window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y'} );
@@ -175,7 +175,7 @@ export default function visitWindow(
 		const handlerName = block.getUniqueName(`onlinestatuschanged`);
 		block.builders.init.addBlock(deindent`
 			function ${handlerName} ( event ) {
-				${block.component}.set({ ${bindings.online}: navigator.onLine });
+				#component.set({ ${bindings.online}: navigator.onLine });
 			};
 			window.addEventListener( 'online', ${handlerName} );
 			window.addEventListener( 'offline', ${handlerName} );
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts
index ace976952d..ac29d1d897 100644
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/dom/visitors/IfBlock.ts
@@ -136,12 +136,12 @@ function simple(
 	{ name, anchor, params, if_name }
 ) {
 	block.builders.init.addBlock(deindent`
-		var ${name} = (${branch.condition}) && ${branch.block}( ${params}, ${block.component} );
+		var ${name} = (${branch.condition}) && ${branch.block}( ${params}, #component );
 	`);
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount';
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
@@ -156,7 +156,7 @@ function simple(
 				if ( ${name} ) {
 					${name}.update( changed, ${params} );
 				} else {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					if ( ${name} ) ${name}.create();
 				}
 
@@ -166,7 +166,7 @@ function simple(
 				if ( ${name} ) {
 					${name}.update( changed, ${params} );
 				} else {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
@@ -174,14 +174,14 @@ function simple(
 		: branch.hasIntroMethod
 			? deindent`
 				if ( !${name} ) {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 				}
 				${name}.intro( ${parentNode}, ${anchor} );
 			`
 			: deindent`
 				if ( !${name} ) {
-					${name} = ${branch.block}( ${params}, ${block.component} );
+					${name} = ${branch.block}( ${params}, #component );
 					${name}.create();
 					${name}.mount( ${parentNode}, ${anchor} );
 				}
@@ -239,13 +239,13 @@ function compound(
 		}
 
 		var ${current_block} = ${get_block}( ${params} );
-		var ${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
+		var ${name} = ${current_block_and}${current_block}( ${params}, #component );
 	`);
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
 
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 	block.builders.mount.addLine(
 		`${if_name}${name}.${mountOrIntro}( ${targetNode}, ${anchorNode} );`
@@ -264,7 +264,7 @@ function compound(
 					${name}.unmount();
 					${name}.destroy();
 				}`}
-		${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
+		${name} = ${current_block_and}${current_block}( ${params}, #component );
 		${if_name}${name}.create();
 		${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
 	`;
@@ -339,19 +339,19 @@ function compoundWithOutros(
 	if (hasElse) {
 		block.builders.init.addBlock(deindent`
 			${current_block_index} = ${get_block}( ${params} );
-			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 		`);
 	} else {
 		block.builders.init.addBlock(deindent`
 			if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) {
-				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+				${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 			}
 		`);
 	}
 
 	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
-	const targetNode = state.parentNode || block.target;
+	const targetNode = state.parentNode || '#target';
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
@@ -371,7 +371,7 @@ function compoundWithOutros(
 	const createNewBlock = deindent`
 		${name} = ${if_blocks}[ ${current_block_index} ];
 		if ( !${name} ) {
-			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} );
+			${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
 			${name}.create();
 		}
 		${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
diff --git a/src/generators/dom/visitors/YieldTag.ts b/src/generators/dom/visitors/YieldTag.ts
index 373414f9fc..dbfee33f29 100644
--- a/src/generators/dom/visitors/YieldTag.ts
+++ b/src/generators/dom/visitors/YieldTag.ts
@@ -7,13 +7,13 @@ export default function visitYieldTag(
 	block: Block,
 	state: State
 ) {
-	const parentNode = state.parentNode || block.target;
+	const parentNode = state.parentNode || '#target';
 
 	block.builders.mount.addLine(
-		`if ( ${block.component}._yield ) ${block.component}._yield.mount( ${parentNode}, null );`
+		`if ( #component._yield ) #component._yield.mount( ${parentNode}, null );`
 	);
 
 	block.builders.unmount.addLine(
-		`if ( ${block.component}._yield ) ${block.component}._yield.unmount();`
+		`if ( #component._yield ) #component._yield.unmount();`
 	);
 }
diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts
index e6a75dfeec..dc4de56471 100644
--- a/src/generators/dom/visitors/shared/binding/getSetter.ts
+++ b/src/generators/dom/visitors/shared/binding/getSetter.ts
@@ -22,25 +22,25 @@ export default function getSetter({
 		return deindent`
 			var list = this.${context}.${block.listNames.get(name)};
 			var index = this.${context}.${block.indexNames.get(name)};
-			${computed && `var state = ${block.component}.get();`}
+			${computed && `var state = #component.get();`}
 			list[index]${tail} = ${value};
 
 			${computed ?
-				`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
-				`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: ${block.component}.get( '${prop}' )`).join(', ')} });`
+				`#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
+				`#component._set({ ${dependencies.map((prop: string) => `${prop}: #component.get( '${prop}' )`).join(', ')} });`
 			}
 		`;
 	}
 
 	if (attribute.value.type === 'MemberExpression') {
 		return deindent`
-			var state = ${block.component}.get();
+			var state = #component.get();
 			${snippet} = ${value};
-			${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
+			#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
 		`;
 	}
 
-	return `${block.component}._set({ ${name}: ${value} });`;
+	return `#component._set({ ${name}: ${value} });`;
 }
 
 function isComputed(node: Node) {

From ebae9f9c281da5eb028631624e043be18cd3dee6 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 12:29:42 -0400
Subject: [PATCH 7/8] run prettier

---
 src/generators/dom/Block.ts                   | 28 +++++++--------
 src/generators/dom/index.ts                   | 36 +++++++++----------
 src/generators/dom/preprocess.ts              | 17 +++++++--
 .../dom/visitors/Component/Attribute.ts       |  4 +--
 .../dom/visitors/Component/Component.ts       | 16 ++++-----
 src/generators/dom/visitors/Component/Ref.ts  |  4 +--
 src/generators/dom/visitors/EachBlock.ts      |  7 ++--
 .../dom/visitors/Element/Attribute.ts         |  4 ++-
 .../dom/visitors/Element/Binding.ts           | 11 +++---
 .../dom/visitors/Element/Element.ts           | 29 ++++++++++-----
 .../dom/visitors/Element/EventHandler.ts      |  3 +-
 .../dom/visitors/Element/meta/Window.ts       |  2 +-
 src/generators/dom/visitors/IfBlock.ts        | 20 ++++-------
 src/generators/dom/visitors/MustacheTag.ts    |  4 ++-
 src/generators/dom/visitors/Text.ts           |  4 ++-
 .../dom/visitors/shared/binding/getSetter.ts  | 15 +++++---
 src/generators/server-side-rendering/index.ts |  8 ++---
 .../visitors/Component.ts                     |  4 ++-
 .../visitors/EachBlock.ts                     |  4 ++-
 src/generators/shared/processCss.ts           |  4 +--
 src/utils/clone.ts                            |  2 +-
 src/utils/deindent.ts                         |  5 ++-
 src/utils/getObject.ts                        |  2 +-
 src/utils/getTailSnippet.ts                   |  2 +-
 src/utils/stringify.ts                        |  2 +-
 src/validate/html/validateElement.ts          |  5 ++-
 26 files changed, 136 insertions(+), 106 deletions(-)

diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index 733bb68490..ff58a4e947 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -128,14 +128,12 @@ export default class Block {
 
 		this.addVariable(name);
 		this.builders.create.addLine(`${name} = ${renderStatement};`);
-		this.builders.claim.addLine(`${name} = ${claimStatement};`)
+		this.builders.claim.addLine(`${name} = ${claimStatement};`);
 
 		this.mount(name, parentNode);
 
 		if (isToplevel) {
-			this.builders.unmount.addLine(
-				`@detachNode( ${name} );`
-			);
+			this.builders.unmount.addLine(`@detachNode( ${name} );`);
 		}
 	}
 
@@ -180,13 +178,9 @@ export default class Block {
 
 	mount(name: string, parentNode: string) {
 		if (parentNode) {
-			this.builders.mount.addLine(
-				`@appendNode( ${name}, ${parentNode} );`
-			);
+			this.builders.mount.addLine(`@appendNode( ${name}, ${parentNode} );`);
 		} else {
-			this.builders.mount.addLine(
-				`@insertNode( ${name}, #target, anchor );`
-			);
+			this.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
 		}
 	}
 
@@ -222,7 +216,7 @@ export default class Block {
 
 		if (this.first) {
 			properties.addBlock(`first: null,`);
-			this.builders.hydrate.addLine( `this.first = ${this.first};` );
+			this.builders.hydrate.addLine(`this.first = ${this.first};`);
 		}
 
 		if (this.builders.create.isEmpty()) {
@@ -347,11 +341,13 @@ export default class Block {
 			function ${this.name} ( ${this.params.join(', ')}, #component${this.key
 			? `, ${localKey}`
 			: ''} ) {
-				${this.variables.size > 0 && (
-					`var ${Array.from(this.variables.keys()).map(key => {
-						const init = this.variables.get(key);
-						return init !== undefined ? `${key} = ${init}` : key;
-					}).join(', ')};`)}
+				${this.variables.size > 0 &&
+					`var ${Array.from(this.variables.keys())
+						.map(key => {
+							const init = this.variables.get(key);
+							return init !== undefined ? `${key} = ${init}` : key;
+						})
+						.join(', ')};`}
 
 				${!this.builders.init.isEmpty() && this.builders.init}
 
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index c82ffbc792..a65226497e 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -86,7 +86,9 @@ export default function dom(
 						`( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )`
 				)
 				.join(' || ')}`;
-			const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`;
+			const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps
+				.map(dep => `state.${dep}`)
+				.join(', ')} );`;
 
 			computationBuilder.addConditionalLine(condition, statement);
 		});
@@ -113,7 +115,8 @@ export default function dom(
 
 		var oldState = this._state;
 		this._state = @assign( {}, oldState, newState );
-		${computations.length && `@recompute( this._state, newState, oldState, false )`}
+		${computations.length &&
+			`@recompute( this._state, newState, oldState, false )`}
 		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
@@ -124,9 +127,7 @@ export default function dom(
 	`;
 
 	if (hasJs) {
-		builder.addBlock(
-			`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`
-		);
+		builder.addBlock(`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`);
 	}
 
 	if (generator.css && options.css !== false) {
@@ -150,9 +151,7 @@ export default function dom(
 
 	const prototypeBase =
 		`${name}.prototype` +
-		(templateProperties.methods
-			? `, @template.methods`
-			: '');
+		(templateProperties.methods ? `, @template.methods` : '');
 	const proto = sharedPath
 		? `@proto `
 		: deindent`
@@ -173,8 +172,7 @@ export default function dom(
 				? `@assign( @template.data(), options.data )`
 				: `options.data || {}`};
 			${generator.metaBindings}
-			${computations.length &&
-				`@recompute( this._state, this._state, {}, true );`}
+			${computations.length && `@recompute( this._state, this._state, {}, true );`}
 			${options.dev &&
 				Array.from(generator.expectedProperties).map(
 					prop =>
@@ -206,13 +204,13 @@ export default function dom(
 			this._fragment = @create_main_fragment( this._state, this );
 
 			if ( options.target ) {
-				${generator.hydratable ?
-					deindent`
+				${generator.hydratable
+					? deindent`
 						var nodes = @children( options.target );
 						options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
 						nodes.forEach( @detachNode );
-					` :
-					deindent`
+					`
+					: deindent`
 						this._fragment.create();
 					`}
 				this._fragment.mount( options.target, null );
@@ -241,8 +239,7 @@ export default function dom(
 
 		${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
 			this.fire( 'destroy' );
-			${templateProperties.ondestroy &&
-				`@template.ondestroy.call( this );`}
+			${templateProperties.ondestroy && `@template.ondestroy.call( this );`}
 
 			if ( detach !== false ) this._fragment.unmount();
 			this._fragment.destroy();
@@ -255,7 +252,8 @@ export default function dom(
 
 	const usedHelpers = new Set();
 
-	let result = builder.toString()
+	let result = builder
+		.toString()
 		.replace(/@(\w+)\b/g, (match: string, name: string) => {
 			if (name in shared) {
 				if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
@@ -277,7 +275,9 @@ export default function dom(
 				: name;
 		});
 
-		result = `import { ${names.join(', ')} } from ${stringify(sharedPath)};\n\n` + result;
+		result =
+			`import { ${names.join(', ')} } from ${stringify(sharedPath)};\n\n` +
+			result;
 	} else {
 		usedHelpers.forEach(key => {
 			const str = shared[key];
diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts
index d9600cea61..9e46a8869b 100644
--- a/src/generators/dom/preprocess.ts
+++ b/src/generators/dom/preprocess.ts
@@ -12,7 +12,12 @@ function isElseIf(node: Node) {
 }
 
 function getChildState(parent: State, child = {}) {
-	return assign({}, parent, { name: null, parentNode: null, parentNodes: 'nodes' }, child || {});
+	return assign(
+		{},
+		parent,
+		{ name: null, parentNode: null, parentNodes: 'nodes' },
+		child || {}
+	);
 }
 
 // Whitespace inside one of these elements will not result in
@@ -225,7 +230,11 @@ const preprocessors = {
 						block.addDependencies(dependencies);
 
 						// special case — <option value='{{foo}}'> — see below
-						if (node.name === 'option' && attribute.name === 'value' && state.selectBindingDependencies) {
+						if (
+							node.name === 'option' &&
+							attribute.name === 'value' &&
+							state.selectBindingDependencies
+						) {
 							state.selectBindingDependencies.forEach(prop => {
 								dependencies.forEach((dependency: string) => {
 									generator.indirectDependencies.get(prop).add(dependency);
@@ -258,7 +267,9 @@ const preprocessors = {
 		// so that if `foo.qux` changes, we know that we need to
 		// mark `bar` and `baz` as dirty too
 		if (node.name === 'select') {
-			const value = node.attributes.find((attribute: Node) => attribute.name === 'value');
+			const value = node.attributes.find(
+				(attribute: Node) => attribute.name === 'value'
+			);
 			if (value) {
 				// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
 				const dependencies = block.findDependencies(value.value);
diff --git a/src/generators/dom/visitors/Component/Attribute.ts b/src/generators/dom/visitors/Component/Attribute.ts
index 35cabec66a..10ce5ad981 100644
--- a/src/generators/dom/visitors/Component/Attribute.ts
+++ b/src/generators/dom/visitors/Component/Attribute.ts
@@ -28,9 +28,7 @@ export default function visitAttribute(
 
 		if (value.type === 'Text') {
 			// static attributes
-			const result = isNaN(value.data)
-				? stringify(value.data)
-				: value.data;
+			const result = isNaN(value.data) ? stringify(value.data) : value.data;
 			local.staticAttributes.push({
 				name: attribute.name,
 				value: result,
diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts
index 0180a2c553..557cc41a1c 100644
--- a/src/generators/dom/visitors/Component/Component.ts
+++ b/src/generators/dom/visitors/Component/Component.ts
@@ -112,9 +112,7 @@ export default function visitComponent(
 		local.update.addBlock(updates);
 	}
 
-	const componentInitProperties = [
-		`_root: #component._root`,
-	];
+	const componentInitProperties = [`_root: #component._root`];
 
 	// Component has children, put them in a separate {{yield}} block
 	if (hasChildren) {
@@ -132,9 +130,7 @@ export default function visitComponent(
 			`var ${yieldFragment} = ${childBlock.name}( ${params}, #component );`
 		);
 
-		block.builders.create.addLine(
-			`${yieldFragment}.create();`
-		);
+		block.builders.create.addLine(`${yieldFragment}.create();`);
 
 		block.builders.claim.addLine(
 			`${yieldFragment}.claim( ${state.parentNodes} );`
@@ -229,8 +225,12 @@ export default function visitComponent(
 	const anchorNode = state.parentNode ? 'null' : 'anchor';
 
 	block.builders.create.addLine(`${name}._fragment.create();`);
-	block.builders.claim.addLine(`${name}._fragment.claim( ${state.parentNodes} );`);
-	block.builders.mount.addLine(`${name}._fragment.mount( ${targetNode}, ${anchorNode} );` );
+	block.builders.claim.addLine(
+		`${name}._fragment.claim( ${state.parentNodes} );`
+	);
+	block.builders.mount.addLine(
+		`${name}._fragment.mount( ${targetNode}, ${anchorNode} );`
+	);
 
 	if (!local.update.isEmpty()) block.builders.update.addBlock(local.update);
 }
diff --git a/src/generators/dom/visitors/Component/Ref.ts b/src/generators/dom/visitors/Component/Ref.ts
index 8de874ac2f..98afb02953 100644
--- a/src/generators/dom/visitors/Component/Ref.ts
+++ b/src/generators/dom/visitors/Component/Ref.ts
@@ -14,9 +14,7 @@ export default function visitRef(
 ) {
 	generator.usesRefs = true;
 
-	local.create.addLine(
-		`#component.refs.${attribute.name} = ${local.name};`
-	);
+	local.create.addLine(`#component.refs.${attribute.name} = ${local.name};`);
 
 	block.builders.destroy.addLine(deindent`
 		if ( #component.refs.${attribute.name} === ${local.name} ) #component.refs.${attribute.name} = null;
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index 921be74683..82a117eaae 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -70,7 +70,8 @@ export default function visitEachBlock(
 
 		block.builders.mount.addBlock(deindent`
 			if ( ${each_block_else} ) {
-				${each_block_else}.${mountOrIntro}( ${state.parentNode || '#target'}, null );
+				${each_block_else}.${mountOrIntro}( ${state.parentNode ||
+			'#target'}, null );
 			}
 		`);
 
@@ -474,7 +475,5 @@ function unkeyed(
 		}
 	`);
 
-	block.builders.destroy.addBlock(
-		`@destroyEach( ${iterations}, false, 0 );`
-	);
+	block.builders.destroy.addBlock(`@destroyEach( ${iterations}, false, 0 );`);
 }
diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
index f2951cb750..2b7f3389d6 100644
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ b/src/generators/dom/visitors/Element/Attribute.ts
@@ -81,7 +81,9 @@ export default function visitAttribute(
 			// annoying special case
 			const isMultipleSelect =
 				node.name === 'select' &&
-				node.attributes.find((attr: Node) => attr.name.toLowerCase() === 'multiple'); // TODO use getStaticAttributeValue
+				node.attributes.find(
+					(attr: Node) => attr.name.toLowerCase() === 'multiple'
+				); // TODO use getStaticAttributeValue
 			const i = block.getUniqueName('i');
 			const option = block.getUniqueName('option');
 
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index c19faf2b7f..d2acbdd583 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -16,7 +16,9 @@ export default function visitBinding(
 	attribute: Node
 ) {
 	const { name } = getObject(attribute.value);
-	const { snippet, contexts, dependencies } = block.contextualise(attribute.value);
+	const { snippet, contexts, dependencies } = block.contextualise(
+		attribute.value
+	);
 
 	contexts.forEach(context => {
 		if (!~state.allUsedContexts.indexOf(context))
@@ -117,9 +119,7 @@ export default function visitBinding(
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
-		block.builders.hydrate.addBlock(
-			`#component._bindings.push( ${handler} );`
-		);
+		block.builders.hydrate.addBlock(`#component._bindings.push( ${handler} );`);
 
 		if (attribute.name === 'currentTime') {
 			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);
@@ -168,7 +168,8 @@ export default function visitBinding(
 	}
 
 	block.builders.destroy.addLine(
-		`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`);
+		`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`
+	);
 
 	if (attribute.name === 'paused') {
 		block.builders.create.addLine(
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index 0851878c6f..53b4df6fdd 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -51,17 +51,30 @@ export default function visitElement(
 	const isToplevel = !state.parentNode;
 
 	block.addVariable(name);
-	block.builders.create.addLine(`${name} = ${getRenderStatement(generator, childState.namespace, node.name)};`);
+	block.builders.create.addLine(
+		`${name} = ${getRenderStatement(
+			generator,
+			childState.namespace,
+			node.name
+		)};`
+	);
 
 	if (generator.hydratable) {
 		block.builders.claim.addBlock(deindent`
-			${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
+			${name} = ${getClaimStatement(
+			generator,
+			childState.namespace,
+			state.parentNodes,
+			node
+		)};
 			var ${childState.parentNodes} = @children( ${name} );
 		`);
 	}
 
 	if (state.parentNode) {
-		block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`);
+		block.builders.mount.addLine(
+			`@appendNode( ${name}, ${state.parentNode} );`
+		);
 	} else {
 		block.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
 	}
@@ -131,9 +144,7 @@ export default function visitElement(
 	if (isToplevel) {
 		// TODO we eventually need to consider what happens to elements
 		// that belong to the same outgroup as an outroing element...
-		block.builders.unmount.addLine(
-			`@detachNode( ${name} );`
-		);
+		block.builders.unmount.addLine(`@detachNode( ${name} );`);
 	}
 
 	if (node.name !== 'select') {
@@ -219,10 +230,12 @@ function getClaimStatement(
 
 	const name = namespace ? node.name : node.name.toUpperCase();
 
-	return `@claimElement( ${nodes}, '${name}', ${attributes ? `{ ${attributes} }` : `{}`}, ${namespace === namespaces.svg ? true : false} )`;
+	return `@claimElement( ${nodes}, '${name}', ${attributes
+		? `{ ${attributes} }`
+		: `{}`}, ${namespace === namespaces.svg ? true : false} )`;
 }
 
 function quoteProp(name: string) {
 	if (/[^a-zA-Z_$0-9]/.test(name)) return `'${name}'`;
 	return name;
-}
\ No newline at end of file
+}
diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts
index 9aeea16302..64178f5499 100644
--- a/src/generators/dom/visitors/Element/EventHandler.ts
+++ b/src/generators/dom/visitors/Element/EventHandler.ts
@@ -63,7 +63,8 @@ export default function visitEventHandler(
 
 	// create the handler body
 	const handlerBody = deindent`
-		${state.usesComponent && `var ${block.alias('component')} = this._svelte.component;`}
+		${state.usesComponent &&
+			`var ${block.alias('component')} = this._svelte.component;`}
 		${declarations}
 		[✂${attribute.expression.start}-${attribute.expression.end}✂];
 	`;
diff --git a/src/generators/dom/visitors/Element/meta/Window.ts b/src/generators/dom/visitors/Element/meta/Window.ts
index ea27f4ae43..d6c848c342 100644
--- a/src/generators/dom/visitors/Element/meta/Window.ts
+++ b/src/generators/dom/visitors/Element/meta/Window.ts
@@ -163,7 +163,7 @@ export default function visitWindow(
 
 		block.builders.init.addBlock(deindent`
 			#component.observe( '${bindings.scrollX ||
-			bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
+				bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
 				if ( ${lock} ) return;
 				window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y'} );
 			});
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts
index ac29d1d897..ddac9800b5 100644
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/dom/visitors/IfBlock.ts
@@ -105,9 +105,7 @@ export default function visitIfBlock(
 		simple(generator, block, state, node, branches[0], dynamic, vars);
 	}
 
-	block.builders.create.addLine(
-		`${if_name}${name}.create();`
-	);
+	block.builders.create.addLine(`${if_name}${name}.create();`);
 
 	block.builders.claim.addLine(
 		`${if_name}${name}.claim( ${state.parentNodes} );`
@@ -254,12 +252,12 @@ function compound(
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
 
 	const changeBlock = deindent`
-		${hasElse ?
-			deindent`
+		${hasElse
+			? deindent`
 				${name}.unmount();
 				${name}.destroy();
-			` :
-			deindent`
+			`
+			: deindent`
 				if ( ${name} ) {
 					${name}.unmount();
 					${name}.destroy();
@@ -285,13 +283,9 @@ function compound(
 		`);
 	}
 
-	block.builders.unmount.addLine(
-		`${if_name}${name}.unmount();`
-	);
+	block.builders.unmount.addLine(`${if_name}${name}.unmount();`);
 
-	block.builders.destroy.addLine(
-		`${if_name}${name}.destroy();`
-	);
+	block.builders.destroy.addLine(`${if_name}${name}.destroy();`);
 }
 
 // if any of the siblings have outros, we need to keep references to the blocks
diff --git a/src/generators/dom/visitors/MustacheTag.ts b/src/generators/dom/visitors/MustacheTag.ts
index 77f874db36..3ef015a9fd 100644
--- a/src/generators/dom/visitors/MustacheTag.ts
+++ b/src/generators/dom/visitors/MustacheTag.ts
@@ -19,7 +19,9 @@ export default function visitMustacheTag(
 	block.addElement(
 		name,
 		`@createText( ${value} = ${snippet} )`,
-		generator.hydratable ? `@claimText( ${state.parentNodes}, ${value} = ${snippet} )` : '',
+		generator.hydratable
+			? `@claimText( ${state.parentNodes}, ${value} = ${snippet} )`
+			: '',
 		state.parentNode,
 		true
 	);
diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts
index 9231073167..bf7bf8fd4a 100644
--- a/src/generators/dom/visitors/Text.ts
+++ b/src/generators/dom/visitors/Text.ts
@@ -14,7 +14,9 @@ export default function visitText(
 	block.addElement(
 		node._state.name,
 		`@createText( ${stringify(node.data)} )`,
-		generator.hydratable ? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )` : '',
+		generator.hydratable
+			? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )`
+			: '',
 		state.parentNode,
 		node.usedAsAnchor
 	);
diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts
index dc4de56471..5657ab9ef5 100644
--- a/src/generators/dom/visitors/shared/binding/getSetter.ts
+++ b/src/generators/dom/visitors/shared/binding/getSetter.ts
@@ -25,10 +25,13 @@ export default function getSetter({
 			${computed && `var state = #component.get();`}
 			list[index]${tail} = ${value};
 
-			${computed ?
-				`#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
-				`#component._set({ ${dependencies.map((prop: string) => `${prop}: #component.get( '${prop}' )`).join(', ')} });`
-			}
+			${computed
+				? `#component._set({ ${dependencies
+						.map((prop: string) => `${prop}: state.${prop}`)
+						.join(', ')} });`
+				: `#component._set({ ${dependencies
+						.map((prop: string) => `${prop}: #component.get( '${prop}' )`)
+						.join(', ')} });`}
 		`;
 	}
 
@@ -36,7 +39,9 @@ export default function getSetter({
 		return deindent`
 			var state = #component.get();
 			${snippet} = ${value};
-			#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
+			#component._set({ ${dependencies
+				.map((prop: string) => `${prop}: state.${prop}`)
+				.join(', ')} });
 		`;
 	}
 
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index c27a278d0b..6c833aa7c1 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -59,9 +59,7 @@ export default function ssr(
 		${name}.filename = ${stringify(options.filename)};
 
 		${name}.data = function () {
-			return ${templateProperties.data
-				? `@template.data()`
-				: `{}`};
+			return ${templateProperties.data ? `@template.data()` : `{}`};
 		};
 
 		${name}.render = function ( state, options ) {
@@ -71,7 +69,9 @@ export default function ssr(
 
 			${computations.map(
 				({ key, deps }) =>
-					`state.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`
+					`state.${key} = @template.computed.${key}( ${deps
+						.map(dep => `state.${dep}`)
+						.join(', ')} );`
 			)}
 
 			${generator.bindings.length &&
diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts
index c6280ca67e..e704c6d0e9 100644
--- a/src/generators/server-side-rendering/visitors/Component.ts
+++ b/src/generators/server-side-rendering/visitors/Component.ts
@@ -60,7 +60,9 @@ export default function visitComponent(
 					? getTailSnippet(binding.value)
 					: '';
 
-				const keypath = block.contexts.has(name) ? `${name}${tail}` : `state.${name}${tail}`;
+				const keypath = block.contexts.has(name)
+					? `${name}${tail}`
+					: `state.${name}${tail}`;
 				return `${binding.name}: ${keypath}`;
 			})
 		)
diff --git a/src/generators/server-side-rendering/visitors/EachBlock.ts b/src/generators/server-side-rendering/visitors/EachBlock.ts
index b5b4fe2002..18591ae809 100644
--- a/src/generators/server-side-rendering/visitors/EachBlock.ts
+++ b/src/generators/server-side-rendering/visitors/EachBlock.ts
@@ -10,7 +10,9 @@ export default function visitEachBlock(
 ) {
 	const { dependencies, snippet } = block.contextualise(node.expression);
 
-	const open = `\${ ${node.else ? `${snippet}.length ? ` : ''}${snippet}.map( ${node.index
+	const open = `\${ ${node.else
+		? `${snippet}.length ? `
+		: ''}${snippet}.map( ${node.index
 		? `( ${node.context}, ${node.index} )`
 		: node.context} => \``;
 	generator.append(open);
diff --git a/src/generators/shared/processCss.ts b/src/generators/shared/processCss.ts
index 17eae9b57d..8ea6021452 100644
--- a/src/generators/shared/processCss.ts
+++ b/src/generators/shared/processCss.ts
@@ -85,9 +85,7 @@ export default function processCss(
 						}
 
 						shouldTransform = false;
-					}
-
-					else if (child.type === 'PseudoElementSelector') {
+					} else if (child.type === 'PseudoElementSelector') {
 						code.prependRight(c, attr);
 						shouldTransform = false;
 					}
diff --git a/src/utils/clone.ts b/src/utils/clone.ts
index 523568e434..d01b7aaa87 100644
--- a/src/utils/clone.ts
+++ b/src/utils/clone.ts
@@ -15,4 +15,4 @@ export default function clone(node: Node) {
 	}
 
 	return cloned;
-}
\ No newline at end of file
+}
diff --git a/src/utils/deindent.ts b/src/utils/deindent.ts
index 5f42e89604..9fbcf10953 100644
--- a/src/utils/deindent.ts
+++ b/src/utils/deindent.ts
@@ -1,6 +1,9 @@
 const start = /\n(\t+)/;
 
-export default function deindent(strings: TemplateStringsArray, ...values: any[]) {
+export default function deindent(
+	strings: TemplateStringsArray,
+	...values: any[]
+) {
 	const indentation = start.exec(strings[0])[1];
 	const pattern = new RegExp(`^${indentation}`, 'gm');
 
diff --git a/src/utils/getObject.ts b/src/utils/getObject.ts
index 0d3ce4d789..4cde63eb8f 100644
--- a/src/utils/getObject.ts
+++ b/src/utils/getObject.ts
@@ -3,4 +3,4 @@ import { Node } from '../interfaces';
 export default function getObject(node: Node) {
 	while (node.type === 'MemberExpression') node = node.object;
 	return node;
-}
\ No newline at end of file
+}
diff --git a/src/utils/getTailSnippet.ts b/src/utils/getTailSnippet.ts
index 499e705ec6..df4d7b1ab4 100644
--- a/src/utils/getTailSnippet.ts
+++ b/src/utils/getTailSnippet.ts
@@ -6,4 +6,4 @@ export default function getTailSnippet(node: Node) {
 	const start = node.end;
 
 	return `[✂${start}-${end}✂]`;
-}
\ No newline at end of file
+}
diff --git a/src/utils/stringify.ts b/src/utils/stringify.ts
index fdb0410710..7c63b45ce1 100644
--- a/src/utils/stringify.ts
+++ b/src/utils/stringify.ts
@@ -1,3 +1,3 @@
 export default function stringify(data: string) {
 	return JSON.stringify(data.replace(/([^\\])?([@#])/g, '$1\\$2'));
-}
\ No newline at end of file
+}
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index ceb50cc34a..69a50b6cff 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -146,7 +146,10 @@ function checkTypeAttribute(validator: Validator, node: Node) {
 	}
 
 	if (attribute.value.length > 1 || attribute.value[0].type !== 'Text') {
-		validator.error(`'type' attribute cannot be dynamic if input uses two-way binding`, attribute.start);
+		validator.error(
+			`'type' attribute cannot be dynamic if input uses two-way binding`,
+			attribute.start
+		);
 	}
 
 	return attribute.value[0].data;

From 2fa784ecc394e46bc139fb2340068494237a698d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 25 Jun 2017 20:03:17 -0400
Subject: [PATCH 8/8] handle @foo and #foo edge cases

---
 src/generators/dom/index.ts                   |  5 ++-
 src/generators/server-side-rendering/index.ts |  7 ++--
 .../visitors/Component.ts                     |  3 +-
 .../server-side-rendering/visitors/Text.ts    |  2 +-
 .../runtime/samples/sigil-static-#/_config.js |  3 ++
 test/runtime/samples/sigil-static-#/main.html |  1 +
 .../runtime/samples/sigil-static-@/_config.js |  3 ++
 test/runtime/samples/sigil-static-@/main.html |  1 +
 test/server-side-rendering/index.js           | 33 +++++++------------
 9 files changed, 29 insertions(+), 29 deletions(-)
 create mode 100644 test/runtime/samples/sigil-static-#/_config.js
 create mode 100644 test/runtime/samples/sigil-static-#/main.html
 create mode 100644 test/runtime/samples/sigil-static-@/_config.js
 create mode 100644 test/runtime/samples/sigil-static-@/main.html

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 2b4dcc4f34..bb1487ba66 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -254,11 +254,14 @@ export default function dom(
 
 	let result = builder
 		.toString()
-		.replace(/@(\w+)\b/g, (match: string, name: string) => {
+		.replace(/(\\)?@(\w*)/g, (match: string, escaped: string, name: string) => {
+			if (escaped) return match.slice(1);
+
 			if (name in shared) {
 				if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
 				usedHelpers.add(name);
 			}
+
 			return generator.alias(name);
 		});
 
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index 01c347361e..bac659d0f2 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -2,7 +2,6 @@ import deindent from '../../utils/deindent';
 import Generator from '../Generator';
 import Block from './Block';
 import visit from './visit';
-import stringify from '../../utils/stringify';
 import { removeNode, removeObjectKey } from '../../utils/removeNode';
 import { Parsed, Node, CompileOptions } from '../../interfaces';
 
@@ -84,7 +83,7 @@ export default function ssr(
 
 		var ${name} = {};
 
-		${name}.filename = ${stringify(options.filename)};
+		${name}.filename = ${JSON.stringify(options.filename)};
 
 		${name}.data = function () {
 			return ${templateProperties.data ? `@template.data()` : `{}`};
@@ -124,7 +123,7 @@ export default function ssr(
 				deindent`
 				components.push({
 					filename: ${name}.filename,
-					css: ${stringify(generator.css)},
+					css: ${JSON.stringify(generator.css)},
 					map: null // TODO
 				});
 			`}
@@ -169,7 +168,7 @@ export default function ssr(
 		function __escape ( html ) {
 			return String( html ).replace( /["'&<>]/g, match => escaped[ match ] );
 		}
-	`.replace(/@(\w+)/g, (match, name) => generator.alias(name));
+	`.replace(/(\\)?@(\w*)/g, (match: string, escaped: string, name: string) => escaped ? match.slice(1) : generator.alias(name));
 
 	return generator.generate(result, options, { name, format });
 }
diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts
index e704c6d0e9..75785d6ffd 100644
--- a/src/generators/server-side-rendering/visitors/Component.ts
+++ b/src/generators/server-side-rendering/visitors/Component.ts
@@ -4,7 +4,6 @@ import { SsrGenerator } from '../index';
 import Block from '../Block';
 import { Node } from '../../../interfaces';
 import getObject from '../../../utils/getObject';
-import stringify from '../../../utils/stringify';
 import getTailSnippet from '../../../utils/getTailSnippet';
 
 export default function visitComponent(
@@ -42,7 +41,7 @@ export default function visitComponent(
 			} else if (attribute.value.length === 1) {
 				const chunk = attribute.value[0];
 				if (chunk.type === 'Text') {
-					value = isNaN(chunk.data) ? stringify(chunk.data) : chunk.data;
+					value = isNaN(chunk.data) ? JSON.stringify(chunk.data) : chunk.data;
 				} else {
 					const { snippet } = block.contextualise(chunk.expression);
 					value = snippet;
diff --git a/src/generators/server-side-rendering/visitors/Text.ts b/src/generators/server-side-rendering/visitors/Text.ts
index dd59a384cb..b7aad398f2 100644
--- a/src/generators/server-side-rendering/visitors/Text.ts
+++ b/src/generators/server-side-rendering/visitors/Text.ts
@@ -7,5 +7,5 @@ export default function visitText(
 	block: Block,
 	node: Node
 ) {
-	generator.append(node.data.replace(/(\${|`|\\)/g, '\\$1'));
+	generator.append(node.data.replace(/(\${|`|\\)/g, '\\$1').replace(/([^\\])?([@#])/g, '$1\\$2'));
 }
diff --git a/test/runtime/samples/sigil-static-#/_config.js b/test/runtime/samples/sigil-static-#/_config.js
new file mode 100644
index 0000000000..747ddc2a94
--- /dev/null
+++ b/test/runtime/samples/sigil-static-#/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: `#foo`
+};
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-static-#/main.html b/test/runtime/samples/sigil-static-#/main.html
new file mode 100644
index 0000000000..5529b9b4ce
--- /dev/null
+++ b/test/runtime/samples/sigil-static-#/main.html
@@ -0,0 +1 @@
+#foo
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-static-@/_config.js b/test/runtime/samples/sigil-static-@/_config.js
new file mode 100644
index 0000000000..ada3a602ab
--- /dev/null
+++ b/test/runtime/samples/sigil-static-@/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: `@foo`
+};
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-static-@/main.html b/test/runtime/samples/sigil-static-@/main.html
new file mode 100644
index 0000000000..d88b8ee03d
--- /dev/null
+++ b/test/runtime/samples/sigil-static-@/main.html
@@ -0,0 +1 @@
+@foo
\ No newline at end of file
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
index 57c5c217f4..1d2c801ae1 100644
--- a/test/server-side-rendering/index.js
+++ b/test/server-side-rendering/index.js
@@ -34,7 +34,7 @@ describe("ssr", () => {
 		// add .solo to a sample directory name to only run that test, or
 		// .show to always show the output. or both
 		const solo = /\.solo/.test(dir);
-		let show = /\.show/.test(dir);
+		const show = /\.show/.test(dir);
 
 		if (solo && process.env.CI) {
 			throw new Error("Forgot to remove `solo: true` from test");
@@ -42,36 +42,27 @@ describe("ssr", () => {
 
 		(solo ? it.only : it)(dir, () => {
 			dir = path.resolve("test/server-side-rendering/samples", dir);
-			const component = require(`${dir}/main.html`);
+			try {
+				const component = require(`${dir}/main.html`);
 
-			const expectedHtml = tryToReadFile(`${dir}/_expected.html`);
-			const expectedCss = tryToReadFile(`${dir}/_expected.css`) || "";
+				const expectedHtml = tryToReadFile(`${dir}/_expected.html`);
+				const expectedCss = tryToReadFile(`${dir}/_expected.css`) || "";
 
-			const data = tryToLoadJson(`${dir}/data.json`);
-			let html;
-			let css;
-			let error;
+				const data = tryToLoadJson(`${dir}/data.json`);
 
-			try {
-				html = component.render(data);
-				css = component.renderCss().css;
-			} catch (e) {
-				show = true;
-				error = e;
-			}
+				const html = component.render(data);
+				const css = component.renderCss().css;
 
-			if (show) showOutput(dir, { generate: "ssr" });
-			if (error) throw error;
+				fs.writeFileSync(`${dir}/_actual.html`, html);
+				if (css) fs.writeFileSync(`${dir}/_actual.css`, css);
 
-			fs.writeFileSync(`${dir}/_actual.html`, html);
-			if (css) fs.writeFileSync(`${dir}/_actual.css`, css);
-
-			try {
 				assert.htmlEqual(html, expectedHtml);
 				assert.equal(
 					css.replace(/^\s+/gm, ""),
 					expectedCss.replace(/^\s+/gm, "")
 				);
+
+				if (show) showOutput(dir, { generate: 'ssr' });
 			} catch (err) {
 				showOutput(dir, { generate: 'ssr' });
 				throw err;