From a8eaa7e95c74208907a7f10317ab38c96a5d5b09 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 10 Dec 2017 09:40:45 -0500
Subject: [PATCH] refactor

---
 src/css/Stylesheet.ts                         |  13 +-
 src/generators/Generator.ts                   |  59 +-
 src/generators/dom/Block.ts                   |  24 +-
 src/generators/dom/index.ts                   |   9 +-
 src/generators/dom/interfaces.ts              |  23 -
 src/generators/dom/preprocess.ts              | 607 --------------
 src/generators/dom/visit.ts                   |  17 -
 src/generators/dom/visitors/AwaitBlock.ts     | 159 ----
 src/generators/dom/visitors/Component.ts      | 588 --------------
 src/generators/dom/visitors/EachBlock.ts      | 491 ------------
 .../dom/visitors/Element/Attribute.ts         | 237 ------
 .../dom/visitors/Element/Element.ts           | 365 ---------
 .../dom/visitors/Element/StyleAttribute.ts    | 189 -----
 .../dom/visitors/Element/addBindings.ts       | 428 ----------
 .../dom/visitors/Element/addTransitions.ts    |  98 ---
 src/generators/dom/visitors/Element/lookup.ts | 236 ------
 .../dom/visitors/Element/meta/Window.ts       | 190 -----
 src/generators/dom/visitors/MustacheTag.ts    |  29 -
 src/generators/dom/visitors/RawMustacheTag.ts |  91 ---
 src/generators/dom/visitors/Slot.ts           | 104 ---
 src/generators/dom/visitors/Text.ts           |  21 -
 src/generators/dom/visitors/index.ts          |  20 -
 src/generators/dom/visitors/shared/Tag.ts     |  50 --
 .../dom/visitors/shared/isDomNode.ts          |   7 -
 src/generators/nodes/Attribute.ts             | 662 ++++++++++++++++
 src/generators/nodes/AwaitBlock.ts            | 200 +++++
 src/generators/nodes/Binding.ts               | 270 +++++++
 src/generators/nodes/CatchBlock.ts            |   7 +
 src/generators/nodes/Comment.ts               |   5 +
 src/generators/nodes/Component.ts             | 603 ++++++++++++++
 src/generators/nodes/EachBlock.ts             | 580 ++++++++++++++
 src/generators/nodes/Element.ts               | 744 ++++++++++++++++++
 src/generators/nodes/ElseBlock.ts             |   8 +
 src/generators/nodes/EventHandler.ts          |   7 +
 src/generators/nodes/Fragment.ts              |  39 +
 .../{dom/visitors => nodes}/IfBlock.ts        | 303 ++++---
 src/generators/nodes/MustacheTag.ts           |  29 +
 src/generators/nodes/PendingBlock.ts          |   7 +
 src/generators/nodes/RawMustacheTag.ts        |  92 +++
 src/generators/nodes/Ref.ts                   |   7 +
 src/generators/nodes/Slot.ts                  | 139 ++++
 src/generators/nodes/Text.ts                  |  50 ++
 src/generators/nodes/ThenBlock.ts             |   7 +
 src/generators/nodes/Transition.ts            |   7 +
 src/generators/nodes/Window.ts                | 201 +++++
 src/generators/nodes/index.ts                 |  48 ++
 src/generators/nodes/shared/Node.ts           | 164 ++++
 src/generators/nodes/shared/Tag.ts            |  45 ++
 src/generators/server-side-rendering/Block.ts |   7 +-
 src/generators/server-side-rendering/index.ts |   3 -
 .../server-side-rendering/interfaces.ts       |   3 +-
 .../server-side-rendering/preprocess.ts       | 110 ---
 .../server-side-rendering/visitors/Element.ts |  20 +-
 .../server-side-rendering/visitors/Slot.ts    |   1 -
 .../visitors/{meta => }/Window.ts             |   0
 .../server-side-rendering/visitors/index.ts   |   8 +-
 .../shared/utils/isChildOfComponent.ts        |  10 -
 src/generators/shared/utils/walkHtml.ts       |  20 -
 .../{shared/utils => }/wrapModule.ts          |   6 +-
 src/utils/createDebuggingComment.ts           |  21 +
 60 files changed, 4215 insertions(+), 4273 deletions(-)
 delete mode 100644 src/generators/dom/interfaces.ts
 delete mode 100644 src/generators/dom/preprocess.ts
 delete mode 100644 src/generators/dom/visit.ts
 delete mode 100644 src/generators/dom/visitors/AwaitBlock.ts
 delete mode 100644 src/generators/dom/visitors/Component.ts
 delete mode 100644 src/generators/dom/visitors/EachBlock.ts
 delete mode 100644 src/generators/dom/visitors/Element/Attribute.ts
 delete mode 100644 src/generators/dom/visitors/Element/Element.ts
 delete mode 100644 src/generators/dom/visitors/Element/StyleAttribute.ts
 delete mode 100644 src/generators/dom/visitors/Element/addBindings.ts
 delete mode 100644 src/generators/dom/visitors/Element/addTransitions.ts
 delete mode 100644 src/generators/dom/visitors/Element/lookup.ts
 delete mode 100644 src/generators/dom/visitors/Element/meta/Window.ts
 delete mode 100644 src/generators/dom/visitors/MustacheTag.ts
 delete mode 100644 src/generators/dom/visitors/RawMustacheTag.ts
 delete mode 100644 src/generators/dom/visitors/Slot.ts
 delete mode 100644 src/generators/dom/visitors/Text.ts
 delete mode 100644 src/generators/dom/visitors/index.ts
 delete mode 100644 src/generators/dom/visitors/shared/Tag.ts
 delete mode 100644 src/generators/dom/visitors/shared/isDomNode.ts
 create mode 100644 src/generators/nodes/Attribute.ts
 create mode 100644 src/generators/nodes/AwaitBlock.ts
 create mode 100644 src/generators/nodes/Binding.ts
 create mode 100644 src/generators/nodes/CatchBlock.ts
 create mode 100644 src/generators/nodes/Comment.ts
 create mode 100644 src/generators/nodes/Component.ts
 create mode 100644 src/generators/nodes/EachBlock.ts
 create mode 100644 src/generators/nodes/Element.ts
 create mode 100644 src/generators/nodes/ElseBlock.ts
 create mode 100644 src/generators/nodes/EventHandler.ts
 create mode 100644 src/generators/nodes/Fragment.ts
 rename src/generators/{dom/visitors => nodes}/IfBlock.ts (57%)
 create mode 100644 src/generators/nodes/MustacheTag.ts
 create mode 100644 src/generators/nodes/PendingBlock.ts
 create mode 100644 src/generators/nodes/RawMustacheTag.ts
 create mode 100644 src/generators/nodes/Ref.ts
 create mode 100644 src/generators/nodes/Slot.ts
 create mode 100644 src/generators/nodes/Text.ts
 create mode 100644 src/generators/nodes/ThenBlock.ts
 create mode 100644 src/generators/nodes/Transition.ts
 create mode 100644 src/generators/nodes/Window.ts
 create mode 100644 src/generators/nodes/index.ts
 create mode 100644 src/generators/nodes/shared/Node.ts
 create mode 100644 src/generators/nodes/shared/Tag.ts
 delete mode 100644 src/generators/server-side-rendering/preprocess.ts
 rename src/generators/server-side-rendering/visitors/{meta => }/Window.ts (100%)
 delete mode 100644 src/generators/shared/utils/isChildOfComponent.ts
 delete mode 100644 src/generators/shared/utils/walkHtml.ts
 rename src/generators/{shared/utils => }/wrapModule.ts (97%)
 create mode 100644 src/utils/createDebuggingComment.ts

diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index cb83804f1d..e94dce6a62 100644
--- a/src/css/Stylesheet.ts
+++ b/src/css/Stylesheet.ts
@@ -3,6 +3,7 @@ import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Selector from './Selector';
 import getCodeFrame from '../utils/getCodeFrame';
+import Element from '../generators/nodes/Element';
 import { Validator } from '../validate/index';
 import { Node, Parsed, Warning } from '../interfaces';
 
@@ -19,7 +20,7 @@ class Rule {
 		this.declarations = node.block.children.map((node: Node) => new Declaration(node));
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element, stack: Element[]) {
 		this.selectors.forEach(selector => selector.apply(node, stack)); // TODO move the logic in here?
 	}
 
@@ -159,7 +160,7 @@ class Atrule {
 		this.children = [];
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element, stack: Element[]) {
 		if (this.node.name === 'media') {
 			this.children.forEach(child => {
 				child.apply(node, stack);
@@ -330,9 +331,15 @@ export default class Stylesheet {
 		}
 	}
 
-	apply(node: Node, stack: Node[]) {
+	apply(node: Element) {
 		if (!this.hasStyles) return;
 
+		const stack: Element[] = [];
+		let parent: Node = node;
+		while (parent = parent.parent) {
+			if (parent.type === 'Element') stack.unshift(<Element>parent);
+		}
+
 		if (this.cascade) {
 			if (stack.length === 0) node._needsCssAttribute = true;
 			return;
diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index 65574ee303..2285c1185b 100644
--- a/src/generators/Generator.ts
+++ b/src/generators/Generator.ts
@@ -9,14 +9,13 @@ import flattenReference from '../utils/flattenReference';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
 import { removeNode, removeObjectKey } from '../utils/removeNode';
-import wrapModule from './shared/utils/wrapModule';
+import wrapModule from './wrapModule';
 import annotateWithScopes, { Scope } from '../utils/annotateWithScopes';
 import getName from '../utils/getName';
 import clone from '../utils/clone';
-import DomBlock from './dom/Block';
-import SsrBlock from './server-side-rendering/Block';
 import Stylesheet from '../css/Stylesheet';
 import { test } from '../config';
+import nodes from './nodes/index';
 import { Node, GenerateOptions, Parsed, CompileOptions, CustomElementOptions } from '../interfaces';
 
 interface Computation {
@@ -162,11 +161,9 @@ export default class Generator {
 
 		this.computations = [];
 		this.templateProperties = {};
+		this.name = this.alias(name);
 
 		this.walkJs(dom);
-		this.walkTemplate();
-
-		this.name = this.alias(name);
 
 		if (options.customElement === true) {
 			this.customElement = {
@@ -180,6 +177,8 @@ export default class Generator {
 		if (this.customElement && !this.customElement.tag) {
 			throw new Error(`No tag name specified`); // TODO better error
 		}
+
+		this.walkTemplate();
 	}
 
 	addSourcemapLocations(node: Node) {
@@ -200,7 +199,8 @@ export default class Generator {
 	}
 
 	contextualise(
-		block: DomBlock | SsrBlock,
+		contexts: Map<string, string>,
+		indexes: Map<string, string>,
 		expression: Node,
 		context: string,
 		isEventHandler: boolean
@@ -214,7 +214,6 @@ export default class Generator {
 		const usedIndexes: Set<string> = new Set();
 
 		const { code, helpers } = this;
-		const { contexts, indexes } = block;
 
 		let scope: Scope;
 		let lexicalDepth = 0;
@@ -638,6 +637,7 @@ export default class Generator {
 	}
 
 	walkTemplate() {
+		const generator = this;
 		const {
 			code,
 			expectedProperties,
@@ -703,7 +703,30 @@ export default class Generator {
 		const indexesStack: Set<string>[] = [indexes];
 
 		walk(html, {
-			enter(node: Node, parent: Node) {
+			enter(node: Node, parent: Node, key: string) {
+				// TODO this is hacky as hell
+				if (key === 'parent') return this.skip();
+				node.parent = parent;
+
+				node.generator = generator;
+
+				if (node.type === 'Element' && (node.name === ':Component' || node.name === ':Self' || generator.components.has(node.name))) {
+					node.type = 'Component';
+					node.__proto__ = nodes.Component.prototype;
+				} else if (node.name === ':Window') { // TODO do this in parse?
+					node.type = 'Window';
+					node.__proto__ = nodes.Window.prototype;
+				} else if (node.type === 'Element' && node.name === 'slot' && !generator.customElement) {
+					node.type = 'Slot';
+					node.__proto__ = nodes.Slot.prototype;
+				} else if (node.type in nodes) {
+					node.__proto__ = nodes[node.type].prototype;
+				}
+
+				if (node.type === 'Element') {
+					generator.stylesheet.apply(node);
+				}
+
 				if (node.type === 'EachBlock') {
 					node.metadata = contextualise(node.expression, contextDependencies, indexes);
 
@@ -764,7 +787,7 @@ export default class Generator {
 					this.skip();
 				}
 
-				if (node.type === 'Element' && node.name === ':Component') {
+				if (node.type === 'Component' && node.name === ':Component') {
 					node.metadata = contextualise(node.expression, contextDependencies, indexes);
 				}
 			},
@@ -779,6 +802,22 @@ export default class Generator {
 						indexes = indexesStack[indexesStack.length - 1];
 					}
 				}
+
+				if (node.type === 'Element' && node.name === 'option') {
+					// Special case — treat these the same way:
+					//   <option>{{foo}}</option>
+					//   <option value='{{foo}}'>{{foo}}</option>
+					const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value');
+
+					if (!valueAttribute) {
+						node.attributes.push(new nodes.Attribute({
+							generator,
+							name: 'value',
+							value: node.children,
+							parent: node
+						}));
+					}
+				}
 			}
 		});
 	}
diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index 51ce51c29f..4d4413d8c8 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -130,15 +130,14 @@ export default class Block {
 		claimStatement: string,
 		parentNode: string
 	) {
-		const isToplevel = !parentNode;
-
 		this.addVariable(name);
 		this.builders.create.addLine(`${name} = ${renderStatement};`);
 		this.builders.claim.addLine(`${name} = ${claimStatement};`);
 
-		this.mount(name, parentNode);
-
-		if (isToplevel) {
+		if (parentNode) {
+			this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
+		} else {
+			this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
 			this.builders.unmount.addLine(`@detachNode(${name});`);
 		}
 	}
@@ -166,20 +165,7 @@ export default class Block {
 	}
 
 	contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
-		return this.generator.contextualise(
-			this,
-			expression,
-			context,
-			isEventHandler
-		);
-	}
-
-	mount(name: string, parentNode: string) {
-		if (parentNode) {
-			this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
-		} else {
-			this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
-		}
+		return this.generator.contextualise(this.contexts, this.indexes, expression, context, isEventHandler);
 	}
 
 	toString() {
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index c6d9e94df2..9566ba936f 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -8,11 +8,9 @@ import { stringify, escape } from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
 import globalWhitelist from '../../utils/globalWhitelist';
 import reservedNames from '../../utils/reservedNames';
-import visit from './visit';
 import shared from './shared';
 import Generator from '../Generator';
 import Stylesheet from '../../css/Stylesheet';
-import preprocess from './preprocess';
 import Block from './Block';
 import { test } from '../../config';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
@@ -96,14 +94,11 @@ export default function dom(
 		namespace,
 	} = generator;
 
-	const { block, state } = preprocess(generator, namespace, parsed.html);
+	parsed.html.build();
+	const { block } = parsed.html;
 
 	generator.stylesheet.warnOnUnusedSelectors(options.onwarn);
 
-	parsed.html.children.forEach((node: Node) => {
-		visit(generator, block, state, node, [], []);
-	});
-
 	const builder = new CodeBuilder();
 	const computationBuilder = new CodeBuilder();
 	const computationDeps = new Set();
diff --git a/src/generators/dom/interfaces.ts b/src/generators/dom/interfaces.ts
deleted file mode 100644
index a925fb1b91..0000000000
--- a/src/generators/dom/interfaces.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DomGenerator } from './index';
-import Block from './Block';
-import { Node } from '../../interfaces';
-
-export interface State {
-	namespace: string;
-	parentNode: string;
-	parentNodes: string;
-	parentNodeName?: string;
-	inEachBlock?: boolean;
-	allUsedContexts?: string[];
-	usesComponent?: boolean;
-	selectBindingDependencies?: string[];
-}
-
-export type Visitor = (
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) => void;
\ No newline at end of file
diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts
deleted file mode 100644
index 89af90a36e..0000000000
--- a/src/generators/dom/preprocess.ts
+++ /dev/null
@@ -1,607 +0,0 @@
-import Block from './Block';
-import { trimStart, trimEnd } from '../../utils/trim';
-import { assign } from '../../shared/index.js';
-import getStaticAttributeValue from '../../utils/getStaticAttributeValue';
-import isChildOfComponent from '../shared/utils/isChildOfComponent';
-import { DomGenerator } from './index';
-import { Node } from '../../interfaces';
-import { State } from './interfaces';
-
-function isElseIf(node: Node) {
-	return (
-		node && node.children.length === 1 && node.children[0].type === 'IfBlock'
-	);
-}
-
-function getChildState(parent: State, child = {}) {
-	return assign(
-		{},
-		parent,
-		{ parentNode: null, parentNodes: 'nodes' },
-		child || {}
-	);
-}
-
-function createDebuggingComment(node: Node, generator: DomGenerator) {
-	const { locate, source } = generator;
-
-	let c = node.start;
-	if (node.type === 'ElseBlock') {
-		while (source[c] !== '{') c -= 1;
-		c -= 1;
-	}
-
-	let d = node.expression ? node.expression.end : c;
-	while (source[d] !== '}') d += 1;
-	d += 2;
-
-	const start = locate(c);
-	const loc = `(${start.line + 1}:${start.column})`;
-
-	return `${loc} ${source.slice(c, d)}`.replace(/\n/g, ' ');
-}
-
-function cannotUseInnerHTML(node: Node) {
-	while (node && node.canUseInnerHTML) {
-		node.canUseInnerHTML = false;
-		node = node.parent;
-	}
-}
-
-// Whitespace inside one of these elements will not result in
-// a whitespace node being created in any circumstances. (This
-// list is almost certainly very incomplete)
-const elementsWithoutText = new Set([
-	'audio',
-	'datalist',
-	'dl',
-	'ol',
-	'optgroup',
-	'select',
-	'ul',
-	'video',
-]);
-
-const preprocessors = {
-	MustacheTag: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean
-	) => {
-		cannotUseInnerHTML(node);
-		node.var = block.getUniqueName('text');
-		block.addDependencies(node.metadata.dependencies);
-	},
-
-	RawMustacheTag: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean
-	) => {
-		cannotUseInnerHTML(node);
-		node.var = block.getUniqueName('raw');
-		block.addDependencies(node.metadata.dependencies);
-	},
-
-	Text: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean
-	) => {
-		if (!/\S/.test(node.data) && (state.namespace || elementsWithoutText.has(state.parentNodeName))) {
-			node.shouldSkip = true;
-			return;
-		}
-
-		node.var = block.getUniqueName(`text`);
-	},
-
-	AwaitBlock: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		inEachBlock: boolean,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) => {
-		cannotUseInnerHTML(node);
-
-		node.var = block.getUniqueName('await_block');
-		block.addDependencies(node.metadata.dependencies);
-
-		let dynamic = false;
-
-		[
-			['pending', null],
-			['then', node.value],
-			['catch', node.error]
-		].forEach(([status, arg]) => {
-			const child = node[status];
-
-			const context = block.getUniqueName(arg || '_');
-			const contexts = new Map(block.contexts);
-			contexts.set(arg, context);
-
-			child._block = block.child({
-				comment: createDebuggingComment(child, generator),
-				name: generator.getUniqueName(`create_${status}_block`),
-				params: block.params.concat(context),
-				context,
-				contexts
-			});
-
-			child._state = getChildState(state);
-
-			preprocessChildren(generator, child._block, child._state, child, inEachBlock, elementStack, componentStack, stripWhitespace, nextSibling);
-			generator.blocks.push(child._block);
-
-			if (child._block.dependencies.size > 0) {
-				dynamic = true;
-				block.addDependencies(child._block.dependencies);
-			}
-		});
-
-		node.pending._block.hasUpdateMethod = dynamic;
-		node.then._block.hasUpdateMethod = dynamic;
-		node.catch._block.hasUpdateMethod = dynamic;
-	},
-
-	IfBlock: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		inEachBlock: boolean,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) => {
-		cannotUseInnerHTML(node);
-
-		const blocks: Block[] = [];
-		let dynamic = false;
-		let hasIntros = false;
-		let hasOutros = false;
-
-		function attachBlocks(node: Node) {
-			node.var = block.getUniqueName(`if_block`);
-
-			block.addDependencies(node.metadata.dependencies);
-
-			node._block = block.child({
-				comment: createDebuggingComment(node, generator),
-				name: generator.getUniqueName(`create_if_block`),
-			});
-
-			node._state = getChildState(state);
-
-			blocks.push(node._block);
-			preprocessChildren(generator, node._block, node._state, node, inEachBlock, elementStack, componentStack, stripWhitespace, nextSibling);
-
-			if (node._block.dependencies.size > 0) {
-				dynamic = true;
-				block.addDependencies(node._block.dependencies);
-			}
-
-			if (node._block.hasIntroMethod) hasIntros = true;
-			if (node._block.hasOutroMethod) hasOutros = true;
-
-			if (isElseIf(node.else)) {
-				attachBlocks(node.else.children[0]);
-			} else if (node.else) {
-				node.else._block = block.child({
-					comment: createDebuggingComment(node.else, generator),
-					name: generator.getUniqueName(`create_if_block`),
-				});
-
-				node.else._state = getChildState(state);
-
-				blocks.push(node.else._block);
-				preprocessChildren(
-					generator,
-					node.else._block,
-					node.else._state,
-					node.else,
-					inEachBlock,
-					elementStack,
-					componentStack,
-					stripWhitespace,
-					nextSibling
-				);
-
-				if (node.else._block.dependencies.size > 0) {
-					dynamic = true;
-					block.addDependencies(node.else._block.dependencies);
-				}
-			}
-		}
-
-		attachBlocks(node);
-
-		blocks.forEach(block => {
-			block.hasUpdateMethod = dynamic;
-			block.hasIntroMethod = hasIntros;
-			block.hasOutroMethod = hasOutros;
-		});
-
-		generator.blocks.push(...blocks);
-	},
-
-	EachBlock: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		inEachBlock: boolean,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) => {
-		cannotUseInnerHTML(node);
-		node.var = block.getUniqueName(`each`);
-		node.iterations = block.getUniqueName(`${node.var}_blocks`);
-
-		const { dependencies } = node.metadata;
-		block.addDependencies(dependencies);
-
-		const indexNames = new Map(block.indexNames);
-		const indexName =
-			node.index || block.getUniqueName(`${node.context}_index`);
-		indexNames.set(node.context, indexName);
-
-		const listNames = new Map(block.listNames);
-		const listName = block.getUniqueName(
-			(node.expression.type === 'MemberExpression' && !node.expression.computed) ? node.expression.property.name :
-			node.expression.type === 'Identifier' ? node.expression.name :
-			`each_value`
-		);
-		listNames.set(node.context, listName);
-
-		const context = block.getUniqueName(node.context);
-		const contexts = new Map(block.contexts);
-		contexts.set(node.context, context);
-
-		const indexes = new Map(block.indexes);
-		if (node.index) indexes.set(node.index, node.context);
-
-		const changeableIndexes = new Map(block.changeableIndexes);
-		if (node.index) changeableIndexes.set(node.index, node.key);
-
-		if (node.destructuredContexts) {
-			for (let i = 0; i < node.destructuredContexts.length; i += 1) {
-				contexts.set(node.destructuredContexts[i], `${context}[${i}]`);
-			}
-		}
-
-		node._block = block.child({
-			comment: createDebuggingComment(node, generator),
-			name: generator.getUniqueName('create_each_block'),
-			context: node.context,
-			key: node.key,
-
-			contexts,
-			indexes,
-			changeableIndexes,
-
-			listName,
-			indexName,
-
-			indexNames,
-			listNames,
-			params: block.params.concat(listName, context, indexName),
-		});
-
-		node._state = getChildState(state, {
-			inEachBlock: true,
-		});
-
-		generator.blocks.push(node._block);
-		preprocessChildren(generator, node._block, node._state, node, true, elementStack, componentStack, stripWhitespace, nextSibling);
-		block.addDependencies(node._block.dependencies);
-		node._block.hasUpdateMethod = node._block.dependencies.size > 0;
-
-		if (node.else) {
-			node.else._block = block.child({
-				comment: createDebuggingComment(node.else, generator),
-				name: generator.getUniqueName(`${node._block.name}_else`),
-			});
-
-			node.else._state = getChildState(state);
-
-			generator.blocks.push(node.else._block);
-			preprocessChildren(
-				generator,
-				node.else._block,
-				node.else._state,
-				node.else,
-				inEachBlock,
-				elementStack,
-				componentStack,
-				stripWhitespace,
-				nextSibling
-			);
-			node.else._block.hasUpdateMethod = node.else._block.dependencies.size > 0;
-		}
-	},
-
-	Element: (
-		generator: DomGenerator,
-		block: Block,
-		state: State,
-		node: Node,
-		inEachBlock: boolean,
-		elementStack: Node[],
-		componentStack: Node[],
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) => {
-		if (node.name === 'slot' || node.name === 'option') {
-			cannotUseInnerHTML(node);
-		}
-
-		node.attributes.forEach((attribute: Node) => {
-			if (attribute.type === 'Attribute' && attribute.value !== true) {
-				attribute.value.forEach((chunk: Node) => {
-					if (chunk.type !== 'Text') {
-						if (node.parent) cannotUseInnerHTML(node.parent);
-
-						const dependencies = chunk.metadata.dependencies;
-						block.addDependencies(dependencies);
-
-						// special case — <option value='{{foo}}'> — see below
-						if (
-							node.name === 'option' &&
-							attribute.name === 'value' &&
-							state.selectBindingDependencies
-						) {
-							state.selectBindingDependencies.forEach(prop => {
-								dependencies.forEach((dependency: string) => {
-									generator.indirectDependencies.get(prop).add(dependency);
-								});
-							});
-						}
-					}
-				});
-			} else {
-				if (node.parent) cannotUseInnerHTML(node.parent);
-
-				if (attribute.type === 'EventHandler' && attribute.expression) {
-					attribute.expression.arguments.forEach((arg: Node) => {
-						block.addDependencies(arg.metadata.dependencies);
-					});
-				} else if (attribute.type === 'Binding') {
-					block.addDependencies(attribute.metadata.dependencies);
-				} else if (attribute.type === 'Transition') {
-					if (attribute.intro)
-						generator.hasIntroTransitions = block.hasIntroMethod = true;
-					if (attribute.outro) {
-						generator.hasOutroTransitions = block.hasOutroMethod = true;
-						block.outros += 1;
-					}
-				}
-			}
-		});
-
-		const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value');
-
-		// Treat these the same way:
-		//   <option>{{foo}}</option>
-		//   <option value='{{foo}}'>{{foo}}</option>
-		if (node.name === 'option' && !valueAttribute) {
-			node.attributes.push({
-				type: 'Attribute',
-				name: 'value',
-				value: node.children
-			});
-		}
-
-		// special case — in a case like this...
-		//
-		//   <select bind:value='foo'>
-		//     <option value='{{bar}}'>bar</option>
-		//     <option value='{{baz}}'>baz</option>
-		//   </option>
-		//
-		// ...we need to know that `foo` depends on `bar` and `baz`,
-		// so that if `foo.qux` changes, we know that we need to
-		// mark `bar` and `baz` as dirty too
-		if (node.name === 'select') {
-			const binding = node.attributes.find((node: Node) => node.type === 'Binding' && node.name === 'value');
-			if (binding) {
-				// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
-				const dependencies = binding.metadata.dependencies;
-				state.selectBindingDependencies = dependencies;
-				dependencies.forEach((prop: string) => {
-					generator.indirectDependencies.set(prop, new Set());
-				});
-			} else {
-				state.selectBindingDependencies = null;
-			}
-		}
-
-		const isComponent =
-			generator.components.has(node.name) || node.name === ':Self' || node.name === ':Component';
-
-		if (isComponent) {
-			cannotUseInnerHTML(node);
-
-			node.var = block.getUniqueName(
-				(
-					node.name === ':Self' ? generator.name :
-					node.name === ':Component' ? 'switch_instance' :
-					node.name
-				).toLowerCase()
-			);
-
-			node._state = getChildState(state, {
-				parentNode: `${node.var}._slotted.default`
-			});
-		} else {
-			const slot = getStaticAttributeValue(node, 'slot');
-			if (slot && isChildOfComponent(node, generator)) {
-				cannotUseInnerHTML(node);
-				node.slotted = true;
-				// TODO validate slots — no nesting, no dynamic names...
-				const component = componentStack[componentStack.length - 1];
-				component._slots.add(slot);
-			}
-
-			node.var = block.getUniqueName(
-				node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
-			);
-
-			node._state = getChildState(state, {
-				parentNode: node.var,
-				parentNodes: block.getUniqueName(`${node.var}_nodes`),
-				parentNodeName: node.name,
-				namespace: node.name === 'svg'
-					? 'http://www.w3.org/2000/svg'
-					: state.namespace,
-				allUsedContexts: [],
-			});
-
-			generator.stylesheet.apply(node, elementStack);
-		}
-
-		if (node.children.length) {
-			if (isComponent) {
-				if (node.children) node._slots = new Set(['default']);
-				preprocessChildren(generator, block, node._state, node, inEachBlock, elementStack, componentStack.concat(node), stripWhitespace, nextSibling);
-			} else {
-				if (node.name === 'pre' || node.name === 'textarea') stripWhitespace = false;
-				preprocessChildren(generator, block, node._state, node, inEachBlock, elementStack.concat(node), componentStack, stripWhitespace, nextSibling);
-			}
-		}
-	},
-};
-
-function preprocessChildren(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	inEachBlock: boolean,
-	elementStack: Node[],
-	componentStack: Node[],
-	stripWhitespace: boolean,
-	nextSibling: Node
-) {
-	// glue text nodes together
-	const cleaned: Node[] = [];
-	let lastChild: Node;
-
-	let windowComponent;
-
-	node.children.forEach((child: Node) => {
-		if (child.type === 'Comment') return;
-
-		// special case — this is an easy way to remove whitespace surrounding
-		// <:Window/>. lil hacky but it works
-		if (child.type === 'Element' && child.name === ':Window') {
-			windowComponent = child;
-			return;
-		}
-
-		if (child.type === 'Text' && lastChild && lastChild.type === 'Text') {
-			lastChild.data += child.data;
-			lastChild.end = child.end;
-		} else {
-			if (child.type === 'Text' && stripWhitespace && cleaned.length === 0) {
-				child.data = trimStart(child.data);
-				if (child.data) cleaned.push(child);
-			} else {
-				cleaned.push(child);
-			}
-		}
-
-		lastChild = child;
-	});
-
-	lastChild = null;
-
-	cleaned.forEach((child: Node, i: number) => {
-		child.parent = node;
-		child.canUseInnerHTML = !generator.hydratable;
-
-		const preprocessor = preprocessors[child.type];
-		if (preprocessor) preprocessor(generator, block, state, child, inEachBlock, elementStack, componentStack, stripWhitespace, cleaned[i + 1] || nextSibling);
-
-		if (child.shouldSkip) return;
-
-		if (lastChild) lastChild.next = child;
-		child.prev = lastChild;
-
-		lastChild = child;
-	});
-
-	// We want to remove trailing whitespace inside an element/component/block,
-	// *unless* there is no whitespace between this node and its next sibling
-	if (stripWhitespace && lastChild && lastChild.type === 'Text') {
-		const shouldTrim = (
-			nextSibling ?  (nextSibling.type === 'Text' && /^\s/.test(nextSibling.data)) : !inEachBlock
-		);
-
-		if (shouldTrim) {
-			lastChild.data = trimEnd(lastChild.data);
-			if (!lastChild.data) {
-				cleaned.pop();
-				lastChild = cleaned[cleaned.length - 1];
-				lastChild.next = null;
-			}
-		}
-	}
-
-	node.children = cleaned;
-	if (windowComponent) cleaned.unshift(windowComponent);
-}
-
-export default function preprocess(
-	generator: DomGenerator,
-	namespace: string,
-	node: Node
-) {
-	const block = new Block({
-		generator,
-		name: '@create_main_fragment',
-		key: null,
-
-		contexts: new Map(),
-		indexes: new Map(),
-		changeableIndexes: new Map(),
-
-		params: ['state'],
-		indexNames: new Map(),
-		listNames: new Map(),
-
-		dependencies: new Set(),
-	});
-
-	const state: State = {
-		namespace,
-		parentNode: null,
-		parentNodes: 'nodes'
-	};
-
-	generator.blocks.push(block);
-	preprocessChildren(generator, block, state, node, false, [], [], true, null);
-	block.hasUpdateMethod = true;
-
-	return { block, state };
-}
diff --git a/src/generators/dom/visit.ts b/src/generators/dom/visit.ts
deleted file mode 100644
index c5e8f0bed4..0000000000
--- a/src/generators/dom/visit.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import visitors from './visitors/index';
-import { DomGenerator } from './index';
-import Block from './Block';
-import { Node } from '../../interfaces';
-import { State } from './interfaces';
-
-export default function visit(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	const visitor = visitors[node.type];
-	visitor(generator, block, state, node, elementStack, componentStack);
-}
diff --git a/src/generators/dom/visitors/AwaitBlock.ts b/src/generators/dom/visitors/AwaitBlock.ts
deleted file mode 100644
index 6e014af289..0000000000
--- a/src/generators/dom/visitors/AwaitBlock.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import deindent from '../../../utils/deindent';
-import visit from '../visit';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import isDomNode from './shared/isDomNode';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-export default function visitAwaitBlock(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	const name = node.var;
-
-	const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode || !isDomNode(node.parent, generator);
-	const anchor = needsAnchor
-		? block.getUniqueName(`${name}_anchor`)
-		: (node.next && node.next.var) || 'null';
-
-	const params = block.params.join(', ');
-
-	block.contextualise(node.expression);
-	const { snippet } = node.metadata;
-
-	if (needsAnchor) {
-		block.addElement(
-			anchor,
-			`@createComment()`,
-			`@createComment()`,
-			state.parentNode
-		);
-	}
-
-	const promise = block.getUniqueName(`promise`);
-	const resolved = block.getUniqueName(`resolved`);
-	const await_block = block.getUniqueName(`await_block`);
-	const await_block_type = block.getUniqueName(`await_block_type`);
-	const token = block.getUniqueName(`token`);
-	const await_token = block.getUniqueName(`await_token`);
-	const handle_promise = block.getUniqueName(`handle_promise`);
-	const replace_await_block = block.getUniqueName(`replace_await_block`);
-	const old_block = block.getUniqueName(`old_block`);
-	const value = block.getUniqueName(`value`);
-	const error = block.getUniqueName(`error`);
-	const create_pending_block = node.pending._block.name;
-	const create_then_block = node.then._block.name;
-	const create_catch_block = node.catch._block.name;
-
-	block.addVariable(await_block);
-	block.addVariable(await_block_type);
-	block.addVariable(await_token);
-	block.addVariable(promise);
-	block.addVariable(resolved);
-
-	block.builders.init.addBlock(deindent`
-		function ${replace_await_block}(${token}, type, ${value}, ${params}) {
-			if (${token} !== ${await_token}) return;
-
-			var ${old_block} = ${await_block};
-			${await_block} = (${await_block_type} = type)(${params}, ${resolved} = ${value}, #component);
-
-			if (${old_block}) {
-				${old_block}.u();
-				${old_block}.d();
-				${await_block}.c();
-				${await_block}.m(${state.parentNode || `${anchor}.parentNode`}, ${anchor});
-			}
-		}
-
-		function ${handle_promise}(${promise}, ${params}) {
-			var ${token} = ${await_token} = {};
-
-			if (@isPromise(${promise})) {
-				${promise}.then(function(${value}) {
-					${replace_await_block}(${token}, ${create_then_block}, ${value}, ${params});
-				}, function (${error}) {
-					${replace_await_block}(${token}, ${create_catch_block}, ${error}, ${params});
-				});
-
-				// if we previously had a then/catch block, destroy it
-				if (${await_block_type} !== ${create_pending_block}) {
-					${replace_await_block}(${token}, ${create_pending_block}, null, ${params});
-					return true;
-				}
-			} else {
-				${resolved} = ${promise};
-				if (${await_block_type} !== ${create_then_block}) {
-					${replace_await_block}(${token}, ${create_then_block}, ${resolved}, ${params});
-					return true;
-				}
-			}
-		}
-
-		${handle_promise}(${promise} = ${snippet}, ${params});
-	`);
-
-	block.builders.create.addBlock(deindent`
-		${await_block}.c();
-	`);
-
-	block.builders.claim.addBlock(deindent`
-		${await_block}.l(${state.parentNodes});
-	`);
-
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
-
-	block.builders.mount.addBlock(deindent`
-		${await_block}.m(${targetNode}, ${anchorNode});
-	`);
-
-	const conditions = [];
-	if (node.metadata.dependencies) {
-		conditions.push(
-			`(${node.metadata.dependencies.map(dep => `'${dep}' in changed`).join(' || ')})`
-		);
-	}
-
-	conditions.push(
-		`${promise} !== (${promise} = ${snippet})`,
-		`${handle_promise}(${promise}, ${params})`
-	);
-
-	if (node.pending._block.hasUpdateMethod) {
-		block.builders.update.addBlock(deindent`
-			if (${conditions.join(' && ')}) {
-				// nothing
-			} else {
-				${await_block}.p(changed, ${params}, ${resolved});
-			}
-		`);
-	} else {
-		block.builders.update.addBlock(deindent`
-			if (${conditions.join(' && ')}) {
-				${await_block}.c();
-				${await_block}.m(${anchor}.parentNode, ${anchor});
-			}
-		`);
-	}
-
-	block.builders.unmount.addBlock(deindent`
-		${await_block}.u();
-	`);
-
-	block.builders.destroy.addBlock(deindent`
-		${await_token} = null;
-		${await_block}.d();
-	`);
-
-	[node.pending, node.then, node.catch].forEach(status => {
-		status.children.forEach(child => {
-			visit(generator, status._block, status._state, child, elementStack, componentStack);
-		});
-	});
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Component.ts b/src/generators/dom/visitors/Component.ts
deleted file mode 100644
index f3487b5a5c..0000000000
--- a/src/generators/dom/visitors/Component.ts
+++ /dev/null
@@ -1,588 +0,0 @@
-import deindent from '../../../utils/deindent';
-import CodeBuilder from '../../../utils/CodeBuilder';
-import visit from '../visit';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import isDomNode from './shared/isDomNode';
-import getTailSnippet from '../../../utils/getTailSnippet';
-import getObject from '../../../utils/getObject';
-import getExpressionPrecedence from '../../../utils/getExpressionPrecedence';
-import getStaticAttributeValue from '../../../utils/getStaticAttributeValue';
-import { stringify } from '../../../utils/stringify';
-import stringifyProps from '../../../utils/stringifyProps';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-interface Attribute {
-	name: string;
-	value: any;
-	dynamic: boolean;
-	dependencies?: string[]
-}
-
-interface Binding {
-	name: string;
-	value: Node;
-	contexts: Set<string>;
-	snippet: string;
-	obj: string;
-	prop: string;
-	dependencies: string[];
-}
-
-export default function visitComponent(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	generator.hasComponents = true;
-
-	const name = node.var;
-
-	const componentInitProperties = [`_root: #component._root`];
-
-	if (node.children.length > 0) {
-		const slots = Array.from(node._slots).map(name => `${name}: @createFragment()`);
-		componentInitProperties.push(`slots: { ${slots.join(', ')} }`);
-
-		node.children.forEach((child: Node) => {
-			visit(generator, block, node._state, child, elementStack, componentStack.concat(node));
-		});
-	}
-
-	const allContexts = new Set();
-	const statements: string[] = [];
-	const name_context = block.getUniqueName(`${name}_context`);
-
-	let name_updating: string;
-	let name_initial_data: string;
-	let beforecreate: string = null;
-
-	const attributes = node.attributes
-		.filter(a => a.type === 'Attribute')
-		.map(a => mungeAttribute(a, block));
-
-	const bindings = node.attributes
-		.filter(a => a.type === 'Binding')
-		.map(a => mungeBinding(a, block));
-
-	const eventHandlers = node.attributes
-		.filter((a: Node) => a.type === 'EventHandler')
-		.map(a => mungeEventHandler(generator, node, a, block, name_context, allContexts));
-
-	const ref = node.attributes.find((a: Node) => a.type === 'Ref');
-	if (ref) generator.usesRefs = true;
-
-	const updates: string[] = [];
-
-	if (attributes.length || bindings.length) {
-		const initialProps = attributes
-			.map((attribute: Attribute) => `${attribute.name}: ${attribute.value}`);
-
-		const initialPropString = stringifyProps(initialProps);
-
-		attributes
-			.filter((attribute: Attribute) => attribute.dynamic)
-			.forEach((attribute: Attribute) => {
-				if (attribute.dependencies.length) {
-					updates.push(deindent`
-						if (${attribute.dependencies
-							.map(dependency => `changed.${dependency}`)
-							.join(' || ')}) ${name}_changes.${attribute.name} = ${attribute.value};
-					`);
-				}
-
-				else {
-					// TODO this is an odd situation to encounter – I *think* it should only happen with
-					// each block indices, in which case it may be possible to optimise this
-					updates.push(`${name}_changes.${attribute.name} = ${attribute.value};`);
-				}
-			});
-
-		if (bindings.length) {
-			generator.hasComplexBindings = true;
-
-			name_updating = block.alias(`${name}_updating`);
-			name_initial_data = block.getUniqueName(`${name}_initial_data`);
-
-			block.addVariable(name_updating, '{}');
-			statements.push(`var ${name_initial_data} = ${initialPropString};`);
-
-			const setParentFromChildOnChange = new CodeBuilder();
-			const setParentFromChildOnInit = new CodeBuilder();
-
-			bindings.forEach((binding: Binding) => {
-				let setParentFromChild;
-
-				binding.contexts.forEach(context => {
-					allContexts.add(context);
-				});
-
-				const { name: key } = getObject(binding.value);
-
-				if (block.contexts.has(key)) {
-					const prop = binding.dependencies[0];
-					const computed = isComputed(binding.value);
-					const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : '';
-
-					setParentFromChild = deindent`
-						var list = ${name_context}.${block.listNames.get(key)};
-						var index = ${name_context}.${block.indexNames.get(key)};
-						list[index]${tail} = childState.${binding.name};
-
-						${binding.dependencies
-							.map((prop: string) => `newState.${prop} = state.${prop};`)
-							.join('\n')}
-					`;
-				}
-
-				else if (binding.value.type === 'MemberExpression') {
-					setParentFromChild = deindent`
-						${binding.snippet} = childState.${binding.name};
-						${binding.dependencies.map((prop: string) => `newState.${prop} = state.${prop};`).join('\n')}
-					`;
-				}
-
-				else {
-					setParentFromChild = `newState.${binding.value.name} = childState.${binding.name};`;
-				}
-
-				statements.push(deindent`
-					if (${binding.prop} in ${binding.obj}) {
-						${name_initial_data}.${binding.name} = ${binding.snippet};
-						${name_updating}.${binding.name} = true;
-					}`
-				);
-
-				setParentFromChildOnChange.addConditional(
-					`!${name_updating}.${binding.name} && changed.${binding.name}`,
-					setParentFromChild
-				);
-
-				setParentFromChildOnInit.addConditional(
-					`!${name_updating}.${binding.name}`,
-					setParentFromChild
-				);
-
-				// TODO could binding.dependencies.length ever be 0?
-				if (binding.dependencies.length) {
-					updates.push(deindent`
-						if (!${name_updating}.${binding.name} && ${binding.dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
-							${name}_changes.${binding.name} = ${binding.snippet};
-							${name_updating}.${binding.name} = true;
-						}
-					`);
-				}
-			});
-
-			componentInitProperties.push(`data: ${name_initial_data}`);
-
-			componentInitProperties.push(deindent`
-				_bind: function(changed, childState) {
-					var state = #component.get(), newState = {};
-					${setParentFromChildOnChange}
-					${name_updating} = @assign({}, changed);
-					#component._set(newState);
-					${name_updating} = {};
-				}
-			`);
-
-			beforecreate = deindent`
-				#component._root._beforecreate.push(function() {
-					var state = #component.get(), childState = ${name}.get(), newState = {};
-					if (!childState) return;
-					${setParentFromChildOnInit}
-					${name_updating} = { ${bindings.map((binding: Binding) => `${binding.name}: true`).join(', ')} };
-					#component._set(newState);
-					${name_updating} = {};
-				});
-			`;
-		} else if (initialProps.length) {
-			componentInitProperties.push(`data: ${initialPropString}`);
-		}
-	}
-
-	const isDynamicComponent = node.name === ':Component';
-
-	const switch_vars = isDynamicComponent && {
-		value: block.getUniqueName('switch_value'),
-		props: block.getUniqueName('switch_props')
-	};
-
-	const expression = (
-		node.name === ':Self' ? generator.name :
-		isDynamicComponent ? switch_vars.value :
-		`%components-${node.name}`
-	);
-
-	if (isDynamicComponent) {
-		block.contextualise(node.expression);
-		const { dependencies, snippet } = node.metadata;
-
-		const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode || !isDomNode(node.parent, generator);
-		const anchor = needsAnchor
-			? block.getUniqueName(`${name}_anchor`)
-			: (node.next && node.next.var) || 'null';
-
-		if (needsAnchor) {
-			block.addElement(
-				anchor,
-				`@createComment()`,
-				`@createComment()`,
-				state.parentNode
-			);
-		}
-
-		const params = block.params.join(', ');
-
-		block.builders.init.addBlock(deindent`
-			var ${switch_vars.value} = ${snippet};
-
-			function ${switch_vars.props}(${params}) {
-				return {
-					${componentInitProperties.join(',\n')}
-				};
-			}
-
-			if (${switch_vars.value}) {
-				${statements.length > 0 && statements.join('\n')}
-				var ${name} = new ${expression}(${switch_vars.props}(${params}));
-
-				${beforecreate}
-			}
-
-			${eventHandlers.map(handler => deindent`
-				function ${handler.var}(event) {
-					${handler.body}
-				}
-
-				if (${name}) ${name}.on("${handler.name}", ${handler.var});
-			`)}
-		`);
-
-		block.builders.create.addLine(
-			`if (${name}) ${name}._fragment.c();`
-		);
-
-		block.builders.claim.addLine(
-			`if (${name}) ${name}._fragment.l(${state.parentNodes});`
-		);
-
-		block.builders.mount.addLine(
-			`if (${name}) ${name}._mount(${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'});`
-		);
-
-		block.builders.update.addBlock(deindent`
-			if (${switch_vars.value} !== (${switch_vars.value} = ${snippet})) {
-				if (${name}) ${name}.destroy();
-
-				if (${switch_vars.value}) {
-					${name} = new ${switch_vars.value}(${switch_vars.props}(${params}));
-					${name}._fragment.c();
-
-					${node.children.map(child => remount(generator, child, name))}
-					${name}._mount(${anchor}.parentNode, ${anchor});
-
-					${eventHandlers.map(handler => deindent`
-						${name}.on("${handler.name}", ${handler.var});
-					`)}
-
-					${ref && `#component.refs.${ref.name} = ${name};`}
-				}
-
-				${ref && deindent`
-					else if (#component.refs.${ref.name} === ${name}) {
-						#component.refs.${ref.name} = null;
-					}`}
-			}
-		`);
-
-		if (updates.length) {
-			block.builders.update.addBlock(deindent`
-				else {
-					var ${name}_changes = {};
-					${updates.join('\n')}
-					${name}._set(${name}_changes);
-					${bindings.length && `${name_updating} = {};`}
-				}
-			`);
-		}
-
-		if (!state.parentNode) block.builders.unmount.addLine(`if (${name}) ${name}._unmount();`);
-
-		block.builders.destroy.addLine(`if (${name}) ${name}.destroy(false);`);
-	} else {
-		block.builders.init.addBlock(deindent`
-			${statements.join('\n')}
-			var ${name} = new ${expression}({
-				${componentInitProperties.join(',\n')}
-			});
-
-			${beforecreate}
-
-			${eventHandlers.map(handler => deindent`
-				${name}.on("${handler.name}", function(event) {
-					${handler.body}
-				});
-			`)}
-
-			${ref && `#component.refs.${ref.name} = ${name};`}
-		`);
-
-		block.builders.create.addLine(`${name}._fragment.c();`);
-
-		block.builders.claim.addLine(
-			`${name}._fragment.l(${state.parentNodes});`
-		);
-
-		block.builders.mount.addLine(
-			`${name}._mount(${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'});`
-		);
-
-		if (updates.length) {
-			block.builders.update.addBlock(deindent`
-				var ${name}_changes = {};
-				${updates.join('\n')}
-				${name}._set(${name}_changes);
-				${bindings.length && `${name_updating} = {};`}
-			`);
-		}
-
-		if (!state.parentNode) block.builders.unmount.addLine(`${name}._unmount();`);
-
-		block.builders.destroy.addLine(deindent`
-			${name}.destroy(false);
-			${ref && `if (#component.refs.${ref.name} === ${name}) #component.refs.${ref.name} = null;`}
-		`);
-	}
-
-	// maintain component context
-	if (allContexts.size) {
-		const contexts = Array.from(allContexts);
-
-		const initialProps = contexts
-			.map(contextName => {
-				if (contextName === 'state') return `state: state`;
-
-				const listName = block.listNames.get(contextName);
-				const indexName = block.indexNames.get(contextName);
-
-				return `${listName}: ${listName},\n${indexName}: ${indexName}`;
-			})
-			.join(',\n');
-
-		const updates = contexts
-			.map(contextName => {
-				if (contextName === 'state') return `${name_context}.state = state;`;
-
-				const listName = block.listNames.get(contextName);
-				const indexName = block.indexNames.get(contextName);
-
-				return `${name_context}.${listName} = ${listName};\n${name_context}.${indexName} = ${indexName};`;
-			})
-			.join('\n');
-
-		block.builders.init.addBlock(deindent`
-			var ${name_context} = {
-				${initialProps}
-			};
-		`);
-
-		block.builders.update.addBlock(updates);
-	}
-}
-
-function mungeAttribute(attribute: Node, block: Block): Attribute {
-	if (attribute.value === true) {
-		// attributes without values, e.g. <textarea readonly>
-		return {
-			name: attribute.name,
-			value: true,
-			dynamic: false
-		};
-	}
-
-	if (attribute.value.length === 0) {
-		return {
-			name: attribute.name,
-			value: `''`,
-			dynamic: false
-		};
-	}
-
-	if (attribute.value.length === 1) {
-		const value = attribute.value[0];
-
-		if (value.type === 'Text') {
-			// static attributes
-			return {
-				name: attribute.name,
-				value: isNaN(value.data) ? stringify(value.data) : value.data,
-				dynamic: false
-			};
-		}
-
-		// simple dynamic attributes
-		block.contextualise(value.expression); // TODO remove
-		const { dependencies, snippet } = value.metadata;
-
-		// TODO only update attributes that have changed
-		return {
-			name: attribute.name,
-			value: snippet,
-			dependencies,
-			dynamic: true
-		};
-	}
-
-	// otherwise we're dealing with a complex dynamic attribute
-	const allDependencies = new Set();
-
-	const value =
-		(attribute.value[0].type === 'Text' ? '' : `"" + `) +
-		attribute.value
-			.map((chunk: Node) => {
-				if (chunk.type === 'Text') {
-					return stringify(chunk.data);
-				} else {
-					block.contextualise(chunk.expression); // TODO remove
-					const { dependencies, snippet } = chunk.metadata;
-
-					dependencies.forEach((dependency: string) => {
-						allDependencies.add(dependency);
-					});
-
-					return getExpressionPrecedence(chunk.expression) <= 13 ? `(${snippet})` : snippet;
-				}
-			})
-			.join(' + ');
-
-	return {
-		name: attribute.name,
-		value,
-		dependencies: Array.from(allDependencies),
-		dynamic: true
-	};
-}
-
-function mungeBinding(binding: Node, block: Block): Binding {
-	const { name } = getObject(binding.value);
-	const { contexts } = block.contextualise(binding.value);
-	const { dependencies, snippet } = binding.metadata;
-
-	const contextual = block.contexts.has(name);
-
-	let obj;
-	let prop;
-
-	if (contextual) {
-		obj = block.listNames.get(name);
-		prop = block.indexNames.get(name);
-	} else if (binding.value.type === 'MemberExpression') {
-		prop = `[✂${binding.value.property.start}-${binding.value.property.end}✂]`;
-		if (!binding.value.computed) prop = `'${prop}'`;
-		obj = `[✂${binding.value.object.start}-${binding.value.object.end}✂]`;
-	} else {
-		obj = 'state';
-		prop = `'${name}'`;
-	}
-
-	return {
-		name: binding.name,
-		value: binding.value,
-		contexts,
-		snippet,
-		obj,
-		prop,
-		dependencies
-	};
-}
-
-function mungeEventHandler(generator: DomGenerator, node: Node, handler: Node, block: Block, name_context: string, allContexts: Set<string>) {
-	let body;
-
-	if (handler.expression) {
-		generator.addSourcemapLocations(handler.expression);
-		generator.code.prependRight(
-			handler.expression.start,
-			`${block.alias('component')}.`
-		);
-
-		const usedContexts: string[] = [];
-
-		handler.expression.arguments.forEach((arg: Node) => {
-			const { contexts } = block.contextualise(arg, null, true);
-
-			contexts.forEach(context => {
-				if (!~usedContexts.indexOf(context)) usedContexts.push(context);
-				allContexts.add(context);
-			});
-		});
-
-		// TODO hoist event handlers? can do `this.__component.method(...)`
-		const declarations = usedContexts.map(name => {
-			if (name === 'state') return `var state = ${name_context}.state;`;
-
-			const listName = block.listNames.get(name);
-			const indexName = block.indexNames.get(name);
-
-			return `var ${listName} = ${name_context}.${listName}, ${indexName} = ${name_context}.${indexName}, ${name} = ${listName}[${indexName}]`;
-		});
-
-		body = deindent`
-			${declarations}
-
-			[✂${handler.expression.start}-${handler.expression.end}✂];
-		`;
-	} else {
-		body = deindent`
-			${block.alias('component')}.fire('${handler.name}', event);
-		`;
-	}
-
-	return {
-		name: handler.name,
-		var: block.getUniqueName(`${node.var}_${handler.name}`),
-		body
-	};
-}
-
-function isComputed(node: Node) {
-	while (node.type === 'MemberExpression') {
-		if (node.computed) return true;
-		node = node.object;
-	}
-
-	return false;
-}
-
-function remount(generator: DomGenerator, node: Node, name: string) {
-	// TODO make this a method of the nodes
-
-	if (node.type === 'Element') {
-		if (node.name === ':Self' || node.name === ':Component' || generator.components.has(node.name)) {
-			return `${node.var}._mount(${name}._slotted.default, null);`;
-		}
-
-		const slot = node.attributes.find(attribute => attribute.name === 'slot');
-		if (slot) {
-			return `@appendNode(${node.var}, ${name}._slotted.${getStaticAttributeValue(node, 'slot')});`;
-		}
-
-		return `@appendNode(${node.var}, ${name}._slotted.default);`;
-	}
-
-	if (node.type === 'Text' || node.type === 'MustacheTag' || node.type === 'RawMustacheTag') {
-		return `@appendNode(${node.var}, ${name}._slotted.default);`;
-	}
-
-	if (node.type === 'EachBlock') {
-		// TODO consider keyed blocks
-		return `for (var #i = 0; #i < ${node.iterations}.length; #i += 1) ${node.iterations}[#i].m(${name}._slotted.default, null);`;
-	}
-
-	return `${node.var}.m(${name}._slotted.default, null);`;
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
deleted file mode 100644
index 6b659ccf06..0000000000
--- a/src/generators/dom/visitors/EachBlock.ts
+++ /dev/null
@@ -1,491 +0,0 @@
-import deindent from '../../../utils/deindent';
-import visit from '../visit';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import isDomNode from './shared/isDomNode';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-export default function visitEachBlock(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	const each = node.var;
-
-	const create_each_block = node._block.name;
-	const each_block_value = node._block.listName;
-	const iterations = node.iterations;
-	const params = block.params.join(', ');
-
-	const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode || !isDomNode(node.parent, generator);
-	const anchor = needsAnchor
-		? block.getUniqueName(`${each}_anchor`)
-		: (node.next && node.next.var) || 'null';
-
-	// hack the sourcemap, so that if data is missing the bug
-	// is easy to find
-	let c = node.start + 3;
-	while (generator.source[c] !== 'e') c += 1;
-	generator.code.overwrite(c, c + 4, 'length');
-	const length = `[✂${c}-${c+4}✂]`;
-
-	const mountOrIntro = node._block.hasIntroMethod ? 'i' : 'm';
-	const vars = {
-		each,
-		create_each_block,
-		each_block_value,
-		length,
-		iterations,
-		params,
-		anchor,
-		mountOrIntro,
-	};
-
-	block.contextualise(node.expression);
-	const { snippet } = node.metadata;
-
-	block.builders.init.addLine(`var ${each_block_value} = ${snippet};`);
-
-	if (node.key) {
-		keyed(generator, block, state, node, snippet, vars);
-	} else {
-		unkeyed(generator, block, state, node, snippet, vars);
-	}
-
-	const isToplevel = !state.parentNode;
-
-	if (needsAnchor) {
-		block.addElement(
-			anchor,
-			`@createComment()`,
-			`@createComment()`,
-			state.parentNode
-		);
-	}
-
-	if (node.else) {
-		const each_block_else = generator.getUniqueName(`${each}_else`);
-
-		block.builders.init.addLine(`var ${each_block_else} = null;`);
-
-		// 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}, #component);
-				${each_block_else}.c();
-			}
-		`);
-
-		block.builders.mount.addBlock(deindent`
-			if (${each_block_else}) {
-				${each_block_else}.${mountOrIntro}(${state.parentNode || '#target'}, null);
-			}
-		`);
-
-		const parentNode = state.parentNode || `${anchor}.parentNode`;
-
-		if (node.else._block.hasUpdateMethod) {
-			block.builders.update.addBlock(deindent`
-				if (!${each_block_value}.${length} && ${each_block_else}) {
-					${each_block_else}.p( changed, ${params} );
-				} else if (!${each_block_value}.${length}) {
-					${each_block_else} = ${node.else._block.name}(${params}, #component);
-					${each_block_else}.c();
-					${each_block_else}.${mountOrIntro}(${parentNode}, ${anchor});
-				} else if (${each_block_else}) {
-					${each_block_else}.u();
-					${each_block_else}.d();
-					${each_block_else} = null;
-				}
-			`);
-		} else {
-			block.builders.update.addBlock(deindent`
-				if (${each_block_value}.${length}) {
-					if (${each_block_else}) {
-						${each_block_else}.u();
-						${each_block_else}.d();
-						${each_block_else} = null;
-					}
-				} else if (!${each_block_else}) {
-					${each_block_else} = ${node.else._block.name}(${params}, #component);
-					${each_block_else}.c();
-					${each_block_else}.${mountOrIntro}(${parentNode}, ${anchor});
-				}
-			`);
-		}
-
-		block.builders.unmount.addLine(
-			`if (${each_block_else}) ${each_block_else}.u()`
-		);
-
-		block.builders.destroy.addBlock(deindent`
-			if (${each_block_else}) ${each_block_else}.d();
-		`);
-	}
-
-	node.children.forEach((child: Node) => {
-		visit(generator, node._block, node._state, child, elementStack, componentStack);
-	});
-
-	if (node.else) {
-		node.else.children.forEach((child: Node) => {
-			visit(generator, node.else._block, node.else._state, child, elementStack, componentStack);
-		});
-	}
-}
-
-function keyed(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	snippet: string,
-	{
-		each,
-		create_each_block,
-		each_block_value,
-		length,
-		params,
-		anchor,
-		mountOrIntro,
-	}
-) {
-	const key = block.getUniqueName('key');
-	const lookup = block.getUniqueName(`${each}_lookup`);
-	const iteration = block.getUniqueName(`${each}_iteration`);
-	const head = block.getUniqueName(`${each}_head`);
-	const last = block.getUniqueName(`${each}_last`);
-	const expected = block.getUniqueName(`${each}_expected`);
-
-	block.addVariable(lookup, `@blankObject()`);
-	block.addVariable(head);
-	block.addVariable(last);
-
-	if (node.children[0] && node.children[0].type === 'Element' && !generator.components.has(node.children[0].name)) {
-		// TODO or text/tag/raw
-		node._block.first = node.children[0]._state.parentNode; // TODO this is highly confusing
-	} else {
-		node._block.first = node._block.getUniqueName('first');
-		node._block.addElement(
-			node._block.first,
-			`@createComment()`,
-			`@createComment()`,
-			null
-		);
-	}
-
-	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, #component, ${key});
-
-			if (${last}) ${last}.next = ${iteration};
-			${iteration}.last = ${last};
-			${last} = ${iteration};
-
-			if (#i === 0) ${head} = ${iteration};
-		}
-	`);
-
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
-
-	block.builders.create.addBlock(deindent`
-		var ${iteration} = ${head};
-		while (${iteration}) {
-			${iteration}.c();
-			${iteration} = ${iteration}.next;
-		}
-	`);
-
-	block.builders.claim.addBlock(deindent`
-		var ${iteration} = ${head};
-		while (${iteration}) {
-			${iteration}.l(${state.parentNodes});
-			${iteration} = ${iteration}.next;
-		}
-	`);
-
-	block.builders.mount.addBlock(deindent`
-		var ${iteration} = ${head};
-		while (${iteration}) {
-			${iteration}.${mountOrIntro}(${targetNode}, ${anchorNode});
-			${iteration} = ${iteration}.next;
-		}
-	`);
-
-	const dynamic = node._block.hasUpdateMethod;
-	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
-
-	let destroy;
-	if (node._block.hasOutroMethod) {
-		const fn = block.getUniqueName(`${each}_outro`);
-		block.builders.init.addBlock(deindent`
-			function ${fn}(iteration) {
-				iteration.o(function() {
-					iteration.u();
-					iteration.d();
-					${lookup}[iteration.key] = null;
-				});
-			}
-		`);
-
-		destroy = deindent`
-			while (${expected}) {
-				${fn}(${expected});
-				${expected} = ${expected}.next;
-			}
-
-			for (#i = 0; #i < discard_pile.length; #i += 1) {
-				if (discard_pile[#i].discard) {
-					${fn}(discard_pile[#i]);
-				}
-			}
-		`;
-	} else {
-		const fn = block.getUniqueName(`${each}_destroy`);
-		block.builders.init.addBlock(deindent`
-			function ${fn}(iteration) {
-				iteration.u();
-				iteration.d();
-				${lookup}[iteration.key] = null;
-			}
-		`);
-
-		destroy = deindent`
-			while (${expected}) {
-				${fn}(${expected});
-				${expected} = ${expected}.next;
-			}
-
-			for (#i = 0; #i < discard_pile.length; #i += 1) {
-				var ${iteration} = discard_pile[#i];
-				if (${iteration}.discard) {
-					${fn}(${iteration});
-				}
-			}
-		`;
-	}
-
-	block.builders.update.addBlock(deindent`
-		var ${each_block_value} = ${snippet};
-
-		var ${expected} = ${head};
-		var ${last} = null;
-
-		var discard_pile = [];
-
-		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}.p(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);`}
-
-			if (${expected}) {
-				if (${key} === ${expected}.key) {
-					${expected} = ${expected}.next;
-				} else {
-					if (${iteration}) {
-						// probably a deletion
-						while (${expected} && ${expected}.key !== ${key}) {
-							${expected}.discard = true;
-							discard_pile.push(${expected});
-							${expected} = ${expected}.next;
-						};
-
-						${expected} = ${expected} && ${expected}.next;
-						${iteration}.discard = false;
-						${iteration}.last = ${last};
-
-						if (!${expected}) ${iteration}.m(${parentNode}, ${anchor});
-					} else {
-						// key is being inserted
-						${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
-						${iteration}.c();
-						${iteration}.${mountOrIntro}(${parentNode}, ${expected}.first);
-
-						${expected}.last = ${iteration};
-						${iteration}.next = ${expected};
-					}
-				}
-			} else {
-				// we're appending from this point forward
-				if (${iteration}) {
-					${iteration}.discard = false;
-					${iteration}.next = null;
-					${iteration}.m(${parentNode}, ${anchor});
-				} else {
-					${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
-					${iteration}.c();
-					${iteration}.${mountOrIntro}(${parentNode}, ${anchor});
-				}
-			}
-
-			if (${last}) ${last}.next = ${iteration};
-			${iteration}.last = ${last};
-			${node._block.hasIntroMethod && `${iteration}.i(${parentNode}, ${anchor});`}
-			${last} = ${iteration};
-		}
-
-		if (${last}) ${last}.next = null;
-
-		${destroy}
-
-		${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${node.key}];
-	`);
-
-	if (!state.parentNode) {
-		block.builders.unmount.addBlock(deindent`
-			var ${iteration} = ${head};
-			while (${iteration}) {
-				${iteration}.u();
-				${iteration} = ${iteration}.next;
-			}
-		`);
-	}
-
-	block.builders.destroy.addBlock(deindent`
-		var ${iteration} = ${head};
-		while (${iteration}) {
-			${iteration}.d();
-			${iteration} = ${iteration}.next;
-		}
-	`);
-}
-
-function unkeyed(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	snippet: string,
-	{
-		create_each_block,
-		each_block_value,
-		length,
-		iterations,
-		params,
-		anchor,
-		mountOrIntro,
-	}
-) {
-	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, #component);
-		}
-	`);
-
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
-
-	block.builders.create.addBlock(deindent`
-		for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-			${iterations}[#i].c();
-		}
-	`);
-
-	block.builders.claim.addBlock(deindent`
-		for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-			${iterations}[#i].l(${state.parentNodes});
-		}
-	`);
-
-	block.builders.mount.addBlock(deindent`
-		for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-			${iterations}[#i].${mountOrIntro}(${targetNode}, ${anchorNode});
-		}
-	`);
-
-	const allDependencies = new Set(node._block.dependencies);
-	const { dependencies } = node.metadata;
-	dependencies.forEach((dependency: string) => {
-		allDependencies.add(dependency);
-	});
-
-	// TODO do this for keyed blocks as well
-	const condition = Array.from(allDependencies)
-		.map(dependency => `changed.${dependency}`)
-		.join(' || ');
-
-	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
-
-	if (condition !== '') {
-		const forLoopBody = node._block.hasUpdateMethod
-			? node._block.hasIntroMethod
-				? deindent`
-					if (${iterations}[#i]) {
-						${iterations}[#i].p(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, #component);
-						${iterations}[#i].c();
-					}
-					${iterations}[#i].i(${parentNode}, ${anchor});
-				`
-				: deindent`
-					if (${iterations}[#i]) {
-						${iterations}[#i].p(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, #component);
-						${iterations}[#i].c();
-						${iterations}[#i].m(${parentNode}, ${anchor});
-					}
-				`
-			: deindent`
-				${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
-				${iterations}[#i].c();
-				${iterations}[#i].${mountOrIntro}(${parentNode}, ${anchor});
-			`;
-
-		const start = node._block.hasUpdateMethod ? '0' : `${iterations}.length`;
-
-		const outro = block.getUniqueName('outro');
-		const destroy = node._block.hasOutroMethod
-			? deindent`
-				function ${outro}(i) {
-					if (${iterations}[i]) {
-						${iterations}[i].o(function() {
-							${iterations}[i].u();
-							${iterations}[i].d();
-							${iterations}[i] = null;
-						});
-					}
-				}
-
-				for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
-			`
-			: deindent`
-				for (; #i < ${iterations}.length; #i += 1) {
-					${iterations}[#i].u();
-					${iterations}[#i].d();
-				}
-				${iterations}.length = ${each_block_value}.${length};
-			`;
-
-		block.builders.update.addBlock(deindent`
-			var ${each_block_value} = ${snippet};
-
-			if (${condition}) {
-				for (var #i = ${start}; #i < ${each_block_value}.${length}; #i += 1) {
-					${forLoopBody}
-				}
-
-				${destroy}
-			}
-		`);
-	}
-
-	block.builders.unmount.addBlock(deindent`
-		for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-			${iterations}[#i].u();
-		}
-	`);
-
-	block.builders.destroy.addBlock(`@destroyEach(${iterations});`);
-}
diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
deleted file mode 100644
index a812b74fce..0000000000
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import attributeLookup from './lookup';
-import deindent from '../../../../utils/deindent';
-import visitStyleAttribute, { optimizeStyle } from './StyleAttribute';
-import { stringify } from '../../../../utils/stringify';
-import getExpressionPrecedence from '../../../../utils/getExpressionPrecedence';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-
-export default function visitAttribute(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	attribute: Node
-) {
-	const name = attribute.name;
-
-	if (name === 'style') {
-		const styleProps = optimizeStyle(attribute.value);
-		if (styleProps) {
-			visitStyleAttribute(generator, block, state, node, attribute, styleProps);
-			return;
-		}
-	}
-
-	let metadata = state.namespace ? null : attributeLookup[name];
-	if (metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf(node.name))
-		metadata = null;
-
-	const isIndirectlyBoundValue =
-		name === 'value' &&
-		(node.name === 'option' || // TODO check it's actually bound
-			(node.name === 'input' &&
-				node.attributes.find(
-					(attribute: Node) =>
-						attribute.type === 'Binding' && /checked|group/.test(attribute.name)
-				)));
-
-	const propertyName = isIndirectlyBoundValue
-		? '__value'
-		: metadata && metadata.propertyName;
-
-	// xlink is a special case... we could maybe extend this to generic
-	// namespaced attributes but I'm not sure that's applicable in
-	// HTML5?
-	const method = name.slice(0, 6) === 'xlink:'
-		? '@setXlinkAttribute'
-		: '@setAttribute';
-
-	const isDynamic =
-		(attribute.value !== true && attribute.value.length > 1) ||
-		(attribute.value.length === 1 && attribute.value[0].type !== 'Text');
-
-	const isLegacyInputType = generator.legacy && name === 'type' && node.name === 'input';
-
-	const isDataSet = /^data-/.test(name) && !generator.legacy;
-	const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
-		return m[1].toUpperCase();
-	}) : name;
-
-	if (isDynamic) {
-		let value;
-
-		const allDependencies = new Set();
-		let shouldCache;
-		let hasChangeableIndex;
-
-		// TODO some of this code is repeated in Tag.ts — would be good to
-		// DRY it out if that's possible without introducing crazy indirection
-		if (attribute.value.length === 1) {
-			// single {{tag}} — may be a non-string
-			const { expression } = attribute.value[0];
-			const { indexes } = block.contextualise(expression);
-			const { dependencies, snippet } = attribute.value[0].metadata;
-
-			value = snippet;
-			dependencies.forEach(d => {
-				allDependencies.add(d);
-			});
-
-			hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
-
-			shouldCache = (
-				expression.type !== 'Identifier' ||
-				block.contexts.has(expression.name) ||
-				hasChangeableIndex
-			);
-		} else {
-			// '{{foo}} {{bar}}' — treat as string concatenation
-			value =
-				(attribute.value[0].type === 'Text' ? '' : `"" + `) +
-				attribute.value
-					.map((chunk: Node) => {
-						if (chunk.type === 'Text') {
-							return stringify(chunk.data);
-						} else {
-							const { indexes } = block.contextualise(chunk.expression);
-							const { dependencies, snippet } = chunk.metadata;
-
-							if (Array.from(indexes).some(index => block.changeableIndexes.get(index))) {
-								hasChangeableIndex = true;
-							}
-
-							dependencies.forEach(d => {
-								allDependencies.add(d);
-							});
-
-							return getExpressionPrecedence(chunk.expression) <= 13 ? `(${snippet})` : snippet;
-						}
-					})
-					.join(' + ');
-
-			shouldCache = true;
-		}
-
-		const isSelectValueAttribute =
-			name === 'value' && state.parentNodeName === 'select';
-
-		const last = (shouldCache || isSelectValueAttribute) && block.getUniqueName(
-			`${state.parentNode}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value`
-		);
-
-		if (shouldCache || isSelectValueAttribute) block.addVariable(last);
-
-		let updater;
-		const init = shouldCache ? `${last} = ${value}` : value;
-
-		if (isLegacyInputType) {
-			block.builders.hydrate.addLine(
-				`@setInputType(${state.parentNode}, ${init});`
-			);
-			updater = `@setInputType(${state.parentNode}, ${shouldCache ? last : value});`;
-		} else if (isSelectValueAttribute) {
-			// annoying special case
-			const isMultipleSelect =
-				node.name === 'select' &&
-				node.attributes.find(
-					(attr: Node) => attr.name.toLowerCase() === 'multiple'
-				); // TODO use getStaticAttributeValue
-			const i = block.getUniqueName('i');
-			const option = block.getUniqueName('option');
-
-			const ifStatement = isMultipleSelect
-				? deindent`
-					${option}.selected = ~${last}.indexOf(${option}.__value);`
-				: deindent`
-					if (${option}.__value === ${last}) {
-						${option}.selected = true;
-						break;
-					}`;
-
-			updater = deindent`
-				for (var ${i} = 0; ${i} < ${state.parentNode}.options.length; ${i} += 1) {
-					var ${option} = ${state.parentNode}.options[${i}];
-
-					${ifStatement}
-				}
-			`;
-
-			block.builders.hydrate.addBlock(deindent`
-				${last} = ${value};
-				${updater}
-			`);
-
-			block.builders.update.addLine(`${last} = ${value};`);
-		} else if (propertyName) {
-			block.builders.hydrate.addLine(
-				`${state.parentNode}.${propertyName} = ${init};`
-			);
-			updater = `${state.parentNode}.${propertyName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
-		} else if (isDataSet) {
-			block.builders.hydrate.addLine(
-				`${state.parentNode}.dataset.${camelCaseName} = ${init};`
-			);
-			updater = `${state.parentNode}.dataset.${camelCaseName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
-		} else {
-			block.builders.hydrate.addLine(
-				`${method}(${state.parentNode}, "${name}", ${init});`
-			);
-			updater = `${method}(${state.parentNode}, "${name}", ${shouldCache || isSelectValueAttribute ? last : value});`;
-		}
-
-		if (allDependencies.size || hasChangeableIndex || isSelectValueAttribute) {
-			const dependencies = Array.from(allDependencies);
-			const changedCheck = (
-				( block.hasOutroMethod ? `#outroing || ` : '' ) +
-				dependencies.map(dependency => `changed.${dependency}`).join(' || ')
-			);
-
-			const updateCachedValue = `${last} !== (${last} = ${value})`;
-
-			const condition = shouldCache ?
-				( dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue ) :
-				changedCheck;
-
-			block.builders.update.addConditional(
-				condition,
-				updater
-			);
-		}
-	} else {
-		const value = attribute.value === true
-			? 'true'
-			: attribute.value.length === 0
-				? `''`
-				: stringify(attribute.value[0].data);
-
-		const statement = (
-			isLegacyInputType ? `@setInputType(${state.parentNode}, ${value});` :
-			propertyName ? `${state.parentNode}.${propertyName} = ${value};` :
-				isDataSet ? `${state.parentNode}.dataset.${camelCaseName} = ${value};` :
-			`${method}(${state.parentNode}, "${name}", ${value});`
-		);
-
-		block.builders.hydrate.addLine(statement);
-
-		// special case – autofocus. has to be handled in a bit of a weird way
-		if (attribute.value === true && name === 'autofocus') {
-			block.autofocus = state.parentNode;
-		}
-
-		// special case — xmlns
-		if (name === 'xmlns') {
-			// TODO this attribute must be static – enforce at compile time
-			state.namespace = attribute.value[0].data;
-		}
-	}
-
-	if (isIndirectlyBoundValue) {
-		const updateValue = `${state.parentNode}.value = ${state.parentNode}.__value;`;
-
-		block.builders.hydrate.addLine(updateValue);
-		if (isDynamic) block.builders.update.addLine(updateValue);
-	}
-}
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
deleted file mode 100644
index 3121e24a01..0000000000
--- a/src/generators/dom/visitors/Element/Element.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-import deindent from '../../../../utils/deindent';
-import visit from '../../visit';
-import visitSlot from '../Slot';
-import visitComponent from '../Component';
-import visitWindow from './meta/Window';
-import visitAttribute from './Attribute';
-import addBindings from './addBindings';
-import flattenReference from '../../../../utils/flattenReference';
-import validCalleeObjects from '../../../../utils/validCalleeObjects';
-import * as namespaces from '../../../../utils/namespaces';
-import getStaticAttributeValue from '../../../../utils/getStaticAttributeValue';
-import isVoidElementName from '../../../../utils/isVoidElementName';
-import addTransitions from './addTransitions';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-import reservedNames from '../../../../utils/reservedNames';
-import { stringify } from '../../../../utils/stringify';
-
-const meta: Record<string, any> = {
-	':Window': visitWindow,
-};
-
-export default function visitElement(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	if (node.name in meta) {
-		return meta[node.name](generator, block, node);
-	}
-
-	if (node.name === 'slot') {
-		if (generator.customElement) {
-			const slotName = getStaticAttributeValue(node, 'name') || 'default';
-			generator.slots.add(slotName);
-		} else {
-			return visitSlot(generator, block, state, node, elementStack, componentStack);
-		}
-	}
-
-	if (generator.components.has(node.name) || node.name === ':Self' || node.name === ':Component') {
-		return visitComponent(generator, block, state, node, elementStack, componentStack);
-	}
-
-	const childState = node._state;
-	const name = childState.parentNode;
-
-	const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot');
-	const parentNode = node.slotted ?
-		`${componentStack[componentStack.length - 1].var}._slotted.${slot.value[0].data}` : // TODO this looks bonkers
-		state.parentNode;
-
-	block.addVariable(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)};
-			var ${childState.parentNodes} = @children(${name});
-		`);
-	}
-
-	if (parentNode) {
-		block.builders.mount.addLine(
-			`@appendNode(${name}, ${parentNode});`
-		);
-	} else {
-		block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
-
-		// 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});`);
-	}
-
-	// add CSS encapsulation attribute
-	if (node._needsCssAttribute && !generator.customElement) {
-		generator.needsEncapsulateHelper = true;
-		block.builders.hydrate.addLine(
-			`@encapsulateStyles(${name});`
-		);
-
-		if (node._cssRefAttribute) {
-			block.builders.hydrate.addLine(
-				`@setAttribute(${name}, "svelte-ref-${node._cssRefAttribute}", "");`
-			)
-		}
-	}
-
-	if (node.name === 'textarea') {
-		// this is an egregious hack, but it's the easiest way to get <textarea>
-		// children treated the same way as a value attribute
-		if (node.children.length > 0) {
-			node.attributes.push({
-				type: 'Attribute',
-				name: 'value',
-				value: node.children,
-			});
-
-			node.children = [];
-		}
-	}
-
-	// insert static children with textContent or innerHTML
-	if (!childState.namespace && node.canUseInnerHTML && node.children.length > 0) {
-		if (node.children.length === 1 && node.children[0].type === 'Text') {
-			block.builders.create.addLine(
-				`${name}.textContent = ${stringify(node.children[0].data)};`
-			);
-		} else {
-			block.builders.create.addLine(
-				`${name}.innerHTML = ${stringify(node.children.map(toHTML).join(''))};`
-			);
-		}
-	} else {
-		node.children.forEach((child: Node) => {
-			visit(generator, block, childState, child, elementStack.concat(node), componentStack);
-		});
-	}
-
-	addBindings(generator, block, childState, node);
-
-	node.attributes.filter((a: Node) => a.type === 'Attribute').forEach((attribute: Node) => {
-		visitAttribute(generator, block, childState, node, attribute);
-	});
-
-	// event handlers
-	node.attributes.filter((a: Node) => a.type === 'EventHandler').forEach((attribute: Node) => {
-		const isCustomEvent = generator.events.has(attribute.name);
-		const shouldHoist = !isCustomEvent && state.inEachBlock;
-
-		const context = shouldHoist ? null : name;
-		const usedContexts: string[] = [];
-
-		if (attribute.expression) {
-			generator.addSourcemapLocations(attribute.expression);
-
-			const flattened = flattenReference(attribute.expression.callee);
-			if (!validCalleeObjects.has(flattened.name)) {
-				// allow event.stopPropagation(), this.select() etc
-				// TODO verify that it's a valid callee (i.e. built-in or declared method)
-				generator.code.prependRight(
-					attribute.expression.start,
-					`${block.alias('component')}.`
-				);
-				if (shouldHoist) childState.usesComponent = true; // this feels a bit hacky but it works!
-			}
-
-			attribute.expression.arguments.forEach((arg: Node) => {
-				const { contexts } = block.contextualise(arg, context, true);
-
-				contexts.forEach(context => {
-					if (!~usedContexts.indexOf(context)) usedContexts.push(context);
-					if (!~childState.allUsedContexts.indexOf(context))
-						childState.allUsedContexts.push(context);
-				});
-			});
-		}
-
-		const _this = context || 'this';
-		const declarations = usedContexts.map(name => {
-			if (name === 'state') {
-				if (shouldHoist) childState.usesComponent = true;
-				return `var state = ${block.alias('component')}.get();`;
-			}
-
-			const listName = block.listNames.get(name);
-			const indexName = block.indexNames.get(name);
-			const contextName = block.contexts.get(name);
-
-			return `var ${listName} = ${_this}._svelte.${listName}, ${indexName} = ${_this}._svelte.${indexName}, ${contextName} = ${listName}[${indexName}];`;
-		});
-
-		// get a name for the event handler that is globally unique
-		// if hoisted, locally unique otherwise
-		const handlerName = (shouldHoist ? generator : block).getUniqueName(
-			`${attribute.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
-		);
-
-		// create the handler body
-		const handlerBody = deindent`
-			${childState.usesComponent &&
-				`var ${block.alias('component')} = ${_this}._svelte.component;`}
-			${declarations}
-			${attribute.expression ?
-				`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
-				`${block.alias('component')}.fire("${attribute.name}", event);`}
-		`;
-
-		if (isCustomEvent) {
-			block.addVariable(handlerName);
-
-			block.builders.hydrate.addBlock(deindent`
-				${handlerName} = %events-${attribute.name}.call(#component, ${name}, function(event) {
-					${handlerBody}
-				});
-			`);
-
-			block.builders.destroy.addLine(deindent`
-				${handlerName}.teardown();
-			`);
-		} else {
-			const handler = deindent`
-				function ${handlerName}(event) {
-					${handlerBody}
-				}
-			`;
-
-			if (shouldHoist) {
-				generator.blocks.push(handler);
-			} else {
-				block.builders.init.addBlock(handler);
-			}
-
-			block.builders.hydrate.addLine(
-				`@addListener(${name}, "${attribute.name}", ${handlerName});`
-			);
-
-			block.builders.destroy.addLine(
-				`@removeListener(${name}, "${attribute.name}", ${handlerName});`
-			);
-		}
-	});
-
-	// refs
-	node.attributes.filter((a: Node) => a.type === 'Ref').forEach((attribute: Node) => {
-		const ref = `#component.refs.${attribute.name}`;
-
-		block.builders.mount.addLine(
-			`${ref} = ${name};`
-		);
-
-		block.builders.destroy.addLine(
-			`if (${ref} === ${name}) ${ref} = null;`
-		);
-
-		generator.usesRefs = true; // so component.refs object is created
-	});
-
-	addTransitions(generator, block, childState, node);
-
-	if (childState.allUsedContexts.length || childState.usesComponent) {
-		const initialProps: string[] = [];
-		const updates: string[] = [];
-
-		if (childState.usesComponent) {
-			initialProps.push(`component: #component`);
-		}
-
-		childState.allUsedContexts.forEach((contextName: string) => {
-			if (contextName === 'state') return;
-
-			const listName = block.listNames.get(contextName);
-			const indexName = block.indexNames.get(contextName);
-
-			initialProps.push(
-				`${listName}: ${listName},\n${indexName}: ${indexName}`
-			);
-			updates.push(
-				`${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};`
-			);
-		});
-
-		if (initialProps.length) {
-			block.builders.hydrate.addBlock(deindent`
-				${name}._svelte = {
-					${initialProps.join(',\n')}
-				};
-			`);
-		}
-
-		if (updates.length) {
-			block.builders.update.addBlock(updates.join('\n'));
-		}
-	}
-
-	if (node.initialUpdate) {
-		block.builders.mount.addBlock(node.initialUpdate);
-	}
-
-	block.builders.claim.addLine(
-		`${childState.parentNodes}.forEach(@detachNode);`
-	);
-
-	function toHTML(node: Node) {
-		if (node.type === 'Text') return node.data;
-
-		let open = `<${node.name}`;
-
-		if (node._needsCssAttribute) {
-			open += ` ${generator.stylesheet.id}`;
-		}
-
-		if (node._cssRefAttribute) {
-			open += ` svelte-ref-${node._cssRefAttribute}`;
-		}
-
-		node.attributes.forEach((attr: Node) => {
-			open += ` ${attr.name}${stringifyAttributeValue(attr.value)}`
-		});
-
-		if (isVoidElementName(node.name)) return open + '>';
-
-		return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
-	}
-}
-
-function getRenderStatement(
-	generator: DomGenerator,
-	namespace: string,
-	name: string
-) {
-	if (namespace === 'http://www.w3.org/2000/svg') {
-		return `@createSvgElement("${name}")`;
-	}
-
-	if (namespace) {
-		return `document.createElementNS("${namespace}", "${name}")`;
-	}
-
-	return `@createElement("${name}")`;
-}
-
-function getClaimStatement(
-	generator: DomGenerator,
-	namespace: string,
-	nodes: string,
-	node: Node
-) {
-	const attributes = node.attributes
-		.filter((attr: Node) => attr.type === 'Attribute')
-		.map((attr: Node) => `${quoteProp(attr.name, generator.legacy)}: true`)
-		.join(', ');
-
-	const name = namespace ? node.name : node.name.toUpperCase();
-
-	return `@claimElement(${nodes}, "${name}", ${attributes
-		? `{ ${attributes} }`
-		: `{}`}, ${namespace === namespaces.svg ? true : false})`;
-}
-
-function quoteProp(name: string, legacy: boolean) {
-	const isLegacyPropName = legacy && reservedNames.has(name);
-
-	if (/[^a-zA-Z_$0-9]/.test(name) || isLegacyPropName) return `"${name}"`;
-	return name;
-}
-
-function stringifyAttributeValue(value: Node | true) {
-	if (value === true) return '';
-	if (value.length === 0) return `=""`;
-
-	const data = value[0].data;
-	return `=${JSON.stringify(data)}`;
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/StyleAttribute.ts b/src/generators/dom/visitors/Element/StyleAttribute.ts
deleted file mode 100644
index 36bb79e757..0000000000
--- a/src/generators/dom/visitors/Element/StyleAttribute.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import attributeLookup from './lookup';
-import deindent from '../../../../utils/deindent';
-import { stringify } from '../../../../utils/stringify';
-import getExpressionPrecedence from '../../../../utils/getExpressionPrecedence';
-import getStaticAttributeValue from '../../../../utils/getStaticAttributeValue';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-
-export interface StyleProp {
-	key: string;
-	value: Node[];
-}
-
-export default function visitStyleAttribute(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	attribute: Node,
-	styleProps: StyleProp[]
-) {
-	styleProps.forEach((prop: StyleProp) => {
-		let value;
-
-		if (isDynamic(prop.value)) {
-			const allDependencies = new Set();
-			let shouldCache;
-			let hasChangeableIndex;
-
-			value =
-				((prop.value.length === 1 || prop.value[0].type === 'Text') ? '' : `"" + `) +
-				prop.value
-					.map((chunk: Node) => {
-						if (chunk.type === 'Text') {
-							return stringify(chunk.data);
-						} else {
-							const { indexes } = block.contextualise(chunk.expression);
-							const { dependencies, snippet } = chunk.metadata;
-
-							if (Array.from(indexes).some(index => block.changeableIndexes.get(index))) {
-								hasChangeableIndex = true;
-							}
-
-							dependencies.forEach(d => {
-								allDependencies.add(d);
-							});
-
-							return getExpressionPrecedence(chunk.expression) <= 13 ? `( ${snippet} )` : snippet;
-						}
-					})
-					.join(' + ');
-
-			if (allDependencies.size || hasChangeableIndex) {
-				const dependencies = Array.from(allDependencies);
-				const condition = (
-					( block.hasOutroMethod ? `#outroing || ` : '' ) +
-					dependencies.map(dependency => `changed.${dependency}`).join(' || ')
-				);
-
-				block.builders.update.addConditional(
-					condition,
-					`@setStyle(${node.var}, "${prop.key}", ${value});`
-				);
-			}
-		} else {
-			value = stringify(prop.value[0].data);
-		}
-
-		block.builders.hydrate.addLine(
-			`@setStyle(${node.var}, "${prop.key}", ${value});`
-		);
-	});
-}
-
-export function optimizeStyle(value: Node[]) {
-	let expectingKey = true;
-	let i = 0;
-
-	const props: { key: string, value: Node[] }[] = [];
-	let chunks = value.slice();
-
-	while (chunks.length) {
-		const chunk = chunks[0];
-
-		if (chunk.type !== 'Text') return null;
-
-		const keyMatch = /^\s*([\w-]+):\s*/.exec(chunk.data);
-		if (!keyMatch) return null;
-
-		const key = keyMatch[1];
-
-		const offset = keyMatch.index + keyMatch[0].length;
-		const remainingData = chunk.data.slice(offset);
-
-		if (remainingData) {
-			chunks[0] = {
-				start: chunk.start + offset,
-				end: chunk.end,
-				type: 'Text',
-				data: remainingData
-			};
-		} else {
-			chunks.shift();
-		}
-
-		const result = getStyleValue(chunks);
-		if (!result) return null;
-
-		props.push({ key, value: result.value });
-		chunks = result.chunks;
-	}
-
-	return props;
-}
-
-function getStyleValue(chunks: Node[]) {
-	const value: Node[] = [];
-
-	let inUrl = false;
-	let quoteMark = null;
-	let escaped = false;
-
-	while (chunks.length) {
-		const chunk = chunks.shift();
-
-		if (chunk.type === 'Text') {
-			let c = 0;
-			while (c < chunk.data.length) {
-				const char = chunk.data[c];
-
-				if (escaped) {
-					escaped = false;
-				} else if (char === '\\') {
-					escaped = true;
-				} else if (char === quoteMark) {
-					quoteMark === null;
-				} else if (char === '"' || char === "'") {
-					quoteMark = char;
-				} else if (char === ')' && inUrl) {
-					inUrl = false;
-				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
-					inUrl = true;
-				} else if (char === ';' && !inUrl && !quoteMark) {
-					break;
-				}
-
-				c += 1;
-			}
-
-			if (c > 0) {
-				value.push({
-					type: 'Text',
-					start: chunk.start,
-					end: chunk.start + c,
-					data: chunk.data.slice(0, c)
-				});
-			}
-
-			while (/[;\s]/.test(chunk.data[c])) c += 1;
-			const remainingData = chunk.data.slice(c);
-
-			if (remainingData) {
-				chunks.unshift({
-					start: chunk.start + c,
-					end: chunk.end,
-					type: 'Text',
-					data: remainingData
-				});
-
-				break;
-			}
-		}
-
-		else {
-			value.push(chunk);
-		}
-	}
-
-	return {
-		chunks,
-		value
-	};
-}
-
-function isDynamic(value: Node[]) {
-	return value.length > 1 || value[0].type !== 'Text';
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/addBindings.ts b/src/generators/dom/visitors/Element/addBindings.ts
deleted file mode 100644
index 2e41cd1b19..0000000000
--- a/src/generators/dom/visitors/Element/addBindings.ts
+++ /dev/null
@@ -1,428 +0,0 @@
-import deindent from '../../../../utils/deindent';
-import flattenReference from '../../../../utils/flattenReference';
-import getStaticAttributeValue from '../../../../utils/getStaticAttributeValue';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-import getObject from '../../../../utils/getObject';
-import getTailSnippet from '../../../../utils/getTailSnippet';
-import stringifyProps from '../../../../utils/stringifyProps';
-import { generateRule } from '../../../../shared/index';
-import flatten from '../../../../utils/flattenReference';
-
-interface Binding {
-	name: string;
-}
-
-const readOnlyMediaAttributes = new Set([
-	'duration',
-	'buffered',
-	'seekable',
-	'played'
-]);
-
-function isMediaNode(name: string) {
-	return name === 'audio' || name === 'video';
-}
-
-const events = [
-	{
-		eventNames: ['input'],
-		filter: (node: Node, binding: Binding) =>
-			node.name === 'textarea' ||
-			node.name === 'input' && !/radio|checkbox/.test(getStaticAttributeValue(node, 'type'))
-	},
-	{
-		eventNames: ['change'],
-		filter: (node: Node, binding: Binding) =>
-			node.name === 'select' ||
-			node.name === 'input' && /radio|checkbox|range/.test(getStaticAttributeValue(node, 'type'))
-	},
-
-	// media events
-	{
-		eventNames: ['timeupdate'],
-		filter: (node: Node, binding: Binding) =>
-			isMediaNode(node.name) &&
-			(binding.name === 'currentTime' || binding.name === 'played')
-	},
-	{
-		eventNames: ['durationchange'],
-		filter: (node: Node, binding: Binding) =>
-			isMediaNode(node.name) &&
-			binding.name === 'duration'
-	},
-	{
-		eventNames: ['play', 'pause'],
-		filter: (node: Node, binding: Binding) =>
-			isMediaNode(node.name) &&
-			binding.name === 'paused'
-	},
-	{
-		eventNames: ['progress'],
-		filter: (node: Node, binding: Binding) =>
-			isMediaNode(node.name) &&
-			binding.name === 'buffered'
-	},
-	{
-		eventNames: ['loadedmetadata'],
-		filter: (node: Node, binding: Binding) =>
-			isMediaNode(node.name) &&
-			(binding.name === 'buffered' || binding.name === 'seekable')
-	}
-];
-
-export default function addBindings(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node
-) {
-	const bindings: Node[] = node.attributes.filter((a: Node) => a.type === 'Binding');
-	if (bindings.length === 0) return;
-
-	if (node.name === 'select' || isMediaNode(node.name)) generator.hasComplexBindings = true;
-
-	const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(getStaticAttributeValue(node, 'type'));
-
-	const mungedBindings = bindings.map(binding => {
-		const isReadOnly = isMediaNode(node.name) && readOnlyMediaAttributes.has(binding.name);
-
-		let updateCondition: string;
-
-		const { name } = getObject(binding.value);
-		const { contexts } = block.contextualise(binding.value);
-		const { snippet } = binding.metadata;
-
-		// special case: if you have e.g. `<input type=checkbox bind:checked=selected.done>`
-		// and `selected` is an object chosen with a <select>, then when `checked` changes,
-		// we need to tell the component to update all the values `selected` might be
-		// pointing to
-		// TODO should this happen in preprocess?
-		const dependencies = binding.metadata.dependencies.slice();
-		binding.metadata.dependencies.forEach((prop: string) => {
-			const indirectDependencies = generator.indirectDependencies.get(prop);
-			if (indirectDependencies) {
-				indirectDependencies.forEach(indirectDependency => {
-					if (!~dependencies.indexOf(indirectDependency)) dependencies.push(indirectDependency);
-				});
-			}
-		});
-
-		contexts.forEach(context => {
-			if (!~state.allUsedContexts.indexOf(context))
-				state.allUsedContexts.push(context);
-		});
-
-		// view to model
-		const valueFromDom = getValueFromDom(generator, node, binding);
-		const handler = getEventHandler(generator, block, name, snippet, binding, dependencies, valueFromDom);
-
-		// model to view
-		let updateDom = getDomUpdater(node, binding, snippet);
-		let initialUpdate = updateDom;
-
-		// special cases
-		if (binding.name === 'group') {
-			const bindingGroup = getBindingGroup(generator, binding.value);
-
-			block.builders.hydrate.addLine(
-				`#component._bindingGroups[${bindingGroup}].push(${node.var});`
-			);
-
-			block.builders.destroy.addLine(
-				`#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${node.var}), 1);`
-			);
-		}
-
-		if (binding.name === 'currentTime') {
-			updateCondition = `!isNaN(${snippet})`;
-			initialUpdate = null;
-		}
-
-		if (binding.name === 'paused') {
-			// this is necessary to prevent audio restarting by itself
-			const last = block.getUniqueName(`${node.var}_is_paused`);
-			block.addVariable(last, 'true');
-
-			updateCondition = `${last} !== (${last} = ${snippet})`;
-			updateDom = `${node.var}[${last} ? "pause" : "play"]();`;
-			initialUpdate = null;
-		}
-
-		return {
-			name: binding.name,
-			object: name,
-			handler,
-			updateDom,
-			initialUpdate,
-			needsLock: !isReadOnly && needsLock,
-			updateCondition
-		};
-	});
-
-	const lock = mungedBindings.some(binding => binding.needsLock) ?
-		block.getUniqueName(`${node.var}_updating`) :
-		null;
-
-	if (lock) block.addVariable(lock, 'false');
-
-	const groups = events
-		.map(event => {
-			return {
-				events: event.eventNames,
-				bindings: mungedBindings.filter(binding => event.filter(node, binding))
-			};
-		})
-		.filter(group => group.bindings.length);
-
-	groups.forEach(group => {
-		const handler = block.getUniqueName(`${node.var}_${group.events.join('_')}_handler`);
-
-		const needsLock = group.bindings.some(binding => binding.needsLock);
-
-		group.bindings.forEach(binding => {
-			if (!binding.updateDom) return;
-
-			const updateConditions = needsLock ? [`!${lock}`] : [];
-			if (binding.updateCondition) updateConditions.push(binding.updateCondition);
-
-			block.builders.update.addLine(
-				updateConditions.length ? `if (${updateConditions.join(' && ')}) ${binding.updateDom}` : binding.updateDom
-			);
-		});
-
-		const usesContext = group.bindings.some(binding => binding.handler.usesContext);
-		const usesState = group.bindings.some(binding => binding.handler.usesState);
-		const usesStore = group.bindings.some(binding => binding.handler.usesStore);
-		const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
-
-		const props = new Set();
-		const storeProps = new Set();
-		group.bindings.forEach(binding => {
-			binding.handler.props.forEach(prop => {
-				props.add(prop);
-			});
-
-			binding.handler.storeProps.forEach(prop => {
-				storeProps.add(prop);
-			});
-		}); // TODO use stringifyProps here, once indenting is fixed
-
-		// media bindings — awkward special case. The native timeupdate events
-		// fire too infrequently, so we need to take matters into our
-		// own hands
-		let animation_frame;
-		if (group.events[0] === 'timeupdate') {
-			animation_frame = block.getUniqueName(`${node.var}_animationframe`);
-			block.addVariable(animation_frame);
-		}
-
-		block.builders.init.addBlock(deindent`
-			function ${handler}() {
-				${
-					animation_frame && deindent`
-						cancelAnimationFrame(${animation_frame});
-						if (!${node.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
-				}
-				${usesContext && `var context = ${node.var}._svelte;`}
-				${usesState && `var state = #component.get();`}
-				${usesStore && `var $ = #component.store.get();`}
-				${needsLock && `${lock} = true;`}
-				${mutations.length > 0 && mutations}
-				${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
-				${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
-				${needsLock && `${lock} = false;`}
-			}
-		`);
-
-		group.events.forEach(name => {
-			block.builders.hydrate.addLine(
-				`@addListener(${node.var}, "${name}", ${handler});`
-			);
-
-			block.builders.destroy.addLine(
-				`@removeListener(${node.var}, "${name}", ${handler});`
-			);
-		});
-
-		const allInitialStateIsDefined = group.bindings
-			.map(binding => `'${binding.object}' in state`)
-			.join(' && ');
-
-		if (node.name === 'select' || group.bindings.find(binding => binding.name === 'indeterminate' || readOnlyMediaAttributes.has(binding.name))) {
-			generator.hasComplexBindings = true;
-
-			block.builders.hydrate.addLine(
-				`if (!(${allInitialStateIsDefined})) #component._root._beforecreate.push(${handler});`
-			);
-		}
-	});
-
-	node.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
-}
-
-function getDomUpdater(
-	node: Node,
-	binding: Node,
-	snippet: string
-) {
-	if (readOnlyMediaAttributes.has(binding.name)) {
-		return null;
-	}
-
-	if (node.name === 'select') {
-		return getStaticAttributeValue(node, 'multiple') === true ?
-			`@selectOptions(${node.var}, ${snippet})` :
-			`@selectOption(${node.var}, ${snippet})`;
-	}
-
-	if (binding.name === 'group') {
-		const type = getStaticAttributeValue(node, 'type');
-
-		const condition = type === 'checkbox'
-			? `~${snippet}.indexOf(${node.var}.__value)`
-			: `${node.var}.__value === ${snippet}`;
-
-		return `${node.var}.checked = ${condition};`
-	}
-
-	return `${node.var}.${binding.name} = ${snippet};`;
-}
-
-function getBindingGroup(generator: DomGenerator, value: Node) {
-	const { parts } = flattenReference(value); // TODO handle cases involving computed member expressions
-	const keypath = parts.join('.');
-
-	// TODO handle contextual bindings — `keypath` should include unique ID of
-	// each block that provides context
-	let index = generator.bindingGroups.indexOf(keypath);
-	if (index === -1) {
-		index = generator.bindingGroups.length;
-		generator.bindingGroups.push(keypath);
-	}
-
-	return index;
-}
-
-function getEventHandler(
-	generator: DomGenerator,
-	block: Block,
-	name: string,
-	snippet: string,
-	attribute: Node,
-	dependencies: string[],
-	value: string,
-) {
-	let storeDependencies = [];
-
-	if (generator.options.store) {
-		storeDependencies = dependencies.filter(prop => prop[0] === '$').map(prop => prop.slice(1));
-		dependencies = dependencies.filter(prop => prop[0] !== '$');
-	}
-
-	if (block.contexts.has(name)) {
-		const tail = attribute.value.type === 'MemberExpression'
-			? getTailSnippet(attribute.value)
-			: '';
-
-		const list = `context.${block.listNames.get(name)}`;
-		const index = `context.${block.indexNames.get(name)}`;
-
-		return {
-			usesContext: true,
-			usesState: true,
-			usesStore: storeDependencies.length > 0,
-			mutation: `${list}[${index}]${tail} = ${value};`,
-			props: dependencies.map(prop => `${prop}: state.${prop}`),
-			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
-		};
-	}
-
-	if (attribute.value.type === 'MemberExpression') {
-		// This is a little confusing, and should probably be tidied up
-		// at some point. It addresses a tricky bug (#893), wherein
-		// Svelte tries to `set()` a computed property, which throws an
-		// error in dev mode. a) it's possible that we should be
-		// replacing computations with *their* dependencies, and b)
-		// we should probably populate `generator.readonly` sooner so
-		// that we don't have to do the `.some()` here
-		dependencies = dependencies.filter(prop => !generator.computations.some(computation => computation.key === prop));
-
-		return {
-			usesContext: false,
-			usesState: true,
-			usesStore: storeDependencies.length > 0,
-			mutation: `${snippet} = ${value}`,
-			props: dependencies.map((prop: string) => `${prop}: state.${prop}`),
-			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
-		};
-	}
-
-	let props;
-	let storeProps;
-
-	if (generator.options.store && name[0] === '$') {
-		props = [];
-		storeProps = [`${name.slice(1)}: ${value}`];
-	} else {
-		props = [`${name}: ${value}`];
-		storeProps = [];
-	}
-
-	return {
-		usesContext: false,
-		usesState: false,
-		usesStore: false,
-		mutation: null,
-		props,
-		storeProps
-	};
-}
-
-function getValueFromDom(
-	generator: DomGenerator,
-	node: Node,
-	binding: Node
-) {
-	// <select bind:value='selected>
-	if (node.name === 'select') {
-		return getStaticAttributeValue(node, 'multiple') === true ?
-			`@selectMultipleValue(${node.var})` :
-			`@selectValue(${node.var})`;
-	}
-
-	const type = getStaticAttributeValue(node, 'type');
-
-	// <input type='checkbox' bind:group='foo'>
-	if (binding.name === 'group') {
-		const bindingGroup = getBindingGroup(generator, binding.value);
-		if (type === 'checkbox') {
-			return `@getBindingGroupValue(#component._bindingGroups[${bindingGroup}])`;
-		}
-
-		return `${node.var}.__value`;
-	}
-
-	// <input type='range|number' bind:value>
-	if (type === 'range' || type === 'number') {
-		return `@toNumber(${node.var}.${binding.name})`;
-	}
-
-	if ((binding.name === 'buffered' || binding.name === 'seekable' || binding.name === 'played')) {
-		return `@timeRangesToArray(${node.var}.${binding.name})`
-	}
-
-	// everything else
-	return `${node.var}.${binding.name}`;
-}
-
-function isComputed(node: Node) {
-	while (node.type === 'MemberExpression') {
-		if (node.computed) return true;
-		node = node.object;
-	}
-
-	return false;
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
deleted file mode 100644
index 0fa9d293c2..0000000000
--- a/src/generators/dom/visitors/Element/addTransitions.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import deindent from '../../../../utils/deindent';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-
-export default function addTransitions(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node
-) {
-	const intro = node.attributes.find((a: Node) => a.type === 'Transition' && a.intro);
-	const outro = node.attributes.find((a: Node) => a.type === 'Transition' && a.outro);
-
-	if (!intro && !outro) return;
-
-	if (intro === outro) {
-		block.contextualise(intro.expression); // TODO remove all these
-
-		const name = block.getUniqueName(`${node.var}_transition`);
-		const snippet = intro.expression
-			? intro.metadata.snippet
-			: '{}';
-
-		block.addVariable(name);
-
-		const fn = `%transitions-${intro.name}`;
-
-		block.builders.intro.addBlock(deindent`
-			#component._root._aftercreate.push(function() {
-				if (!${name}) ${name} = @wrapTransition(#component, ${node.var}, ${fn}, ${snippet}, true, null);
-				${name}.run(true, function() {
-					#component.fire("intro.end", { node: ${node.var} });
-				});
-			});
-		`);
-
-		block.builders.outro.addBlock(deindent`
-			${name}.run(false, function() {
-				#component.fire("outro.end", { node: ${node.var} });
-				if (--#outros === 0) #outrocallback();
-				${name} = null;
-			});
-		`);
-	} else {
-		const introName = intro && block.getUniqueName(`${node.var}_intro`);
-		const outroName = outro && block.getUniqueName(`${node.var}_outro`);
-
-		if (intro) {
-			block.contextualise(intro.expression);
-
-			block.addVariable(introName);
-			const snippet = intro.expression
-				? intro.metadata.snippet
-				: '{}';
-
-			const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
-
-			if (outro) {
-				block.builders.intro.addBlock(deindent`
-					if (${introName}) ${introName}.abort();
-					if (${outroName}) ${outroName}.abort();
-				`);
-			}
-
-			block.builders.intro.addBlock(deindent`
-				#component._root._aftercreate.push(function() {
-					${introName} = @wrapTransition(#component, ${node.var}, ${fn}, ${snippet}, true, null);
-					${introName}.run(true, function() {
-						#component.fire("intro.end", { node: ${node.var} });
-					});
-				});
-			`);
-		}
-
-		if (outro) {
-			block.contextualise(outro.expression);
-
-			block.addVariable(outroName);
-			const snippet = outro.expression
-				? outro.metadata.snippet
-				: '{}';
-
-			const fn = `%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
-			block.builders.outro.addBlock(deindent`
-				${outroName} = @wrapTransition(#component, ${node.var}, ${fn}, ${snippet}, false, null);
-				${outroName}.run(false, function() {
-					#component.fire("outro.end", { node: ${node.var} });
-					if (--#outros === 0) #outrocallback();
-				});
-			`);
-		}
-	}
-}
diff --git a/src/generators/dom/visitors/Element/lookup.ts b/src/generators/dom/visitors/Element/lookup.ts
deleted file mode 100644
index 83e2815ce6..0000000000
--- a/src/generators/dom/visitors/Element/lookup.ts
+++ /dev/null
@@ -1,236 +0,0 @@
-// source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
-const lookup = {
-	accept: { appliesTo: ['form', 'input'] },
-	'accept-charset': { propertyName: 'acceptCharset', appliesTo: ['form'] },
-	accesskey: { propertyName: 'accessKey' },
-	action: { appliesTo: ['form'] },
-	align: {
-		appliesTo: [
-			'applet',
-			'caption',
-			'col',
-			'colgroup',
-			'hr',
-			'iframe',
-			'img',
-			'table',
-			'tbody',
-			'td',
-			'tfoot',
-			'th',
-			'thead',
-			'tr',
-		],
-	},
-	allowfullscreen: { propertyName: 'allowFullscreen', appliesTo: ['iframe'] },
-	alt: { appliesTo: ['applet', 'area', 'img', 'input'] },
-	async: { appliesTo: ['script'] },
-	autocomplete: { appliesTo: ['form', 'input'] },
-	autofocus: { appliesTo: ['button', 'input', 'keygen', 'select', 'textarea'] },
-	autoplay: { appliesTo: ['audio', 'video'] },
-	autosave: { appliesTo: ['input'] },
-	bgcolor: {
-		propertyName: 'bgColor',
-		appliesTo: [
-			'body',
-			'col',
-			'colgroup',
-			'marquee',
-			'table',
-			'tbody',
-			'tfoot',
-			'td',
-			'th',
-			'tr',
-		],
-	},
-	border: { appliesTo: ['img', 'object', 'table'] },
-	buffered: { appliesTo: ['audio', 'video'] },
-	challenge: { appliesTo: ['keygen'] },
-	charset: { appliesTo: ['meta', 'script'] },
-	checked: { appliesTo: ['command', 'input'] },
-	cite: { appliesTo: ['blockquote', 'del', 'ins', 'q'] },
-	class: { propertyName: 'className' },
-	code: { appliesTo: ['applet'] },
-	codebase: { propertyName: 'codeBase', appliesTo: ['applet'] },
-	color: { appliesTo: ['basefont', 'font', 'hr'] },
-	cols: { appliesTo: ['textarea'] },
-	colspan: { propertyName: 'colSpan', appliesTo: ['td', 'th'] },
-	content: { appliesTo: ['meta'] },
-	contenteditable: { propertyName: 'contentEditable' },
-	contextmenu: {},
-	controls: { appliesTo: ['audio', 'video'] },
-	coords: { appliesTo: ['area'] },
-	data: { appliesTo: ['object'] },
-	datetime: { propertyName: 'dateTime', appliesTo: ['del', 'ins', 'time'] },
-	default: { appliesTo: ['track'] },
-	defer: { appliesTo: ['script'] },
-	dir: {},
-	dirname: { propertyName: 'dirName', appliesTo: ['input', 'textarea'] },
-	disabled: {
-		appliesTo: [
-			'button',
-			'command',
-			'fieldset',
-			'input',
-			'keygen',
-			'optgroup',
-			'option',
-			'select',
-			'textarea',
-		],
-	},
-	download: { appliesTo: ['a', 'area'] },
-	draggable: {},
-	dropzone: {},
-	enctype: { appliesTo: ['form'] },
-	for: { propertyName: 'htmlFor', appliesTo: ['label', 'output'] },
-	form: {
-		appliesTo: [
-			'button',
-			'fieldset',
-			'input',
-			'keygen',
-			'label',
-			'meter',
-			'object',
-			'output',
-			'progress',
-			'select',
-			'textarea',
-		],
-	},
-	formaction: { appliesTo: ['input', 'button'] },
-	headers: { appliesTo: ['td', 'th'] },
-	height: {
-		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
-	hidden: {},
-	high: { appliesTo: ['meter'] },
-	href: { appliesTo: ['a', 'area', 'base', 'link'] },
-	hreflang: { appliesTo: ['a', 'area', 'link'] },
-	'http-equiv': { propertyName: 'httpEquiv', appliesTo: ['meta'] },
-	icon: { appliesTo: ['command'] },
-	id: {},
-	indeterminate: { appliesTo: ['input'] },
-	ismap: { propertyName: 'isMap', appliesTo: ['img'] },
-	itemprop: {},
-	keytype: { appliesTo: ['keygen'] },
-	kind: { appliesTo: ['track'] },
-	label: { appliesTo: ['track'] },
-	lang: {},
-	language: { appliesTo: ['script'] },
-	loop: { appliesTo: ['audio', 'bgsound', 'marquee', 'video'] },
-	low: { appliesTo: ['meter'] },
-	manifest: { appliesTo: ['html'] },
-	max: { appliesTo: ['input', 'meter', 'progress'] },
-	maxlength: { propertyName: 'maxLength', appliesTo: ['input', 'textarea'] },
-	media: { appliesTo: ['a', 'area', 'link', 'source', 'style'] },
-	method: { appliesTo: ['form'] },
-	min: { appliesTo: ['input', 'meter'] },
-	multiple: { appliesTo: ['input', 'select'] },
-	muted: { appliesTo: ['audio', 'video'] },
-	name: {
-		appliesTo: [
-			'button',
-			'form',
-			'fieldset',
-			'iframe',
-			'input',
-			'keygen',
-			'object',
-			'output',
-			'select',
-			'textarea',
-			'map',
-			'meta',
-			'param',
-		],
-	},
-	novalidate: { propertyName: 'noValidate', appliesTo: ['form'] },
-	open: { appliesTo: ['details'] },
-	optimum: { appliesTo: ['meter'] },
-	pattern: { appliesTo: ['input'] },
-	ping: { appliesTo: ['a', 'area'] },
-	placeholder: { appliesTo: ['input', 'textarea'] },
-	poster: { appliesTo: ['video'] },
-	preload: { appliesTo: ['audio', 'video'] },
-	radiogroup: { appliesTo: ['command'] },
-	readonly: { propertyName: 'readOnly', appliesTo: ['input', 'textarea'] },
-	rel: { appliesTo: ['a', 'area', 'link'] },
-	required: { appliesTo: ['input', 'select', 'textarea'] },
-	reversed: { appliesTo: ['ol'] },
-	rows: { appliesTo: ['textarea'] },
-	rowspan: { propertyName: 'rowSpan', appliesTo: ['td', 'th'] },
-	sandbox: { appliesTo: ['iframe'] },
-	scope: { appliesTo: ['th'] },
-	scoped: { appliesTo: ['style'] },
-	seamless: { appliesTo: ['iframe'] },
-	selected: { appliesTo: ['option'] },
-	shape: { appliesTo: ['a', 'area'] },
-	size: { appliesTo: ['input', 'select'] },
-	sizes: { appliesTo: ['link', 'img', 'source'] },
-	span: { appliesTo: ['col', 'colgroup'] },
-	spellcheck: {},
-	src: {
-		appliesTo: [
-			'audio',
-			'embed',
-			'iframe',
-			'img',
-			'input',
-			'script',
-			'source',
-			'track',
-			'video',
-		],
-	},
-	srcdoc: { appliesTo: ['iframe'] },
-	srclang: { appliesTo: ['track'] },
-	srcset: { appliesTo: ['img'] },
-	start: { appliesTo: ['ol'] },
-	step: { appliesTo: ['input'] },
-	style: { propertyName: 'style.cssText' },
-	summary: { appliesTo: ['table'] },
-	tabindex: { propertyName: 'tabIndex' },
-	target: { appliesTo: ['a', 'area', 'base', 'form'] },
-	title: {},
-	type: {
-		appliesTo: [
-			'button',
-			'input',
-			'command',
-			'embed',
-			'object',
-			'script',
-			'source',
-			'style',
-			'menu',
-		],
-	},
-	usemap: { propertyName: 'useMap', appliesTo: ['img', 'input', 'object'] },
-	value: {
-		appliesTo: [
-			'button',
-			'option',
-			'input',
-			'li',
-			'meter',
-			'progress',
-			'param',
-			'select',
-			'textarea',
-		],
-	},
-	width: {
-		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
-	wrap: { appliesTo: ['textarea'] },
-};
-
-Object.keys(lookup).forEach(name => {
-	const metadata = lookup[name];
-	if (!metadata.propertyName) metadata.propertyName = name;
-});
-
-export default lookup;
diff --git a/src/generators/dom/visitors/Element/meta/Window.ts b/src/generators/dom/visitors/Element/meta/Window.ts
deleted file mode 100644
index 4dc8a23a93..0000000000
--- a/src/generators/dom/visitors/Element/meta/Window.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import flattenReference from '../../../../../utils/flattenReference';
-import deindent from '../../../../../utils/deindent';
-import { DomGenerator } from '../../../index';
-import Block from '../../../Block';
-import { Node } from '../../../../../interfaces';
-
-const associatedEvents = {
-	innerWidth: 'resize',
-	innerHeight: 'resize',
-	outerWidth: 'resize',
-	outerHeight: 'resize',
-
-	scrollX: 'scroll',
-	scrollY: 'scroll',
-};
-
-const readonly = new Set([
-	'innerWidth',
-	'innerHeight',
-	'outerWidth',
-	'outerHeight',
-	'online',
-]);
-
-export default function visitWindow(
-	generator: DomGenerator,
-	block: Block,
-	node: Node
-) {
-	const events = {};
-	const bindings: Record<string, string> = {};
-
-	node.attributes.forEach((attribute: Node) => {
-		if (attribute.type === 'EventHandler') {
-			// TODO verify that it's a valid callee (i.e. built-in or declared method)
-			generator.addSourcemapLocations(attribute.expression);
-
-			let usesState = false;
-
-			attribute.expression.arguments.forEach((arg: Node) => {
-				block.contextualise(arg, null, true);
-				const { dependencies } = arg.metadata;
-				if (dependencies.length) usesState = true;
-			});
-
-			const flattened = flattenReference(attribute.expression.callee);
-			if (flattened.name !== 'event' && flattened.name !== 'this') {
-				// allow event.stopPropagation(), this.select() etc
-				generator.code.prependRight(
-					attribute.expression.start,
-					`${block.alias('component')}.`
-				);
-			}
-
-			const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
-			const handlerBody = deindent`
-				${usesState && `var state = #component.get();`}
-				[✂${attribute.expression.start}-${attribute.expression.end}✂];
-			`;
-
-			block.builders.init.addBlock(deindent`
-				function ${handlerName}(event) {
-					${handlerBody}
-				}
-				window.addEventListener("${attribute.name}", ${handlerName});
-			`);
-
-			block.builders.destroy.addBlock(deindent`
-				window.removeEventListener("${attribute.name}", ${handlerName});
-			`);
-		}
-
-		if (attribute.type === 'Binding') {
-			// in dev mode, throw if read-only values are written to
-			if (readonly.has(attribute.name)) {
-				generator.readonly.add(attribute.value.name);
-			}
-
-			bindings[attribute.name] = attribute.value.name;
-
-			// bind:online is a special case, we need to listen for two separate events
-			if (attribute.name === 'online') return;
-
-			const associatedEvent = associatedEvents[attribute.name];
-
-			if (!events[associatedEvent]) events[associatedEvent] = [];
-			events[associatedEvent].push(
-				`${attribute.value.name}: this.${attribute.name}`
-			);
-
-			// add initial value
-			generator.metaBindings.push(
-				`this._state.${attribute.value.name} = window.${attribute.name};`
-			);
-		}
-	});
-
-	const lock = block.getUniqueName(`window_updating`);
-
-	Object.keys(events).forEach(event => {
-		const handlerName = block.getUniqueName(`onwindow${event}`);
-		const props = events[event].join(',\n');
-
-		if (event === 'scroll') {
-			// TODO other bidirectional bindings...
-			block.addVariable(lock, 'false');
-		}
-
-		const handlerBody = deindent`
-			${event === 'scroll' && `${lock} = true;`}
-			${generator.options.dev && `component._updatingReadonlyProperty = true;`}
-
-			#component.set({
-				${props}
-			});
-
-			${generator.options.dev && `component._updatingReadonlyProperty = false;`}
-			${event === 'scroll' && `${lock} = false;`}
-		`;
-
-		block.builders.init.addBlock(deindent`
-			function ${handlerName}(event) {
-				${handlerBody}
-			}
-			window.addEventListener("${event}", ${handlerName});
-		`);
-
-		block.builders.destroy.addBlock(deindent`
-			window.removeEventListener("${event}", ${handlerName});
-		`);
-	});
-
-	// special case... might need to abstract this out if we add more special cases
-	if (bindings.scrollX && bindings.scrollY) {
-		const observerCallback = block.getUniqueName(`scrollobserver`);
-
-		block.builders.init.addBlock(deindent`
-			function ${observerCallback}() {
-				if (${lock}) return;
-				var x = ${bindings.scrollX
-					? `#component.get("${bindings.scrollX}")`
-					: `window.scrollX`};
-				var y = ${bindings.scrollY
-					? `#component.get("${bindings.scrollY}")`
-					: `window.scrollY`};
-				window.scrollTo(x, y);
-			}
-		`);
-
-		if (bindings.scrollX)
-			block.builders.init.addLine(
-				`#component.observe("${bindings.scrollX}", ${observerCallback});`
-			);
-		if (bindings.scrollY)
-			block.builders.init.addLine(
-				`#component.observe("${bindings.scrollY}", ${observerCallback});`
-			);
-	} else if (bindings.scrollX || bindings.scrollY) {
-		const isX = !!bindings.scrollX;
-
-		block.builders.init.addBlock(deindent`
-			#component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) {
-				if (${lock}) return;
-				window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'});
-			});
-		`);
-	}
-
-	// another special case. (I'm starting to think these are all special cases.)
-	if (bindings.online) {
-		const handlerName = block.getUniqueName(`onlinestatuschanged`);
-		block.builders.init.addBlock(deindent`
-			function ${handlerName}(event) {
-				#component.set({ ${bindings.online}: navigator.onLine });
-			}
-			window.addEventListener("online", ${handlerName});
-			window.addEventListener("offline", ${handlerName});
-		`);
-
-		// add initial value
-		generator.metaBindings.push(
-			`this._state.${bindings.online} = navigator.onLine;`
-		);
-
-		block.builders.destroy.addBlock(deindent`
-			window.removeEventListener("online", ${handlerName});
-			window.removeEventListener("offline", ${handlerName});
-		`);
-	}
-}
diff --git a/src/generators/dom/visitors/MustacheTag.ts b/src/generators/dom/visitors/MustacheTag.ts
deleted file mode 100644
index 28b6ebc762..0000000000
--- a/src/generators/dom/visitors/MustacheTag.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import deindent from '../../../utils/deindent';
-import visitTag from './shared/Tag';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-export default function visitMustacheTag(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node
-) {
-	const { init } = visitTag(
-		generator,
-		block,
-		state,
-		node,
-		node.var,
-		value => `${node.var}.data = ${value};`
-	);
-
-	block.addElement(
-		node.var,
-		`@createText(${init})`,
-		`@claimText(${state.parentNodes}, ${init})`,
-		state.parentNode
-	);
-}
diff --git a/src/generators/dom/visitors/RawMustacheTag.ts b/src/generators/dom/visitors/RawMustacheTag.ts
deleted file mode 100644
index a6df2c07be..0000000000
--- a/src/generators/dom/visitors/RawMustacheTag.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import deindent from '../../../utils/deindent';
-import visitTag from './shared/Tag';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-export default function visitRawMustacheTag(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node
-) {
-	const name = node.var;
-
-	const needsAnchorBefore = node.prev ? node.prev.type !== 'Element' : !state.parentNode;
-	const needsAnchorAfter = node.next ? node.next.type !== 'Element' : !state.parentNode;
-
-	const anchorBefore = needsAnchorBefore
-		? block.getUniqueName(`${name}_before`)
-		: (node.prev && node.prev.var) || 'null';
-
-	const anchorAfter = needsAnchorAfter
-		? block.getUniqueName(`${name}_after`)
-		: (node.next && node.next.var) || 'null';
-
-	let detach: string;
-	let insert: (content: string) => string;
-	let useInnerHTML = false;
-
-	if (anchorBefore === 'null' && anchorAfter === 'null') {
-		useInnerHTML = true;
-		detach = `${state.parentNode}.innerHTML = '';`;
-		insert = content => `${state.parentNode}.innerHTML = ${content};`;
-	} else if (anchorBefore === 'null') {
-		detach = `@detachBefore(${anchorAfter});`;
-		insert = content => `${anchorAfter}.insertAdjacentHTML("beforebegin", ${content});`;
-	} else if (anchorAfter === 'null') {
-		detach = `@detachAfter(${anchorBefore});`;
-		insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
-	} else {
-		detach = `@detachBetween(${anchorBefore}, ${anchorAfter});`;
-		insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
-	}
-
-	const { init } = visitTag(
-		generator,
-		block,
-		state,
-		node,
-		name,
-		content => deindent`
-			${!useInnerHTML && detach}
-			${insert(content)}
-		`
-	);
-
-	// we would have used comments here, but the `insertAdjacentHTML` api only
-	// exists for `Element`s.
-	if (needsAnchorBefore) {
-		block.addElement(
-			anchorBefore,
-			`@createElement('noscript')`,
-			`@createElement('noscript')`,
-			state.parentNode
-		);
-	}
-
-	function addAnchorAfter() {
-		block.addElement(
-			anchorAfter,
-			`@createElement('noscript')`,
-			`@createElement('noscript')`,
-			state.parentNode
-		);
-	}
-
-	if (needsAnchorAfter && anchorBefore === 'null') {
-		// anchorAfter needs to be in the DOM before we
-		// insert the HTML...
-		addAnchorAfter();
-	}
-
-	block.builders.mount.addLine(insert(init));
-	block.builders.detachRaw.addBlock(detach);
-
-	if (needsAnchorAfter && anchorBefore !== 'null') {
-		// ...otherwise it should go afterwards
-		addAnchorAfter();
-	}
-}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/Slot.ts b/src/generators/dom/visitors/Slot.ts
deleted file mode 100644
index ef3651e1bf..0000000000
--- a/src/generators/dom/visitors/Slot.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { DomGenerator } from '../index';
-import deindent from '../../../utils/deindent';
-import visit from '../visit';
-import Block from '../Block';
-import getStaticAttributeValue from '../../../utils/getStaticAttributeValue';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-export default function visitSlot(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	const slotName = getStaticAttributeValue(node, 'name') || 'default';
-	generator.slots.add(slotName);
-
-	const content_name = block.getUniqueName(`slot_content_${slotName}`);
-	block.addVariable(content_name, `#component._slotted.${slotName}`);
-
-	const needsAnchorBefore = node.prev ? node.prev.type !== 'Element' : !state.parentNode;
-	const needsAnchorAfter = node.next ? node.next.type !== 'Element' : !state.parentNode;
-
-	const anchorBefore = needsAnchorBefore
-		? block.getUniqueName(`${content_name}_before`)
-		: (node.prev && node.prev.var) || 'null';
-
-	const anchorAfter = needsAnchorAfter
-		? block.getUniqueName(`${content_name}_after`)
-		: (node.next && node.next.var) || 'null';
-
-	if (needsAnchorBefore) block.addVariable(anchorBefore);
-	if (needsAnchorAfter) block.addVariable(anchorAfter);
-
-	block.builders.create.pushCondition(`!${content_name}`);
-	block.builders.hydrate.pushCondition(`!${content_name}`);
-	block.builders.mount.pushCondition(`!${content_name}`);
-	block.builders.unmount.pushCondition(`!${content_name}`);
-	block.builders.destroy.pushCondition(`!${content_name}`);
-
-	node.children.forEach((child: Node) => {
-		visit(generator, block, state, child, elementStack, componentStack);
-	});
-
-	block.builders.create.popCondition();
-	block.builders.hydrate.popCondition();
-	block.builders.mount.popCondition();
-	block.builders.unmount.popCondition();
-	block.builders.destroy.popCondition();
-
-	// TODO can we use an else here?
-	if (state.parentNode) {
-		block.builders.mount.addBlock(deindent`
-			if (${content_name}) {
-				${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${state.parentNode});`}
-				@appendNode(${content_name}, ${state.parentNode});
-				${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${state.parentNode});`}
-			}
-		`);
-	} else {
-		block.builders.mount.addBlock(deindent`
-			if (${content_name}) {
-				${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`}
-				@insertNode(${content_name}, #target, anchor);
-				${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`}
-			}
-		`);
-	}
-
-	// if the slot is unmounted, move nodes back into the document fragment,
-	// so that it can be reinserted later
-	// TODO so that this can work with public API, component._slotted should
-	// be all fragments, derived from options.slots. Not === options.slots
-	// TODO can we use an else here?
-	if (anchorBefore === 'null' && anchorAfter === 'null') {
-		block.builders.unmount.addBlock(deindent`
-			if (${content_name}) {
-				@reinsertChildren(${state.parentNode}, ${content_name});
-			}
-		`);
-	} else if (anchorBefore === 'null') {
-		block.builders.unmount.addBlock(deindent`
-			if (${content_name}) {
-				@reinsertBefore(${anchorAfter}, ${content_name});
-			}
-		`);
-	} else if (anchorAfter === 'null') {
-		block.builders.unmount.addBlock(deindent`
-			if (${content_name}) {
-				@reinsertAfter(${anchorBefore}, ${content_name});
-			}
-		`);
-	} else {
-		block.builders.unmount.addBlock(deindent`
-			if (${content_name}) {
-				@reinsertBetween(${anchorBefore}, ${anchorAfter}, ${content_name});
-				@detachNode(${anchorBefore});
-				@detachNode(${anchorAfter});
-			}
-		`);
-	}
-}
diff --git a/src/generators/dom/visitors/Text.ts b/src/generators/dom/visitors/Text.ts
deleted file mode 100644
index 3011195cd0..0000000000
--- a/src/generators/dom/visitors/Text.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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,
-	block: Block,
-	state: State,
-	node: Node
-) {
-	if (node.shouldSkip) return;
-
-	block.addElement(
-		node.var,
-		`@createText(${stringify(node.data)})`,
-		`@claimText(${state.parentNodes}, ${stringify(node.data)})`,
-		state.parentNode
-	);
-}
diff --git a/src/generators/dom/visitors/index.ts b/src/generators/dom/visitors/index.ts
deleted file mode 100644
index fb0da9e0bc..0000000000
--- a/src/generators/dom/visitors/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import AwaitBlock from './AwaitBlock';
-import EachBlock from './EachBlock';
-import Element from './Element/Element';
-import IfBlock from './IfBlock';
-import MustacheTag from './MustacheTag';
-import RawMustacheTag from './RawMustacheTag';
-import Text from './Text';
-import { Visitor } from '../interfaces';
-
-const visitors: Record<string, Visitor> = {
-	AwaitBlock,
-	EachBlock,
-	Element,
-	IfBlock,
-	MustacheTag,
-	RawMustacheTag,
-	Text
-};
-
-export default visitors;
\ No newline at end of file
diff --git a/src/generators/dom/visitors/shared/Tag.ts b/src/generators/dom/visitors/shared/Tag.ts
deleted file mode 100644
index 654c2e7cbf..0000000000
--- a/src/generators/dom/visitors/shared/Tag.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import deindent from '../../../../utils/deindent';
-import { DomGenerator } from '../../index';
-import Block from '../../Block';
-import { Node } from '../../../../interfaces';
-import { State } from '../../interfaces';
-
-export default function visitTag(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	name: string,
-	update: (value: string) => string
-) {
-	const { indexes } = block.contextualise(node.expression);
-	const { dependencies, snippet } = node.metadata;
-
-	const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
-
-	const shouldCache = (
-		node.expression.type !== 'Identifier' ||
-		block.contexts.has(node.expression.name) ||
-		hasChangeableIndex
-	);
-
-	const value = shouldCache && block.getUniqueName(`${name}_value`);
-	const content = shouldCache ? value : snippet;
-
-	if (shouldCache) block.addVariable(value, snippet);
-
-	if (dependencies.length || hasChangeableIndex) {
-		const changedCheck = (
-			(block.hasOutroMethod ? `#outroing || ` : '') +
-			dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')
-		);
-
-		const updateCachedValue = `${value} !== (${value} = ${snippet})`;
-
-		const condition = shouldCache ?
-			(dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
-			changedCheck;
-
-		block.builders.update.addConditional(
-			condition,
-			update(content)
-		);
-	}
-
-	return { init: content };
-}
diff --git a/src/generators/dom/visitors/shared/isDomNode.ts b/src/generators/dom/visitors/shared/isDomNode.ts
deleted file mode 100644
index 18304e3ff1..0000000000
--- a/src/generators/dom/visitors/shared/isDomNode.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DomGenerator } from '../../index';
-import { Node } from '../../../../interfaces';
-
-export default function isDomNode(node: Node, generator: DomGenerator) {
-	if (node.type === 'Element') return !generator.components.has(node.name);
-	return node.type === 'Text' || node.type === 'MustacheTag';
-}
\ No newline at end of file
diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
new file mode 100644
index 0000000000..44f24712fc
--- /dev/null
+++ b/src/generators/nodes/Attribute.ts
@@ -0,0 +1,662 @@
+import deindent from '../../utils/deindent';
+import { stringify } from '../../utils/stringify';
+import getExpressionPrecedence from '../../utils/getExpressionPrecedence';
+import { DomGenerator } from '../dom/index';
+import Node from './shared/Node';
+import Element from './Element';
+import Block from '../dom/Block';
+
+export interface StyleProp {
+	key: string;
+	value: Node[];
+}
+
+export default class Attribute {
+	type: 'Attribute';
+	start: number;
+	end: number;
+
+	generator: DomGenerator;
+	parent: Element;
+	name: string;
+	value: true | Node[]
+	expression: Node;
+
+	constructor({
+		generator,
+		name,
+		value,
+		parent
+	}: {
+		generator: DomGenerator,
+		name: string,
+		value: Node[],
+		parent: Element
+	}) {
+		this.type = 'Attribute';
+		this.generator = generator;
+		this.parent = parent;
+
+		this.name = name;
+		this.value = value;
+	}
+
+	render(block: Block) {
+		const node = this.parent;
+		const name = this.name;
+
+		if (name === 'style') {
+			const styleProps = optimizeStyle(this.value);
+			if (styleProps) {
+				this.renderStyle(block, styleProps);
+				return;
+			}
+		}
+
+		let metadata = node.namespace ? null : attributeLookup[name];
+		if (metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf(node.name))
+			metadata = null;
+
+		const isIndirectlyBoundValue =
+			name === 'value' &&
+			(node.name === 'option' || // TODO check it's actually bound
+				(node.name === 'input' &&
+					node.attributes.find(
+						(attribute: Attribute) =>
+							attribute.type === 'Binding' && /checked|group/.test(attribute.name)
+						)));
+
+		const propertyName = isIndirectlyBoundValue
+			? '__value'
+			: metadata && metadata.propertyName;
+
+		// xlink is a special case... we could maybe extend this to generic
+		// namespaced attributes but I'm not sure that's applicable in
+		// HTML5?
+		const method = name.slice(0, 6) === 'xlink:'
+			? '@setXlinkAttribute'
+			: '@setAttribute';
+
+		const isDynamic =
+			(this.value !== true && this.value.length > 1) ||
+			(this.value.length === 1 && this.value[0].type !== 'Text');
+
+		const isLegacyInputType = this.generator.legacy && name === 'type' && this.parent.name === 'input';
+
+		const isDataSet = /^data-/.test(name) && !this.generator.legacy;
+		const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
+			return m[1].toUpperCase();
+		}) : name;
+
+		if (isDynamic) {
+			let value;
+
+			const allDependencies = new Set();
+			let shouldCache;
+			let hasChangeableIndex;
+
+			// TODO some of this code is repeated in Tag.ts — would be good to
+			// DRY it out if that's possible without introducing crazy indirection
+			if (this.value.length === 1) {
+				// single {{tag}} — may be a non-string
+				const { expression } = this.value[0];
+				const { indexes } = block.contextualise(expression);
+				const { dependencies, snippet } = this.value[0].metadata;
+
+				value = snippet;
+				dependencies.forEach(d => {
+					allDependencies.add(d);
+				});
+
+				hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
+
+				shouldCache = (
+					expression.type !== 'Identifier' ||
+					block.contexts.has(expression.name) ||
+					hasChangeableIndex
+				);
+			} else {
+				// '{{foo}} {{bar}}' — treat as string concatenation
+				value =
+					(this.value[0].type === 'Text' ? '' : `"" + `) +
+					this.value
+						.map((chunk: Node) => {
+							if (chunk.type === 'Text') {
+								return stringify(chunk.data);
+							} else {
+								const { indexes } = block.contextualise(chunk.expression);
+								const { dependencies, snippet } = chunk.metadata;
+
+								if (Array.from(indexes).some(index => block.changeableIndexes.get(index))) {
+									hasChangeableIndex = true;
+								}
+
+								dependencies.forEach(d => {
+									allDependencies.add(d);
+								});
+
+								return getExpressionPrecedence(chunk.expression) <= 13 ? `(${snippet})` : snippet;
+							}
+						})
+						.join(' + ');
+
+				shouldCache = true;
+			}
+
+			const isSelectValueAttribute =
+				name === 'value' && node.name === 'select';
+
+			const last = (shouldCache || isSelectValueAttribute) && block.getUniqueName(
+				`${node.var}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value`
+			);
+
+			if (shouldCache || isSelectValueAttribute) block.addVariable(last);
+
+			let updater;
+			const init = shouldCache ? `${last} = ${value}` : value;
+
+			if (isLegacyInputType) {
+				block.builders.hydrate.addLine(
+					`@setInputType(${node.var}, ${init});`
+				);
+				updater = `@setInputType(${node.var}, ${shouldCache ? last : value});`;
+			} else if (isSelectValueAttribute) {
+				// annoying special case
+				const isMultipleSelect = node.getStaticAttributeValue('multiple');
+				const i = block.getUniqueName('i');
+				const option = block.getUniqueName('option');
+
+				const ifStatement = isMultipleSelect
+					? deindent`
+						${option}.selected = ~${last}.indexOf(${option}.__value);`
+					: deindent`
+						if (${option}.__value === ${last}) {
+							${option}.selected = true;
+							break;
+						}`;
+
+				updater = deindent`
+					for (var ${i} = 0; ${i} < ${node.var}.options.length; ${i} += 1) {
+						var ${option} = ${node.var}.options[${i}];
+
+						${ifStatement}
+					}
+				`;
+
+				block.builders.hydrate.addBlock(deindent`
+					${last} = ${value};
+					${updater}
+				`);
+
+				block.builders.update.addLine(`${last} = ${value};`);
+			} else if (propertyName) {
+				block.builders.hydrate.addLine(
+					`${node.var}.${propertyName} = ${init};`
+				);
+				updater = `${node.var}.${propertyName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
+			} else if (isDataSet) {
+				block.builders.hydrate.addLine(
+					`${node.var}.dataset.${camelCaseName} = ${init};`
+				);
+				updater = `${node.var}.dataset.${camelCaseName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
+			} else {
+				block.builders.hydrate.addLine(
+					`${method}(${node.var}, "${name}", ${init});`
+				);
+				updater = `${method}(${node.var}, "${name}", ${shouldCache || isSelectValueAttribute ? last : value});`;
+			}
+
+			if (allDependencies.size || hasChangeableIndex || isSelectValueAttribute) {
+				const dependencies = Array.from(allDependencies);
+				const changedCheck = (
+					( block.hasOutroMethod ? `#outroing || ` : '' ) +
+					dependencies.map(dependency => `changed.${dependency}`).join(' || ')
+				);
+
+				const updateCachedValue = `${last} !== (${last} = ${value})`;
+
+				const condition = shouldCache ?
+					( dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue ) :
+					changedCheck;
+
+				block.builders.update.addConditional(
+					condition,
+					updater
+				);
+			}
+		} else {
+			const value = this.value === true
+				? 'true'
+				: this.value.length === 0
+					? `''`
+					: stringify(this.value[0].data);
+
+			const statement = (
+				isLegacyInputType ? `@setInputType(${node.var}, ${value});` :
+				propertyName ? `${node.var}.${propertyName} = ${value};` :
+					isDataSet ? `${node.var}.dataset.${camelCaseName} = ${value};` :
+				`${method}(${node.var}, "${name}", ${value});`
+			);
+
+			block.builders.hydrate.addLine(statement);
+
+			// special case – autofocus. has to be handled in a bit of a weird way
+			if (this.value === true && name === 'autofocus') {
+				block.autofocus = node.var;
+			}
+		}
+
+		if (isIndirectlyBoundValue) {
+			const updateValue = `${node.var}.value = ${node.var}.__value;`;
+
+			block.builders.hydrate.addLine(updateValue);
+			if (isDynamic) block.builders.update.addLine(updateValue);
+		}
+	}
+
+	renderStyle(
+		block: Block,
+		styleProps: StyleProp[]
+	) {
+		styleProps.forEach((prop: StyleProp) => {
+			let value;
+
+			if (isDynamic(prop.value)) {
+				const allDependencies = new Set();
+				let shouldCache;
+				let hasChangeableIndex;
+
+				value =
+					((prop.value.length === 1 || prop.value[0].type === 'Text') ? '' : `"" + `) +
+					prop.value
+						.map((chunk: Node) => {
+							if (chunk.type === 'Text') {
+								return stringify(chunk.data);
+							} else {
+								const { indexes } = block.contextualise(chunk.expression);
+								const { dependencies, snippet } = chunk.metadata;
+
+								if (Array.from(indexes).some(index => block.changeableIndexes.get(index))) {
+									hasChangeableIndex = true;
+								}
+
+								dependencies.forEach(d => {
+									allDependencies.add(d);
+								});
+
+								return getExpressionPrecedence(chunk.expression) <= 13 ? `( ${snippet} )` : snippet;
+							}
+						})
+						.join(' + ');
+
+				if (allDependencies.size || hasChangeableIndex) {
+					const dependencies = Array.from(allDependencies);
+					const condition = (
+						( block.hasOutroMethod ? `#outroing || ` : '' ) +
+						dependencies.map(dependency => `changed.${dependency}`).join(' || ')
+					);
+
+					block.builders.update.addConditional(
+						condition,
+						`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
+					);
+				}
+			} else {
+				value = stringify(prop.value[0].data);
+			}
+
+			block.builders.hydrate.addLine(
+				`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
+			);
+		});
+	}
+}
+
+// source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+const attributeLookup = {
+	accept: { appliesTo: ['form', 'input'] },
+	'accept-charset': { propertyName: 'acceptCharset', appliesTo: ['form'] },
+	accesskey: { propertyName: 'accessKey' },
+	action: { appliesTo: ['form'] },
+	align: {
+		appliesTo: [
+			'applet',
+			'caption',
+			'col',
+			'colgroup',
+			'hr',
+			'iframe',
+			'img',
+			'table',
+			'tbody',
+			'td',
+			'tfoot',
+			'th',
+			'thead',
+			'tr',
+		],
+	},
+	allowfullscreen: { propertyName: 'allowFullscreen', appliesTo: ['iframe'] },
+	alt: { appliesTo: ['applet', 'area', 'img', 'input'] },
+	async: { appliesTo: ['script'] },
+	autocomplete: { appliesTo: ['form', 'input'] },
+	autofocus: { appliesTo: ['button', 'input', 'keygen', 'select', 'textarea'] },
+	autoplay: { appliesTo: ['audio', 'video'] },
+	autosave: { appliesTo: ['input'] },
+	bgcolor: {
+		propertyName: 'bgColor',
+		appliesTo: [
+			'body',
+			'col',
+			'colgroup',
+			'marquee',
+			'table',
+			'tbody',
+			'tfoot',
+			'td',
+			'th',
+			'tr',
+		],
+	},
+	border: { appliesTo: ['img', 'object', 'table'] },
+	buffered: { appliesTo: ['audio', 'video'] },
+	challenge: { appliesTo: ['keygen'] },
+	charset: { appliesTo: ['meta', 'script'] },
+	checked: { appliesTo: ['command', 'input'] },
+	cite: { appliesTo: ['blockquote', 'del', 'ins', 'q'] },
+	class: { propertyName: 'className' },
+	code: { appliesTo: ['applet'] },
+	codebase: { propertyName: 'codeBase', appliesTo: ['applet'] },
+	color: { appliesTo: ['basefont', 'font', 'hr'] },
+	cols: { appliesTo: ['textarea'] },
+	colspan: { propertyName: 'colSpan', appliesTo: ['td', 'th'] },
+	content: { appliesTo: ['meta'] },
+	contenteditable: { propertyName: 'contentEditable' },
+	contextmenu: {},
+	controls: { appliesTo: ['audio', 'video'] },
+	coords: { appliesTo: ['area'] },
+	data: { appliesTo: ['object'] },
+	datetime: { propertyName: 'dateTime', appliesTo: ['del', 'ins', 'time'] },
+	default: { appliesTo: ['track'] },
+	defer: { appliesTo: ['script'] },
+	dir: {},
+	dirname: { propertyName: 'dirName', appliesTo: ['input', 'textarea'] },
+	disabled: {
+		appliesTo: [
+			'button',
+			'command',
+			'fieldset',
+			'input',
+			'keygen',
+			'optgroup',
+			'option',
+			'select',
+			'textarea',
+		],
+	},
+	download: { appliesTo: ['a', 'area'] },
+	draggable: {},
+	dropzone: {},
+	enctype: { appliesTo: ['form'] },
+	for: { propertyName: 'htmlFor', appliesTo: ['label', 'output'] },
+	form: {
+		appliesTo: [
+			'button',
+			'fieldset',
+			'input',
+			'keygen',
+			'label',
+			'meter',
+			'object',
+			'output',
+			'progress',
+			'select',
+			'textarea',
+		],
+	},
+	formaction: { appliesTo: ['input', 'button'] },
+	headers: { appliesTo: ['td', 'th'] },
+	height: {
+		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+	},
+	hidden: {},
+	high: { appliesTo: ['meter'] },
+	href: { appliesTo: ['a', 'area', 'base', 'link'] },
+	hreflang: { appliesTo: ['a', 'area', 'link'] },
+	'http-equiv': { propertyName: 'httpEquiv', appliesTo: ['meta'] },
+	icon: { appliesTo: ['command'] },
+	id: {},
+	indeterminate: { appliesTo: ['input'] },
+	ismap: { propertyName: 'isMap', appliesTo: ['img'] },
+	itemprop: {},
+	keytype: { appliesTo: ['keygen'] },
+	kind: { appliesTo: ['track'] },
+	label: { appliesTo: ['track'] },
+	lang: {},
+	language: { appliesTo: ['script'] },
+	loop: { appliesTo: ['audio', 'bgsound', 'marquee', 'video'] },
+	low: { appliesTo: ['meter'] },
+	manifest: { appliesTo: ['html'] },
+	max: { appliesTo: ['input', 'meter', 'progress'] },
+	maxlength: { propertyName: 'maxLength', appliesTo: ['input', 'textarea'] },
+	media: { appliesTo: ['a', 'area', 'link', 'source', 'style'] },
+	method: { appliesTo: ['form'] },
+	min: { appliesTo: ['input', 'meter'] },
+	multiple: { appliesTo: ['input', 'select'] },
+	muted: { appliesTo: ['audio', 'video'] },
+	name: {
+		appliesTo: [
+			'button',
+			'form',
+			'fieldset',
+			'iframe',
+			'input',
+			'keygen',
+			'object',
+			'output',
+			'select',
+			'textarea',
+			'map',
+			'meta',
+			'param',
+		],
+	},
+	novalidate: { propertyName: 'noValidate', appliesTo: ['form'] },
+	open: { appliesTo: ['details'] },
+	optimum: { appliesTo: ['meter'] },
+	pattern: { appliesTo: ['input'] },
+	ping: { appliesTo: ['a', 'area'] },
+	placeholder: { appliesTo: ['input', 'textarea'] },
+	poster: { appliesTo: ['video'] },
+	preload: { appliesTo: ['audio', 'video'] },
+	radiogroup: { appliesTo: ['command'] },
+	readonly: { propertyName: 'readOnly', appliesTo: ['input', 'textarea'] },
+	rel: { appliesTo: ['a', 'area', 'link'] },
+	required: { appliesTo: ['input', 'select', 'textarea'] },
+	reversed: { appliesTo: ['ol'] },
+	rows: { appliesTo: ['textarea'] },
+	rowspan: { propertyName: 'rowSpan', appliesTo: ['td', 'th'] },
+	sandbox: { appliesTo: ['iframe'] },
+	scope: { appliesTo: ['th'] },
+	scoped: { appliesTo: ['style'] },
+	seamless: { appliesTo: ['iframe'] },
+	selected: { appliesTo: ['option'] },
+	shape: { appliesTo: ['a', 'area'] },
+	size: { appliesTo: ['input', 'select'] },
+	sizes: { appliesTo: ['link', 'img', 'source'] },
+	span: { appliesTo: ['col', 'colgroup'] },
+	spellcheck: {},
+	src: {
+		appliesTo: [
+			'audio',
+			'embed',
+			'iframe',
+			'img',
+			'input',
+			'script',
+			'source',
+			'track',
+			'video',
+		],
+	},
+	srcdoc: { appliesTo: ['iframe'] },
+	srclang: { appliesTo: ['track'] },
+	srcset: { appliesTo: ['img'] },
+	start: { appliesTo: ['ol'] },
+	step: { appliesTo: ['input'] },
+	style: { propertyName: 'style.cssText' },
+	summary: { appliesTo: ['table'] },
+	tabindex: { propertyName: 'tabIndex' },
+	target: { appliesTo: ['a', 'area', 'base', 'form'] },
+	title: {},
+	type: {
+		appliesTo: [
+			'button',
+			'input',
+			'command',
+			'embed',
+			'object',
+			'script',
+			'source',
+			'style',
+			'menu',
+		],
+	},
+	usemap: { propertyName: 'useMap', appliesTo: ['img', 'input', 'object'] },
+	value: {
+		appliesTo: [
+			'button',
+			'option',
+			'input',
+			'li',
+			'meter',
+			'progress',
+			'param',
+			'select',
+			'textarea',
+		],
+	},
+	width: {
+		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+	},
+	wrap: { appliesTo: ['textarea'] },
+};
+
+Object.keys(attributeLookup).forEach(name => {
+	const metadata = attributeLookup[name];
+	if (!metadata.propertyName) metadata.propertyName = name;
+});
+
+function optimizeStyle(value: Node[]) {
+	let expectingKey = true;
+	let i = 0;
+
+	const props: { key: string, value: Node[] }[] = [];
+	let chunks = value.slice();
+
+	while (chunks.length) {
+		const chunk = chunks[0];
+
+		if (chunk.type !== 'Text') return null;
+
+		const keyMatch = /^\s*([\w-]+):\s*/.exec(chunk.data);
+		if (!keyMatch) return null;
+
+		const key = keyMatch[1];
+
+		const offset = keyMatch.index + keyMatch[0].length;
+		const remainingData = chunk.data.slice(offset);
+
+		if (remainingData) {
+			chunks[0] = {
+				start: chunk.start + offset,
+				end: chunk.end,
+				type: 'Text',
+				data: remainingData
+			};
+		} else {
+			chunks.shift();
+		}
+
+		const result = getStyleValue(chunks);
+		if (!result) return null;
+
+		props.push({ key, value: result.value });
+		chunks = result.chunks;
+	}
+
+	return props;
+}
+
+function getStyleValue(chunks: Node[]) {
+	const value: Node[] = [];
+
+	let inUrl = false;
+	let quoteMark = null;
+	let escaped = false;
+
+	while (chunks.length) {
+		const chunk = chunks.shift();
+
+		if (chunk.type === 'Text') {
+			let c = 0;
+			while (c < chunk.data.length) {
+				const char = chunk.data[c];
+
+				if (escaped) {
+					escaped = false;
+				} else if (char === '\\') {
+					escaped = true;
+				} else if (char === quoteMark) {
+					quoteMark === null;
+				} else if (char === '"' || char === "'") {
+					quoteMark = char;
+				} else if (char === ')' && inUrl) {
+					inUrl = false;
+				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
+					inUrl = true;
+				} else if (char === ';' && !inUrl && !quoteMark) {
+					break;
+				}
+
+				c += 1;
+			}
+
+			if (c > 0) {
+				value.push({
+					type: 'Text',
+					start: chunk.start,
+					end: chunk.start + c,
+					data: chunk.data.slice(0, c)
+				});
+			}
+
+			while (/[;\s]/.test(chunk.data[c])) c += 1;
+			const remainingData = chunk.data.slice(c);
+
+			if (remainingData) {
+				chunks.unshift({
+					start: chunk.start + c,
+					end: chunk.end,
+					type: 'Text',
+					data: remainingData
+				});
+
+				break;
+			}
+		}
+
+		else {
+			value.push(chunk);
+		}
+	}
+
+	return {
+		chunks,
+		value
+	};
+}
+
+function isDynamic(value: Node[]) {
+	return value.length > 1 || value[0].type !== 'Text';
+}
\ No newline at end of file
diff --git a/src/generators/nodes/AwaitBlock.ts b/src/generators/nodes/AwaitBlock.ts
new file mode 100644
index 0000000000..61fa2f053e
--- /dev/null
+++ b/src/generators/nodes/AwaitBlock.ts
@@ -0,0 +1,200 @@
+import deindent from '../../utils/deindent';
+import Node from './shared/Node';
+import { DomGenerator } from '../dom/index';
+import Block from '../dom/Block';
+import PendingBlock from './PendingBlock';
+import ThenBlock from './ThenBlock';
+import CatchBlock from './CatchBlock';
+import createDebuggingComment from '../../utils/createDebuggingComment';
+
+export default class AwaitBlock extends Node {
+	value: string;
+	error: string;
+	expression: Node;
+
+	pending: PendingBlock;
+	then: ThenBlock;
+	catch: CatchBlock;
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		this.cannotUseInnerHTML();
+
+		this.var = block.getUniqueName('await_block');
+		block.addDependencies(this.metadata.dependencies);
+
+		let dynamic = false;
+
+		[
+			['pending', null],
+			['then', this.value],
+			['catch', this.error]
+		].forEach(([status, arg]) => {
+			const child = this[status];
+
+			const context = block.getUniqueName(arg || '_');
+			const contexts = new Map(block.contexts);
+			contexts.set(arg, context);
+
+			child.block = block.child({
+				comment: createDebuggingComment(child, this.generator),
+				name: this.generator.getUniqueName(`create_${status}_block`),
+				params: block.params.concat(context),
+				context,
+				contexts
+			});
+
+			child.initChildren(child.block, stripWhitespace, nextSibling);
+			this.generator.blocks.push(child.block);
+
+			if (child.block.dependencies.size > 0) {
+				dynamic = true;
+				block.addDependencies(child.block.dependencies);
+			}
+		});
+
+		this.pending.block.hasUpdateMethod = dynamic;
+		this.then.block.hasUpdateMethod = dynamic;
+		this.catch.block.hasUpdateMethod = dynamic;
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const name = this.var;
+
+		const anchor = this.getOrCreateAnchor(block, parentNode);
+
+		const params = block.params.join(', ');
+
+		block.contextualise(this.expression);
+		const { snippet } = this.metadata;
+
+		const promise = block.getUniqueName(`promise`);
+		const resolved = block.getUniqueName(`resolved`);
+		const await_block = block.getUniqueName(`await_block`);
+		const await_block_type = block.getUniqueName(`await_block_type`);
+		const token = block.getUniqueName(`token`);
+		const await_token = block.getUniqueName(`await_token`);
+		const handle_promise = block.getUniqueName(`handle_promise`);
+		const replace_await_block = block.getUniqueName(`replace_await_block`);
+		const old_block = block.getUniqueName(`old_block`);
+		const value = block.getUniqueName(`value`);
+		const error = block.getUniqueName(`error`);
+		const create_pending_block = this.pending.block.name;
+		const create_then_block = this.then.block.name;
+		const create_catch_block = this.catch.block.name;
+
+		block.addVariable(await_block);
+		block.addVariable(await_block_type);
+		block.addVariable(await_token);
+		block.addVariable(promise);
+		block.addVariable(resolved);
+
+		block.builders.init.addBlock(deindent`
+			function ${replace_await_block}(${token}, type, ${value}, ${params}) {
+				if (${token} !== ${await_token}) return;
+
+				var ${old_block} = ${await_block};
+				${await_block} = (${await_block_type} = type)(${params}, ${resolved} = ${value}, #component);
+
+				if (${old_block}) {
+					${old_block}.u();
+					${old_block}.d();
+					${await_block}.c();
+					${await_block}.m(${parentNode || `${anchor}.parentNode`}, ${anchor});
+				}
+			}
+
+			function ${handle_promise}(${promise}, ${params}) {
+				var ${token} = ${await_token} = {};
+
+				if (@isPromise(${promise})) {
+					${promise}.then(function(${value}) {
+						${replace_await_block}(${token}, ${create_then_block}, ${value}, ${params});
+					}, function (${error}) {
+						${replace_await_block}(${token}, ${create_catch_block}, ${error}, ${params});
+					});
+
+					// if we previously had a then/catch block, destroy it
+					if (${await_block_type} !== ${create_pending_block}) {
+						${replace_await_block}(${token}, ${create_pending_block}, null, ${params});
+						return true;
+					}
+				} else {
+					${resolved} = ${promise};
+					if (${await_block_type} !== ${create_then_block}) {
+						${replace_await_block}(${token}, ${create_then_block}, ${resolved}, ${params});
+						return true;
+					}
+				}
+			}
+
+			${handle_promise}(${promise} = ${snippet}, ${params});
+		`);
+
+		block.builders.create.addBlock(deindent`
+			${await_block}.c();
+		`);
+
+		block.builders.claim.addBlock(deindent`
+			${await_block}.l(${parentNodes});
+		`);
+
+		const initialMountNode = parentNode || '#target';
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.mount.addBlock(deindent`
+			${await_block}.m(${initialMountNode}, ${anchorNode});
+		`);
+
+		const conditions = [];
+		if (this.metadata.dependencies) {
+			conditions.push(
+				`(${this.metadata.dependencies.map(dep => `'${dep}' in changed`).join(' || ')})`
+			);
+		}
+
+		conditions.push(
+			`${promise} !== (${promise} = ${snippet})`,
+			`${handle_promise}(${promise}, ${params})`
+		);
+
+		if (this.pending.block.hasUpdateMethod) {
+			block.builders.update.addBlock(deindent`
+				if (${conditions.join(' && ')}) {
+					// nothing
+				} else {
+					${await_block}.p(changed, ${params}, ${resolved});
+				}
+			`);
+		} else {
+			block.builders.update.addBlock(deindent`
+				if (${conditions.join(' && ')}) {
+					${await_block}.c();
+					${await_block}.m(${anchor}.parentNode, ${anchor});
+				}
+			`);
+		}
+
+		block.builders.unmount.addBlock(deindent`
+			${await_block}.u();
+		`);
+
+		block.builders.destroy.addBlock(deindent`
+			${await_token} = null;
+			${await_block}.d();
+		`);
+
+		[this.pending, this.then, this.catch].forEach(status => {
+			status.children.forEach(child => {
+				child.build(status.block, null,'nodes');
+			});
+		});
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Binding.ts b/src/generators/nodes/Binding.ts
new file mode 100644
index 0000000000..3ab5f79769
--- /dev/null
+++ b/src/generators/nodes/Binding.ts
@@ -0,0 +1,270 @@
+import Node from './shared/Node';
+import Element from './Element';
+import getObject from '../../utils/getObject';
+import getTailSnippet from '../../utils/getTailSnippet';
+import flattenReference from '../../utils/flattenReference';
+import { DomGenerator } from '../dom/index';
+import Block from '../dom/Block';
+
+const readOnlyMediaAttributes = new Set([
+	'duration',
+	'buffered',
+	'seekable',
+	'played'
+]);
+
+export default class Binding extends Node {
+	name: string;
+	value: Node;
+	expression: Node;
+
+	munge(
+		block: Block,
+		allUsedContexts: Set<string>
+	) {
+		const node: Element = this.parent;
+
+		const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type'));
+		const isReadOnly = node.isMediaNode() && readOnlyMediaAttributes.has(this.name);
+
+		let updateCondition: string;
+
+		const { name } = getObject(this.value);
+		const { contexts } = block.contextualise(this.value);
+		const { snippet } = this.metadata;
+
+		// special case: if you have e.g. `<input type=checkbox bind:checked=selected.done>`
+		// and `selected` is an object chosen with a <select>, then when `checked` changes,
+		// we need to tell the component to update all the values `selected` might be
+		// pointing to
+		// TODO should this happen in preprocess?
+		const dependencies = this.metadata.dependencies.slice();
+		this.metadata.dependencies.forEach((prop: string) => {
+			const indirectDependencies = this.generator.indirectDependencies.get(prop);
+			if (indirectDependencies) {
+				indirectDependencies.forEach(indirectDependency => {
+					if (!~dependencies.indexOf(indirectDependency)) dependencies.push(indirectDependency);
+				});
+			}
+		});
+
+		contexts.forEach(context => {
+			allUsedContexts.add(context);
+		});
+
+		// view to model
+		const valueFromDom = getValueFromDom(this.generator, node, this);
+		const handler = getEventHandler(this.generator, block, name, snippet, this, dependencies, valueFromDom);
+
+		// model to view
+		let updateDom = getDomUpdater(node, this, snippet);
+		let initialUpdate = updateDom;
+
+		// special cases
+		if (this.name === 'group') {
+			const bindingGroup = getBindingGroup(this.generator, this.value);
+
+			block.builders.hydrate.addLine(
+				`#component._bindingGroups[${bindingGroup}].push(${node.var});`
+			);
+
+			block.builders.destroy.addLine(
+				`#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${node.var}), 1);`
+			);
+		}
+
+		if (this.name === 'currentTime') {
+			updateCondition = `!isNaN(${snippet})`;
+			initialUpdate = null;
+		}
+
+		if (this.name === 'paused') {
+			// this is necessary to prevent audio restarting by itself
+			const last = block.getUniqueName(`${node.var}_is_paused`);
+			block.addVariable(last, 'true');
+
+			updateCondition = `${last} !== (${last} = ${snippet})`;
+			updateDom = `${node.var}[${last} ? "pause" : "play"]();`;
+			initialUpdate = null;
+		}
+
+		return {
+			name: this.name,
+			object: name,
+			handler,
+			updateDom,
+			initialUpdate,
+			needsLock: !isReadOnly && needsLock,
+			updateCondition,
+			isReadOnlyMediaAttribute: this.isReadOnlyMediaAttribute()
+		};
+	}
+
+	isReadOnlyMediaAttribute() {
+		return readOnlyMediaAttributes.has(this.name);
+	}
+}
+
+function getDomUpdater(
+	node: Element,
+	binding: Binding,
+	snippet: string
+) {
+	if (binding.isReadOnlyMediaAttribute()) {
+		return null;
+	}
+
+	if (node.name === 'select') {
+		return node.getStaticAttributeValue('multiple') === true ?
+			`@selectOptions(${node.var}, ${snippet})` :
+			`@selectOption(${node.var}, ${snippet})`;
+	}
+
+	if (binding.name === 'group') {
+		const type = node.getStaticAttributeValue('type');
+
+		const condition = type === 'checkbox'
+			? `~${snippet}.indexOf(${node.var}.__value)`
+			: `${node.var}.__value === ${snippet}`;
+
+		return `${node.var}.checked = ${condition};`
+	}
+
+	return `${node.var}.${binding.name} = ${snippet};`;
+}
+
+function getBindingGroup(generator: DomGenerator, value: Node) {
+	const { parts } = flattenReference(value); // TODO handle cases involving computed member expressions
+	const keypath = parts.join('.');
+
+	// TODO handle contextual bindings — `keypath` should include unique ID of
+	// each block that provides context
+	let index = generator.bindingGroups.indexOf(keypath);
+	if (index === -1) {
+		index = generator.bindingGroups.length;
+		generator.bindingGroups.push(keypath);
+	}
+
+	return index;
+}
+
+function getEventHandler(
+	generator: DomGenerator,
+	block: Block,
+	name: string,
+	snippet: string,
+	attribute: Node,
+	dependencies: string[],
+	value: string,
+) {
+	let storeDependencies = [];
+
+	if (generator.options.store) {
+		storeDependencies = dependencies.filter(prop => prop[0] === '$').map(prop => prop.slice(1));
+		dependencies = dependencies.filter(prop => prop[0] !== '$');
+	}
+
+	if (block.contexts.has(name)) {
+		const tail = attribute.value.type === 'MemberExpression'
+			? getTailSnippet(attribute.value)
+			: '';
+
+		const list = `context.${block.listNames.get(name)}`;
+		const index = `context.${block.indexNames.get(name)}`;
+
+		return {
+			usesContext: true,
+			usesState: true,
+			usesStore: storeDependencies.length > 0,
+			mutation: `${list}[${index}]${tail} = ${value};`,
+			props: dependencies.map(prop => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
+		};
+	}
+
+	if (attribute.value.type === 'MemberExpression') {
+		// This is a little confusing, and should probably be tidied up
+		// at some point. It addresses a tricky bug (#893), wherein
+		// Svelte tries to `set()` a computed property, which throws an
+		// error in dev mode. a) it's possible that we should be
+		// replacing computations with *their* dependencies, and b)
+		// we should probably populate `generator.readonly` sooner so
+		// that we don't have to do the `.some()` here
+		dependencies = dependencies.filter(prop => !generator.computations.some(computation => computation.key === prop));
+
+		return {
+			usesContext: false,
+			usesState: true,
+			usesStore: storeDependencies.length > 0,
+			mutation: `${snippet} = ${value}`,
+			props: dependencies.map((prop: string) => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
+		};
+	}
+
+	let props;
+	let storeProps;
+
+	if (generator.options.store && name[0] === '$') {
+		props = [];
+		storeProps = [`${name.slice(1)}: ${value}`];
+	} else {
+		props = [`${name}: ${value}`];
+		storeProps = [];
+	}
+
+	return {
+		usesContext: false,
+		usesState: false,
+		usesStore: false,
+		mutation: null,
+		props,
+		storeProps
+	};
+}
+
+function getValueFromDom(
+	generator: DomGenerator,
+	node: Element,
+	binding: Node
+) {
+	// <select bind:value='selected>
+	if (node.name === 'select') {
+		return node.getStaticAttributeValue('multiple') === true ?
+			`@selectMultipleValue(${node.var})` :
+			`@selectValue(${node.var})`;
+	}
+
+	const type = node.getStaticAttributeValue('type');
+
+	// <input type='checkbox' bind:group='foo'>
+	if (binding.name === 'group') {
+		const bindingGroup = getBindingGroup(generator, binding.value);
+		if (type === 'checkbox') {
+			return `@getBindingGroupValue(#component._bindingGroups[${bindingGroup}])`;
+		}
+
+		return `${node.var}.__value`;
+	}
+
+	// <input type='range|number' bind:value>
+	if (type === 'range' || type === 'number') {
+		return `@toNumber(${node.var}.${binding.name})`;
+	}
+
+	if ((binding.name === 'buffered' || binding.name === 'seekable' || binding.name === 'played')) {
+		return `@timeRangesToArray(${node.var}.${binding.name})`
+	}
+
+	// everything else
+	return `${node.var}.${binding.name}`;
+}
+
+function isComputed(node: Node) {
+	while (node.type === 'MemberExpression') {
+		if (node.computed) return true;
+		node = node.object;
+	}
+
+	return false;
+}
\ No newline at end of file
diff --git a/src/generators/nodes/CatchBlock.ts b/src/generators/nodes/CatchBlock.ts
new file mode 100644
index 0000000000..2ba5709eeb
--- /dev/null
+++ b/src/generators/nodes/CatchBlock.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+import Block from '../dom/Block';
+
+export default class CatchBlock extends Node {
+	block: Block;
+	children: Node[];
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Comment.ts b/src/generators/nodes/Comment.ts
new file mode 100644
index 0000000000..9ac5f0bd8c
--- /dev/null
+++ b/src/generators/nodes/Comment.ts
@@ -0,0 +1,5 @@
+import Node from './shared/Node';
+
+export default class Comment extends Node {
+	type: 'Comment'
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts
new file mode 100644
index 0000000000..551f54b8ec
--- /dev/null
+++ b/src/generators/nodes/Component.ts
@@ -0,0 +1,603 @@
+import deindent from '../../utils/deindent';
+import { stringify } from '../../utils/stringify';
+import stringifyProps from '../../utils/stringifyProps';
+import CodeBuilder from '../../utils/CodeBuilder';
+import getTailSnippet from '../../utils/getTailSnippet';
+import getObject from '../../utils/getObject';
+import getExpressionPrecedence from '../../utils/getExpressionPrecedence';
+import Node from './shared/Node';
+import Block from '../dom/Block';
+import Attribute from './Attribute';
+
+export default class Component extends Node {
+	type: 'Component';
+	name: string;
+	attributes: Attribute[];
+	children: Node[];
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		this.cannotUseInnerHTML();
+
+		this.attributes.forEach((attribute: Node) => {
+			if (attribute.type === 'Attribute' && attribute.value !== true) {
+				attribute.value.forEach((chunk: Node) => {
+					if (chunk.type !== 'Text') {
+						const dependencies = chunk.metadata.dependencies;
+						block.addDependencies(dependencies);
+					}
+				});
+			} else {
+				if (attribute.type === 'EventHandler' && attribute.expression) {
+					attribute.expression.arguments.forEach((arg: Node) => {
+						block.addDependencies(arg.metadata.dependencies);
+					});
+				} else if (attribute.type === 'Binding') {
+					block.addDependencies(attribute.metadata.dependencies);
+				}
+			}
+		});
+
+		this.var = block.getUniqueName(
+			(
+				this.name === ':Self' ? this.generator.name :
+				this.name === ':Component' ? 'switch_instance' :
+				this.name
+			).toLowerCase()
+		);
+
+		if (this.children.length) {
+			this._slots = new Set(['default']);
+
+			this.children.forEach(child => {
+				child.init(block, stripWhitespace, nextSibling);
+			});
+		}
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+		generator.hasComponents = true;
+
+		const name = this.var;
+
+		const componentInitProperties = [`_root: #component._root`];
+
+		if (this.children.length > 0) {
+			const slots = Array.from(this._slots).map(name => `${name}: @createFragment()`);
+			componentInitProperties.push(`slots: { ${slots.join(', ')} }`);
+
+			this.children.forEach((child: Node) => {
+				child.build(block, `${this.var}._slotted.default`, 'nodes');
+			});
+		}
+
+		const allContexts = new Set();
+		const statements: string[] = [];
+		const name_context = block.getUniqueName(`${name}_context`);
+
+		let name_updating: string;
+		let name_initial_data: string;
+		let beforecreate: string = null;
+
+		const attributes = this.attributes
+			.filter(a => a.type === 'Attribute')
+			.map(a => mungeAttribute(a, block));
+
+		const bindings = this.attributes
+			.filter(a => a.type === 'Binding')
+			.map(a => mungeBinding(a, block));
+
+		const eventHandlers = this.attributes
+			.filter((a: Node) => a.type === 'EventHandler')
+			.map(a => mungeEventHandler(generator, this, a, block, name_context, allContexts));
+
+		const ref = this.attributes.find((a: Node) => a.type === 'Ref');
+		if (ref) generator.usesRefs = true;
+
+		const updates: string[] = [];
+
+		if (attributes.length || bindings.length) {
+			const initialProps = attributes
+				.map((attribute: Attribute) => `${attribute.name}: ${attribute.value}`);
+
+			const initialPropString = stringifyProps(initialProps);
+
+			attributes
+				.filter((attribute: Attribute) => attribute.dynamic)
+				.forEach((attribute: Attribute) => {
+					if (attribute.dependencies.length) {
+						updates.push(deindent`
+							if (${attribute.dependencies
+								.map(dependency => `changed.${dependency}`)
+								.join(' || ')}) ${name}_changes.${attribute.name} = ${attribute.value};
+						`);
+					}
+
+					else {
+						// TODO this is an odd situation to encounter – I *think* it should only happen with
+						// each block indices, in which case it may be possible to optimise this
+						updates.push(`${name}_changes.${attribute.name} = ${attribute.value};`);
+					}
+				});
+
+			if (bindings.length) {
+				generator.hasComplexBindings = true;
+
+				name_updating = block.alias(`${name}_updating`);
+				name_initial_data = block.getUniqueName(`${name}_initial_data`);
+
+				block.addVariable(name_updating, '{}');
+				statements.push(`var ${name_initial_data} = ${initialPropString};`);
+
+				const setParentFromChildOnChange = new CodeBuilder();
+				const setParentFromChildOnInit = new CodeBuilder();
+
+				bindings.forEach((binding: Binding) => {
+					let setParentFromChild;
+
+					binding.contexts.forEach(context => {
+						allContexts.add(context);
+					});
+
+					const { name: key } = getObject(binding.value);
+
+					if (block.contexts.has(key)) {
+						const prop = binding.dependencies[0];
+						const computed = isComputed(binding.value);
+						const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : '';
+
+						setParentFromChild = deindent`
+							var list = ${name_context}.${block.listNames.get(key)};
+							var index = ${name_context}.${block.indexNames.get(key)};
+							list[index]${tail} = childState.${binding.name};
+
+							${binding.dependencies
+								.map((prop: string) => `newState.${prop} = state.${prop};`)
+								.join('\n')}
+						`;
+					}
+
+					else if (binding.value.type === 'MemberExpression') {
+						setParentFromChild = deindent`
+							${binding.snippet} = childState.${binding.name};
+							${binding.dependencies.map((prop: string) => `newState.${prop} = state.${prop};`).join('\n')}
+						`;
+					}
+
+					else {
+						setParentFromChild = `newState.${binding.value.name} = childState.${binding.name};`;
+					}
+
+					statements.push(deindent`
+						if (${binding.prop} in ${binding.obj}) {
+							${name_initial_data}.${binding.name} = ${binding.snippet};
+							${name_updating}.${binding.name} = true;
+						}`
+					);
+
+					setParentFromChildOnChange.addConditional(
+						`!${name_updating}.${binding.name} && changed.${binding.name}`,
+						setParentFromChild
+					);
+
+					setParentFromChildOnInit.addConditional(
+						`!${name_updating}.${binding.name}`,
+						setParentFromChild
+					);
+
+					// TODO could binding.dependencies.length ever be 0?
+					if (binding.dependencies.length) {
+						updates.push(deindent`
+							if (!${name_updating}.${binding.name} && ${binding.dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
+								${name}_changes.${binding.name} = ${binding.snippet};
+								${name_updating}.${binding.name} = true;
+							}
+						`);
+					}
+				});
+
+				componentInitProperties.push(`data: ${name_initial_data}`);
+
+				componentInitProperties.push(deindent`
+					_bind: function(changed, childState) {
+						var state = #component.get(), newState = {};
+						${setParentFromChildOnChange}
+						${name_updating} = @assign({}, changed);
+						#component._set(newState);
+						${name_updating} = {};
+					}
+				`);
+
+				beforecreate = deindent`
+					#component._root._beforecreate.push(function() {
+						var state = #component.get(), childState = ${name}.get(), newState = {};
+						if (!childState) return;
+						${setParentFromChildOnInit}
+						${name_updating} = { ${bindings.map((binding: Binding) => `${binding.name}: true`).join(', ')} };
+						#component._set(newState);
+						${name_updating} = {};
+					});
+				`;
+			} else if (initialProps.length) {
+				componentInitProperties.push(`data: ${initialPropString}`);
+			}
+		}
+
+		const isDynamicComponent = this.name === ':Component';
+
+		const switch_vars = isDynamicComponent && {
+			value: block.getUniqueName('switch_value'),
+			props: block.getUniqueName('switch_props')
+		};
+
+		const expression = (
+			this.name === ':Self' ? generator.name :
+			isDynamicComponent ? switch_vars.value :
+			`%components-${this.name}`
+		);
+
+		if (isDynamicComponent) {
+			block.contextualise(this.expression);
+			const { dependencies, snippet } = this.metadata;
+
+			const anchor = this.getOrCreateAnchor(block, parentNode);
+
+			const params = block.params.join(', ');
+
+			block.builders.init.addBlock(deindent`
+				var ${switch_vars.value} = ${snippet};
+
+				function ${switch_vars.props}(${params}) {
+					return {
+						${componentInitProperties.join(',\n')}
+					};
+				}
+
+				if (${switch_vars.value}) {
+					${statements.length > 0 && statements.join('\n')}
+					var ${name} = new ${expression}(${switch_vars.props}(${params}));
+
+					${beforecreate}
+				}
+
+				${eventHandlers.map(handler => deindent`
+					function ${handler.var}(event) {
+						${handler.body}
+					}
+
+					if (${name}) ${name}.on("${handler.name}", ${handler.var});
+				`)}
+			`);
+
+			block.builders.create.addLine(
+				`if (${name}) ${name}._fragment.c();`
+			);
+
+			block.builders.claim.addLine(
+				`if (${name}) ${name}._fragment.l(${parentNodes});`
+			);
+
+			block.builders.mount.addLine(
+				`if (${name}) ${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
+			);
+
+			block.builders.update.addBlock(deindent`
+				if (${switch_vars.value} !== (${switch_vars.value} = ${snippet})) {
+					if (${name}) ${name}.destroy();
+
+					if (${switch_vars.value}) {
+						${name} = new ${switch_vars.value}(${switch_vars.props}(${params}));
+						${name}._fragment.c();
+
+						${this.children.map(child => remount(generator, child, name))}
+						${name}._mount(${anchor}.parentNode, ${anchor});
+
+						${eventHandlers.map(handler => deindent`
+							${name}.on("${handler.name}", ${handler.var});
+						`)}
+
+						${ref && `#component.refs.${ref.name} = ${name};`}
+					}
+
+					${ref && deindent`
+						else if (#component.refs.${ref.name} === ${name}) {
+							#component.refs.${ref.name} = null;
+						}`}
+				}
+			`);
+
+			if (updates.length) {
+				block.builders.update.addBlock(deindent`
+					else {
+						var ${name}_changes = {};
+						${updates.join('\n')}
+						${name}._set(${name}_changes);
+						${bindings.length && `${name_updating} = {};`}
+					}
+				`);
+			}
+
+			if (!parentNode) block.builders.unmount.addLine(`if (${name}) ${name}._unmount();`);
+
+			block.builders.destroy.addLine(`if (${name}) ${name}.destroy(false);`);
+		} else {
+			block.builders.init.addBlock(deindent`
+				${statements.join('\n')}
+				var ${name} = new ${expression}({
+					${componentInitProperties.join(',\n')}
+				});
+
+				${beforecreate}
+
+				${eventHandlers.map(handler => deindent`
+					${name}.on("${handler.name}", function(event) {
+						${handler.body}
+					});
+				`)}
+
+				${ref && `#component.refs.${ref.name} = ${name};`}
+			`);
+
+			block.builders.create.addLine(`${name}._fragment.c();`);
+
+			block.builders.claim.addLine(
+				`${name}._fragment.l(${parentNodes});`
+			);
+
+			block.builders.mount.addLine(
+				`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
+			);
+
+			if (updates.length) {
+				block.builders.update.addBlock(deindent`
+					var ${name}_changes = {};
+					${updates.join('\n')}
+					${name}._set(${name}_changes);
+					${bindings.length && `${name_updating} = {};`}
+				`);
+			}
+
+			if (!parentNode) block.builders.unmount.addLine(`${name}._unmount();`);
+
+			block.builders.destroy.addLine(deindent`
+				${name}.destroy(false);
+				${ref && `if (#component.refs.${ref.name} === ${name}) #component.refs.${ref.name} = null;`}
+			`);
+		}
+
+		// maintain component context
+		if (allContexts.size) {
+			const contexts = Array.from(allContexts);
+
+			const initialProps = contexts
+				.map(contextName => {
+					if (contextName === 'state') return `state: state`;
+
+					const listName = block.listNames.get(contextName);
+					const indexName = block.indexNames.get(contextName);
+
+					return `${listName}: ${listName},\n${indexName}: ${indexName}`;
+				})
+				.join(',\n');
+
+			const updates = contexts
+				.map(contextName => {
+					if (contextName === 'state') return `${name_context}.state = state;`;
+
+					const listName = block.listNames.get(contextName);
+					const indexName = block.indexNames.get(contextName);
+
+					return `${name_context}.${listName} = ${listName};\n${name_context}.${indexName} = ${indexName};`;
+				})
+				.join('\n');
+
+			block.builders.init.addBlock(deindent`
+				var ${name_context} = {
+					${initialProps}
+				};
+			`);
+
+			block.builders.update.addBlock(updates);
+		}
+	}
+}
+
+function mungeAttribute(attribute: Node, block: Block): Attribute {
+	if (attribute.value === true) {
+		// attributes without values, e.g. <textarea readonly>
+		return {
+			name: attribute.name,
+			value: true,
+			dynamic: false
+		};
+	}
+
+	if (attribute.value.length === 0) {
+		return {
+			name: attribute.name,
+			value: `''`,
+			dynamic: false
+		};
+	}
+
+	if (attribute.value.length === 1) {
+		const value = attribute.value[0];
+
+		if (value.type === 'Text') {
+			// static attributes
+			return {
+				name: attribute.name,
+				value: isNaN(value.data) ? stringify(value.data) : value.data,
+				dynamic: false
+			};
+		}
+
+		// simple dynamic attributes
+		block.contextualise(value.expression); // TODO remove
+		const { dependencies, snippet } = value.metadata;
+
+		// TODO only update attributes that have changed
+		return {
+			name: attribute.name,
+			value: snippet,
+			dependencies,
+			dynamic: true
+		};
+	}
+
+	// otherwise we're dealing with a complex dynamic attribute
+	const allDependencies = new Set();
+
+	const value =
+		(attribute.value[0].type === 'Text' ? '' : `"" + `) +
+		attribute.value
+			.map((chunk: Node) => {
+				if (chunk.type === 'Text') {
+					return stringify(chunk.data);
+				} else {
+					block.contextualise(chunk.expression); // TODO remove
+					const { dependencies, snippet } = chunk.metadata;
+
+					dependencies.forEach((dependency: string) => {
+						allDependencies.add(dependency);
+					});
+
+					return getExpressionPrecedence(chunk.expression) <= 13 ? `(${snippet})` : snippet;
+				}
+			})
+			.join(' + ');
+
+	return {
+		name: attribute.name,
+		value,
+		dependencies: Array.from(allDependencies),
+		dynamic: true
+	};
+}
+
+function mungeBinding(binding: Node, block: Block): Binding {
+	const { name } = getObject(binding.value);
+	const { contexts } = block.contextualise(binding.value);
+	const { dependencies, snippet } = binding.metadata;
+
+	const contextual = block.contexts.has(name);
+
+	let obj;
+	let prop;
+
+	if (contextual) {
+		obj = block.listNames.get(name);
+		prop = block.indexNames.get(name);
+	} else if (binding.value.type === 'MemberExpression') {
+		prop = `[✂${binding.value.property.start}-${binding.value.property.end}✂]`;
+		if (!binding.value.computed) prop = `'${prop}'`;
+		obj = `[✂${binding.value.object.start}-${binding.value.object.end}✂]`;
+	} else {
+		obj = 'state';
+		prop = `'${name}'`;
+	}
+
+	return {
+		name: binding.name,
+		value: binding.value,
+		contexts,
+		snippet,
+		obj,
+		prop,
+		dependencies
+	};
+}
+
+function mungeEventHandler(generator: DomGenerator, node: Node, handler: Node, block: Block, name_context: string, allContexts: Set<string>) {
+	let body;
+
+	if (handler.expression) {
+		generator.addSourcemapLocations(handler.expression);
+		generator.code.prependRight(
+			handler.expression.start,
+			`${block.alias('component')}.`
+		);
+
+		const usedContexts: string[] = [];
+
+		handler.expression.arguments.forEach((arg: Node) => {
+			const { contexts } = block.contextualise(arg, null, true);
+
+			contexts.forEach(context => {
+				if (!~usedContexts.indexOf(context)) usedContexts.push(context);
+				allContexts.add(context);
+			});
+		});
+
+		// TODO hoist event handlers? can do `this.__component.method(...)`
+		const declarations = usedContexts.map(name => {
+			if (name === 'state') return `var state = ${name_context}.state;`;
+
+			const listName = block.listNames.get(name);
+			const indexName = block.indexNames.get(name);
+
+			return `var ${listName} = ${name_context}.${listName}, ${indexName} = ${name_context}.${indexName}, ${name} = ${listName}[${indexName}]`;
+		});
+
+		body = deindent`
+			${declarations}
+
+			[✂${handler.expression.start}-${handler.expression.end}✂];
+		`;
+	} else {
+		body = deindent`
+			${block.alias('component')}.fire('${handler.name}', event);
+		`;
+	}
+
+	return {
+		name: handler.name,
+		var: block.getUniqueName(`${node.var}_${handler.name}`),
+		body
+	};
+}
+
+function isComputed(node: Node) {
+	while (node.type === 'MemberExpression') {
+		if (node.computed) return true;
+		node = node.object;
+	}
+
+	return false;
+}
+
+function remount(generator: DomGenerator, node: Node, name: string) {
+	// TODO make this a method of the nodes
+
+	if (node.type === 'Component') {
+		return `${node.var}._mount(${name}._slotted.default, null);`;
+	}
+
+	if (node.type === 'Element') {
+		const slot = node.attributes.find(attribute => attribute.name === 'slot');
+		if (slot) {
+			return `@appendNode(${node.var}, ${name}._slotted.${node.getStaticAttributeValue('slot')});`;
+		}
+
+		return `@appendNode(${node.var}, ${name}._slotted.default);`;
+	}
+
+	if (node.type === 'Text' || node.type === 'MustacheTag' || node.type === 'RawMustacheTag') {
+		return `@appendNode(${node.var}, ${name}._slotted.default);`;
+	}
+
+	if (node.type === 'EachBlock') {
+		// TODO consider keyed blocks
+		return `for (var #i = 0; #i < ${node.iterations}.length; #i += 1) ${node.iterations}[#i].m(${name}._slotted.default, null);`;
+	}
+
+	return `${node.var}.m(${name}._slotted.default, null);`;
+}
\ No newline at end of file
diff --git a/src/generators/nodes/EachBlock.ts b/src/generators/nodes/EachBlock.ts
new file mode 100644
index 0000000000..809eaf9397
--- /dev/null
+++ b/src/generators/nodes/EachBlock.ts
@@ -0,0 +1,580 @@
+import deindent from '../../utils/deindent';
+import Node from './shared/Node';
+import ElseBlock from './ElseBlock';
+import { DomGenerator } from '../dom/index';
+import Block from '../dom/Block';
+import createDebuggingComment from '../../utils/createDebuggingComment';
+
+export default class EachBlock extends Node {
+	type: 'EachBlock';
+
+	block: Block;
+	expression: Node;
+
+	iterations: string;
+	index: string;
+	context: string;
+	key: string;
+	destructuredContexts: string[];
+
+	children: Node[];
+	else?: ElseBlock;
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		this.cannotUseInnerHTML();
+
+		this.var = block.getUniqueName(`each`);
+		this.iterations = block.getUniqueName(`${this.var}_blocks`);
+
+		const { dependencies } = this.metadata;
+		block.addDependencies(dependencies);
+
+		const indexNames = new Map(block.indexNames);
+		const indexName =
+			this.index || block.getUniqueName(`${this.context}_index`);
+		indexNames.set(this.context, indexName);
+
+		const listNames = new Map(block.listNames);
+		const listName = block.getUniqueName(
+			(this.expression.type === 'MemberExpression' && !this.expression.computed) ? this.expression.property.name :
+			this.expression.type === 'Identifier' ? this.expression.name :
+			`each_value`
+		);
+		listNames.set(this.context, listName);
+
+		const context = block.getUniqueName(this.context);
+		const contexts = new Map(block.contexts);
+		contexts.set(this.context, context);
+
+		const indexes = new Map(block.indexes);
+		if (this.index) indexes.set(this.index, this.context);
+
+		const changeableIndexes = new Map(block.changeableIndexes);
+		if (this.index) changeableIndexes.set(this.index, this.key);
+
+		if (this.destructuredContexts) {
+			for (let i = 0; i < this.destructuredContexts.length; i += 1) {
+				contexts.set(this.destructuredContexts[i], `${context}[${i}]`);
+			}
+		}
+
+		this.block = block.child({
+			comment: createDebuggingComment(this, this.generator),
+			name: this.generator.getUniqueName('create_each_block'),
+			context: this.context,
+			key: this.key,
+
+			contexts,
+			indexes,
+			changeableIndexes,
+
+			listName,
+			indexName,
+
+			indexNames,
+			listNames,
+			params: block.params.concat(listName, context, indexName),
+		});
+
+		this.generator.blocks.push(this.block);
+		this.initChildren(this.block, stripWhitespace, nextSibling);
+		block.addDependencies(this.block.dependencies);
+		this.block.hasUpdateMethod = this.block.dependencies.size > 0;
+
+		if (this.else) {
+			this.else.block = block.child({
+				comment: createDebuggingComment(this.else, this.generator),
+				name: this.generator.getUniqueName(`${this.block.name}_else`),
+			});
+
+			this.generator.blocks.push(this.else.block);
+			this.else.initChildren(
+				this.else.block,
+				stripWhitespace,
+				nextSibling
+			);
+			this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
+		}
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+
+		const each = this.var;
+
+		const create_each_block = this.block.name;
+		const each_block_value = this.block.listName;
+		const iterations = this.iterations;
+		const params = block.params.join(', ');
+
+		const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
+		const anchor = needsAnchor
+			? block.getUniqueName(`${each}_anchor`)
+			: (this.next && this.next.var) || 'null';
+
+		// hack the sourcemap, so that if data is missing the bug
+		// is easy to find
+		let c = this.start + 3;
+		while (generator.source[c] !== 'e') c += 1;
+		generator.code.overwrite(c, c + 4, 'length');
+		const length = `[✂${c}-${c+4}✂]`;
+
+		const mountOrIntro = this.block.hasIntroMethod ? 'i' : 'm';
+		const vars = {
+			each,
+			create_each_block,
+			each_block_value,
+			length,
+			iterations,
+			params,
+			anchor,
+			mountOrIntro,
+		};
+
+		block.contextualise(this.expression);
+		const { snippet } = this.metadata;
+
+		block.builders.init.addLine(`var ${each_block_value} = ${snippet};`);
+
+		if (this.key) {
+			this.buildKeyed(block, parentNode, parentNodes, snippet, vars);
+		} else {
+			this.buildUnkeyed(block, parentNode, parentNodes, snippet, vars);
+		}
+
+		if (needsAnchor) {
+			block.addElement(
+				anchor,
+				`@createComment()`,
+				`@createComment()`,
+				parentNode
+			);
+		}
+
+		if (this.else) {
+			const each_block_else = generator.getUniqueName(`${each}_else`);
+
+			block.builders.init.addLine(`var ${each_block_else} = null;`);
+
+			// 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} = ${this.else.block.name}(${params}, #component);
+					${each_block_else}.c();
+				}
+			`);
+
+			block.builders.mount.addBlock(deindent`
+				if (${each_block_else}) {
+					${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
+				}
+			`);
+
+			const initialMountNode = parentNode || `${anchor}.parentNode`;
+
+			if (this.else.block.hasUpdateMethod) {
+				block.builders.update.addBlock(deindent`
+					if (!${each_block_value}.${length} && ${each_block_else}) {
+						${each_block_else}.p( changed, ${params} );
+					} else if (!${each_block_value}.${length}) {
+						${each_block_else} = ${this.else.block.name}(${params}, #component);
+						${each_block_else}.c();
+						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
+					} else if (${each_block_else}) {
+						${each_block_else}.u();
+						${each_block_else}.d();
+						${each_block_else} = null;
+					}
+				`);
+			} else {
+				block.builders.update.addBlock(deindent`
+					if (${each_block_value}.${length}) {
+						if (${each_block_else}) {
+							${each_block_else}.u();
+							${each_block_else}.d();
+							${each_block_else} = null;
+						}
+					} else if (!${each_block_else}) {
+						${each_block_else} = ${this.else.block.name}(${params}, #component);
+						${each_block_else}.c();
+						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
+					}
+				`);
+			}
+
+			block.builders.unmount.addLine(
+				`if (${each_block_else}) ${each_block_else}.u()`
+			);
+
+			block.builders.destroy.addBlock(deindent`
+				if (${each_block_else}) ${each_block_else}.d();
+			`);
+		}
+
+		this.children.forEach((child: Node) => {
+			child.build(this.block, null, 'nodes');
+		});
+
+		if (this.else) {
+			this.else.children.forEach((child: Node) => {
+				child.build(this.else.block, null, 'nodes');
+			});
+		}
+	}
+
+	buildKeyed(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		snippet: string,
+		{
+			each,
+			create_each_block,
+			each_block_value,
+			length,
+			params,
+			anchor,
+			mountOrIntro,
+		}
+	) {
+		const key = block.getUniqueName('key');
+		const lookup = block.getUniqueName(`${each}_lookup`);
+		const iteration = block.getUniqueName(`${each}_iteration`);
+		const head = block.getUniqueName(`${each}_head`);
+		const last = block.getUniqueName(`${each}_last`);
+		const expected = block.getUniqueName(`${each}_expected`);
+
+		block.addVariable(lookup, `@blankObject()`);
+		block.addVariable(head);
+		block.addVariable(last);
+
+		if (this.children[0].isDomNode()) {
+			this.block.first = this.children[0].var;
+		} else {
+			this.block.first = this.block.getUniqueName('first');
+			this.block.addElement(
+				this.block.first,
+				`@createComment()`,
+				`@createComment()`,
+				null
+			);
+		}
+
+		block.builders.init.addBlock(deindent`
+			for (var #i = 0; #i < ${each_block_value}.${length}; #i += 1) {
+				var ${key} = ${each_block_value}[#i].${this.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};
+				${last} = ${iteration};
+
+				if (#i === 0) ${head} = ${iteration};
+			}
+		`);
+
+		const initialMountNode = parentNode || '#target';
+		const updateMountNode = this.getUpdateMountNode(anchor);
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.create.addBlock(deindent`
+			var ${iteration} = ${head};
+			while (${iteration}) {
+				${iteration}.c();
+				${iteration} = ${iteration}.next;
+			}
+		`);
+
+		block.builders.claim.addBlock(deindent`
+			var ${iteration} = ${head};
+			while (${iteration}) {
+				${iteration}.l(${parentNodes});
+				${iteration} = ${iteration}.next;
+			}
+		`);
+
+		block.builders.mount.addBlock(deindent`
+			var ${iteration} = ${head};
+			while (${iteration}) {
+				${iteration}.${mountOrIntro}(${initialMountNode}, ${anchorNode});
+				${iteration} = ${iteration}.next;
+			}
+		`);
+
+		const dynamic = this.block.hasUpdateMethod;
+
+		let destroy;
+		if (this.block.hasOutroMethod) {
+			const fn = block.getUniqueName(`${each}_outro`);
+			block.builders.init.addBlock(deindent`
+				function ${fn}(iteration) {
+					iteration.o(function() {
+						iteration.u();
+						iteration.d();
+						${lookup}[iteration.key] = null;
+					});
+				}
+			`);
+
+			destroy = deindent`
+				while (${expected}) {
+					${fn}(${expected});
+					${expected} = ${expected}.next;
+				}
+
+				for (#i = 0; #i < discard_pile.length; #i += 1) {
+					if (discard_pile[#i].discard) {
+						${fn}(discard_pile[#i]);
+					}
+				}
+			`;
+		} else {
+			const fn = block.getUniqueName(`${each}_destroy`);
+			block.builders.init.addBlock(deindent`
+				function ${fn}(iteration) {
+					iteration.u();
+					iteration.d();
+					${lookup}[iteration.key] = null;
+				}
+			`);
+
+			destroy = deindent`
+				while (${expected}) {
+					${fn}(${expected});
+					${expected} = ${expected}.next;
+				}
+
+				for (#i = 0; #i < discard_pile.length; #i += 1) {
+					var ${iteration} = discard_pile[#i];
+					if (${iteration}.discard) {
+						${fn}(${iteration});
+					}
+				}
+			`;
+		}
+
+		block.builders.update.addBlock(deindent`
+			var ${each_block_value} = ${snippet};
+
+			var ${expected} = ${head};
+			var ${last} = null;
+
+			var discard_pile = [];
+
+			for (#i = 0; #i < ${each_block_value}.${length}; #i += 1) {
+				var ${key} = ${each_block_value}[#i].${this.key};
+				var ${iteration} = ${lookup}[${key}];
+
+				${dynamic &&
+					`if (${iteration}) ${iteration}.p(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);`}
+
+				if (${expected}) {
+					if (${key} === ${expected}.key) {
+						${expected} = ${expected}.next;
+					} else {
+						if (${iteration}) {
+							// probably a deletion
+							while (${expected} && ${expected}.key !== ${key}) {
+								${expected}.discard = true;
+								discard_pile.push(${expected});
+								${expected} = ${expected}.next;
+							};
+
+							${expected} = ${expected} && ${expected}.next;
+							${iteration}.discard = false;
+							${iteration}.last = ${last};
+
+							if (!${expected}) ${iteration}.m(${updateMountNode}, ${anchor});
+						} else {
+							// key is being inserted
+							${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
+							${iteration}.c();
+							${iteration}.${mountOrIntro}(${updateMountNode}, ${expected}.first);
+
+							${expected}.last = ${iteration};
+							${iteration}.next = ${expected};
+						}
+					}
+				} else {
+					// we're appending from this point forward
+					if (${iteration}) {
+						${iteration}.discard = false;
+						${iteration}.next = null;
+						${iteration}.m(${updateMountNode}, ${anchor});
+					} else {
+						${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
+						${iteration}.c();
+						${iteration}.${mountOrIntro}(${updateMountNode}, ${anchor});
+					}
+				}
+
+				if (${last}) ${last}.next = ${iteration};
+				${iteration}.last = ${last};
+				${this.block.hasIntroMethod && `${iteration}.i(${updateMountNode}, ${anchor});`}
+				${last} = ${iteration};
+			}
+
+			if (${last}) ${last}.next = null;
+
+			${destroy}
+
+			${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${this.key}];
+		`);
+
+		if (!parentNode) {
+			block.builders.unmount.addBlock(deindent`
+				var ${iteration} = ${head};
+				while (${iteration}) {
+					${iteration}.u();
+					${iteration} = ${iteration}.next;
+				}
+			`);
+		}
+
+		block.builders.destroy.addBlock(deindent`
+			var ${iteration} = ${head};
+			while (${iteration}) {
+				${iteration}.d();
+				${iteration} = ${iteration}.next;
+			}
+		`);
+	}
+
+	buildUnkeyed(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		snippet: string,
+		{
+			create_each_block,
+			each_block_value,
+			length,
+			iterations,
+			params,
+			anchor,
+			mountOrIntro,
+		}
+	) {
+		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, #component);
+			}
+		`);
+
+		const initialMountNode = parentNode || '#target';
+		const updateMountNode = this.getUpdateMountNode(anchor);
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.create.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].c();
+			}
+		`);
+
+		block.builders.claim.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].l(${parentNodes});
+			}
+		`);
+
+		block.builders.mount.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
+			}
+		`);
+
+		const allDependencies = new Set(this.block.dependencies);
+		const { dependencies } = this.metadata;
+		dependencies.forEach((dependency: string) => {
+			allDependencies.add(dependency);
+		});
+
+		// TODO do this for keyed blocks as well
+		const condition = Array.from(allDependencies)
+			.map(dependency => `changed.${dependency}`)
+			.join(' || ');
+
+		if (condition !== '') {
+			const forLoopBody = this.block.hasUpdateMethod
+				? this.block.hasIntroMethod
+					? deindent`
+						if (${iterations}[#i]) {
+							${iterations}[#i].p(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, #component);
+							${iterations}[#i].c();
+						}
+						${iterations}[#i].i(${updateMountNode}, ${anchor});
+					`
+					: deindent`
+						if (${iterations}[#i]) {
+							${iterations}[#i].p(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, #component);
+							${iterations}[#i].c();
+							${iterations}[#i].m(${updateMountNode}, ${anchor});
+						}
+					`
+				: deindent`
+					${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
+					${iterations}[#i].c();
+					${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor});
+				`;
+
+			const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
+
+			const outro = block.getUniqueName('outro');
+			const destroy = this.block.hasOutroMethod
+				? deindent`
+					function ${outro}(i) {
+						if (${iterations}[i]) {
+							${iterations}[i].o(function() {
+								${iterations}[i].u();
+								${iterations}[i].d();
+								${iterations}[i] = null;
+							});
+						}
+					}
+
+					for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
+				`
+				: deindent`
+					for (; #i < ${iterations}.length; #i += 1) {
+						${iterations}[#i].u();
+						${iterations}[#i].d();
+					}
+					${iterations}.length = ${each_block_value}.${length};
+				`;
+
+			block.builders.update.addBlock(deindent`
+				var ${each_block_value} = ${snippet};
+
+				if (${condition}) {
+					for (var #i = ${start}; #i < ${each_block_value}.${length}; #i += 1) {
+						${forLoopBody}
+					}
+
+					${destroy}
+				}
+			`);
+		}
+
+		block.builders.unmount.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].u();
+			}
+		`);
+
+		block.builders.destroy.addBlock(`@destroyEach(${iterations});`);
+	}
+}
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
new file mode 100644
index 0000000000..62b76eb6ed
--- /dev/null
+++ b/src/generators/nodes/Element.ts
@@ -0,0 +1,744 @@
+import deindent from '../../utils/deindent';
+import { stringify } from '../../utils/stringify';
+import flattenReference from '../../utils/flattenReference';
+import isVoidElementName from '../../utils/isVoidElementName';
+import validCalleeObjects from '../../utils/validCalleeObjects';
+import reservedNames from '../../utils/reservedNames';
+import Node from './shared/Node';
+import Block from '../dom/Block';
+import Attribute from './Attribute';
+import Binding from './Binding';
+import EventHandler from './EventHandler';
+import Ref from './Ref';
+import Transition from './Transition';
+import Text from './Text';
+import * as namespaces from '../../utils/namespaces';
+
+export default class Element extends Node {
+	type: 'Element';
+	name: string;
+	attributes: (Attribute | Binding | EventHandler | Ref | Transition)[]; // TODO split these up sooner
+	children: Node[];
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		if (this.name === 'slot' || this.name === 'option') {
+			this.cannotUseInnerHTML();
+		}
+
+		const parentElement = this.parent && this.parent.findNearest('Element');
+		this.namespace = this.name === 'svg' ?
+			namespaces.svg :
+			parentElement ? parentElement.namespace : this.generator.namespace;
+
+		this.attributes.forEach(attribute => {
+			if (attribute.type === 'Attribute' && attribute.value !== true) {
+				// special case — xmlns
+				if (attribute.name === 'xmlns') {
+					// TODO this attribute must be static – enforce at compile time
+					this.namespace = attribute.value[0].data;
+				}
+
+				attribute.value.forEach((chunk: Node) => {
+					if (chunk.type !== 'Text') {
+						if (this.parent) this.parent.cannotUseInnerHTML();
+
+						const dependencies = chunk.metadata.dependencies;
+						block.addDependencies(dependencies);
+
+						// special case — <option value='{{foo}}'> — see below
+						if (
+							this.name === 'option' &&
+							attribute.name === 'value'
+						) {
+							let select = this.parent;
+							while (select && select.type !== 'Element' || select.name !== 'select') select = select.parent;
+
+							if (select && select.selectBindingDependencies) {
+								select.selectBindingDependencies.forEach(prop => {
+									dependencies.forEach((dependency: string) => {
+										this.generator.indirectDependencies.get(prop).add(dependency);
+									});
+								});
+							}
+						}
+					}
+				});
+			} else {
+				if (this.parent) this.parent.cannotUseInnerHTML();
+
+				if (attribute.type === 'EventHandler' && attribute.expression) {
+					attribute.expression.arguments.forEach((arg: Node) => {
+						block.addDependencies(arg.metadata.dependencies);
+					});
+				} else if (attribute.type === 'Binding') {
+					block.addDependencies(attribute.metadata.dependencies);
+				} else if (attribute.type === 'Transition') {
+					if (attribute.intro)
+						this.generator.hasIntroTransitions = block.hasIntroMethod = true;
+					if (attribute.outro) {
+						this.generator.hasOutroTransitions = block.hasOutroMethod = true;
+						block.outros += 1;
+					}
+				}
+			}
+		});
+
+		const valueAttribute = this.attributes.find((attribute: Attribute) => attribute.name === 'value');
+
+		if (this.name === 'textarea') {
+			// this is an egregious hack, but it's the easiest way to get <textarea>
+			// children treated the same way as a value attribute
+			if (this.children.length > 0) {
+				this.attributes.push(new Attribute({
+					generator: this.generator,
+					name: 'value',
+					value: this.children,
+					parent: this
+				}));
+
+				this.children = [];
+			}
+		}
+
+		// special case — in a case like this...
+		//
+		//   <select bind:value='foo'>
+		//     <option value='{{bar}}'>bar</option>
+		//     <option value='{{baz}}'>baz</option>
+		//   </option>
+		//
+		// ...we need to know that `foo` depends on `bar` and `baz`,
+		// so that if `foo.qux` changes, we know that we need to
+		// mark `bar` and `baz` as dirty too
+		if (this.name === 'select') {
+			const binding = this.attributes.find(node => node.type === 'Binding' && node.name === 'value');
+			if (binding) {
+				// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
+				const dependencies = binding.metadata.dependencies;
+				this.selectBindingDependencies = dependencies;
+				dependencies.forEach((prop: string) => {
+					this.generator.indirectDependencies.set(prop, new Set());
+				});
+			} else {
+				this.selectBindingDependencies = null;
+			}
+		}
+
+		const slot = this.getStaticAttributeValue('slot');
+		if (slot && this.hasAncestor('Component')) {
+			this.cannotUseInnerHTML();
+			this.slotted = true;
+			// TODO validate slots — no nesting, no dynamic names...
+			const component = this.findNearest('Component');
+			component._slots.add(slot);
+		}
+
+		this.var = block.getUniqueName(
+			this.name.replace(/[^a-zA-Z0-9_$]/g, '_')
+		);
+
+		this.generator.stylesheet.apply(this);
+
+		if (this.children.length) {
+			if (this.name === 'pre' || this.name === 'textarea') stripWhitespace = false;
+			this.initChildren(block, stripWhitespace, nextSibling);
+		}
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+
+		if (this.name === 'slot') {
+			const slotName = this.getStaticAttributeValue('name') || 'default';
+			this.generator.slots.add(slotName);
+		}
+
+		const childState = {
+			parentNode: this.var,
+			parentNodes: block.getUniqueName(`${this.var}_nodes`)
+		};
+
+		const name = this.var;
+		const allUsedContexts: Set<string> = new Set();
+
+		const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
+		const initialMountNode = this.slotted ?
+			`${this.findNearest('Component').var}._slotted.${slot.value[0].data}` : // TODO this looks bonkers
+			parentNode;
+
+		block.addVariable(name);
+		block.builders.create.addLine(
+			`${name} = ${getRenderStatement(
+				this.generator,
+				this.namespace,
+				this.name
+			)};`
+		);
+
+		if (this.generator.hydratable) {
+			block.builders.claim.addBlock(deindent`
+				${name} = ${getClaimStatement(generator, this.namespace, parentNodes, this)};
+				var ${childState.parentNodes} = @children(${name});
+			`);
+		}
+
+		if (initialMountNode) {
+			block.builders.mount.addLine(
+				`@appendNode(${name}, ${initialMountNode});`
+			);
+		} else {
+			block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
+
+			// 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});`);
+		}
+
+		// add CSS encapsulation attribute
+		if (this._needsCssAttribute && !this.generator.customElement) {
+			this.generator.needsEncapsulateHelper = true;
+			block.builders.hydrate.addLine(
+				`@encapsulateStyles(${name});`
+			);
+
+			if (this._cssRefAttribute) {
+				block.builders.hydrate.addLine(
+					`@setAttribute(${name}, "svelte-ref-${this._cssRefAttribute}", "");`
+				)
+			}
+		}
+
+		// insert static children with textContent or innerHTML
+		if (!this.namespace && this.canUseInnerHTML && this.children.length > 0) {
+			if (this.children.length === 1 && this.children[0].type === 'Text') {
+				block.builders.create.addLine(
+					`${name}.textContent = ${stringify(this.children[0].data)};`
+				);
+			} else {
+				block.builders.create.addLine(
+					`${name}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};`
+				);
+			}
+		} else {
+			this.children.forEach((child: Node) => {
+				child.build(block, childState.parentNode, childState.parentNodes);
+			});
+		}
+
+		this.addBindings(block, allUsedContexts);
+
+		this.attributes.filter((a: Attribute) => a.type === 'Attribute').forEach((attribute: Attribute) => {
+			attribute.render(block);
+		});
+
+		// event handlers
+		let eventHandlerUsesComponent = false;
+
+		this.attributes.filter((a: Node) => a.type === 'EventHandler').forEach((attribute: Node) => {
+			const isCustomEvent = generator.events.has(attribute.name);
+			const shouldHoist = !isCustomEvent && this.hasAncestor('EachBlock');
+
+			const context = shouldHoist ? null : name;
+			const usedContexts: string[] = [];
+
+			if (attribute.expression) {
+				generator.addSourcemapLocations(attribute.expression);
+
+				const flattened = flattenReference(attribute.expression.callee);
+				if (!validCalleeObjects.has(flattened.name)) {
+					// allow event.stopPropagation(), this.select() etc
+					// TODO verify that it's a valid callee (i.e. built-in or declared method)
+					generator.code.prependRight(
+						attribute.expression.start,
+						`${block.alias('component')}.`
+					);
+					if (shouldHoist) eventHandlerUsesComponent = true; // this feels a bit hacky but it works!
+				}
+
+				attribute.expression.arguments.forEach((arg: Node) => {
+					const { contexts } = block.contextualise(arg, context, true);
+
+					contexts.forEach(context => {
+						if (!~usedContexts.indexOf(context)) usedContexts.push(context);
+						allUsedContexts.add(context);
+					});
+				});
+			}
+
+			const ctx = context || 'this';
+			const declarations = usedContexts.map(name => {
+				if (name === 'state') {
+					if (shouldHoist) eventHandlerUsesComponent = true;
+					return `var state = ${block.alias('component')}.get();`;
+				}
+
+				const listName = block.listNames.get(name);
+				const indexName = block.indexNames.get(name);
+				const contextName = block.contexts.get(name);
+
+				return `var ${listName} = ${ctx}._svelte.${listName}, ${indexName} = ${ctx}._svelte.${indexName}, ${contextName} = ${listName}[${indexName}];`;
+			});
+
+			// get a name for the event handler that is globally unique
+			// if hoisted, locally unique otherwise
+			const handlerName = (shouldHoist ? generator : block).getUniqueName(
+				`${attribute.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
+			);
+
+			// create the handler body
+			const handlerBody = deindent`
+				${eventHandlerUsesComponent &&
+					`var ${block.alias('component')} = ${ctx}._svelte.component;`}
+				${declarations}
+				${attribute.expression ?
+					`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
+					`${block.alias('component')}.fire("${attribute.name}", event);`}
+			`;
+
+			if (isCustomEvent) {
+				block.addVariable(handlerName);
+
+				block.builders.hydrate.addBlock(deindent`
+					${handlerName} = %events-${attribute.name}.call(#component, ${name}, function(event) {
+						${handlerBody}
+					});
+				`);
+
+				block.builders.destroy.addLine(deindent`
+					${handlerName}.teardown();
+				`);
+			} else {
+				const handler = deindent`
+					function ${handlerName}(event) {
+						${handlerBody}
+					}
+				`;
+
+				if (shouldHoist) {
+					generator.blocks.push(handler);
+				} else {
+					block.builders.init.addBlock(handler);
+				}
+
+				block.builders.hydrate.addLine(
+					`@addListener(${name}, "${attribute.name}", ${handlerName});`
+				);
+
+				block.builders.destroy.addLine(
+					`@removeListener(${name}, "${attribute.name}", ${handlerName});`
+				);
+			}
+		});
+
+		// refs
+		this.attributes.filter((a: Node) => a.type === 'Ref').forEach((attribute: Node) => {
+			const ref = `#component.refs.${attribute.name}`;
+
+			block.builders.mount.addLine(
+				`${ref} = ${name};`
+			);
+
+			block.builders.destroy.addLine(
+				`if (${ref} === ${name}) ${ref} = null;`
+			);
+
+			generator.usesRefs = true; // so component.refs object is created
+		});
+
+		this.addTransitions(block);
+
+		if (allUsedContexts.size || eventHandlerUsesComponent) {
+			const initialProps: string[] = [];
+			const updates: string[] = [];
+
+			if (eventHandlerUsesComponent) {
+				initialProps.push(`component: #component`);
+			}
+
+			allUsedContexts.forEach((contextName: string) => {
+				if (contextName === 'state') return;
+
+				const listName = block.listNames.get(contextName);
+				const indexName = block.indexNames.get(contextName);
+
+				initialProps.push(
+					`${listName}: ${listName},\n${indexName}: ${indexName}`
+				);
+				updates.push(
+					`${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};`
+				);
+			});
+
+			if (initialProps.length) {
+				block.builders.hydrate.addBlock(deindent`
+					${name}._svelte = {
+						${initialProps.join(',\n')}
+					};
+				`);
+			}
+
+			if (updates.length) {
+				block.builders.update.addBlock(updates.join('\n'));
+			}
+		}
+
+		if (this.initialUpdate) {
+			block.builders.mount.addBlock(this.initialUpdate);
+		}
+
+		block.builders.claim.addLine(
+			`${childState.parentNodes}.forEach(@detachNode);`
+		);
+
+		function toHTML(node: Element | Text) {
+			if (node.type === 'Text') return node.data;
+
+			let open = `<${node.name}`;
+
+			if (node._needsCssAttribute) {
+				open += ` ${generator.stylesheet.id}`;
+			}
+
+			if (node._cssRefAttribute) {
+				open += ` svelte-ref-${node._cssRefAttribute}`;
+			}
+
+			node.attributes.forEach((attr: Node) => {
+				open += ` ${attr.name}${stringifyAttributeValue(attr.value)}`
+			});
+
+			if (isVoidElementName(node.name)) return open + '>';
+
+			return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
+		}
+	}
+
+	addBindings(
+		block: Block,
+		allUsedContexts: Set<string>
+	) {
+		const bindings: Binding[] = this.attributes.filter((a: Binding) => a.type === 'Binding');
+		if (bindings.length === 0) return;
+
+		if (this.name === 'select' || this.isMediaNode()) this.generator.hasComplexBindings = true;
+
+		const needsLock = this.name !== 'input' || !/radio|checkbox|range|color/.test(this.getStaticAttributeValue('type'));
+
+		const mungedBindings = bindings.map(binding => binding.munge(block, allUsedContexts));
+
+		const lock = mungedBindings.some(binding => binding.needsLock) ?
+			block.getUniqueName(`${this.var}_updating`) :
+			null;
+
+		if (lock) block.addVariable(lock, 'false');
+
+		const groups = events
+			.map(event => {
+				return {
+					events: event.eventNames,
+					bindings: mungedBindings.filter(binding => event.filter(this, binding.name))
+				};
+			})
+			.filter(group => group.bindings.length);
+
+		groups.forEach(group => {
+			const handler = block.getUniqueName(`${this.var}_${group.events.join('_')}_handler`);
+
+			const needsLock = group.bindings.some(binding => binding.needsLock);
+
+			group.bindings.forEach(binding => {
+				if (!binding.updateDom) return;
+
+				const updateConditions = needsLock ? [`!${lock}`] : [];
+				if (binding.updateCondition) updateConditions.push(binding.updateCondition);
+
+				block.builders.update.addLine(
+					updateConditions.length ? `if (${updateConditions.join(' && ')}) ${binding.updateDom}` : binding.updateDom
+				);
+			});
+
+			const usesContext = group.bindings.some(binding => binding.handler.usesContext);
+			const usesState = group.bindings.some(binding => binding.handler.usesState);
+			const usesStore = group.bindings.some(binding => binding.handler.usesStore);
+			const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
+
+			const props = new Set();
+			const storeProps = new Set();
+			group.bindings.forEach(binding => {
+				binding.handler.props.forEach(prop => {
+					props.add(prop);
+				});
+
+				binding.handler.storeProps.forEach(prop => {
+					storeProps.add(prop);
+				});
+			}); // TODO use stringifyProps here, once indenting is fixed
+
+			// media bindings — awkward special case. The native timeupdate events
+			// fire too infrequently, so we need to take matters into our
+			// own hands
+			let animation_frame;
+			if (group.events[0] === 'timeupdate') {
+				animation_frame = block.getUniqueName(`${this.var}_animationframe`);
+				block.addVariable(animation_frame);
+			}
+
+			block.builders.init.addBlock(deindent`
+				function ${handler}() {
+					${
+						animation_frame && deindent`
+							cancelAnimationFrame(${animation_frame});
+							if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
+					}
+					${usesContext && `var context = ${this.var}._svelte;`}
+					${usesState && `var state = #component.get();`}
+					${usesStore && `var $ = #component.store.get();`}
+					${needsLock && `${lock} = true;`}
+					${mutations.length > 0 && mutations}
+					${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
+					${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
+					${needsLock && `${lock} = false;`}
+				}
+			`);
+
+			group.events.forEach(name => {
+				block.builders.hydrate.addLine(
+					`@addListener(${this.var}, "${name}", ${handler});`
+				);
+
+				block.builders.destroy.addLine(
+					`@removeListener(${this.var}, "${name}", ${handler});`
+				);
+			});
+
+			const allInitialStateIsDefined = group.bindings
+				.map(binding => `'${binding.object}' in state`)
+				.join(' && ');
+
+			if (this.name === 'select' || group.bindings.find(binding => binding.name === 'indeterminate' || binding.isReadOnlyMediaAttribute)) {
+				this.generator.hasComplexBindings = true;
+
+				block.builders.hydrate.addLine(
+					`if (!(${allInitialStateIsDefined})) #component._root._beforecreate.push(${handler});`
+				);
+			}
+		});
+
+		this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
+	}
+
+	addTransitions(
+		block: Block
+	) {
+		const intro = this.attributes.find((a: Transition) => a.type === 'Transition' && a.intro);
+		const outro = this.attributes.find((a: Transition) => a.type === 'Transition' && a.outro);
+
+		if (!intro && !outro) return;
+
+		if (intro === outro) {
+			block.contextualise(intro.expression); // TODO remove all these
+
+			const name = block.getUniqueName(`${this.var}_transition`);
+			const snippet = intro.expression
+				? intro.metadata.snippet
+				: '{}';
+
+			block.addVariable(name);
+
+			const fn = `%transitions-${intro.name}`;
+
+			block.builders.intro.addBlock(deindent`
+				#component._root._aftercreate.push(function() {
+					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true, null);
+					${name}.run(true, function() {
+						#component.fire("intro.end", { node: ${this.var} });
+					});
+				});
+			`);
+
+			block.builders.outro.addBlock(deindent`
+				${name}.run(false, function() {
+					#component.fire("outro.end", { node: ${this.var} });
+					if (--#outros === 0) #outrocallback();
+					${name} = null;
+				});
+			`);
+		} else {
+			const introName = intro && block.getUniqueName(`${this.var}_intro`);
+			const outroName = outro && block.getUniqueName(`${this.var}_outro`);
+
+			if (intro) {
+				block.contextualise(intro.expression);
+
+				block.addVariable(introName);
+				const snippet = intro.expression
+					? intro.metadata.snippet
+					: '{}';
+
+				const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
+
+				if (outro) {
+					block.builders.intro.addBlock(deindent`
+						if (${introName}) ${introName}.abort();
+						if (${outroName}) ${outroName}.abort();
+					`);
+				}
+
+				block.builders.intro.addBlock(deindent`
+					#component._root._aftercreate.push(function() {
+						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true, null);
+						${introName}.run(true, function() {
+							#component.fire("intro.end", { node: ${this.var} });
+						});
+					});
+				`);
+			}
+
+			if (outro) {
+				block.contextualise(outro.expression);
+
+				block.addVariable(outroName);
+				const snippet = outro.expression
+					? outro.metadata.snippet
+					: '{}';
+
+				const fn = `%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
+				block.builders.outro.addBlock(deindent`
+					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false, null);
+					${outroName}.run(false, function() {
+						#component.fire("outro.end", { node: ${this.var} });
+						if (--#outros === 0) #outrocallback();
+					});
+				`);
+			}
+		}
+	}
+
+	getStaticAttributeValue(name: string) {
+		const attribute = this.attributes.find(
+			(attr: Attribute) => attr.type === 'Attribute' && attr.name.toLowerCase() === name
+		);
+
+		if (!attribute) return null;
+
+		if (attribute.value === true) return true;
+		if (attribute.value.length === 0) return '';
+
+		if (attribute.value.length === 1 && attribute.value[0].type === 'Text') {
+			return attribute.value[0].data;
+		}
+
+		return null;
+	}
+
+	isMediaNode() {
+		return this.name === 'audio' || this.name === 'video';
+	}
+}
+
+function getRenderStatement(
+	generator: DomGenerator,
+	namespace: string,
+	name: string
+) {
+	if (namespace === 'http://www.w3.org/2000/svg') {
+		return `@createSvgElement("${name}")`;
+	}
+
+	if (namespace) {
+		return `document.createElementNS("${namespace}", "${name}")`;
+	}
+
+	return `@createElement("${name}")`;
+}
+
+function getClaimStatement(
+	generator: DomGenerator,
+	namespace: string,
+	nodes: string,
+	node: Node
+) {
+	const attributes = node.attributes
+		.filter((attr: Node) => attr.type === 'Attribute')
+		.map((attr: Node) => `${quoteProp(attr.name, generator.legacy)}: true`)
+		.join(', ');
+
+	const name = namespace ? node.name : node.name.toUpperCase();
+
+	return `@claimElement(${nodes}, "${name}", ${attributes
+		? `{ ${attributes} }`
+		: `{}`}, ${namespace === namespaces.svg ? true : false})`;
+}
+
+function quoteProp(name: string, legacy: boolean) {
+	const isLegacyPropName = legacy && reservedNames.has(name);
+
+	if (/[^a-zA-Z_$0-9]/.test(name) || isLegacyPropName) return `"${name}"`;
+	return name;
+}
+
+function stringifyAttributeValue(value: Node | true) {
+	if (value === true) return '';
+	if (value.length === 0) return `=""`;
+
+	const data = value[0].data;
+	return `=${JSON.stringify(data)}`;
+}
+
+const events = [
+	{
+		eventNames: ['input'],
+		filter: (node: Element, name: string) =>
+			node.name === 'textarea' ||
+			node.name === 'input' && !/radio|checkbox/.test(node.getStaticAttributeValue('type'))
+	},
+	{
+		eventNames: ['change'],
+		filter: (node: Element, name: string) =>
+			node.name === 'select' ||
+			node.name === 'input' && /radio|checkbox|range/.test(node.getStaticAttributeValue('type'))
+	},
+
+	// media events
+	{
+		eventNames: ['timeupdate'],
+		filter: (node: Element, name: string) =>
+			node.isMediaNode() &&
+			(name === 'currentTime' || name === 'played')
+	},
+	{
+		eventNames: ['durationchange'],
+		filter: (node: Element, name: string) =>
+			node.isMediaNode() &&
+			name === 'duration'
+	},
+	{
+		eventNames: ['play', 'pause'],
+		filter: (node: Element, name: string) =>
+			node.isMediaNode() &&
+			name === 'paused'
+	},
+	{
+		eventNames: ['progress'],
+		filter: (node: Element, name: string) =>
+			node.isMediaNode() &&
+			name === 'buffered'
+	},
+	{
+		eventNames: ['loadedmetadata'],
+		filter: (node: Element, name: string) =>
+			node.isMediaNode() &&
+			(name === 'buffered' || name === 'seekable')
+	}
+];
\ No newline at end of file
diff --git a/src/generators/nodes/ElseBlock.ts b/src/generators/nodes/ElseBlock.ts
new file mode 100644
index 0000000000..0a48881fbb
--- /dev/null
+++ b/src/generators/nodes/ElseBlock.ts
@@ -0,0 +1,8 @@
+import Node from './shared/Node';
+import Block from '../dom/Block';
+
+export default class ElseBlock extends Node {
+	type: 'ElseBlock';
+	children: Node[];
+	block: Block;
+}
\ No newline at end of file
diff --git a/src/generators/nodes/EventHandler.ts b/src/generators/nodes/EventHandler.ts
new file mode 100644
index 0000000000..fae628e58c
--- /dev/null
+++ b/src/generators/nodes/EventHandler.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+
+export default class EventHandler extends Node {
+	name: string;
+	value: Node[]
+	expression: Node
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Fragment.ts b/src/generators/nodes/Fragment.ts
new file mode 100644
index 0000000000..875d3b6a24
--- /dev/null
+++ b/src/generators/nodes/Fragment.ts
@@ -0,0 +1,39 @@
+import Node from './shared/Node';
+import { DomGenerator } from '../dom/index';
+import Block from '../dom/Block';
+
+export default class Fragment extends Node {
+	block: Block;
+	children: Node[];
+
+	init() {
+		this.block = new Block({
+			generator: this.generator,
+			name: '@create_main_fragment',
+			key: null,
+
+			contexts: new Map(),
+			indexes: new Map(),
+			changeableIndexes: new Map(),
+
+			params: ['state'],
+			indexNames: new Map(),
+			listNames: new Map(),
+
+			dependencies: new Set(),
+		});
+
+		this.generator.blocks.push(this.block);
+		this.initChildren(this.block, true, null);
+
+		this.block.hasUpdateMethod = true;
+	}
+
+	build() {
+		this.init();
+
+		this.children.forEach(child => {
+			child.build(this.block, null, 'nodes');
+		});
+	}
+}
\ No newline at end of file
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/nodes/IfBlock.ts
similarity index 57%
rename from src/generators/dom/visitors/IfBlock.ts
rename to src/generators/nodes/IfBlock.ts
index e23f6a49b0..b3978e5356 100644
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/nodes/IfBlock.ts
@@ -1,12 +1,11 @@
-import deindent from '../../../utils/deindent';
-import visit from '../visit';
-import { DomGenerator } from '../index';
-import Block from '../Block';
-import isDomNode from './shared/isDomNode';
-import { Node } from '../../../interfaces';
-import { State } from '../interfaces';
-
-function isElseIf(node: Node) {
+import deindent from '../../utils/deindent';
+import Node from './shared/Node';
+import ElseBlock from './ElseBlock';
+import { DomGenerator } from '../dom/index';
+import Block from '../dom/Block';
+import createDebuggingComment from '../../utils/createDebuggingComment';
+
+function isElseIf(node: ElseBlock) {
 	return (
 		node && node.children.length === 1 && node.children[0].type === 'IfBlock'
 	);
@@ -16,43 +15,181 @@ function isElseBranch(branch) {
 	return branch.block && !branch.condition;
 }
 
+export default class IfBlock extends Node {
+	type: 'IfBlock';
+	else: ElseBlock;
+
+	block: Block;
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		const { generator } = this;
+
+		this.cannotUseInnerHTML();
+
+		const blocks: Block[] = [];
+		let dynamic = false;
+		let hasIntros = false;
+		let hasOutros = false;
+
+		function attachBlocks(node: IfBlock) {
+			node.var = block.getUniqueName(`if_block`);
+
+			block.addDependencies(node.metadata.dependencies);
+
+			node.block = block.child({
+				comment: createDebuggingComment(node, generator),
+				name: generator.getUniqueName(`create_if_block`),
+			});
+
+			blocks.push(node.block);
+			node.initChildren(node.block, stripWhitespace, nextSibling);
+
+			if (node.block.dependencies.size > 0) {
+				dynamic = true;
+				block.addDependencies(node.block.dependencies);
+			}
+
+			if (node.block.hasIntroMethod) hasIntros = true;
+			if (node.block.hasOutroMethod) hasOutros = true;
+
+			if (isElseIf(node.else)) {
+				attachBlocks(node.else.children[0]);
+			} else if (node.else) {
+				node.else.block = block.child({
+					comment: createDebuggingComment(node.else, generator),
+					name: generator.getUniqueName(`create_if_block`),
+				});
+
+				blocks.push(node.else.block);
+				node.else.initChildren(
+					node.else.block,
+					stripWhitespace,
+					nextSibling
+				);
+
+				if (node.else.block.dependencies.size > 0) {
+					dynamic = true;
+					block.addDependencies(node.else.block.dependencies);
+				}
+			}
+		}
+
+		attachBlocks(this);
+
+		blocks.forEach(block => {
+			block.hasUpdateMethod = dynamic;
+			block.hasIntroMethod = hasIntros;
+			block.hasOutroMethod = hasOutros;
+		});
+
+		generator.blocks.push(...blocks);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const name = this.var;
+
+		const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
+		const anchor = needsAnchor
+			? block.getUniqueName(`${name}_anchor`)
+			: (this.next && this.next.var) || 'null';
+		const params = block.params.join(', ');
+
+		const branches = getBranches(this.generator, block, parentNode, parentNodes, this);
+
+		const hasElse = isElseBranch(branches[branches.length - 1]);
+		const if_name = hasElse ? '' : `if (${name}) `;
+
+		const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
+		const hasOutros = branches[0].hasOutroMethod;
+
+		const vars = { name, anchor, params, if_name, hasElse };
+
+		if (this.else) {
+			if (hasOutros) {
+				compoundWithOutros(
+					this.generator,
+					block,
+					parentNode,
+					parentNodes,
+					this,
+					branches,
+					dynamic,
+					vars
+				);
+			} else {
+				compound(this.generator, block, parentNode, parentNodes, this, branches, dynamic, vars);
+			}
+		} else {
+			simple(this.generator, block, parentNode, parentNodes, this, branches[0], dynamic, vars);
+		}
+
+		block.builders.create.addLine(`${if_name}${name}.c();`);
+
+		block.builders.claim.addLine(
+			`${if_name}${name}.l(${parentNodes});`
+		);
+
+		if (needsAnchor) {
+			block.addElement(
+				anchor,
+				`@createComment()`,
+				`@createComment()`,
+				parentNode
+			);
+		}
+	}
+}
+
+
+
+
+
+// TODO move all this into the class
+
 function getBranches(
 	generator: DomGenerator,
 	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
+	parentNode: string,
+	parentNodes: string,
+	node: Node
 ) {
 	block.contextualise(node.expression); // TODO remove
 
 	const branches = [
 		{
 			condition: node.metadata.snippet,
-			block: node._block.name,
-			hasUpdateMethod: node._block.hasUpdateMethod,
-			hasIntroMethod: node._block.hasIntroMethod,
-			hasOutroMethod: node._block.hasOutroMethod,
+			block: node.block.name,
+			hasUpdateMethod: node.block.hasUpdateMethod,
+			hasIntroMethod: node.block.hasIntroMethod,
+			hasOutroMethod: node.block.hasOutroMethod,
 		},
 	];
 
-	visitChildren(generator, block, state, node, elementStack, componentStack);
+	visitChildren(generator, block, node);
 
 	if (isElseIf(node.else)) {
 		branches.push(
-			...getBranches(generator, block, state, node.else.children[0], elementStack, componentStack)
+			...getBranches(generator, block, parentNode, parentNodes, node.else.children[0])
 		);
 	} else {
 		branches.push({
 			condition: null,
-			block: node.else ? node.else._block.name : null,
-			hasUpdateMethod: node.else ? node.else._block.hasUpdateMethod : false,
-			hasIntroMethod: node.else ? node.else._block.hasIntroMethod : false,
-			hasOutroMethod: node.else ? node.else._block.hasOutroMethod : false,
+			block: node.else ? node.else.block.name : null,
+			hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
+			hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
+			hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
 		});
 
 		if (node.else) {
-			visitChildren(generator, block, state, node.else, elementStack, componentStack);
+			visitChildren(generator, block, node.else);
 		}
 	}
 
@@ -62,98 +199,38 @@ function getBranches(
 function visitChildren(
 	generator: DomGenerator,
 	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
+	node: Node
 ) {
 	node.children.forEach((child: Node) => {
-		visit(generator, node._block, node._state, child, elementStack, componentStack);
+		child.build(node.block, null, 'nodes');
 	});
 }
 
-export default function visitIfBlock(
-	generator: DomGenerator,
-	block: Block,
-	state: State,
-	node: Node,
-	elementStack: Node[],
-	componentStack: Node[]
-) {
-	const name = node.var;
-
-	const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode || !isDomNode(node.parent, generator);
-	const anchor = needsAnchor
-		? block.getUniqueName(`${name}_anchor`)
-		: (node.next && node.next.var) || 'null';
-	const params = block.params.join(', ');
-
-	const branches = getBranches(generator, block, state, node, elementStack, componentStack);
-
-	const hasElse = isElseBranch(branches[branches.length - 1]);
-	const if_name = hasElse ? '' : `if (${name}) `;
-
-	const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
-	const hasOutros = branches[0].hasOutroMethod;
-
-	const vars = { name, needsAnchor, anchor, params, if_name, hasElse };
-
-	if (node.else) {
-		if (hasOutros) {
-			compoundWithOutros(
-				generator,
-				block,
-				state,
-				node,
-				branches,
-				dynamic,
-				vars
-			);
-		} else {
-			compound(generator, block, state, node, branches, dynamic, vars);
-		}
-	} else {
-		simple(generator, block, state, node, branches[0], dynamic, vars);
-	}
-
-	block.builders.create.addLine(`${if_name}${name}.c();`);
 
-	block.builders.claim.addLine(
-		`${if_name}${name}.l(${state.parentNodes});`
-	);
-
-	if (needsAnchor) {
-		block.addElement(
-			anchor,
-			`@createComment()`,
-			`@createComment()`,
-			state.parentNode
-		);
-	}
-}
 
 function simple(
 	generator: DomGenerator,
 	block: Block,
-	state: State,
+	parentNode: string,
+	parentNodes: string,
 	node: Node,
 	branch,
 	dynamic,
-	{ name, needsAnchor, anchor, params, if_name }
+	{ name, anchor, params, if_name }
 ) {
 	block.builders.init.addBlock(deindent`
 		var ${name} = (${branch.condition}) && ${branch.block}(${params}, #component);
 	`);
 
 	const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
+	const initialMountNode = parentNode || '#target';
+	const anchorNode = parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
-		`if (${name}) ${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
+		`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
 	);
 
-	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
+	const updateMountNode = node.getUpdateMountNode(anchor);
 
 	const enter = dynamic
 		? branch.hasIntroMethod
@@ -165,7 +242,7 @@ function simple(
 					if (${name}) ${name}.c();
 				}
 
-				${name}.i(${parentNode}, ${anchor});
+				${name}.i(${updateMountNode}, ${anchor});
 			`
 			: deindent`
 				if (${name}) {
@@ -173,7 +250,7 @@ function simple(
 				} else {
 					${name} = ${branch.block}(${params}, #component);
 					${name}.c();
-					${name}.m(${parentNode}, ${anchor});
+					${name}.m(${updateMountNode}, ${anchor});
 				}
 			`
 		: branch.hasIntroMethod
@@ -182,13 +259,13 @@ function simple(
 					${name} = ${branch.block}(${params}, #component);
 					${name}.c();
 				}
-				${name}.i(${parentNode}, ${anchor});
+				${name}.i(${updateMountNode}, ${anchor});
 			`
 			: deindent`
 				if (!${name}) {
 					${name} = ${branch.block}(${params}, #component);
 					${name}.c();
-					${name}.m(${parentNode}, ${anchor});
+					${name}.m(${updateMountNode}, ${anchor});
 				}
 			`;
 
@@ -224,11 +301,12 @@ function simple(
 function compound(
 	generator: DomGenerator,
 	block: Block,
-	state: State,
+	parentNode: string,
+		parentNodes: string,
 	node: Node,
 	branches,
 	dynamic,
-	{ name, needsAnchor, anchor, params, hasElse, if_name }
+	{ name, anchor, params, hasElse, if_name }
 ) {
 	const select_block_type = generator.getUniqueName(`select_block_type`);
 	const current_block_type = block.getUniqueName(`current_block_type`);
@@ -249,13 +327,13 @@ function compound(
 
 	const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
 
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
+	const initialMountNode = parentNode || '#target';
+	const anchorNode = parentNode ? 'null' : 'anchor';
 	block.builders.mount.addLine(
-		`${if_name}${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
+		`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
 	);
 
-	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
+	const updateMountNode = node.getUpdateMountNode(anchor);
 
 	const changeBlock = deindent`
 		${hasElse
@@ -270,7 +348,7 @@ function compound(
 				}`}
 		${name} = ${current_block_type_and}${current_block_type}(${params}, #component);
 		${if_name}${name}.c();
-		${if_name}${name}.${mountOrIntro}(${parentNode}, ${anchor});
+		${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
 	`;
 
 	if (dynamic) {
@@ -299,11 +377,12 @@ function compound(
 function compoundWithOutros(
 	generator: DomGenerator,
 	block: Block,
-	state: State,
+	parentNode: string,
+	parentNodes: string,
 	node: Node,
 	branches,
 	dynamic,
-	{ name, needsAnchor, anchor, params, hasElse }
+	{ name, anchor, params, hasElse }
 ) {
 	const select_block_type = block.getUniqueName(`select_block_type`);
 	const current_block_type_index = block.getUniqueName(`current_block_type_index`);
@@ -346,14 +425,14 @@ function compoundWithOutros(
 	}
 
 	const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
-	const targetNode = state.parentNode || '#target';
-	const anchorNode = state.parentNode ? 'null' : 'anchor';
+	const initialMountNode = parentNode || '#target';
+	const anchorNode = parentNode ? 'null' : 'anchor';
 
 	block.builders.mount.addLine(
-		`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${targetNode}, ${anchorNode});`
+		`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
 	);
 
-	const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;
+	const updateMountNode = node.getUpdateMountNode(anchor);
 
 	const destroyOldBlock = deindent`
 		${name}.o(function() {
@@ -369,7 +448,7 @@ function compoundWithOutros(
 			${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${params}, #component);
 			${name}.c();
 		}
-		${name}.${mountOrIntro}(${parentNode}, ${anchor});
+		${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
 	`;
 
 	const changeBlock = hasElse
@@ -416,4 +495,4 @@ function compoundWithOutros(
 			${if_blocks}[${current_block_type_index}].d();
 		}
 	`);
-}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/MustacheTag.ts b/src/generators/nodes/MustacheTag.ts
new file mode 100644
index 0000000000..35baccdc2b
--- /dev/null
+++ b/src/generators/nodes/MustacheTag.ts
@@ -0,0 +1,29 @@
+import Node from './shared/Node';
+import Tag from './shared/Tag';
+import Block from '../dom/Block';
+
+export default class MustacheTag extends Tag {
+	init(block: Block) {
+		this.cannotUseInnerHTML();
+		this.var = block.getUniqueName('text');
+		block.addDependencies(this.metadata.dependencies);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { init } = this.renameThisMethod(
+			block,
+			value => `${this.var}.data = ${value};`
+		);
+
+		block.addElement(
+			this.var,
+			`@createText(${init})`,
+			`@claimText(${parentNodes}, ${init})`,
+			parentNode
+		);
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/PendingBlock.ts b/src/generators/nodes/PendingBlock.ts
new file mode 100644
index 0000000000..fc7a3dd1c0
--- /dev/null
+++ b/src/generators/nodes/PendingBlock.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+import Block from '../dom/Block';
+
+export default class PendingBlock extends Node {
+	block: Block;
+	children: Node[];
+}
\ No newline at end of file
diff --git a/src/generators/nodes/RawMustacheTag.ts b/src/generators/nodes/RawMustacheTag.ts
new file mode 100644
index 0000000000..8b81453033
--- /dev/null
+++ b/src/generators/nodes/RawMustacheTag.ts
@@ -0,0 +1,92 @@
+import deindent from '../../utils/deindent';
+import Node from './shared/Node';
+import Tag from './shared/Tag';
+import Block from '../dom/Block';
+
+export default class RawMustacheTag extends Tag {
+	init(block: Block) {
+		this.cannotUseInnerHTML();
+		this.var = block.getUniqueName('raw');
+		block.addDependencies(this.metadata.dependencies);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const name = this.var;
+
+		const needsAnchorBefore = this.prev ? this.prev.type !== 'Element' : !parentNode;
+		const needsAnchorAfter = this.next ? this.next.type !== 'Element' : !parentNode;
+
+		const anchorBefore = needsAnchorBefore
+			? block.getUniqueName(`${name}_before`)
+			: (this.prev && this.prev.var) || 'null';
+
+		const anchorAfter = needsAnchorAfter
+			? block.getUniqueName(`${name}_after`)
+			: (this.next && this.next.var) || 'null';
+
+		let detach: string;
+		let insert: (content: string) => string;
+		let useInnerHTML = false;
+
+		if (anchorBefore === 'null' && anchorAfter === 'null') {
+			useInnerHTML = true;
+			detach = `${parentNode}.innerHTML = '';`;
+			insert = content => `${parentNode}.innerHTML = ${content};`;
+		} else if (anchorBefore === 'null') {
+			detach = `@detachBefore(${anchorAfter});`;
+			insert = content => `${anchorAfter}.insertAdjacentHTML("beforebegin", ${content});`;
+		} else if (anchorAfter === 'null') {
+			detach = `@detachAfter(${anchorBefore});`;
+			insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
+		} else {
+			detach = `@detachBetween(${anchorBefore}, ${anchorAfter});`;
+			insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
+		}
+
+		const { init } = this.renameThisMethod(
+			block,
+			content => deindent`
+				${!useInnerHTML && detach}
+				${insert(content)}
+			`
+		);
+
+		// we would have used comments here, but the `insertAdjacentHTML` api only
+		// exists for `Element`s.
+		if (needsAnchorBefore) {
+			block.addElement(
+				anchorBefore,
+				`@createElement('noscript')`,
+				`@createElement('noscript')`,
+				parentNode
+			);
+		}
+
+		function addAnchorAfter() {
+			block.addElement(
+				anchorAfter,
+				`@createElement('noscript')`,
+				`@createElement('noscript')`,
+				parentNode
+			);
+		}
+
+		if (needsAnchorAfter && anchorBefore === 'null') {
+			// anchorAfter needs to be in the DOM before we
+			// insert the HTML...
+			addAnchorAfter();
+		}
+
+		block.builders.mount.addLine(insert(init));
+		block.builders.detachRaw.addBlock(detach);
+
+		if (needsAnchorAfter && anchorBefore !== 'null') {
+			// ...otherwise it should go afterwards
+			addAnchorAfter();
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Ref.ts b/src/generators/nodes/Ref.ts
new file mode 100644
index 0000000000..bcc236b7cc
--- /dev/null
+++ b/src/generators/nodes/Ref.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+
+export default class Ref extends Node {
+	name: string;
+	value: Node[]
+	expression: Node
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Slot.ts b/src/generators/nodes/Slot.ts
new file mode 100644
index 0000000000..4413eea916
--- /dev/null
+++ b/src/generators/nodes/Slot.ts
@@ -0,0 +1,139 @@
+import deindent from '../../utils/deindent';
+import Node from './shared/Node';
+import Element from './Element';
+import Attribute from './Attribute';
+import Block from '../dom/Block';
+
+export default class Slot extends Element {
+	type: 'Element';
+	name: string;
+	attributes: Attribute[]; // TODO have more specific Attribute type
+	children: Node[];
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		this.cannotUseInnerHTML();
+
+		this.var = block.getUniqueName('slot');
+
+		if (this.children.length) {
+			this.initChildren(block, stripWhitespace, nextSibling);
+		}
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+
+		const slotName = this.getStaticAttributeValue('name') || 'default';
+		generator.slots.add(slotName);
+
+		const content_name = block.getUniqueName(`slot_content_${slotName}`);
+		block.addVariable(content_name, `#component._slotted.${slotName}`);
+
+		const needsAnchorBefore = this.prev ? this.prev.type !== 'Element' : !parentNode;
+		const needsAnchorAfter = this.next ? this.next.type !== 'Element' : !parentNode;
+
+		const anchorBefore = needsAnchorBefore
+			? block.getUniqueName(`${content_name}_before`)
+			: (this.prev && this.prev.var) || 'null';
+
+		const anchorAfter = needsAnchorAfter
+			? block.getUniqueName(`${content_name}_after`)
+			: (this.next && this.next.var) || 'null';
+
+		if (needsAnchorBefore) block.addVariable(anchorBefore);
+		if (needsAnchorAfter) block.addVariable(anchorAfter);
+
+		block.builders.create.pushCondition(`!${content_name}`);
+		block.builders.hydrate.pushCondition(`!${content_name}`);
+		block.builders.mount.pushCondition(`!${content_name}`);
+		block.builders.unmount.pushCondition(`!${content_name}`);
+		block.builders.destroy.pushCondition(`!${content_name}`);
+
+		this.children.forEach((child: Node) => {
+			child.build(block, parentNode, parentNodes);
+		});
+
+		block.builders.create.popCondition();
+		block.builders.hydrate.popCondition();
+		block.builders.mount.popCondition();
+		block.builders.unmount.popCondition();
+		block.builders.destroy.popCondition();
+
+		// TODO can we use an else here?
+		if (parentNode) {
+			block.builders.mount.addBlock(deindent`
+				if (${content_name}) {
+					${needsAnchorBefore && `@appendNode(${anchorBefore} || (${anchorBefore} = @createComment()), ${parentNode});`}
+					@appendNode(${content_name}, ${parentNode});
+					${needsAnchorAfter && `@appendNode(${anchorAfter} || (${anchorAfter} = @createComment()), ${parentNode});`}
+				}
+			`);
+		} else {
+			block.builders.mount.addBlock(deindent`
+				if (${content_name}) {
+					${needsAnchorBefore && `@insertNode(${anchorBefore} || (${anchorBefore} = @createComment()), #target, anchor);`}
+					@insertNode(${content_name}, #target, anchor);
+					${needsAnchorAfter && `@insertNode(${anchorAfter} || (${anchorAfter} = @createComment()), #target, anchor);`}
+				}
+			`);
+		}
+
+		// if the slot is unmounted, move nodes back into the document fragment,
+		// so that it can be reinserted later
+		// TODO so that this can work with public API, component._slotted should
+		// be all fragments, derived from options.slots. Not === options.slots
+		// TODO can we use an else here?
+		if (anchorBefore === 'null' && anchorAfter === 'null') {
+			block.builders.unmount.addBlock(deindent`
+				if (${content_name}) {
+					@reinsertChildren(${parentNode}, ${content_name});
+				}
+			`);
+		} else if (anchorBefore === 'null') {
+			block.builders.unmount.addBlock(deindent`
+				if (${content_name}) {
+					@reinsertBefore(${anchorAfter}, ${content_name});
+				}
+			`);
+		} else if (anchorAfter === 'null') {
+			block.builders.unmount.addBlock(deindent`
+				if (${content_name}) {
+					@reinsertAfter(${anchorBefore}, ${content_name});
+				}
+			`);
+		} else {
+			block.builders.unmount.addBlock(deindent`
+				if (${content_name}) {
+					@reinsertBetween(${anchorBefore}, ${anchorAfter}, ${content_name});
+					@detachNode(${anchorBefore});
+					@detachNode(${anchorAfter});
+				}
+			`);
+		}
+	}
+
+	getStaticAttributeValue(name: string) {
+		const attribute = this.attributes.find(
+			(attr: Node) => attr.name.toLowerCase() === name
+		);
+
+		if (!attribute) return null;
+
+		if (attribute.value === true) return true;
+		if (attribute.value.length === 0) return '';
+
+		if (attribute.value.length === 1 && attribute.value[0].type === 'Text') {
+			return attribute.value[0].data;
+		}
+
+		return null;
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Text.ts b/src/generators/nodes/Text.ts
new file mode 100644
index 0000000000..2a68656836
--- /dev/null
+++ b/src/generators/nodes/Text.ts
@@ -0,0 +1,50 @@
+import { stringify } from '../../utils/stringify';
+import Node from './shared/Node';
+import Block from '../dom/Block';
+import { State } from '../dom/interfaces';
+
+// Whitespace inside one of these elements will not result in
+// a whitespace node being created in any circumstances. (This
+// list is almost certainly very incomplete)
+const elementsWithoutText = new Set([
+	'audio',
+	'datalist',
+	'dl',
+	'ol',
+	'optgroup',
+	'select',
+	'ul',
+	'video',
+]);
+
+export default class Text extends Node {
+	type: 'Text';
+	data: string;
+	shouldSkip: boolean;
+
+	init(block: Block) {
+		const parentElement = this.findNearest('Element');
+
+		if (!/\S/.test(this.data) && parentElement && (parentElement.namespace || elementsWithoutText.has(parentElement.name))) {
+			this.shouldSkip = true;
+			return;
+		}
+
+		this.var = block.getUniqueName(`text`);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		if (this.shouldSkip) return;
+
+		block.addElement(
+			this.var,
+			`@createText(${stringify(this.data)})`,
+			`@claimText(${parentNodes}, ${stringify(this.data)})`,
+			parentNode
+		);
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/ThenBlock.ts b/src/generators/nodes/ThenBlock.ts
new file mode 100644
index 0000000000..d7d8cedc03
--- /dev/null
+++ b/src/generators/nodes/ThenBlock.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+import Block from '../dom/Block';
+
+export default class ThenBlock extends Node {
+	block: Block;
+	children: Node[];
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Transition.ts b/src/generators/nodes/Transition.ts
new file mode 100644
index 0000000000..d110b5878d
--- /dev/null
+++ b/src/generators/nodes/Transition.ts
@@ -0,0 +1,7 @@
+import Node from './shared/Node';
+
+export default class Transition extends Node {
+	name: string;
+	value: Node[]
+	expression: Node
+}
\ No newline at end of file
diff --git a/src/generators/nodes/Window.ts b/src/generators/nodes/Window.ts
new file mode 100644
index 0000000000..6396577003
--- /dev/null
+++ b/src/generators/nodes/Window.ts
@@ -0,0 +1,201 @@
+import deindent from '../../utils/deindent';
+import { stringify } from '../../utils/stringify';
+import flattenReference from '../../utils/flattenReference';
+import isVoidElementName from '../../utils/isVoidElementName';
+import validCalleeObjects from '../../utils/validCalleeObjects';
+import reservedNames from '../../utils/reservedNames';
+import Node from './shared/Node';
+import Block from '../dom/Block';
+import Attribute from './Attribute';
+
+const associatedEvents = {
+	innerWidth: 'resize',
+	innerHeight: 'resize',
+	outerWidth: 'resize',
+	outerHeight: 'resize',
+
+	scrollX: 'scroll',
+	scrollY: 'scroll',
+};
+
+const readonly = new Set([
+	'innerWidth',
+	'innerHeight',
+	'outerWidth',
+	'outerHeight',
+	'online',
+]);
+
+export default class Window extends Node {
+	type: 'Window';
+	attributes: Attribute[];
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		const { generator } = this;
+
+		const events = {};
+		const bindings: Record<string, string> = {};
+
+		this.attributes.forEach((attribute: Node) => {
+			if (attribute.type === 'EventHandler') {
+				// TODO verify that it's a valid callee (i.e. built-in or declared method)
+				generator.addSourcemapLocations(attribute.expression);
+
+				let usesState = false;
+
+				attribute.expression.arguments.forEach((arg: Node) => {
+					block.contextualise(arg, null, true);
+					const { dependencies } = arg.metadata;
+					if (dependencies.length) usesState = true;
+				});
+
+				const flattened = flattenReference(attribute.expression.callee);
+				if (flattened.name !== 'event' && flattened.name !== 'this') {
+					// allow event.stopPropagation(), this.select() etc
+					generator.code.prependRight(
+						attribute.expression.start,
+						`${block.alias('component')}.`
+					);
+				}
+
+				const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
+				const handlerBody = deindent`
+					${usesState && `var state = #component.get();`}
+					[✂${attribute.expression.start}-${attribute.expression.end}✂];
+				`;
+
+				block.builders.init.addBlock(deindent`
+					function ${handlerName}(event) {
+						${handlerBody}
+					}
+					window.addEventListener("${attribute.name}", ${handlerName});
+				`);
+
+				block.builders.destroy.addBlock(deindent`
+					window.removeEventListener("${attribute.name}", ${handlerName});
+				`);
+			}
+
+			if (attribute.type === 'Binding') {
+				// in dev mode, throw if read-only values are written to
+				if (readonly.has(attribute.name)) {
+					generator.readonly.add(attribute.value.name);
+				}
+
+				bindings[attribute.name] = attribute.value.name;
+
+				// bind:online is a special case, we need to listen for two separate events
+				if (attribute.name === 'online') return;
+
+				const associatedEvent = associatedEvents[attribute.name];
+
+				if (!events[associatedEvent]) events[associatedEvent] = [];
+				events[associatedEvent].push(
+					`${attribute.value.name}: this.${attribute.name}`
+				);
+
+				// add initial value
+				generator.metaBindings.push(
+					`this._state.${attribute.value.name} = window.${attribute.name};`
+				);
+			}
+		});
+
+		const lock = block.getUniqueName(`window_updating`);
+
+		Object.keys(events).forEach(event => {
+			const handlerName = block.getUniqueName(`onwindow${event}`);
+			const props = events[event].join(',\n');
+
+			if (event === 'scroll') {
+				// TODO other bidirectional bindings...
+				block.addVariable(lock, 'false');
+			}
+
+			const handlerBody = deindent`
+				${event === 'scroll' && `${lock} = true;`}
+				${generator.options.dev && `component._updatingReadonlyProperty = true;`}
+
+				#component.set({
+					${props}
+				});
+
+				${generator.options.dev && `component._updatingReadonlyProperty = false;`}
+				${event === 'scroll' && `${lock} = false;`}
+			`;
+
+			block.builders.init.addBlock(deindent`
+				function ${handlerName}(event) {
+					${handlerBody}
+				}
+				window.addEventListener("${event}", ${handlerName});
+			`);
+
+			block.builders.destroy.addBlock(deindent`
+				window.removeEventListener("${event}", ${handlerName});
+			`);
+		});
+
+		// special case... might need to abstract this out if we add more special cases
+		if (bindings.scrollX && bindings.scrollY) {
+			const observerCallback = block.getUniqueName(`scrollobserver`);
+
+			block.builders.init.addBlock(deindent`
+				function ${observerCallback}() {
+					if (${lock}) return;
+					var x = ${bindings.scrollX
+						? `#component.get("${bindings.scrollX}")`
+						: `window.scrollX`};
+					var y = ${bindings.scrollY
+						? `#component.get("${bindings.scrollY}")`
+						: `window.scrollY`};
+					window.scrollTo(x, y);
+				}
+			`);
+
+			if (bindings.scrollX)
+				block.builders.init.addLine(
+					`#component.observe("${bindings.scrollX}", ${observerCallback});`
+				);
+			if (bindings.scrollY)
+				block.builders.init.addLine(
+					`#component.observe("${bindings.scrollY}", ${observerCallback});`
+				);
+		} else if (bindings.scrollX || bindings.scrollY) {
+			const isX = !!bindings.scrollX;
+
+			block.builders.init.addBlock(deindent`
+				#component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) {
+					if (${lock}) return;
+					window.scrollTo(${isX ? 'x, window.scrollY' : 'window.scrollX, y'});
+				});
+			`);
+		}
+
+		// another special case. (I'm starting to think these are all special cases.)
+		if (bindings.online) {
+			const handlerName = block.getUniqueName(`onlinestatuschanged`);
+			block.builders.init.addBlock(deindent`
+				function ${handlerName}(event) {
+					#component.set({ ${bindings.online}: navigator.onLine });
+				}
+				window.addEventListener("online", ${handlerName});
+				window.addEventListener("offline", ${handlerName});
+			`);
+
+			// add initial value
+			generator.metaBindings.push(
+				`this._state.${bindings.online} = navigator.onLine;`
+			);
+
+			block.builders.destroy.addBlock(deindent`
+				window.removeEventListener("online", ${handlerName});
+				window.removeEventListener("offline", ${handlerName});
+			`);
+		}
+	}
+}
diff --git a/src/generators/nodes/index.ts b/src/generators/nodes/index.ts
new file mode 100644
index 0000000000..0c8b174698
--- /dev/null
+++ b/src/generators/nodes/index.ts
@@ -0,0 +1,48 @@
+import Node from './shared/Node';
+import Attribute from './Attribute';
+import AwaitBlock from './AwaitBlock';
+import Binding from './Binding';
+import CatchBlock from './CatchBlock';
+import Comment from './Comment';
+import Component from './Component';
+import EachBlock from './EachBlock';
+import Element from './Element';
+import ElseBlock from './ElseBlock';
+import EventHandler from './EventHandler';
+import Fragment from './Fragment';
+import IfBlock from './IfBlock';
+import MustacheTag from './MustacheTag';
+import PendingBlock from './PendingBlock';
+import RawMustacheTag from './RawMustacheTag';
+import Ref from './Ref';
+import Slot from './Slot';
+import Text from './Text';
+import ThenBlock from './ThenBlock';
+import Transition from './Transition';
+import Window from './Window';
+
+const nodes: Record<string, any> = {
+	Attribute,
+	AwaitBlock,
+	Binding,
+	CatchBlock,
+	Comment,
+	Component,
+	EachBlock,
+	Element,
+	ElseBlock,
+	EventHandler,
+	Fragment,
+	IfBlock,
+	MustacheTag,
+	PendingBlock,
+	RawMustacheTag,
+	Ref,
+	Slot,
+	Text,
+	ThenBlock,
+	Transition,
+	Window
+};
+
+export default nodes;
\ No newline at end of file
diff --git a/src/generators/nodes/shared/Node.ts b/src/generators/nodes/shared/Node.ts
new file mode 100644
index 0000000000..e19e83819f
--- /dev/null
+++ b/src/generators/nodes/shared/Node.ts
@@ -0,0 +1,164 @@
+import { DomGenerator } from '../../dom/index';
+import Block from '../../dom/Block';
+import { trimStart, trimEnd } from '../../../utils/trim';
+
+export default class Node {
+	type: string;
+	start: number;
+	end: number;
+	[key: string]: any;
+
+	metadata?: {
+		dependencies: string[];
+		snippet: string;
+	};
+
+	parent: Node;
+	prev?: Node;
+	next?: Node;
+	generator: DomGenerator;
+
+	canUseInnerHTML: boolean;
+	var: string;
+
+	constructor(data: Record<string, any>) {
+		Object.assign(this, data);
+	}
+
+	cannotUseInnerHTML() {
+		if (this.canUseInnerHTML !== false) {
+			this.canUseInnerHTML = false;
+			if (this.parent) {
+				if (!this.parent.cannotUseInnerHTML) console.log(this.parent.type, this.type);
+				this.parent.cannotUseInnerHTML();
+			}
+		}
+	}
+
+	init(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		// implemented by subclasses
+	}
+
+	initChildren(
+		block: Block,
+		stripWhitespace: boolean,
+		nextSibling: Node
+	) {
+		// glue text nodes together
+		const cleaned: Node[] = [];
+		let lastChild: Node;
+
+		let windowComponent;
+
+		this.children.forEach((child: Node) => {
+			if (child.type === 'Comment') return;
+
+			// special case — this is an easy way to remove whitespace surrounding
+			// <:Window/>. lil hacky but it works
+			if (child.type === 'Window') {
+				windowComponent = child;
+				return;
+			}
+
+			if (child.type === 'Text' && lastChild && lastChild.type === 'Text') {
+				lastChild.data += child.data;
+				lastChild.end = child.end;
+			} else {
+				if (child.type === 'Text' && stripWhitespace && cleaned.length === 0) {
+					child.data = trimStart(child.data);
+					if (child.data) cleaned.push(child);
+				} else {
+					cleaned.push(child);
+				}
+			}
+
+			lastChild = child;
+		});
+
+		lastChild = null;
+
+		cleaned.forEach((child: Node, i: number) => {
+			child.canUseInnerHTML = !this.generator.hydratable;
+
+			child.init(block, stripWhitespace, cleaned[i + 1] || nextSibling);
+
+			if (child.shouldSkip) return;
+
+			if (lastChild) lastChild.next = child;
+			child.prev = lastChild;
+
+			lastChild = child;
+		});
+
+		// We want to remove trailing whitespace inside an element/component/block,
+		// *unless* there is no whitespace between this node and its next sibling
+		if (stripWhitespace && lastChild && lastChild.type === 'Text') {
+			const shouldTrim = (
+				nextSibling ?  (nextSibling.type === 'Text' && /^\s/.test(nextSibling.data)) : !this.hasAncestor('EachBlock')
+			);
+
+			if (shouldTrim) {
+				lastChild.data = trimEnd(lastChild.data);
+				if (!lastChild.data) {
+					cleaned.pop();
+					lastChild = cleaned[cleaned.length - 1];
+					lastChild.next = null;
+				}
+			}
+		}
+
+		this.children = cleaned;
+		if (windowComponent) cleaned.unshift(windowComponent);
+	}
+
+	build(
+		block: Block,
+		parentNode: string,
+		parentNodes: string
+	) {
+		// implemented by subclasses
+	}
+
+	isDomNode() {
+		return this.type === 'Element' || this.type === 'Text' || this.type === 'MustacheTag';
+	}
+
+	hasAncestor(type: string) {
+		return this.parent ?
+			this.parent.type === type || this.parent.hasAncestor(type) :
+			false;
+	}
+
+	findNearest(type: string) {
+		if (this.type === type) return this;
+		if (this.parent) return this.parent.findNearest(type);
+	}
+
+	getOrCreateAnchor(block: Block, parentNode: string) {
+		// TODO use this in EachBlock and IfBlock — tricky because
+		// children need to be created first
+		const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
+		const anchor = needsAnchor
+			? block.getUniqueName(`${this.var}_anchor`)
+			: (this.next && this.next.var) || 'null';
+
+		if (needsAnchor) {
+			block.addElement(
+				anchor,
+				`@createComment()`,
+				`@createComment()`,
+				parentNode
+			);
+		}
+
+		return anchor;
+	}
+
+	getUpdateMountNode(anchor: string) {
+		return this.parent.isDomNode() ? this.parent.var : `${anchor}.parentNode`;
+	}
+}
\ No newline at end of file
diff --git a/src/generators/nodes/shared/Tag.ts b/src/generators/nodes/shared/Tag.ts
new file mode 100644
index 0000000000..e400843519
--- /dev/null
+++ b/src/generators/nodes/shared/Tag.ts
@@ -0,0 +1,45 @@
+import Node from './Node';
+import Block from '../../dom/Block';
+
+export default class Tag extends Node {
+	renameThisMethod(
+		block: Block,
+		update: ((value: string) => string)
+	) {
+		const { indexes } = block.contextualise(this.expression);
+		const { dependencies, snippet } = this.metadata;
+
+		const hasChangeableIndex = Array.from(indexes).some(index => block.changeableIndexes.get(index));
+
+		const shouldCache = (
+			this.expression.type !== 'Identifier' ||
+			block.contexts.has(this.expression.name) ||
+			hasChangeableIndex
+		);
+
+		const value = shouldCache && block.getUniqueName(`${this.var}_value`);
+		const content = shouldCache ? value : snippet;
+
+		if (shouldCache) block.addVariable(value, snippet);
+
+		if (dependencies.length || hasChangeableIndex) {
+			const changedCheck = (
+				(block.hasOutroMethod ? `#outroing || ` : '') +
+				dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')
+			);
+
+			const updateCachedValue = `${value} !== (${value} = ${snippet})`;
+
+			const condition = shouldCache ?
+				(dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
+				changedCheck;
+
+			block.builders.update.addConditional(
+				condition,
+				update(content)
+			);
+		}
+
+		return { init: content };
+	}
+}
\ No newline at end of file
diff --git a/src/generators/server-side-rendering/Block.ts b/src/generators/server-side-rendering/Block.ts
index 8d4836a475..24ef567854 100644
--- a/src/generators/server-side-rendering/Block.ts
+++ b/src/generators/server-side-rendering/Block.ts
@@ -44,11 +44,6 @@ export default class Block {
 	}
 
 	contextualise(expression: Node, context?: string, isEventHandler?: boolean) {
-		return this.generator.contextualise(
-			this,
-			expression,
-			context,
-			isEventHandler
-		);
+		return this.generator.contextualise(this.contexts, this.indexes, expression, context, isEventHandler);
 	}
 }
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index 13ad9f026d..779f975028 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 Stylesheet from '../../css/Stylesheet';
 import Block from './Block';
-import preprocess from './preprocess';
 import visit from './visit';
 import { removeNode, removeObjectKey } from '../../utils/removeNode';
 import getName from '../../utils/getName';
@@ -28,8 +27,6 @@ export class SsrGenerator extends Generator {
 		this.renderCode = '';
 		this.appendTargets = [];
 
-		preprocess(this, parsed.html);
-
 		this.stylesheet.warnOnUnusedSelectors(options.onwarn);
 	}
 
diff --git a/src/generators/server-side-rendering/interfaces.ts b/src/generators/server-side-rendering/interfaces.ts
index 127d8bf34c..54b07be881 100644
--- a/src/generators/server-side-rendering/interfaces.ts
+++ b/src/generators/server-side-rendering/interfaces.ts
@@ -5,8 +5,7 @@ import { Node } from '../../interfaces';
 export type Visitor = (
 	generator: SsrGenerator,
 	block: Block,
-	node: Node,
-	componentStack: Node[]
+	node: Node
 ) => void;
 
 export interface AppendTarget {
diff --git a/src/generators/server-side-rendering/preprocess.ts b/src/generators/server-side-rendering/preprocess.ts
deleted file mode 100644
index 7e9cb7365d..0000000000
--- a/src/generators/server-side-rendering/preprocess.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import getStaticAttributeValue from '../../utils/getStaticAttributeValue';
-import isChildOfComponent from '../shared/utils/isChildOfComponent';
-import { SsrGenerator } from './index';
-import { Node } from '../../interfaces';
-
-function noop () {}
-
-const preprocessors = {
-	MustacheTag: noop,
-	RawMustacheTag: noop,
-	Text: noop,
-
-	AwaitBlock: (
-		generator: SsrGenerator,
-		node: Node,
-		elementStack: Node[]
-	) => {
-		preprocessChildren(generator, node.pending, elementStack);
-		preprocessChildren(generator, node.then, elementStack);
-		preprocessChildren(generator, node.catch, elementStack);
-	},
-
-	IfBlock: (
-		generator: SsrGenerator,
-		node: Node,
-		elementStack: Node[]
-	) => {
-		preprocessChildren(generator, node, elementStack);
-
-		if (node.else) {
-			preprocessChildren(
-				generator,
-				node.else,
-				elementStack
-			);
-		}
-	},
-
-	EachBlock: (
-		generator: SsrGenerator,
-		node: Node,
-		elementStack: Node[]
-	) => {
-		preprocessChildren(generator, node, elementStack);
-
-		if (node.else) {
-			preprocessChildren(
-				generator,
-				node.else,
-				elementStack
-			);
-		}
-	},
-
-	Element: (
-		generator: SsrGenerator,
-		node: Node,
-		elementStack: Node[]
-	) => {
-		const isComponent =
-			generator.components.has(node.name) || node.name === ':Self';
-
-		if (!isComponent) {
-			generator.stylesheet.apply(node, elementStack);
-
-			const slot = getStaticAttributeValue(node, 'slot');
-			if (slot && isChildOfComponent(node, generator)) {
-				node.slotted = true;
-			}
-
-			// Treat these the same way:
-			//   <option>{{foo}}</option>
-			//   <option value='{{foo}}'>{{foo}}</option>
-			const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value');
-
-			if (node.name === 'option' && !valueAttribute) {
-				node.attributes.push({
-					type: 'Attribute',
-					name: 'value',
-					value: node.children
-				});
-			}
-		}
-
-		if (node.children.length) {
-			if (isComponent) {
-				preprocessChildren(generator, node, elementStack);
-			} else {
-				preprocessChildren(generator, node, elementStack.concat(node));
-			}
-		}
-	},
-};
-
-function preprocessChildren(
-	generator: SsrGenerator,
-	node: Node,
-	elementStack: Node[]
-) {
-	node.children.forEach((child: Node, i: number) => {
-		child.parent = node;
-
-		const preprocessor = preprocessors[child.type];
-		if (preprocessor) preprocessor(generator, child, elementStack);
-	});
-}
-
-export default function preprocess(generator: SsrGenerator, html: Node) {
-	preprocessChildren(generator, html, []);
-}
\ No newline at end of file
diff --git a/src/generators/server-side-rendering/visitors/Element.ts b/src/generators/server-side-rendering/visitors/Element.ts
index 25da587a1f..731f73b5fa 100644
--- a/src/generators/server-side-rendering/visitors/Element.ts
+++ b/src/generators/server-side-rendering/visitors/Element.ts
@@ -2,16 +2,12 @@ import visitComponent from './Component';
 import visitSlot from './Slot';
 import isVoidElementName from '../../../utils/isVoidElementName';
 import visit from '../visit';
-import visitWindow from './meta/Window';
 import { SsrGenerator } from '../index';
+import Element from '../../nodes/Element';
 import Block from '../Block';
 import { escape } from '../../../utils/stringify';
 import { Node } from '../../../interfaces';
 
-const meta = {
-	':Window': visitWindow,
-};
-
 function stringifyAttributeValue(block: Block, chunks: Node[]) {
 	return chunks
 		.map((chunk: Node) => {
@@ -29,26 +25,18 @@ function stringifyAttributeValue(block: Block, chunks: Node[]) {
 export default function visitElement(
 	generator: SsrGenerator,
 	block: Block,
-	node: Node
+	node: Element
 ) {
-	if (node.name in meta) {
-		return meta[node.name](generator, block, node);
-	}
-
 	if (node.name === 'slot') {
 		visitSlot(generator, block, node);
 		return;
 	}
 
-	if (generator.components.has(node.name) || node.name === ':Self' || node.name === ':Component') {
-		visitComponent(generator, block, node);
-		return;
-	}
-
 	let openingTag = `<${node.name}`;
 	let textareaContents; // awkward special case
 
-	if (node.slotted) {
+	const slot = node.getStaticAttributeValue('slot');
+	if (slot && node.hasAncestor('Component')) {
 		const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot');
 		const slotName = slot.value[0].data;
 		const appendTarget = generator.appendTargets[generator.appendTargets.length - 1];
diff --git a/src/generators/server-side-rendering/visitors/Slot.ts b/src/generators/server-side-rendering/visitors/Slot.ts
index ad8aaecd7b..7af3b05588 100644
--- a/src/generators/server-side-rendering/visitors/Slot.ts
+++ b/src/generators/server-side-rendering/visitors/Slot.ts
@@ -8,7 +8,6 @@ export default function visitSlot(
 	block: Block,
 	node: Node
 ) {
-	// TODO named slots
 	const name = node.attributes.find((attribute: Node) => attribute.name);
 	const slotName = name && name.value[0].data || 'default';
 
diff --git a/src/generators/server-side-rendering/visitors/meta/Window.ts b/src/generators/server-side-rendering/visitors/Window.ts
similarity index 100%
rename from src/generators/server-side-rendering/visitors/meta/Window.ts
rename to src/generators/server-side-rendering/visitors/Window.ts
diff --git a/src/generators/server-side-rendering/visitors/index.ts b/src/generators/server-side-rendering/visitors/index.ts
index 468239a949..73d51043b5 100644
--- a/src/generators/server-side-rendering/visitors/index.ts
+++ b/src/generators/server-side-rendering/visitors/index.ts
@@ -1,19 +1,25 @@
 import AwaitBlock from './AwaitBlock';
 import Comment from './Comment';
+import Component from './Component';
 import EachBlock from './EachBlock';
 import Element from './Element';
 import IfBlock from './IfBlock';
 import MustacheTag from './MustacheTag';
 import RawMustacheTag from './RawMustacheTag';
+import Slot from './Slot';
 import Text from './Text';
+import Window from './Window';
 
 export default {
 	AwaitBlock,
 	Comment,
+	Component,
 	EachBlock,
 	Element,
 	IfBlock,
 	MustacheTag,
 	RawMustacheTag,
-	Text
+	Slot,
+	Text,
+	Window
 };
diff --git a/src/generators/shared/utils/isChildOfComponent.ts b/src/generators/shared/utils/isChildOfComponent.ts
deleted file mode 100644
index 77275f3d8c..0000000000
--- a/src/generators/shared/utils/isChildOfComponent.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Node } from '../../../interfaces';
-import Generator from '../../Generator';
-
-export default function isChildOfComponent(node: Node, generator: Generator) {
-	while (node = node.parent) {
-		if (node.type !== 'Element') continue;
-		if (node.name === ':Self' || node.name === ':Component' || generator.components.has(node.name)) return true; // TODO extract this out into a helper
-		if (/-/.test(node.name)) return false;
-	}
-}
\ No newline at end of file
diff --git a/src/generators/shared/utils/walkHtml.ts b/src/generators/shared/utils/walkHtml.ts
deleted file mode 100644
index fb9251b7b4..0000000000
--- a/src/generators/shared/utils/walkHtml.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Node, Visitor } from '../../../interfaces';
-
-export default function walkHtml(html: Node, visitors: Record<string, Visitor>) {
-	function visit(node: Node) {
-		const visitor = visitors[node.type];
-		if (!visitor) throw new Error(`Not implemented: ${node.type}`);
-
-		if (visitor.enter) visitor.enter(node);
-
-		if (node.children) {
-			node.children.forEach((child: Node) => {
-				visit(child);
-			});
-		}
-
-		if (visitor.leave) visitor.leave(node);
-	}
-
-	visit(html);
-}
diff --git a/src/generators/shared/utils/wrapModule.ts b/src/generators/wrapModule.ts
similarity index 97%
rename from src/generators/shared/utils/wrapModule.ts
rename to src/generators/wrapModule.ts
index 7e55996aa4..cdc9db2513 100644
--- a/src/generators/shared/utils/wrapModule.ts
+++ b/src/generators/wrapModule.ts
@@ -1,6 +1,6 @@
-import deindent from '../../../utils/deindent';
-import list from '../../../utils/list';
-import { CompileOptions, ModuleFormat, Node } from '../../../interfaces';
+import deindent from '../utils/deindent';
+import list from '../utils/list';
+import { CompileOptions, ModuleFormat, Node } from '../interfaces';
 
 interface Dependency {
 	name: string;
diff --git a/src/utils/createDebuggingComment.ts b/src/utils/createDebuggingComment.ts
new file mode 100644
index 0000000000..bb9dffd0f4
--- /dev/null
+++ b/src/utils/createDebuggingComment.ts
@@ -0,0 +1,21 @@
+import { DomGenerator } from '../generators/dom/index';
+import { Node } from '../interfaces';
+
+export default function createDebuggingComment(node: Node, generator: DomGenerator) {
+	const { locate, source } = generator;
+
+	let c = node.start;
+	if (node.type === 'ElseBlock') {
+		while (source[c] !== '{') c -= 1;
+		c -= 1;
+	}
+
+	let d = node.expression ? node.expression.end : c;
+	while (source[d] !== '}') d += 1;
+	d += 2;
+
+	const start = locate(c);
+	const loc = `(${start.line + 1}:${start.column})`;
+
+	return `${loc} ${source.slice(c, d)}`.replace(/\n/g, ' ');
+}
\ No newline at end of file